JavaScript Array（数组）

什么是数组

数组是 JavaScript 中用于存储多个值的数据结构。它可以存储任意类型的数据，包括数字、字符串、对象、甚至其他数组。

数组的创建

你可以通过以下方式创建数组：

// 数组字面量
let arr1 = [1, 2, 3, 4, 5];

// 空数组
let arr2 = [];

// 使用 Array 构造函数
let arr3 = new Array(1, 2, 3, 4, 5);

// 创建指定长度的数组
let arr4 = new Array(5); // 创建一个长度为5的空数组

// 使用 Array.of() 方法（ES6+）
let arr5 = Array.of(1, 2, 3, 4, 5);

// 使用 Array.from() 方法（ES6+）从类数组对象或可迭代对象创建数组
let arr6 = Array.from('hello'); // ['h', 'e', 'l', 'l', 'o']
let arr7 = Array.from({length: 5}, (_, index) => index); // [0, 1, 2, 3, 4]

数组的基本操作

访问数组元素

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

// 通过索引访问（索引从0开始）
console.log(arr[0]); // 1
console.log(arr[2]); // 3

// 访问不存在的元素返回 undefined
console.log(arr[10]); // undefined

修改数组元素

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

// 修改元素
arr[0] = 10;
console.log(arr); // [10, 2, 3, 4, 5]

// 添加新元素
arr[5] = 6;
console.log(arr); // [10, 2, 3, 4, 5, 6]

数组长度

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

// 获取数组长度
console.log(arr.length); // 5

// 修改数组长度
arr.length = 3;
console.log(arr); // [1, 2, 3]

arr.length = 5;
console.log(arr); // [1, 2, 3, undefined, undefined]

数组的方法

添加和删除元素

let arr = [1, 2, 3];

// push(): 在数组末尾添加一个或多个元素，返回新长度
let newLength = arr.push(4, 5);
console.log(arr); // [1, 2, 3, 4, 5]
console.log(newLength); // 5

// pop(): 删除并返回数组末尾的元素
let lastElement = arr.pop();
console.log(arr); // [1, 2, 3, 4]
console.log(lastElement); // 5

// unshift(): 在数组开头添加一个或多个元素，返回新长度
newLength = arr.unshift(0);
console.log(arr); // [0, 1, 2, 3, 4]
console.log(newLength); // 5

// shift(): 删除并返回数组开头的元素
let firstElement = arr.shift();
console.log(arr); // [1, 2, 3, 4]
console.log(firstElement); // 0

// splice(): 添加、删除或替换数组元素
// 删除元素：splice(开始索引, 删除数量)
arr = [1, 2, 3, 4, 5];
let removedElements = arr.splice(1, 2);
console.log(arr); // [1, 4, 5]
console.log(removedElements); // [2, 3]

// 添加元素：splice(开始索引, 0, 要添加的元素...)
arr.splice(1, 0, 2, 3);
console.log(arr); // [1, 2, 3, 4, 5]

// 替换元素：splice(开始索引, 删除数量, 要添加的元素...)
arr.splice(1, 2, 'a', 'b');
console.log(arr); // [1, 'a', 'b', 4, 5]

数组遍历

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

// for 循环
for (let i = 0; i < arr.length; i++) {
  console.log(arr[i]);
}

// for...of 循环（ES6+）
for (let element of arr) {
  console.log(element);
}

// forEach(): 对数组中的每个元素执行回调函数
arr.forEach((element, index, array) => {
  console.log(`索引 ${index}: ${element}`);
});

// map(): 创建一个新数组，其中包含对原数组每个元素执行回调函数的结果
let doubled = arr.map(element => element * 2);
console.log(doubled); // [2, 4, 6, 8, 10]

// filter(): 创建一个新数组，其中包含通过回调函数测试的原数组元素
let evenNumbers = arr.filter(element => element % 2 === 0);
console.log(evenNumbers); // [2, 4]

// reduce(): 对数组中的元素执行归约操作，返回单个值
let sum = arr.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
console.log(sum); // 15

// reduceRight(): 从右到左执行归约操作
let reversedSum = arr.reduceRight((accumulator, currentValue) => accumulator + currentValue, 0);
console.log(reversedSum); // 15

// every(): 检查数组中的所有元素是否都通过回调函数测试
let allPositive = arr.every(element => element > 0);
console.log(allPositive); // true

// some(): 检查数组中是否至少有一个元素通过回调函数测试
let hasEven = arr.some(element => element % 2 === 0);
console.log(hasEven); // true

// find(): 返回数组中第一个通过回调函数测试的元素
let firstEven = arr.find(element => element % 2 === 0);
console.log(firstEven); // 2

// findIndex(): 返回数组中第一个通过回调函数测试的元素的索引
let firstEvenIndex = arr.findIndex(element => element % 2 === 0);
console.log(firstEvenIndex); // 1

数组查找

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

// indexOf(): 返回数组中第一个匹配元素的索引，未找到返回-1
console.log(arr.indexOf(3)); // 2
console.log(arr.indexOf(6)); // -1

// lastIndexOf(): 返回数组中最后一个匹配元素的索引，未找到返回-1
arr = [1, 2, 3, 2, 1];
console.log(arr.lastIndexOf(2)); // 3

// includes(): 检查数组是否包含指定元素，返回布尔值
console.log(arr.includes(3)); // true
console.log(arr.includes(6)); // false

