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

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 += ‘

• 我是第’+arr2+‘个段落
• ’;
  })
  });
  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. 如果存在疑问，可以私信我