JavaScript数组操作：从基础到进阶

数组是JavaScript中用于存储有序集合的全局对象。在日常的开发工作中，数组的处理几乎无处不在，从数据渲染到复杂的数据结构处理。本文旨在深入浅出地介绍JavaScript数组的操作方法，帮助你提升在实际开发中处理数组的能力。

数组的创建与初始化

在JavaScript中，创建数组有几种不同的方式：

// 字面量方式 
let arr1 = [1, 2, 3]; 

// 构造函数方式 
let arr2 = new Array(1, 2, 3); 

// 静态方法 
let arr3 = Array.of(1, 2, 3);

填充数组

有时候我们需要创建一个预先填充了特定值的数组：

let filledArray = new Array(3).fill(0); // [0, 0, 0]

数组的遍历与访问

遍历数组是处理数组时的常见需求。JavaScript提供了多种遍历数组的方法：

• 传统的for循环:

for (let i = 0; i < arr1.length; i++) { console.log(arr1[i]); }

• for...of循环:

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

• forEach()方法:

arr1.forEach((item, index) => { console.log(item, index); });

数组的增删改查

添加元素

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

arr1.push(4); // arr1: [1, 2, 3, 4]

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

arr1.unshift(0); // arr1: [0, 1, 2, 3, 4]

删除元素

• pop(): 删除数组的最后一个元素，并返回该元素。

arr1.pop(); // 返回4, arr1现在是[0, 1, 2, 3]

• shift(): 删除数组的第一个元素，并返回该元素。

arr1.shift(); // 返回0, arr1现在是[1, 2, 3]

查找元素

• indexOf() 和 lastIndexOf(): 返回元素在数组中的位置。

console.log(arr1.indexOf(2)); // 1

• find() 和 findIndex(): 根据提供的测试函数找到第一个符合条件的元素或其索引。

console.log(arr1.find(item => item > 1)); // 2

更新元素

直接通过索引来更新数组元素：

arr1[0] = 100; // arr1现在是[100, 2, 3]

数组的高级操作

映射和过滤

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

let squared = arr1.map(item => item * item); // [10000, 4, 9]

• filter(): 创建一个新数组，包含通过所提供函数实现的测试的所有元素。

let filtered = arr1.filter(item => item > 1); // [100, 2, 3]

归并

• reduce(): 对累加器和数组中的每个元素（从左到右）应用一个函数，将其减少为单个值。

let sum = arr1.reduce((acc, cur) => acc + cur, 0); // 105