JavaScript 数组完整参考

在 JavaScript 中，数组是一种非常常用的数据结构。本文将介绍 JavaScript 数组的完整使用方法和注意事项。

数组声明

在 JavaScript 中，我们可以用以下方式声明一个数组：

// 方法一：使用字面量声明数组
const arr1 = [1, 2, 3];

// 方法二：使用 Array 构造函数声明数组
const arr2 = new Array(1, 2, 3);

// 方法三：只声明一个空数组，后续添加元素
const arr3 = [];
arr3.push(1);
arr3.push(2);
arr3.push(3);

数组方法

添加/删除元素

• push()：在数组末尾添加一个或多个元素，返回数组长度。
• pop()：删除数组末尾的元素，返回被删除的元素。
• unshift()：在数组开头添加一个或多个元素，返回数组长度。
• shift()：删除数组开头的元素，返回被删除的元素。
• splice()：通过指定位置删除/添加元素，返回被删除的元素。

const arr = [1, 2, 3];

arr.push(4); // [1, 2, 3, 4]
arr.pop(); // 4，arr 变为 [1, 2, 3]
arr.unshift(0); // [0, 1, 2, 3]
arr.shift(); // 0，arr 变为 [1, 2, 3]
arr.splice(1, 0, 4, 5); // [], arr 变为 [1, 4, 5, 2, 3]
arr.splice(3, 1); // [2], arr 变为 [1, 4, 5, 3]

访问/修改元素

• 通过下标访问数组元素
• 通过下标修改数组元素

const arr = [1, 2, 3];

arr[0]; // 1
arr[1] = 4; // arr 变为 [1, 4, 3]

查找元素

• indexOf()：从数组开头查找元素并返回下标，未找到返回 -1。
• lastIndexOf()：从数组末尾查找元素并返回下标，未找到返回 -1。
• find()：查找数组中满足条件的第一个元素，未找到返回 undefined。
• findIndex()：查找数组中满足条件的第一个元素的下标，未找到返回 -1。

const arr = [1, 2, 3, 4, 5];

arr.indexOf(3); // 2
arr.lastIndexOf(3); // 2
arr.find(n => n % 2 === 0); // 2
arr.findIndex(n => n % 2 === 0); // 1

数组遍历

• for...of：遍历数组元素，不包括下标。
• forEach()：遍历数组元素并执行回调函数，不返回结果。

const arr = [1, 2, 3, 4, 5];

for (let item of arr) {
  console.log(item); // 1 2 3 4 5
}

arr.forEach(item => console.log(item)); // 1 2 3 4 5

数组操作

• concat()：合并多个数组，返回新数组。
• join()：将数组元素通过指定分隔符连接成字符串。
• slice()：返回截取后的新数组，不修改原数组。
• reverse()：反转数组元素，修改原数组。
• sort()：对数组元素排序，修改原数组。

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

arr1.concat(arr2); // [1, 2, 3, 4]
arr1.join('-'); // '1-2'
arr1.slice(1); // [2]
arr1.reverse(); // [2, 1]
arr1.sort(); // [1, 2]

注意事项

• 在使用 push() 和 pop() 方法时，注意数组是否为空。
• 在使用 shift() 和 unshift() 方法时，注意数组元素下标的变化。
• 在使用 splice() 方法时，注意数组元素下标的变化。
• 在使用 find() 和 findIndex() 方法时，注意回调函数的返回值类型。
• 在使用 for...of 循环时，注意不要修改数组元素。
• 在使用 slice(), reverse() 和 sort() 方法时，需要注意是否需要返回新数组。