数组是JavaScript中最重要的数据结构之一，用于存储有序的元素集合。JavaScript数组是动态的、异构的，可以存储任意类型的元素。

// 空数组
const empty = [];
 
// 带有元素的数组
const numbers = [1, 2, 3, 4, 5];
const mixed = [1, "two", true, null, { a: 1 }, [1, 2]];
 
// 多行格式
const fruits = [
    "apple",
    "banana",
    "orange",
    "grape"
];
 
// 数组长度
console.log(numbers.length);  // 5

// 使用Array构造函数（不推荐）
const arr1 = new Array();           // []
const arr2 = new Array(5);          // [empty × 5] - 5个空槽
const arr3 = new Array(1, 2, 3);    // [1, 2, 3]
 
// 注意：单参数时会被视为长度
new Array(3);   // [empty, empty, empty]
new Array("3"); // ["3"]
 
// Array.of()（ES6）- 更安全的构造函数
Array.of(3);      // [3]
Array.of(1, 2, 3); // [1, 2, 3]

// 从类数组对象创建数组
const fromString = Array.from("hello");  // ["h", "e", "l", "l", "o"]
 
// 从Set创建
const fromSet = Array.from(new Set([1, 2, 3]));  // [1, 2, 3]
 
// 从Map创建
const fromMap = Array.from(new Map([[1, "a"], [2, "b"]]));  // [[1, "a"], [2, "b"]]
 
// 带映射函数
const doubled = Array.from([1, 2, 3], x => x * 2);  // [2, 4, 6]
 
// 创建序列
const range = Array.from({ length: 5 }, (_, i) => i);  // [0, 1, 2, 3, 4]

const arr = ["a", "b", "c"];
 
// 访问元素
arr[0];     // "a"
arr[1];     // "b"
arr[arr.length - 1];  // "c"（最后一个）
 
// 修改元素
arr[0] = "A";
console.log(arr);  // ["A", "b", "c"]
 
// 添加元素（索引超出当前长度）
arr[5] = "f";
console.log(arr);  // ["A", "b", "c", empty, empty, "f"]
 
// 负数索引（ES2022）
arr.at(-1);  // "f"（最后一个元素）
arr.at(-2);  // undefined（empty槽）

const arr = [1, 2, 3];
 
// push - 末尾添加，返回新长度
arr.push(4);           // 4（新长度）
arr.push(5, 6);        // 6（可添加多个）
 
// pop - 末尾删除，返回被删除的元素
arr.pop();             // 6
 
// unshift - 开头添加，返回新长度
arr.unshift(0);        // 5
arr.unshift(-1, -2);   // 7
 
// shift - 开头删除，返回被删除的元素
arr.shift();           // -1
 
// splice - 任意位置添加/删除
const colors = ["red", "green", "blue"];
 
// 删除
colors.splice(1, 1);              // ["green"]（从索引1删除1个）
// colors现在是 ["red", "blue"]
 
// 添加
colors.splice(1, 0, "yellow");    // []（从索引1删除0个，添加"yellow"）
// colors现在是 ["red", "yellow", "blue"]
 
// 替换
colors.splice(1, 1, "green", "purple");  // ["yellow"]
// colors现在是 ["red", "green", "purple", "blue"]

const arr = [5, 12, 8, 130, 44];
 
// indexOf - 查找元素索引（严格相等）
arr.indexOf(8);        // 2
arr.indexOf(100);      // -1（不存在）
arr.indexOf(5, 1);     // -1（从索引1开始查找）
 
// lastIndexOf - 从后向前查找
arr.lastIndexOf(44);   // 4
 
// includes - 检查是否包含（ES2016）
arr.includes(8);       // true
arr.includes(100);     // false
 
// find - 返回第一个满足条件的元素（ES6）
arr.find(x => x > 10);       // 12
arr.find(x => x > 200);      // undefined
 
// findIndex - 返回第一个满足条件的索引（ES6）
arr.findIndex(x => x > 10);  // 1
arr.findIndex(x => x > 200); // -1
 
// findLast / findLastIndex（ES2023）
arr.findLast(x => x > 10);       // 44
arr.findLastIndex(x => x > 10);  // 4

const arr = ["a", "b", "c"];
 
// forEach - 遍历每个元素
arr.forEach((item, index, array) => {
    console.log(`${index}: ${item}`);
});
 
