数组基础与操作
数组是 JavaScript 最常用的数据结构,用于存储有序的元素集合。
数组字面量
JavaScript
const empty = [];
const nums = [1, 2, 3, 4, 5];
const mixed = [1, 'hello', true, { name: 'Tom' }];
创建方式
JavaScript
// 字面量(推荐)
const arr1 = [1, 2, 3];
// 构造函数
const arr2 = new Array(3); // [empty × 3]
const arr3 = new Array(1, 2); // [1, 2]
// Array.of(推荐替代 new Array)
const arr4 = Array.of(3); // [3]
const arr5 = Array.of(1, 2); // [1, 2]
// Array.from
const arr6 = Array.from('abc'); // ['a', 'b', 'c']
const arr7 = Array.from([1, 2, 3], x => x * 2); // [2, 4, 6]
索引与长度
索引访问
JavaScript
const arr = ['a', 'b', 'c'];
console.log(arr[0]); // 'a'
console.log(arr[1]); // 'b'
console.log(arr[arr.length - 1]); // 'c'
arr[1] = 'B';
console.log(arr); // ['a', 'B', 'c']
console.log(arr[10]); // undefined(越界不报错)
length 属性
JavaScript
const 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, empty × 2]
数组方法
增删元素
JavaScript
const arr = [2, 3];
arr.push(4, 5); // [2, 3, 4, 5]
arr.pop(); // 返回 5,arr → [2, 3, 4]
arr.unshift(0, 1); // [0, 1, 2, 3, 4]
arr.shift(); // 返回 0,arr → [1, 2, 3, 4]
splice 万能方法
JavaScript
const arr = ['a', 'b', 'c', 'd', 'e'];
// 删除
arr.splice(1, 2); // ['a', 'd', 'e']
// 插入
arr.splice(1, 0, 'x', 'y'); // ['a', 'x', 'y', 'd', 'e']
// 替换
arr.splice(1, 2, 'B', 'C'); // ['a', 'B', 'C', 'd', 'e']
查找与判断
JavaScript
const arr = [1, 2, 3, 2, 5];
arr.indexOf(2); // 1
arr.lastIndexOf(2); // 3
arr.includes(3); // true
arr.find(x => x > 2); // 3
arr.findIndex(x => x > 2); // 2
切片与合并
JavaScript
const arr = [1, 2, 3, 4, 5];
arr.slice(1, 3); // [2, 3]
arr.slice(2); // [3, 4, 5]
const merged = [1, 2].concat([3, 4]); // [1, 2, 3, 4]
| 方法 | 是否改变原数组 | 返回值 |
|---|---|---|
| push/pop | 是 | 新长度/删除元素 |
| unshift/shift | 是 | 新长度/删除元素 |
| splice | 是 | 删除的元素数组 |
| slice | 否 | 新数组 |
| concat | 否 | 新数组 |
数组遍历
for 循环
JavaScript
const arr = ['a', 'b', 'c'];
// 传统 for
for (let i = 0; i < arr.length; i++) {
console.log(i, arr[i]);
}
// for...of(推荐)
for (const item of arr) {
console.log(item);
}
forEach
JavaScript
arr.forEach((item, index, array) => {
console.log(index, item);
});
map / filter / reduce
JavaScript
const nums = [1, 2, 3, 4, 5];
const doubled = nums.map(x => x * 2); // [2, 4, 6, 8, 10]
const evens = nums.filter(x => x % 2 === 0);// [2, 4]
const sum = nums.reduce((acc, cur) => acc + cur, 0); // 15
遍历方式对比
| 方式 | 可中断 | 可访问索引 | 返回新数组 |
|---|---|---|---|
| for | 是 | 是 | - |
| for...of | 是 | 否 | - |
| forEach | 否 | 是 | - |
| map | 否 | 是 | 是 |
| filter | 否 | 是 | 是 |
| reduce | 否 | 是 | 单值 |
要点总结
- 优先使用字面量
[]创建数组,Array.of替代new Array length可读写,修改可截断或扩展数组push/pop操作末尾,unshift/shift操作开头splice是增删改的通用方法,slice安全截取不改变原数组map/filter/reduce是函数式遍历三件套,不改变原数组