知识篇 -- JS数组：有序数据集合

在JavaScript中，数组是一种特殊的对象，用于存储有序的数据集合。数组的每个数据项都有一个数字索引，从0开始。数组是处理列表数据（如用户列表、商品列表等）最常用的数据结构。掌握数组的创建、操作和遍历方法，是编写高效JavaScript代码的关键。

一、数组的创建方式 基础

1. 数组字面量 (Array Literal) 常用

最常用、最简洁的创建数组的方式。

const fruits = ["苹果", "香蕉", "橙子"];
const numbers = [1, 2, 3, 4, 5];
const mixed = [1, "hello", true, { name: "Alice" }];

2. new Array() 构造函数 注意陷阱

• new Array()：创建一个空数组。
• new Array(size)：创建一个指定长度的空数组。
• new Array(element1, element2, ...)：创建一个包含指定元素的数组。

const emptyArr = new Array(); // []
const fiveElements = new Array(5); // [empty × 5]
const colors = new Array("红", "绿", "蓝"); // ["红", "绿", "蓝"]

注意：当 new Array() 只有一个数字参数时，它表示数组的长度，而不是一个元素。这可能导致混淆，因此通常推荐使用数组字面量。

3. Array.of() (ES6新增) ES6

创建一个具有可变数量参数的新 Array 实例，无论参数的数量或类型如何。

console.log(Array.of(1, 2, 3));    // [1, 2, 3]
console.log(Array.of(7));          // [7]
console.log(Array.of(1, "test", true)); // [1, "test", true]

4. Array.from() (ES6新增) ES6

从一个类数组或可迭代对象创建一个新的、浅拷贝的 Array 实例。

// 从字符串创建数组
console.log(Array.from("hello")); // ["h", "e", "l", "l", "o"]

// 从Set创建数组
const mySet = new Set(["a", "b", "c"]);
console.log(Array.from(mySet)); // ["a", "b", "c"]

// 从NodeList创建数组 (DOM操作中常用)
// const divs = document.querySelectorAll('div');
// const divArray = Array.from(divs);

二、数组的常用操作方法 核心

1. 增 (Add) 添加元素

• push(): 在数组末尾添加一个或多个元素，并返回新数组的长度。

  const arr = [1, 2];
  arr.push(3, 4); // arr: [1, 2, 3, 4]
  

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

  const arr = [3, 4];
  arr.unshift(1, 2); // arr: [1, 2, 3, 4]
  

• splice(index, 0, element1, ...): 在指定位置插入元素。

  const arr = [1, 5];
  arr.splice(1, 0, 2, 3, 4); // arr: [1, 2, 3, 4, 5]
  

• 扩展运算符 ... (ES6新增): 创建新数组时合并元素。

  const arr1 = [1, 2];
  const arr2 = [...arr1, 3, 4]; // arr2: [1, 2, 3, 4]
  

2. 删 (Delete) 删除元素

• pop(): 删除数组末尾的元素，并返回被删除的元素。

  const arr = [1, 2, 3];
  const last = arr.pop(); // last: 3, arr: [1, 2]
  

• shift(): 删除数组开头的元素，并返回被删除的元素。

  const arr = [1, 2, 3];
  const first = arr.shift(); // first: 1, arr: [2, 3]
  

• splice(index, count): 删除从 index 开始的 count 个元素，并返回被删除的元素组成的数组。

  const arr = [1, 2, 3, 4, 5];
  const removed = arr.splice(2, 2); // removed: [3, 4], arr: [1, 2, 5]
  

• filter(): 创建一个新数组，其中包含通过所提供函数实现的测试的所有元素。常用于根据条件删除元素。

  const numbers = [1, 2, 3, 4, 5];
  const evenNumbers = numbers.filter(num => num % 2 === 0); // evenNumbers: [2, 4]
  

3. 改 (Modify) 修改元素

• 直接通过索引修改：

  const arr = [1, 2, 3];
  arr[1] = 10; // arr: [1, 10, 3]
  

• splice(index, count, element1, ...): 删除并插入元素。

  const arr = [1, 2, 3, 4, 5];
  arr.splice(2, 1, 10); // 从索引2开始删除1个元素，并插入10。arr: [1, 2, 10, 4, 5]
  

• map(): 创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。

  const numbers = [1, 2, 3];
  const doubled = numbers.map(num => num * 2); // doubled: [2, 4, 6]
  

4. 查 (Query) 查找元素

• indexOf(element): 返回指定元素在数组中第一次出现的索引，如果不存在则返回 -1。
• lastIndexOf(element): 返回指定元素在数组中最后一次出现的索引。
• includes(element) (ES6新增): 判断数组是否包含某个元素，返回布尔值。
• find(callback) (ES6新增): 返回数组中满足提供的测试函数的第一个元素的值。
• findIndex(callback) (ES6新增): 返回数组中满足提供的测试函数的第一个元素的索引。
• filter(callback): 返回一个新数组，包含所有满足条件的元素。

三、数组的遍历方法 遍历

1. for 循环 传统

最传统的遍历方式，适用于需要索引的场景。

const arr = ["a", "b", "c"];
for (let i = 0; i < arr.length; i++) {
    console.log(`索引 ${i} 的值是 ${arr[i]}`);
}

2. forEach() (ES5新增) 简洁

遍历数组的每个元素，并对每个元素执行一次回调函数。

const arr = ["a", "b", "c"];
arr.forEach((item, index) => {
    console.log(`索引 ${index} 的值是 ${item}`);
});

注意：forEach 不能中断循环（如 break 或 return）。

3. for...of 循环 (ES6新增) 推荐

遍历可迭代对象（包括数组）的值。

const arr = ["a", "b", "c"];
for (let item of arr) {
    console.log(`值是 ${item}`);
}

优点：简洁，可以直接获取值，支持 break 和 continue。

4. map(), filter(), reduce() 等 功能性

这些方法不仅可以遍历，还能对数组进行转换、过滤、聚合等操作，并返回新数组或单个值。

四、ES6+ 对数组的增强 新特性

• 扩展运算符 ...：除了用于创建新数组，还可以用于函数参数的展开。

  const arr = [1, 2, 3];
  console.log(...arr); // 1 2 3 (展开为独立的参数)
  

• 解构赋值：从数组中提取值，对变量进行赋值。

  const [first, second, ...rest] = [10, 20, 30, 40, 50];
  console.log(first); // 10
  console.log(second); // 20
  console.log(rest); // [30, 40, 50]
  

• Array.prototype.flat() / flatMap()：扁平化嵌套数组。
• Array.prototype.at()：通过索引访问数组元素，支持负数索引。

掌握JavaScript数组的各种操作方法和新特性，能够让你更高效、更优雅地处理和管理数据集合。