// map - 映射，返回新数组
const doubled = [1, 2, 3].map(x => x * 2);  // [2, 4, 6]
 
// filter - 过滤，返回满足条件的元素
const evens = [1, 2, 3, 4, 5].filter(x => x % 2 === 0);  // [2, 4]
 
// reduce - 归约
const sum = [1, 2, 3, 4].reduce((acc, x) => acc + x, 0);  // 10
 
// reduceRight - 从右向左归约
const flattened = [[0, 1], [2, 3], [4, 5]].reduceRight(
    (a, b) => a.concat(b), []
);  // [4, 5, 2, 3, 0, 1]
 
// every - 是否所有元素都满足条件
[1, 2, 3].every(x => x > 0);   // true
 
// some - 是否有元素满足条件
[1, 2, 3].some(x => x > 2);    // true

reduce的高级用法：

// 分组
const people = [
    { name: "Alice", age: 21 },
    { name: "Bob", age: 25 },
    { name: "Carol", age: 21 }
];
 
const groupedByAge = people.reduce((acc, person) => {
    const key = person.age;
    if (!acc[key]) acc[key] = [];
    acc[key].push(person);
    return acc;
}, {});
// { 21: [{Alice}, {Carol}], 25: [{Bob}] }
 
// 统计
const fruits = ["apple", "banana", "apple", "orange", "banana", "apple"];
const count = fruits.reduce((acc, fruit) => {
    acc[fruit] = (acc[fruit] || 0) + 1;
    return acc;
}, {});
// { apple: 3, banana: 2, orange: 1 }
 
// 管道
const pipeline = (...fns) => x => fns.reduce((v, f) => f(v), x);

// sort - 原地排序（默认按字符串Unicode）
const arr = ["banana", "apple", "cherry"];
arr.sort();  // ["apple", "banana", "cherry"]
 
// 数字排序需要比较函数
const nums = [10, 2, 30, 1];
nums.sort();           // [1, 10, 2, 30]（错误！）
nums.sort((a, b) => a - b);   // [1, 2, 10, 30]（升序）
nums.sort((a, b) => b - a);   // [30, 10, 2, 1]（降序）
 
// 对象排序
const users = [
    { name: "Alice", age: 25 },
    { name: "Bob", age: 20 }
];
users.sort((a, b) => a.age - b.age);
 
// 字符串排序（localeCompare）
["café", "cafe", "calzone"].sort((a, b) => a.localeCompare(b));
 
// toSorted（ES2023）- 不修改原数组
const original = [3, 1, 2];
const sorted = original.toSorted((a, b) => a - b);
console.log(original);  // [3, 1, 2]
console.log(sorted);    // [1, 2, 3]
 
// reverse - 原地反转
[1, 2, 3].reverse();    // [3, 2, 1]
 
// toReversed（ES2023）- 不修改原数组
[1, 2, 3].toReversed(); // [3, 2, 1]

const arr = [1, 2, 3, 4, 5];
 
// slice - 截取（不修改原数组）
arr.slice(1, 3);        // [2, 3]（从索引1到3，不包括3）
arr.slice(2);           // [3, 4, 5]（从索引2到末尾）
arr.slice(-2);          // [4, 5]（最后两个）
arr.slice();            // [1, 2, 3, 4, 5]（浅拷贝）
 
// concat - 连接数组
[1, 2].concat([3, 4]);          // [1, 2, 3, 4]
[1, 2].concat(3, 4);            // [1, 2, 3, 4]
[1, 2].concat([3], [4, 5]);     // [1, 2, 3, 4, 5]
 
// 使用展开运算符（推荐）
[...arr1, ...arr2, item];

// fill - 填充
const arr1 = new Array(5).fill(0);           // [0, 0, 0, 0, 0]
[1, 2, 3, 4, 5].fill(0, 2, 4);               // [1, 2, 0, 0, 5]
 
// copyWithin - 复制数组的一部分到另一部分
[1, 2, 3, 4, 5].copyWithin(0, 3);            // [4, 5, 3, 4, 5]
[1, 2, 3, 4, 5].copyWithin(1, 3, 4);         // [1, 4, 3, 4, 5]

// 展开数组
const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5];    // [1, 2, 3, 4, 5]
 
// 复制数组（浅拷贝）
const copy = [...arr1];
 
