数组对象

Array 对象是 JavaScript 中用于存储多个值的全局对象。它是一个可变的、有序的值集合，提供了丰富的操作方法。

创建数组

有多种方式可以创建数组：

数组字面量

let fruits = ["苹果", "香蕉", "橙子"];
let numbers = [1, 2, 3, 4, 5];
let mixed = [1, "字符串", true, null, {name: "张三"}];
let empty = [];

Array 构造函数

let fruits = new Array("苹果", "香蕉", "橙子");
let numbers = new Array(1, 2, 3, 4, 5);
let empty = new Array(5); // 创建长度为 5 的空数组

Array.of() 方法

let numbers = Array.of(1, 2, 3, 4, 5);
let mixed = Array.of(1, "字符串", true);

Array.from() 方法

// 从类数组对象创建数组
let arrayLike = {0: "a", 1: "b", 2: "c", length: 3};
let arr = Array.from(arrayLike); // ["a", "b", "c"]

// 从字符串创建数组
let chars = Array.from("hello"); // ["h", "e", "l", "l", "o"]

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

数组属性

length 属性

let fruits = ["苹果", "香蕉", "橙子"];
console.log(fruits.length); // 3

// 可以通过设置 length 属性来截断数组
fruits.length = 2;
console.log(fruits); // ["苹果", "香蕉"]

// 可以通过设置 length 属性来扩展数组
fruits.length = 5;
console.log(fruits); // ["苹果", "香蕉", empty × 3]

访问数组元素

let fruits = ["苹果", "香蕉", "橙子"];

// 通过索引访问元素
console.log(fruits[0]); // "苹果"
console.log(fruits[1]); // "香蕉"

// 修改元素
fruits[1] = "葡萄";
console.log(fruits); // ["苹果", "葡萄", "橙子"]

// 访问不存在的索引返回 undefined
console.log(fruits[10]); // undefined

添加和删除元素

末尾操作

let fruits = ["苹果", "香蕉"];

// 在末尾添加元素
fruits.push("橙子");
console.log(fruits); // ["苹果", "香蕉", "橙子"]

// 在末尾添加多个元素
fruits.push("葡萄", "草莓");
console.log(fruits); // ["苹果", "香蕉", "橙子", "葡萄", "草莓"]

// 删除末尾元素
let lastFruit = fruits.pop();
console.log(lastFruit); // "草莓"
console.log(fruits); // ["苹果", "香蕉", "橙子", "葡萄"]

开头操作

let fruits = ["苹果", "香蕉"];

// 在开头添加元素
fruits.unshift("橙子");
console.log(fruits); // ["橙子", "苹果", "香蕉"]

// 在开头添加多个元素
fruits.unshift("葡萄", "草莓");
console.log(fruits); // ["葡萄", "草莓", "橙子", "苹果", "香蕉"]

// 删除开头元素
let firstFruit = fruits.shift();
console.log(firstFruit); // "葡萄"
console.log(fruits); // ["草莓", "橙子", "苹果", "香蕉"]

任意位置操作

let fruits = ["苹果", "香蕉", "橙子"];

// 在指定位置添加或删除元素
fruits.splice(1, 0, "葡萄"); // 在索引 1 处插入"葡萄"
console.log(fruits); // ["苹果", "葡萄", "香蕉", "橙子"]

fruits.splice(2, 1); // 从索引 2 开始删除 1 个元素
console.log(fruits); // ["苹果", "葡萄", "橙子"]

fruits.splice(1, 1, "草莓"); // 替换索引 1 处的元素
console.log(fruits); // ["苹果", "草莓", "橙子"]

数组遍历方法

forEach 方法

let fruits = ["苹果", "香蕉", "橙子"];

// 遍历数组
fruits.forEach(function(fruit, index) {
    console.log(`${index}: ${fruit}`);
});

// 使用箭头函数
fruits.forEach((fruit, index) => {
    console.log(`${index}: ${fruit}`);
});

for...of 循环

let fruits = ["苹果", "香蕉", "橙子"];

// 遍历数组元素
for (let fruit of fruits) {
    console.log(fruit);
}

// 获取索引和值
fruits.forEach((fruit, index) => {
    console.log(`${index}: ${fruit}`);
});

数组转换方法

map 方法

let numbers = [1, 2, 3, 4, 5];

// 创建新数组，每个元素都经过函数处理
let doubled = numbers.map(x => x * 2);
console.log(doubled); // [2, 4, 6, 8, 10]

let fruits = ["苹果", "香蕉", "橙子"];
let upperFruits = fruits.map(fruit => fruit.toUpperCase());
console.log(upperFruits); // ["苹果", "香蕉", "橙子"]

filter 方法

let numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

// 创建新数组，只包含满足条件的元素
let evens = numbers.filter(x => x % 2 === 0);
console.log(evens); // [2, 4, 6, 8, 10]

let fruits = ["苹果", "香蕉", "橙子", "葡萄"];
let longNames = fruits.filter(fruit => fruit.length > 2);
console.log(longNames); // ["苹果", "香蕉", "橙子", "葡萄"]

