JavaScript 数组操作
学习数组的增删改查和常用方法 · 难度：进阶 · +15XP
JavaScript 数组操作
JavaScript 数组操作 — 从入门到精通
学习前的准备
打开浏览器控制台（F12）。数组是 JavaScript 中最常用的数据结构——它是你存储列表数据的得力工具。
访问和修改数组元素
const colors = ['红', '绿', '蓝'];
console.log(colors[0]); // '红'——第一个元素
console.log(colors[colors.length - 1]); // '蓝'——最后一个
colors[1] = '黄色';
colors.push('紫色'); // 末尾添加
colors.unshift('黑色'); // 开头添加数组的核心方法
| 方法 | 作用 | 是否修改原数组 |
|---|---|---|
| push(v) | 末尾添加 | 是 |
| pop() | 移除末尾并返回 | 是 |
| unshift(v) | 开头添加 | 是 |
| shift() | 移除开头并返回 | 是 |
| splice(i,n) | 删除/替换 | 是 |
| slice(a,b) | 截取子数组 | 否 |
| concat(arr) | 合并数组 | 否 |
| indexOf(v) | 查找索引 | 否 |
| includes(v) | 是否包含 | 否 |
| sort(fn) | 排序 | 是 |
遍历数组的高级方法
const nums = [1, 2, 3, 4, 5];
// map：变换每个元素，返回新数组
const squares = nums.map(n => n * n);
console.log(squares); // [1, 4, 9, 16, 25]
// filter：筛选符合条件的元素
const evens = nums.filter(n => n % 2 === 0);
console.log(evens); // [2, 4]
// reduce：归并——将所有元素合并为一个值
const sum = nums.reduce((total, n) => total + n, 0);
console.log('总和：' + sum); // 15
// find：查找第一个符合条件的元素
const found = nums.find(n => n > 3);
console.log(found); // 4
实际应用
const students = [
{ name: '张三', score: 88 },
{ name: '李四', score: 95 },
{ name: '王五', score: 72 }
];
const top = students.reduce((best, cur) => cur.score > best.score ? cur : best);
console.log('最高分：' + top.name); // '李四'小结
数组是 JavaScript 的“瑞士军刀”。push/pop 操作末尾，unshift/shift 操作开头，slice/splice 用于截取和删除。map/filter/reduce 三个高级方法是函数式编程的基石。在控制台中多练习这些方法，你会发现数据处理变得前所未有的简单。