JavaScript数组操作完全指南：从基础到高级

在前端开发中，数组是我们最常用的数据结构之一。它提供了丰富的方法来存储、操作和转换数据。本文将基于示例代码，详细介绍JavaScript数组的各种操作技巧，从基础的增删改查到高级的迭代、搜索和扁平化处理，帮助你全面掌握数组操作的精髓。

一、数组的创建方式

JavaScript提供了多种创建数组的方法，最常见的有两种：

// 方法一：使用Array构造函数
let arr = new Array(1, 2, 3);
console.log(arr); // [1, 2, 3]

// 方法二：使用数组字面量（更推荐）
let arr2 = [4, 5, 6];
console.log(arr2); // [4, 5, 6]

数组字面量语法更简洁，也是实际开发中最常用的方式。值得注意的是，当使用new Array(n)形式时，如果n是单个数字，会创建一个长度为n的空数组，而不是包含单个元素n的数组。

二、数组的基本操作：增删改查

1. 末尾操作：push/pop

push方法用于向数组末尾添加一个或多个元素，并返回新的数组长度；pop方法用于删除并返回数组的最后一个元素。

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

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

2. 开头操作：unshift/shift

unshift方法用于向数组开头添加一个或多个元素，并返回新的数组长度；shift方法用于删除并返回数组的第一个元素。

let arr = [1, 2, 3];
arr.unshift(10);
console.log(arr); // [10, 1, 2, 3]

let first = arr.shift();
console.log(first); // 10
console.log(arr); // [1, 2, 3]

3. 任意位置操作：splice

splice是一个功能强大的方法，可以实现数组的添加、删除和替换操作。语法为：array.splice(start, deleteCount, item1, item2, ...)

let arr = [1, 2, 3];
// 在索引0位置删除2个元素，并添加元素4
arr.splice(0, 2, 4);
console.log(arr); // [4, 3]

splice方法会直接修改原数组，并返回被删除的元素组成的数组。

三、数组排序：sort

sort方法用于对数组元素进行排序，默认按照字符串的Unicode码点排序。为了实现自定义排序，可以传入一个比较函数。

// 数字排序
let arr = [4, 2, 6, 8, 2, 1, 3, 5, 7, 4, 1, 9];
arr.sort((x, y) => x - y); // 升序排序
console.log(arr); // [1, 1, 2, 2, 3, 4, 4, 5, 6, 7, 8, 9]

// 对象数组排序
let users = [
  { name: '张三', age: 45 },
  { name: '李四', age: 56 },
  { name: '王五', age: 18 }
];
users.sort((x, y) => x.age - y.age);
console.log(users); // 按年龄升序排列

比较函数的返回值决定了元素的顺序：

• 如果返回值小于0，x排在y前面
• 如果返回值等于0，x和y的相对位置不变
• 如果返回值大于0，x排在y后面

四、数组合并：concat

concat方法用于合并两个或多个数组，返回一个新数组，不会改变原数组。

let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
let arr3 = arr1.concat(arr2, 7, 8, 9);
console.log(arr3); // [1, 2, 3, 4, 5, 6, 7, 8, 9]
console.log(arr1); // [1, 2, 3]（原数组不变）

五、数组迭代方法

JavaScript提供了多种迭代数组的方法，它们让数据处理变得更加简洁高效。

1. every/some：条件判断

every方法检查数组中的所有元素是否都满足指定条件，全部满足才返回true；some方法检查数组中是否至少有一个元素满足指定条件。

let arr = [11, 12, 13, 14];
let allPositive = arr.every(item => item > 0);
console.log(allPositive); // true

let hasEven = arr.some(item => item % 2 === 0);
console.log(hasEven); // true

2. filter：过滤元素

filter方法创建一个新数组，包含所有满足指定条件的元素。

let arr = [11, 12, 13, 14];
let evenNumbers = arr.filter(item => item % 2 === 0);
console.log(evenNumbers); // [12, 14]

3. map：映射转换

map方法创建一个新数组，其中的每个元素都是原数组元素经过指定函数处理后的值。

let arr = [11, 12, 13, 14];
let formatted = arr.map(item => item + '号');
console.log(formatted); // ['11号', '12号', '13号', '14号']

4. forEach：遍历执行

forEach方法对数组中的每个元素执行一次指定的函数，没有返回值。

let arr = [11, 12, 13, 14];
arr.forEach((item, index) => {
  console.log(`索引${index}的值为：${item}`);
});

5. reduce：归并计算

reduce方法对数组中的所有元素执行一个归并函数，将其结果汇总为单个返回值。

let arr = [11, 12, 13, 14];
let product = arr.reduce((accumulator, current) => accumulator * current);
console.log(product); // 11*12*13*14 = 24024

reduce还可以接受第二个参数作为初始值，这在处理对象数组等复杂场景时非常有用。

六、迭代器对象（ES6特性）

