数组

数组是 JavaScript 中用于存储有序数据集合的数据类型。

创建数组

数组字面量

const arr1 = [1, 2, 3, 4, 5];
const arr2 = ['a', 'b', 'c'];
const arr3 = [1, 'hello', true, { name: '张三' }];

Array 构造函数

const arr1 = new Array(3);       // [empty × 3]
const arr2 = new Array(1, 2, 3); // [1, 2, 3]
const arr3 = Array.of(1, 2, 3);  // [1, 2, 3]
const arr4 = Array.from('hello'); // ['h', 'e', 'l', 'l', 'o']

Array.from()

// 从字符串创建
Array.from('hello'); // ['h', 'e', 'l', 'l', 'o']

// 从 Set 创建
Array.from(new Set([1, 2, 2, 3])); // [1, 2, 3]

// 从 Map 创建
Array.from(new Map([[1, 'a'], [2, 'b']])); // [[1, 'a'], [2, 'b']]

// 使用 map 函数
Array.from([1, 2, 3], x => x * 2); // [2, 4, 6]

// 创建序列
Array.from({ length: 5 }, (_, i) => i); // [0, 1, 2, 3, 4]

访问元素

const arr = ['a', 'b', 'c', 'd', 'e'];

console.log(arr[0]);  // 'a'
console.log(arr[2]);  // 'c'
console.log(arr[-1]); // undefined（不支持负索引）
console.log(arr.at(-1)); // 'e'（ES2022）

console.log(arr.length); // 5

修改数组

添加元素

const arr = [1, 2, 3];

// 末尾添加
arr.push(4);        // 返回新长度 4
console.log(arr);   // [1, 2, 3, 4]

// 开头添加
arr.unshift(0);     // 返回新长度 5
console.log(arr);   // [0, 1, 2, 3, 4]

// 指定位置添加
arr.splice(2, 0, 'a');
console.log(arr);   // [0, 1, 'a', 2, 3, 4]

删除元素

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

// 末尾删除
arr.pop();          // 返回 5
console.log(arr);   // [1, 2, 3, 4]

// 开头删除
arr.shift();        // 返回 1
console.log(arr);   // [2, 3, 4]

// 指定位置删除
arr.splice(1, 1);   // 返回 [3]
console.log(arr);   // [2, 4]

splice()

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

// 删除元素
arr.splice(2, 1);   // 从索引2开始删除1个
console.log(arr);   // [1, 2, 4, 5]

// 替换元素
arr.splice(1, 1, 'a', 'b');
console.log(arr);   // [1, 'a', 'b', 4, 5]

// 插入元素
arr.splice(2, 0, 'x');
console.log(arr);   // [1, 'a', 'x', 'b', 4, 5]

遍历数组

for 循环

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

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

// for...of
for (const item of arr) {
    console.log(item);
}

// for...of 获取索引
for (const [index, item] of arr.entries()) {
    console.log(index, item);
}

forEach()

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

arr.forEach((item, index, array) => {
    console.log(index, item);
});

数组方法

查找元素

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

// indexOf - 查找元素索引
arr.indexOf(3);      // 2
arr.indexOf(6);      // -1
arr.lastIndexOf(3);  // 5

// includes - 是否包含
arr.includes(3);     // true
arr.includes(6);     // false

// find - 查找元素
arr.find(x => x > 3); // 4

// findIndex - 查找索引
arr.findIndex(x => x > 3); // 3

// findLast / findLastIndex（ES2023）
arr.findLast(x => x > 3);       // 5
arr.findLastIndex(x => x > 3);  // 5

过滤和映射

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

// filter - 过滤
const evens = arr.filter(x => x % 2 === 0);
console.log(evens); // [2, 4]

// map - 映射
const doubled = arr.map(x => x * 2);
console.log(doubled); // [2, 4, 6, 8, 10]

// flatMap - 映射后扁平化
const nested = [[1, 2], [3, 4]];
const flat = nested.flatMap(x => x);
console.log(flat); // [1, 2, 3, 4]

归约

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

// reduce - 归约
const sum = arr.reduce((acc, x) => acc + x, 0);
console.log(sum); // 15

// reduceRight - 从右向左归约
const str = ['a', 'b', 'c'].reduceRight((acc, x) => acc + x, '');
console.log(str); // 'cba'

判断方法

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

// every - 全部满足
arr.every(x => x > 0); // true
arr.every(x => x > 3); // false

// some - 存在满足
arr.some(x => x > 3);  // true
arr.some(x => x > 10); // false

排序

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

// sort - 排序（原地修改）
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]

// toSorted / toReversed（ES2023）- 不修改原数组
const sorted = arr.toSorted((a, b) => a - b);

截取和合并

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