reduce 方法

let numbers = [1, 2, 3, 4, 5];

// 累积计算数组元素
let sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
console.log(sum); // 15

// 计算数组元素的乘积
let product = numbers.reduce((acc, cur) => acc * cur, 1);
console.log(product); // 120

// 找出最大值
let max = numbers.reduce((acc, cur) => Math.max(acc, cur));
console.log(max); // 5

数组查找方法

find 和 findIndex

let numbers = [1, 2, 3, 4, 5];

// 查找第一个满足条件的元素
let even = numbers.find(x => x % 2 === 0);
console.log(even); // 2

// 查找第一个满足条件的元素的索引
let evenIndex = numbers.findIndex(x => x % 2 === 0);
console.log(evenIndex); // 1

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

let user = users.find(u => u.id === 2);
console.log(user); // {id: 2, name: "李四"}

indexOf 和 lastIndexOf

let fruits = ["苹果", "香蕉", "橙子", "香蕉"];

// 查找元素的索引
let index = fruits.indexOf("香蕉");
console.log(index); // 1

// 从指定位置开始查找
let lastIndex = fruits.lastIndexOf("香蕉");
console.log(lastIndex); // 3

// 检查元素是否存在
if (fruits.indexOf("苹果") !== -1) {
    console.log("找到了苹果");
}

数组排序和反转

sort 方法

let fruits = ["香蕉", "苹果", "橙子"];

// 默认按字符串排序
fruits.sort();
console.log(fruits); // ["橙子", "苹果", "香蕉"]

// 自定义排序
let numbers = [10, 2, 30, 4];
numbers.sort((a, b) => a - b); // 升序
console.log(numbers); // [2, 4, 10, 30]

numbers.sort((a, b) => b - a); // 降序
console.log(numbers); // [30, 10, 4, 2]

reverse 方法

let fruits = ["苹果", "香蕉", "橙子"];

// 反转数组元素顺序
fruits.reverse();
console.log(fruits); // ["橙子", "香蕉", "苹果"]

数组连接和切片

concat 方法

let fruits = ["苹果", "香蕉"];
let vegetables = ["胡萝卜", "白菜"];

// 连接数组
let food = fruits.concat(vegetables);
console.log(food); // ["苹果", "香蕉", "胡萝卜", "白菜"]

// 连接多个数组
let meats = ["牛肉", "猪肉"];
let allFood = fruits.concat(vegetables, meats);
console.log(allFood); // ["苹果", "香蕉", "胡萝卜", "白菜", "牛肉", "猪肉"]

slice 方法

let fruits = ["苹果", "香蕉", "橙子", "葡萄", "草莓"];

// 提取数组的一部分（不修改原数组）
let citrus = fruits.slice(1, 3);
console.log(citrus); // ["香蕉", "橙子"]
console.log(fruits); // 原数组不变

// 从指定位置到末尾
let fromIndex = fruits.slice(2);
console.log(fromIndex); // ["橙子", "葡萄", "草莓"]

// 负数索引
let lastTwo = fruits.slice(-2);
console.log(lastTwo); // ["葡萄", "草莓"]

数组检测方法

isArray 方法

// 检查值是否为数组
console.log(Array.isArray([1, 2, 3])); // true
console.log(Array.isArray("数组")); // false
console.log(Array.isArray({})); // false

some 和 every 方法

let numbers = [1, 2, 3, 4, 5];

// 检查是否有元素满足条件
let hasEven = numbers.some(x => x % 2 === 0);
console.log(hasEven); // true

// 检查是否所有元素都满足条件
let allPositive = numbers.every(x => x > 0);
console.log(allPositive); // true

多维数组

// 创建二维数组
let matrix = [
    [1, 2, 3],
    [4, 5, 6],
    [7, 8, 9]
];

// 访问元素
console.log(matrix[0][1]); // 2

// 遍历二维数组
matrix.forEach(row => {
    row.forEach(element => {
        console.log(element);
    });
});

最佳实践

1. 使用字面量语法：创建数组时优先使用字面量语法而不是构造函数。

2. 避免稀疏数组：尽量避免创建有空位的数组。

3. 使用适当的方法：

   • 需要新数组时使用 map、filter 等
   • 只需要遍历时使用 forEach
   • 需要累积值时使用 reduce

4. 注意引用：数组是引用类型，赋值时传递的是引用。

let arr1 = [1, 2, 3];
let arr2 = arr1; // arr2 指向同一个数组
arr2[0] = 999;
console.log(arr1); // [999, 2, 3] - 原数组也被修改

// 创建副本
let arr3 = [...arr1]; // 使用扩展运算符
let arr4 = arr1.slice(); // 使用 slice 方法

5. 使用现代方法：优先使用 ES6+ 的方法如 find、includes 等，而不是旧方法。

Array 对象是 JavaScript 中最重要的内置对象之一，掌握其各种方法对于高效处理数据至关重要。