JS中【数组】常用知识点总结

JavaScript 中的数组是一个非常常用的数据结构，它允许存储多个值，并提供了丰富的内置方法来操作这些值。下面是一些 JavaScript 数组的常用知识点：

1. 数组的创建

• 字面量创建:

  let arr = [1, 2, 3, 4];
  

• 使用 Array 构造函数:

  let arr = new Array(1, 2, 3, 4);
  let arr2 = new Array(5);  // 创建一个长度为 5 的数组
  

2. 访问和修改数组元素

• 通过索引访问元素:

  let arr = [1, 2, 3];
  console.log(arr[0]);  // 输出: 1
  

• 修改数组中的元素:

  arr[1] = 4;
  console.log(arr);  // 输出: [1, 4, 3]
  

3. 数组的常用方法

• push() 和 pop():

  • push(): 在数组末尾添加一个或多个元素，返回新数组的长度。
  • pop(): 移除数组最后一个元素，返回被移除的元素。

  let arr = [1, 2, 3];
  arr.push(4);  // [1, 2, 3, 4]
  arr.pop();    // [1, 2, 3]
  

• shift() 和 unshift():

  • shift(): 移除数组的第一个元素，返回被移除的元素。
  • unshift(): 在数组开头添加一个或多个元素，返回新数组的长度。

  let arr = [1, 2, 3];
  arr.shift();     // [2, 3]
  arr.unshift(0);  // [0, 2, 3]
  

• concat():

  • 合并两个或多个数组，不修改原数组，返回一个新数组。

  let arr1 = [1, 2];
  let arr2 = [3, 4];
  let arr3 = arr1.concat(arr2);  // [1, 2, 3, 4]
  

• slice():

  • 返回数组的浅拷贝，从开始索引到结束索引（不包括结束索引）。

  let arr = [1, 2, 3, 4];
  let newArr = arr.slice(1, 3);  // [2, 3]
  

• splice():

  • 从数组中添加或删除元素。会修改原数组。

  let arr = [1, 2, 3, 4];
  arr.splice(1, 2);  // 删除索引1开始的两个元素，[1, 4]  参数解决splice（开始索引，截取长度）
  arr.splice(1, 0, 5);  // 从索引1开始插入5，[1, 5, 4] 参数解读splice（开始的索引，截取长度（添加则为0），在切口处添加新的数据（可以是多个数据，数据之间用逗号分开））
  

• forEach():

  • 对数组中的每个元素执行一次提供的函数。没有返回值。

  let arr = [1, 2, 3];
  arr.forEach((item, index) => {
    console.log(index, item);  // 输出索引和元素
  });
  

• map():

  • 创建一个新数组，其结果是原数组中的每个元素调用一次提供的函数后的返回值。

  let arr = [1, 2, 3];
  let newArr = arr.map(x => x * 2);  // [2, 4, 6]
  

• filter():

  • 创建一个新数组，其包含通过所提供函数测试的所有元素。

  let arr = [1, 2, 3, 4];
  let newArr = arr.filter(x => x > 2);  // [3, 4]
  

• reduce():

  • 对数组中的每个元素执行累加器函数，结果为单个值。

  let arr = [1, 2, 3, 4];
  let sum = arr.reduce((acc, curr) => acc + curr, 0);  // 10
  

• find() 和 findIndex():

  • find(): 返回数组中满足提供的测试函数的第一个元素的值。
  • findIndex(): 返回数组中满足提供的测试函数的第一个元素的索引。

  let arr = [1, 2, 3, 4];
  let found = arr.find(x => x > 2);  // 3
  let index = arr.findIndex(x => x > 2);  // 2
  

• indexOf():

  • array.indexOf(element, fromIndex): element 要查找的元素，froIndex（可选）从数组哪个索引位置开始查找，如果省略，则默认为0。返回数组中该元素第一次出现的位置。

    let fruits = ['apple', 'banana', 'cherry'];
    
    let index = fruits.indexOf('banana');
    console.log(index); // 输出: 1
    
    index = fruits.indexOf('orange');
    console.log(index); // 输出: -1（没有找到 'orange'）
  

• includes():

  • 检查数组是否包含某个元素，返回布尔值。

  let arr = [1, 2, 3];
  arr.includes(2);  // true
  

4. 数组的遍历

• for 循环:

  let arr = [1, 2, 3];
  for (let i = 0; i < arr.length; i++) {
    console.log(arr[i]);
  }
  

• for...of 循环:

  let arr = [1, 2, 3];
  for (let value of arr) {
    console.log(value);
  }
  

• for...in 循环:

  • 用于遍历数组索引（不推荐用于数组，因为它还会遍历继承的属性）。

  let arr = [1, 2, 3];
  for (let index in arr) {
    console.log(index, arr[index]);
  }
  

5. 数组解构赋值

• 将数组中的值解构到独立的变量中：

  let [a, b, c] = [1, 2, 3];
  console.log(a, b, c);  // 1, 2, 3
  

6. 多维数组

• JavaScript 支持创建多维数组，即数组中的元素也可以是数组：

  let matrix = [[1, 2], [3, 4]];
  console.log(matrix[0][1]);  // 2
  

7. 数组的其他知识点

• length 属性: 数组的长度，可以用来调整数组的大小。

  let arr = [1, 2, 3];
  arr.length = 2;  // [1, 2]
  

• 稀疏数组: 当数组中某些索引位置没有值时，称为稀疏数组。

  let arr = [];
  arr[5] = 10;  // 这将创建一个稀疏数组，arr[0] 到 arr[4] 都是空的
  

这些知识点涵盖了 JavaScript 中数组的大部分常用功能。掌握这些内容将帮助你在日常开发中更加高效地操作数组。