// slice - 截取（不修改原数组）
arr.slice(1, 4);  // [2, 3, 4]
arr.slice(2);     // [3, 4, 5]
arr.slice(-2);    // [4, 5]

// concat - 合并
const arr1 = [1, 2];
const arr2 = [3, 4];
const merged = arr1.concat(arr2);
console.log(merged); // [1, 2, 3, 4]

// 展开运算符
const merged2 = [...arr1, ...arr2];

填充

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

// fill - 填充
arr.fill(0, 1, 3);
console.log(arr); // [1, 0, 0, 4, 5]

// copyWithin - 内部复制
[1, 2, 3, 4, 5].copyWithin(0, 3, 5);
// [4, 5, 3, 4, 5]

转换

const arr = [1, 2, 3];

// join - 转字符串
arr.join();       // '1,2,3'
arr.join('-');    // '1-2-3'
arr.join('');     // '123'

// toString
arr.toString();   // '1,2,3'

// Array.isArray - 判断数组
Array.isArray(arr); // true
Array.isArray({});  // false

扁平化

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

// flat - 扁平化
nested.flat();    // [1, 2, 3, 4, [5, 6]]
nested.flat(2);   // [1, 2, 3, 4, 5, 6]
nested.flat(Infinity); // 完全扁平化

解构赋值

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

// 基本解构
const [a, b, c] = arr;
console.log(a, b, c); // 1 2 3

// 跳过元素
const [first, , third] = arr;
console.log(first, third); // 1 3

// 剩余元素
const [head, ...tail] = arr;
console.log(head); // 1
console.log(tail); // [2, 3, 4, 5]

// 默认值
const [x, y, z, w = 10] = [1, 2, 3];
console.log(w); // 10

扩展运算符

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

// 合并数组
const merged = [...arr1, ...arr2];
console.log(merged); // [1, 2, 3, 4, 5, 6]

// 复制数组
const copy = [...arr1];

// 转换参数
const nums = [1, 5, 3];
Math.max(...nums); // 5

实践示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>JavaScript 数组示例</title>
</head>
<body>
    <h1>JavaScript 数组示例</h1>
    <script>
        // 数组工具函数
        const ArrayUtils = {
            // 去重
            unique(arr) {
                return [...new Set(arr)];
            },
            
            // 分组
            groupBy(arr, key) {
                return arr.reduce((groups, item) => {
                    const group = typeof key === 'function' ? key(item) : item[key];
                    groups[group] = groups[group] || [];
                    groups[group].push(item);
                    return groups;
                }, {});
            },
            
            // 分块
            chunk(arr, size) {
                return Array.from({ length: Math.ceil(arr.length / size) }, (_, i) =>
                    arr.slice(i * size, i * size + size)
                );
            },
            
            // 扁平化
            flatten(arr, depth = Infinity) {
                return arr.flat(depth);
            },
            
            // 交集
            intersection(arr1, arr2) {
                const set = new Set(arr2);
                return arr1.filter(x => set.has(x));
            },
            
            // 差集
            difference(arr1, arr2) {
                const set = new Set(arr2);
                return arr1.filter(x => !set.has(x));
            },
            
            // 并集
            union(arr1, arr2) {
                return [...new Set([...arr1, ...arr2])];
            },
            
            // 统计频率
            frequency(arr) {
                return arr.reduce((freq, item) => {
                    freq[item] = (freq[item] || 0) + 1;
                    return freq;
                }, {});
            },
            
            // 随机打乱
            shuffle(arr) {
                const result = [...arr];
                for (let i = result.length - 1; i > 0; i--) {
                    const j = Math.floor(Math.random() * (i + 1));
                    [result[i], result[j]] = [result[j], result[i]];
                }
                return result;
            }
        };
        
        // 测试
        const numbers = [1, 2, 2, 3, 3, 3, 4, 4, 4, 4];
        console.log('去重:', ArrayUtils.unique(numbers));
        console.log('频率:', ArrayUtils.frequency(numbers));
        
        const users = [
            { name: '张三', age: 25, city: '北京' },
            { name: '李四', age: 30, city: '上海' },
            { name: '王五', age: 25, city: '北京' }
        ];
        
        console.log('按年龄分组:', ArrayUtils.groupBy(users, 'age'));
        console.log('分块:', ArrayUtils.chunk([1, 2, 3, 4, 5, 6, 7], 3));
        
        const arr1 = [1, 2, 3, 4];
        const arr2 = [3, 4, 5, 6];
        console.log('交集:', ArrayUtils.intersection(arr1, arr2));
        console.log('差集:', ArrayUtils.difference(arr1, arr2));
        console.log('并集:', ArrayUtils.union(arr1, arr2));
        
        console.log('随机打乱:', ArrayUtils.shuffle([1, 2, 3, 4, 5]));
    </script>
</body>
</html>