// 合并数组
const merged = [...arr1, ...arr2];
 
// 函数调用时展开
const nums = [1, 2, 3];
Math.max(...nums);  // 3（等价于 Math.max(1, 2, 3)）

// 数组解构
const [a, b, c] = [1, 2, 3];     // a=1, b=2, c=3
 
// 跳过元素
const [first, , third] = [1, 2, 3];  // first=1, third=3
 
// 剩余元素
const [head, ...tail] = [1, 2, 3, 4];  // head=1, tail=[2, 3, 4]
 
// 默认值
const [x = 0, y = 0] = [1];      // x=1, y=0
 
// 嵌套解构
const [a, [b, c]] = [1, [2, 3]];  // a=1, b=2, c=3
 
// 交换变量
let m = 1, n = 2;
[m, n] = [n, m];  // m=2, n=1

const arr = [1, 2, 3, 4, 5];
 
// at() - 支持负数索引
arr.at(0);     // 1
arr.at(-1);    // 5（最后一个）
arr.at(-2);    // 4（倒数第二个）
 
// 不可变方法（ES2023）- 返回新数组
arr.toReversed();   // [5, 4, 3, 2, 1]
arr.toSorted((a, b) => b - a);  // [5, 4, 3, 2, 1]
arr.toSpliced(1, 2, "a", "b");   // [1, "a", "b", 4, 5]
arr.with(2, "three");            // [1, 2, "three", 4, 5]
 
// 原数组保持不变
console.log(arr);  // [1, 2, 3, 4, 5]

const nested = [1, [2, 3], [4, [5, 6]]];
 
// flat() - 扁平化（ES2019）
nested.flat();        // [1, 2, 3, 4, [5, 6]]（默认深度1）
nested.flat(2);       // [1, 2, 3, 4, 5, 6]
nested.flat(Infinity); // 完全扁平化
 
// flatMap() = map() + flat(1)
const sentences = ["Hello world", "How are you"];
const words = sentences.flatMap(s => s.split(" "));
// ["Hello", "world", "How", "are", "you"]

// group() / groupToMap()（ES2024）
const inventory = [
    { name: "apple", type: "fruit", quantity: 5 },
    { name: "carrot", type: "vegetable", quantity: 3 },
    { name: "banana", type: "fruit", quantity: 2 }
];
 
// 按类型分组
const byType = Object.groupBy(inventory, item => item.type);
// {
//   fruit: [{apple}, {banana}],
//   vegetable: [{carrot}]
// }
 
// 按数量分组
const byQuantity = Object.groupBy(inventory, 
    item => item.quantity > 3 ? "enough" : "restock"
);

const arr = [1, 2, 2, 3, 3, 3, 4];
 
// 使用Set（最简单）
[...new Set(arr)];              // [1, 2, 3, 4]
Array.from(new Set(arr));       // [1, 2, 3, 4]
 
// 使用filter
arr.filter((item, index) => arr.indexOf(item) === index);
 
// 对象数组去重
const users = [
    { id: 1, name: "Alice" },
    { id: 2, name: "Bob" },
    { id: 1, name: "Alice" }
];
 
const unique = users.filter((user, index, self) => 
    index === self.findIndex(u => u.id === user.id)
);

类型化数组用于处理二进制数据，在WebGL、文件操作、网络通信等场景中非常有用。

// 创建ArrayBuffer
const buffer = new ArrayBuffer(16);  // 16字节的内存空间
 
// 创建视图
const int32View = new Int32Array(buffer);
int32View[0] = 42;
console.log(int32View[0]);  // 42
 
// 直接创建类型化数组
const int8 = new Int8Array(4);           // 4个8位整数
const uint8 = new Uint8Array(4);         // 4个无符号8位整数
const int16 = new Int16Array(4);         // 4个16位整数
const uint16 = new Uint16Array(4);       // 4个无符号16位整数
const int32 = new Int32Array(4);         // 4个32位整数
const uint32 = new Uint32Array(4);       // 4个无符号32位整数
const float32 = new Float32Array(4);     // 4个32位浮点数
const float64 = new Float64Array(4);     // 4个64位浮点数
const bigInt64 = new BigInt64Array(4);   // 4个64位大整数
 
// 从数组创建
const arr = new Int32Array([1, 2, 3, 4]);
 