ES6引入了迭代器（Iterator）接口，数组原生实现了这个接口，可以通过Symbol.iterator获取迭代器对象。

let arr = [11, 12, 13, 14];
let iterator = arr[Symbol.iterator]();
console.log(iterator.next()); // {value: 11, done: false}
console.log(iterator.next()); // {value: 12, done: false}
console.log(iterator.next()); // {value: 13, done: false}
console.log(iterator.next()); // {value: 14, done: false}
console.log(iterator.next()); // {value: undefined, done: true}

迭代器对象的next()方法返回一个包含value和done两个属性的对象，其中value是当前元素的值，done表示迭代是否结束。

迭代器的一个重要应用是支持for...of循环：

for (let item of arr) {
  console.log(item);
}

数组还提供了entries()、keys()和values()方法，分别返回包含键值对、索引和值的迭代器：

// 获取索引
for (let index of arr.keys()) {
  console.log(index);
}

// 获取键值对
for (let [index, value] of arr.entries()) {
  console.log(`索引${index}的值为：${value}`);
}

七、Array.from：类数组转数组

Array.from方法用于将类数组对象或可迭代对象转换为真正的数组。

function fn() {
  // arguments是一个类数组对象
  console.log(Array.from(arguments));
}
fn(1, 2, 3, 4, 5); // [1, 2, 3, 4, 5]

Array.from还可以接受第二个参数，作用类似于map方法，用来对每个元素进行处理：

let str = 'hello';
let arr = Array.from(str, char => char.toUpperCase());
console.log(arr); // ['H', 'E', 'L', 'L', 'O']

八、数组搜索方法

JavaScript提供了多种在数组中搜索元素的方法，适用于不同的场景。

1. indexOf/includes：查找元素位置或存在性

indexOf方法返回数组中第一个匹配元素的索引，如果不存在则返回-1；includes方法返回一个布尔值，表示数组是否包含指定元素。

let arr = [10, 20, 30, 40, 50, 5];
console.log(arr.indexOf(30)); // 2
console.log(arr.includes(30)); // true
console.log(arr.includes(15)); // false

2. find/findIndex：条件查找

find方法返回数组中第一个满足指定条件的元素；findIndex方法返回第一个满足条件的元素的索引。

let arr = [10, 20, 30, 40, 50, 5];
let firstGreaterThan10 = arr.find(item => item > 10);
let firstGreaterThan10Index = arr.findIndex(item => item > 10);
console.log(firstGreaterThan10); // 20
console.log(firstGreaterThan10Index); // 1

3. findLast/findLastIndex：从后向前查找

ES2022引入了findLast和findLastIndex方法，它们从数组的末尾开始向前查找，分别返回最后一个满足条件的元素和其索引。

let arr = [10, 20, 30, 40, 50, 5];
let lastGreaterThan10 = arr.findLast(item => item > 10);
let lastGreaterThan10Index = arr.findLastIndex(item => item > 10);
console.log(lastGreaterThan10); // 50
console.log(lastGreaterThan10Index); // 4

九、多维数组的处理

在实际开发中，我们经常会遇到多维数组的情况。处理多维数组的常见方法是使用嵌套循环。

let scores = [
  [90, 30, 50],
  [80, 40, 60],
  [70, 50, 80],
  [50, 50, 80]
];

// 遍历二维数组
for (let i = 0; i < scores.length; i++) {
  console.log(`第${i + 1}个人的成绩`);
  for (let j = 0; j < scores[i].length; j++) {
    console.log(scores[i][j]);
  }
}

十、数组扁平化：flat

处理多维数组时，我们经常需要将其扁平化（转换为一维数组）。ES6提供的flat方法可以轻松实现这一功能。

let nestedArray = [
  [1, 2, 3, 4],
  [5, [6, 7, [1, 2, 3]]],
  [[[[[[[5]]]]]]]
];

// 默认扁平化一层
let flatOnce = nestedArray.flat();
console.log(flatOnce); // [1, 2, 3, 4, 5, [6, 7, [1, 2, 3]], [[[[[5]]]]]]

// 完全扁平化
let flatAll = nestedArray.flat(Infinity);
console.log(flatAll); // [1, 2, 3, 4, 5, 6, 7, 1, 2, 3, 5]

flat方法接受一个可选参数，表示要扁平化的层数，默认为1。如果不确定数组的嵌套深度，可以使用Infinity作为参数。

总结

JavaScript数组提供了丰富的方法，从基础的增删改查到高级的迭代、搜索和扁平化处理，这些方法极大地提高了我们处理数据的效率。掌握这些方法，并能够灵活运用，对于提升JavaScript编程能力至关重要。

在实际开发中，我们应该根据具体需求选择合适的数组方法，同时注意区分哪些方法会修改原数组，哪些方法会返回新数组，以避免不必要的副作用。通过不断实践和总结，我们可以更加熟练地使用这些方法，编写出更加高效、简洁的代码。