JavaScript 数组

数组是有序的数据集合，是 JavaScript 中使用最频繁的数据结构。一个数组可以存储任意类型的数据。

创建和访问

javascript 
// 字面量创建（推荐）
const fruits = ['苹果', '香蕉', '橘子'];

// 构造函数创建（少用）
const numbers = new Array(1, 2, 3);

// 访问元素（索引从 0 开始）
document.write(fruits[0] + '<br>');     // "苹果"
document.write(fruits[2] + '<br>');     // "橘子"
document.write(fruits.length + '<br>'); // 3

// 最后一个元素
document.write(fruits[fruits.length - 1] + '<br>'); // "橘子"

基础操作

添加和删除元素

javascript 
const arr = ['B'];
document.write('初始: ' + arr + '<br>');

// 末尾操作
arr.push('C');
document.write('push C 后: ' + arr + '<br>');
const last = arr.pop();
document.write('pop 后: ' + arr + '<br>');

// 开头操作
arr.unshift('A');
document.write('unshift A 后: ' + arr + '<br>');
const first = arr.shift();
document.write('shift 后: ' + arr + '<br>');

// arr 现在：["B"]
document.write('最终: ' + arr + '<br>');

slice() — 截取（不修改原数组）

javascript 
const arr = ['A', 'B', 'C', 'D', 'E'];

document.write(arr.slice(1, 3) + '<br>');   // ["B", "C"]（索引 1~2）
document.write(arr.slice(2) + '<br>');      // ["C", "D", "E"]（从索引 2 到末尾）
document.write(arr.slice(-2) + '<br>');     // ["D", "E"]（倒数 2 个）
document.write(arr.slice() + '<br>');       // 完整副本（常用于复制数组）

splice() — 增删改（会修改原数组）

javascript 
const arr = ['A', 'B', 'C', 'D'];
document.write('初始: ' + arr + '<br>');

// 删除：从索引1开始，删2个
const removed = arr.splice(1, 2);
document.write('删除后: ' + arr + '，删除: ' + removed + '<br>');

// 插入：从索引1开始，删0个，插入元素
arr.splice(1, 0, 'X', 'Y');
document.write('插入后: ' + arr + '<br>');

// 替换：从索引1开始，删2个，插入元素
arr.splice(1, 2, 'Z');
document.write('替换后: ' + arr + '<br>');

查找元素

javascript 
const arr = ['苹果', '香蕉', '橘子', '香蕉'];

document.write(arr.indexOf('香蕉') + '<br>');      // 1（首次出现的索引）
document.write(arr.lastIndexOf('香蕉') + '<br>');  // 3（最后出现的索引）
document.write(arr.indexOf('葡萄') + '<br>');      // -1（不存在）

document.write(arr.includes('苹果') + '<br>');     // true
document.write(arr.includes('葡萄') + '<br>');     // false

遍历数组

forEach() — 逐一处理

javascript 
const items = ['A', 'B', 'C'];

items.forEach((item, index) => {
  document.write(`${index}: ${item}<br>`);
});

forEach() 不能中途退出（break 无效）。如果需要提前终止循环，用 for...of 或普通 for 循环。

for...of — 遍历值

javascript 
for (const item of items) {
  document.write(item + '<br>');
}

数组变换（核心方法）

这些方法是现代 JavaScript 的精华，都不修改原数组，而是返回新数组。

map() — 映射

将每个元素转换为新值，生成等长的新数组：

javascript 
const numbers = [1, 2, 3, 4];

const doubled = numbers.map(n => n * 2);
document.write('doubled: ' + doubled + '<br>');
// [2, 4, 6, 8]

const labels = numbers.map(n => `第${n}项`);
document.write('labels: ' + labels + '<br>');
// ["第1项", "第2项", "第3项", "第4项"]

filter() — 过滤

保留满足条件的元素，生成可能较短的新数组：

javascript 
const numbers = [1, 2, 3, 4, 5, 6];

const evens = numbers.filter(n => n % 2 === 0);
document.write('evens: ' + evens + '<br>');
// [2, 4, 6]

const adults = users.filter(user => user.age >= 18);
document.write('adults: ' + JSON.stringify(adults) + '<br>');

reduce() — 归约

将数组”压缩”为一个值：

javascript 
const numbers = [1, 2, 3, 4];

const sum = numbers.reduce((total, current) => total + current, 0);
document.write('sum: ' + sum + '<br>');
// total 是累积值，current 是当前元素，0 是初始值
// 计算过程：0 → 1 → 3 → 6 → 10

find() / findIndex()

javascript 
const users = [
  { id: 1, name: '张三' },
  { id: 2, name: '李四' },
  { id: 3, name: '王五' },
];

document.write(JSON.stringify(users.find(user => user.id === 2)) + '<br>');       // { id: 2, name: '李四' }
document.write(users.findIndex(user => user.id === 2) + '<br>');  // 1
document.write(JSON.stringify(users.find(user => user.id === 99)) + '<br>');      // undefined（没找到）

sort() — 排序

sort() 会修改原数组，且默认按字符串排序：

javascript 
// 数字排序（升序）
const nums = [3, 1, 10, 2];
nums.sort((a, b) => a - b);
document.write('升序: ' + nums + '<br>');
// [1, 2, 3, 10]

// 数字排序（降序）
nums.sort((a, b) => b - a);
document.write('降序: ' + nums + '<br>');
// [10, 3, 2, 1]

// 字符串排序
const names = ['王五', '张三', '李四'];
names.sort();
document.write('字符串排序: ' + names + '<br>');
// ["张三", "李四", "王五"]（按拼音/Unicode）

其他常用方法

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

// 合并
document.write('concat: ' + arr1.concat(arr2) + '<br>');          // [1, 2, 3, 4]
document.write('spread: ' + [...arr1, ...arr2] + '<br>');         // [1, 2, 3, 4]（展开运算符，推荐）

// 转为字符串
document.write('join: ' + [1, 2, 3].join(', ') + '<br>');         // "1, 2, 3"

// 反转
document.write('reverse: ' + [1, 2, 3].reverse() + '<br>');      // [3, 2, 1]（会修改原数组）

// 检查是否为数组
document.write('Array.isArray([1,2,3]): ' + Array.isArray([1, 2, 3]) + '<br>');   // true
document.write('Array.isArray("hello"): ' + Array.isArray('hello') + '<br>');     // false