JavaScript Array []（一文讲透）

JavaScript Array []：快速掌握数组操作技巧

JavaScript Array [] 是前端开发中使用最频繁的数据结构之一，用于存储和操作一组数据。无论是处理用户输入、渲染列表，还是操作 DOM 元素，Array [] 都扮演着重要角色。本文将系统讲解 JavaScript Array 的创建、常用方法、进阶用法和实际应用，帮助你高效应对开发中的各种场景。

创建数组与初始化

JavaScript 中创建数组有多种方式，最常见的有以下几种：

使用数组字面量

// 使用数组字面量创建一个空数组
const arr1 = [];
// 创建并初始化一个包含多个元素的数组
const arr2 = [1, 2, 3, 4, 5];

使用 Array 构造函数

// 使用构造函数创建一个空数组
const arr3 = new Array();
// 创建一个指定长度的数组（注意：不会填充内容）
const arr4 = new Array(5); // 长度为 5，内容为 [empty × 5]
// 创建并初始化数组
const arr5 = new Array(1, 2, 3); // 等价于 [1, 2, 3]

从其他数据类型转换

// 将字符串转换为数组
const str = "hello";
const arr6 = Array.from(str); // ["h", "e", "l", "l", "o"]

常用方法

以下是 JavaScript Array 最常用的方法，按使用频率排序：

常用方法详解

push() 与 pop()

let numbers = [1, 2, 3];
numbers.push(4); // 添加元素到数组末尾
console.log(numbers); // [1, 2, 3, 4]

let last = numbers.pop(); // 删除并返回最后一个元素
console.log(last); // 4
console.log(numbers); // [1, 2, 3]

map() 与 filter()

// map() 将每个元素乘以 2
let nums = [1, 2, 3, 4];
let doubled = nums.map(num => num * 2);
console.log(doubled); // [2, 4, 6, 8]

// filter() 筛选出偶数
let evens = nums.filter(num => num % 2 === 0);
console.log(evens); // [2, 4]

splice()

let colors = ["red", "green", "blue", "yellow"];
let removed = colors.splice(1, 2, "orange", "pink"); 
// 从索引 1 开始删除 2 个元素，插入 "orange" 和 "pink"
console.log(colors); // ["red", "orange", "pink", "yellow"]
console.log(removed); // ["green", "blue"]

高级技巧

扁平化嵌套数组

// 使用 reduce + concat 实现数组扁平化
let nested = [1, [2, [3, 4], 5]];
let flat = nested.reduce((acc, val) => 
    Array.isArray(val) ? acc.concat(val) : acc.concat(val), []);
console.log(flat); // [1, 2, 3, 4, 5]

合并多个数组

let a = [1, 2];
let b = [3, 4];
let c = [5, 6];
let combined = [].concat(a, b, c); 
// 合并多个数组为一个数组
console.log(combined); // [1, 2, 3, 4, 5, 6]

遍历对象并转换为数组

const obj = { a: 1, b: 2, c: 3 };
const keys = Object.keys(obj); // ["a", "b", "c"]
const values = Object.values(obj); // [1, 2, 3]
const entries = Object.entries(obj); // [["a", 1], ["b", 2], ["c", 3]]

常见问题

为什么 new Array(5) 返回的是 [empty × 5] 而不是 [5]？

new Array(5) 会创建一个长度为 5 的空数组，但没有填充元素，此时数组中每个位置都是空的，而不是 5。如果传入多个参数，则创建一个包含这些参数的数组，如 new Array(1, 2, 3) 会返回 [1, 2, 3]。

slice() 和 splice() 有什么区别？

slice() 用于返回数组的一个子集，不会修改原数组；而 splice() 会修改原数组，用于删除或添加元素。例如：

let arr = [1, 2, 3, 4];
console.log(arr.slice(1, 3)); // [2, 3]，不改变原数组
console.log(arr); // [1, 2, 3, 4]

let removed = arr.splice(1, 2); // 删除索引1开始的两个元素
console.log(arr); // [1, 4]
console.log(removed); // [2, 3]

如何判断一个变量是否是数组？

使用 Array.isArray() 方法进行判断：

let arr = [1, 2, 3];
let notArr = "string";
console.log(Array.isArray(arr)); // true
console.log(Array.isArray(notArr)); // false

实战应用

实现一个购物车总价计算

const cart = [
    { name: "苹果", price: 3, quantity: 2 },
    { name: "香蕉", price: 2, quantity: 3 },
    { name: "橙子", price: 5, quantity: 1 }
];

const total = cart.reduce((sum, item) => {
    return sum + item.price * item.quantity; // 累加价格乘以数量
}, 0);

console.log(`购物车总价为：${total} 元`);
// 输出：购物车总价为：14 元

动态渲染 DOM 列表

const fruits = ["苹果", "香蕉", "橙子"];
const list = document.getElementById("fruitList");

fruits.forEach(fruit => {
    const li = document.createElement("li"); // 创建 li 元素
    li.textContent = fruit; // 设置文本内容
    list.appendChild(li); // 添加到 ul 中
});

总结

JavaScript Array [] 是处理数据集合的核心工具，掌握其基本操作和高级技巧能显著提升开发效率。