JS基本功修炼,一文搞懂JavaScript数组

简介: 笔记

1. 数组概述


1. 1 数组是什么?

  • 数组可以看成是一个容器,用来存放值
  • 举个例子:
  • 一整栋楼可以看成一个数组
  • 里面的每一个房间都是数组的元素,它们一起组成了整个数组

1.2 数组的定义

以下两种方式定义的数组是一样的:

// 字面向量
let arr = [1, 2, 3, 4];
// new 关键字创建一个实例,继承至基类Array
let arr2 = new Array(1,2,3,4);

21.png


2. 访问数组


2.1 访问数组的值或属性

let arr2 = new Array(1,2,3,4);
// 访问数组的长度
let len = arr2.length;  // len 为 4
// 访问具体某一项 
// 下标为0 是数组的第一项
let val = arr2[1];    // [1] 为数组的第二项 2

2.2 循环读取

  • for() 循环
  • map() 循环
  • forEach() 循环

以for() 循环为例:

let arr = [1, 2, 3, 4];
for(let i = 0; i < arr.length; i++){
  // 依次打印 1,2,3,4
  console.log(arr[i])
}


3. 二维及多维数组


  • 类似于俄罗斯套娃,一层套着一层
  • 一般在工作中并不常见,但是需要了解一下
// 二维数组
let arr3 = [[1,2,3],[4,5,6]]; 
// 二维数组的取值
let val = arr3[1][1];   // 此时的val = 5
// 二维数组的循环取值
// 多维数组数据的读取
let html = '';
let test = document.getElementById("test");
console.log(arr3[0][0]);
// 多维数组的遍历
arr3.forEach(arr => {
    arr.forEach(arr2 => {
        console.log(arr2)
        // 实例
        html += '<li>我是第'+arr2+'个段落</li>';
    })
});
test.innerHTML = html;

22.png


4. 数组的常用操作


  • 数组合并,倒置,排序
 // 1. 数组合并
 let arr6 = [1,2,3];
 let arr7 = [4,5,6];
 let arr8 = arr7.concat(arr6);
 // console.log(arr8)
 // 2.数组倒置
 let arr9 = arr7.reverse();
 // console.log(arr9)
 // 3. 数组排序
 let arr10 = [2,1,7,3,8];
 arr10.sort();
  • 删除数组中指定元素(slice())
let arr = [1,2,3,4];
arr.slice(1,1);
console.log(arr);  // 1,3,4
  • 数组尾部追加元素(push())
let arr = [1,2,3,4];
arr.push(1,1);
console.log(arr);  // 1,2,3,4,5
  • 数组中删除最后一个元素(pop() )
let arr = [1,2,3,4];
arr.pop();
console.log(arr);  // 1,2,3
  • 数组中删除第一个元素(shift() )
let arr = [1,2,3,4];
arr.shift();
console.log(arr);  // 2,3,4
  • 数组中添加一个新元素,最前(unshift() )
let arr = [1,2,3,4];
arr.unshift(0);
console.log(arr);  //0,1,2,3,4
  • 根据下标删除数组某一项(delete)
let arr = [1,2,3,4];
delete arr[3]
console.log(arr);  //1,2,3
  • 拼接数组(splice())
let arr = [1,2,3,4];
arr.splice(2, 0, "5", "6");
console.log(arr);  //1,2,3,5,6,4

第一个参数(2)定义了应添加新元素的位置(拼接)。

第二个参数(0)定义应删除多少元素。

目录
相关文章
|
6月前
|
资源调度 JavaScript 前端开发
Day.js极简轻易快速2kB的JavaScript库-替代Moment.js
dayjs是一个极简快速2kB的JavaScript库,可以为浏览器处理解析、验证、操作和显示日期和时间,它的设计目标是提供一个简单、快速且功能强大的日期处理工具,同时保持极小的体积(仅 2KB 左右)。
345 24
|
9月前
|
JavaScript 前端开发
JavaWeb JavaScript ③ JS的流程控制和函数
通过本文的详细介绍,您可以深入理解JavaScript的流程控制和函数的使用,进而编写出高效、可维护的代码。
200 32
|
8月前
|
JavaScript 前端开发 算法
JavaScript 中通过Array.sort() 实现多字段排序、排序稳定性、随机排序洗牌算法、优化排序性能,JS中排序算法的使用详解(附实际应用代码)
Array.sort() 是一个功能强大的方法,通过自定义的比较函数,可以处理各种复杂的排序逻辑。无论是简单的数字排序,还是多字段、嵌套对象、分组排序等高级应用,Array.sort() 都能胜任。同时,通过性能优化技巧(如映射排序)和结合其他数组方法(如 reduce),Array.sort() 可以用来实现高效的数据处理逻辑。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
8月前
|
JavaScript 前端开发 API
JavaScript中通过array.map()实现数据转换、创建派生数组、异步数据流处理、复杂API请求、DOM操作、搜索和过滤等,array.map()的使用详解(附实际应用代码)
array.map()可以用来数据转换、创建派生数组、应用函数、链式调用、异步数据流处理、复杂API请求梳理、提供DOM操作、用来搜索和过滤等,比for好用太多了,主要是写法简单,并且非常直观,并且能提升代码的可读性,也就提升了Long Term代码的可维护性。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
8月前
|
数据采集 JavaScript 前端开发
JavaScript中通过array.filter()实现数组的数据筛选、数据清洗和链式调用,JS中数组过滤器的使用详解(附实际应用代码)
用array.filter()来实现数据筛选、数据清洗和链式调用,相对于for循环更加清晰,语义化强,能显著提升代码的可读性和可维护性。博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
11月前
|
JavaScript 前端开发
【JavaScript】——JS基础入门常见操作(大量举例)
JS引入方式,JS基础语法,JS增删查改,JS函数,JS对象
|
自然语言处理 JavaScript 前端开发
学习javaScript必知必会(2)~js词法分析、介绍一下主流的浏览器的开发者工具(js调试和查看网络请求)
学习javaScript必知必会(2)~js词法分析、介绍一下主流的浏览器的开发者工具(js调试和查看网络请求)
220 0
学习javaScript必知必会(2)~js词法分析、介绍一下主流的浏览器的开发者工具(js调试和查看网络请求)
|
JavaScript 前端开发
Javascript之旅——第七站:说说js的调试
原文:Javascript之旅——第七站:说说js的调试      最近比较吐槽,大家都知道,现在web前端相对几年前来说已经变得很重了,各种js框架,各种面对对象,而且项目多了,就会提取公共模块, 这些模块的UI展示都一样,不一样的就是后台逻辑,举个例子吧,我们做企业差旅的时候,通常都有一个成本中心的js公共模块,客户在预定机票 的时候来填写这个成本中心,而这种成本中心分布在online,offline和app等预定端,这样也是方便后期和客户公司进行月结算。
878 0