irpas技术客

JS基本功修炼,一文搞懂JavaScript数组_欧阳的技术

未知 3833

JavaScript 数组的全方位解析 1. 数组概述2. 访问数组3. 二维及多维数组4. 数组的常用操作

1. 数组概述

1. 1 数组是什么?

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

1.2 数组的定义

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

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

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;

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)定义应删除多少元素。

1. 希望本文能对大家有所帮助,如有错误,敬请指出

2. 原创不易,还请各位客官动动发财的小手支持一波(关注、评论、点赞、收藏) 3. 拜谢各位!后续将继续奉献优质好文 4. 如果存在疑问,可以私信我


1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,会注明原创字样,如未注明都非原创,如有侵权请联系删除!;3.作者投稿可能会经我们编辑修改或补充;4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。

标签: #JS基本功修炼 #JavaScript #数组的全方位解析1 #数组概述2 #访问数组3 #二维及多维数组4 #数组的常用操作1