// 类型化数组方法（类似普通数组）
arr.forEach(x => console.log(x));
const doubled = arr.map(x => x * 2);
const sum = arr.reduce((a, b) => a + b, 0);
 
// 设置和获取
arr.set([10, 20], 1);  // 从索引1开始设置值
const sub = arr.subarray(1, 3);  // 创建子视图

// 1. 实现一个函数chunk(arr, size)，将数组分割成指定大小的小数组
// chunk([1,2,3,4,5,6], 2) => [[1,2], [3,4], [5,6]]
 
// 2. 实现一个函数compact(arr)，移除数组中所有假值
// compact([0, 1, false, 2, '', 3]) => [1, 2, 3]
 
// 3. 实现一个函数difference(arr1, arr2)，返回在arr1中但不在arr2中的元素
// difference([1,2,3], [2,3,4]) => [1]

// 1. 使用reduce实现map、filter、find
 
// 2. 实现一个函数flattenDeep(arr)，深度扁平化数组
// flattenDeep([1, [2, [3, [4]]]]) => [1, 2, 3, 4]
 
// 3. 实现一个函数zip(...arrays)，将多个数组合并
// zip([1,2], ['a','b'], [true,false]) => [[1,'a',true], [2,'b',false]]

// 1. 给定一个用户数组，按年龄段分组（18-25，26-35，36+）
 
// 2. 实现一个函数，找出数组中出现次数最多的元素
 
// 3. 实现一个函数，对对象数组进行多字段排序
// sortBy(users, ['age', 'name']) // 先按age排序，age相同按name排序

练习1答案：

// 1. chunk
function chunk(arr, size) {
    const result = [];
    for (let i = 0; i < arr.length; i += size) {
        result.push(arr.slice(i, i + size));
    }
    return result;
}
 
// 或使用reduce
const chunk = (arr, size) => 
    arr.reduce((acc, _, i) => 
        i % size === 0 ? [...acc, arr.slice(i, i + size)] : acc, 
    []);
 
// 2. compact
function compact(arr) {
    return arr.filter(Boolean);
}
 
// 3. difference
function difference(arr1, arr2) {
    const set2 = new Set(arr2);
    return arr1.filter(item => !set2.has(item));
}

练习2答案：

// 1. 用reduce实现map/filter/find
const map = (arr, fn) => arr.reduce((acc, item, i) => [...acc, fn(item, i, arr)], []);
const filter = (arr, fn) => arr.reduce((acc, item) => fn(item) ? [...acc, item] : acc, []);
const find = (arr, fn) => arr.reduce((acc, item) => acc === undefined && fn(item) ? item : acc, undefined);
 
// 2. flattenDeep
function flattenDeep(arr) {
    return arr.reduce((acc, item) => 
        acc.concat(Array.isArray(item) ? flattenDeep(item) : item), 
    []);
}
 
// 或使用flat
const flattenDeep = arr => arr.flat(Infinity);
 
// 3. zip
function zip(...arrays) {
    const minLength = Math.min(...arrays.map(arr => arr.length));
    return Array.from({ length: minLength }, (_, i) => 
        arrays.map(arr => arr[i])
    );
}

练习3答案：

// 1. 按年龄段分组
function groupByAgeRange(users) {
    return Object.groupBy(users, user => {
        if (user.age <= 25) return '18-25';
        if (user.age <= 35) return '26-35';
        return '36+';
    });
}
 
// 2. 出现次数最多的元素
function mostFrequent(arr) {
    const count = arr.reduce((acc, item) => {
        acc[item] = (acc[item] || 0) + 1;
        return acc;
    }, {});
 
    return Object.entries(count)
        .sort((a, b) => b[1] - a[1])[0][0];
}
 
// 3. 多字段排序
function sortBy(arr, keys) {
    return [...arr].sort((a, b) => {
        for (let key of keys) {
            if (a[key] < b[key]) return -1;
            if (a[key] > b[key]) return 1;
        }
        return 0;
    });
}

本章全面学习了JavaScript数组：

• 数组的创建和基础操作
• 丰富的数组方法（查找、遍历、排序、截取）
• ES6+新特性（展开运算符、解构、新方法）
• 高级操作（扁平化、分组、去重）
• 类型化数组简介

数组是日常开发中最常用的数据结构，熟练掌握数组操作能大大提高开发效率。

下一章将学习字符串和正则表达式。