数组排序和反转

let arr = [3, 1, 4, 1, 5, 9, 2, 6];

// sort(): 对数组元素进行排序，默认按字符串Unicode码点排序
arr.sort();
console.log(arr); // [1, 1, 2, 3, 4, 5, 6, 9]

// 自定义排序（数字排序）
arr = [3, 1, 4, 1, 5, 9, 2, 6];
arr.sort((a, b) => a - b); // 升序
console.log(arr); // [1, 1, 2, 3, 4, 5, 6, 9]

arr.sort((a, b) => b - a); // 降序
console.log(arr); // [9, 6, 5, 4, 3, 2, 1, 1]

// reverse(): 反转数组元素的顺序
arr.reverse();
console.log(arr); // [1, 1, 2, 3, 4, 5, 6, 9]

数组转换

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

// join(): 将数组元素连接为字符串
console.log(arr.join()); // '1,2,3,4,5'
console.log(arr.join('-')); // '1-2-3-4-5'

// toString(): 将数组转换为字符串
console.log(arr.toString()); // '1,2,3,4,5'

// toLocaleString(): 将数组转换为本地化字符串
console.log(arr.toLocaleString()); // '1,2,3,4,5'

// spread 运算符 (...): 将数组展开为逗号分隔的值
let newArr = [...arr];
console.log(newArr); // [1, 2, 3, 4, 5]

// Array.from(): 将类数组对象或可迭代对象转换为数组
let str = 'hello';
console.log(Array.from(str)); // ['h', 'e', 'l', 'l', 'o']

// Array.isArray(): 检查值是否为数组
console.log(Array.isArray(arr)); // true
console.log(Array.isArray('hello')); // false

数组截取和合并

let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];

// concat(): 合并两个或多个数组，返回新数组
let combined = arr1.concat(arr2);
console.log(combined); // [1, 2, 3, 4, 5, 6]

// slice(): 截取数组的一部分，返回新数组
arr = [1, 2, 3, 4, 5];
console.log(arr.slice(1, 3)); // [2, 3]
console.log(arr.slice(2)); // [3, 4, 5]
console.log(arr.slice(-2)); // [4, 5]

数组填充

// fill(): 用指定值填充数组的所有元素
let arr = new Array(5);
arr.fill(0);
console.log(arr); // [0, 0, 0, 0, 0]

// 填充指定范围的元素
arr.fill(1, 1, 4);
console.log(arr); // [0, 1, 1, 1, 0]

多维数组

JavaScript 支持多维数组，通过数组嵌套实现：

// 创建二维数组
let matrix = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9]
];

// 访问二维数组元素
console.log(matrix[0][0]); // 1
console.log(matrix[1][2]); // 6

// 创建三维数组
let cube = [
  [
    [1, 2],
    [3, 4]
  ],
  [
    [5, 6],
    [7, 8]
  ]
];

// 访问三维数组元素
console.log(cube[0][1][0]); // 3

数组的迭代器方法

ES6 引入了数组的迭代器方法，返回迭代器对象：

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

// entries(): 返回包含键值对的迭代器
for (let [index, value] of arr.entries()) {
  console.log(`${index}: ${value}`);
}

// keys(): 返回包含数组索引的迭代器
for (let index of arr.keys()) {
  console.log(index);
}

// values(): 返回包含数组值的迭代器
for (let value of arr.values()) {
  console.log(value);
}

最佳实践

1. 使用数组字面量创建数组：let arr = [1, 2, 3]; 比 let arr = new Array(1, 2, 3); 更简洁、更常用。

2. 注意数组方法的返回值：

   • 原地修改数组的方法：push(), pop(), unshift(), shift(), splice(), sort(), reverse(), fill()
   • 返回新数组的方法：map(), filter(), slice(), concat()
   • 返回其他值的方法：indexOf(), lastIndexOf(), includes(), find(), findIndex(), every(), some(), reduce(), reduceRight()

3. 使用 forEach() 替代 for 循环：对于简单的数组遍历，forEach() 方法更简洁易读。

4. 使用 map() 进行转换：当需要对数组中的每个元素进行转换并创建新数组时，map() 方法是最佳选择。

5. 使用 filter() 进行过滤：当需要根据条件筛选数组元素时，filter() 方法非常方便。

6. 使用 reduce() 进行聚合：当需要将数组元素聚合为单个值时（如求和、求积、拼接等），reduce() 方法非常强大。

7. 注意 sort() 方法的默认行为：sort() 方法默认按字符串Unicode码点排序，对于数字排序需要提供自定义比较函数。

8. 避免使用 delete 删除数组元素：delete 操作符会删除数组元素，但不会改变数组长度，会留下 undefined 占位符。应该使用 splice() 方法删除数组元素。

9. 使用 spread 运算符进行数组拷贝：let newArr = [...oldArr]; 是创建数组浅拷贝的简洁方式。

10. 使用 includes() 替代 indexOf() 进行存在性检查：arr.includes(value) 比 arr.indexOf(value) !== -1 更简洁易读。

总结

数组是 JavaScript 中最常用的数据结构之一，它提供了丰富的方法来操作和处理数组数据。了解数组的特性和方法，有助于你更有效地处理 JavaScript 中的集合数据。

通过合理使用数组方法和遵循最佳实践，你可以编写更简洁、高效的 JavaScript 代码来处理各种数组操作。