JavaScript Array：全面介绍与实用技巧 – wiki基地

作者： /

JavaScript Array：全面介绍与实用技巧

JavaScript 数组是前端开发中不可或缺的数据结构，它允许你在一个变量中存储多个值，并提供了一系列强大的方法来操作这些值。无论是处理用户输入、管理数据列表还是构建复杂的用户界面，数组都扮演着核心角色。本文将带你全面了解 JavaScript 数组的各个方面，并分享一些实用的技巧。

一、什么是 JavaScript 数组？

在 JavaScript 中，数组是一种特殊的对象，用于存储有序的集合。与许多其他语言不同，JavaScript 数组可以包含不同数据类型的元素（例如，数字、字符串、布尔值、对象甚至是其他数组）。数组的长度是动态的，可以根据需要自动增长或缩小。

基本特性：

  • 有序集合： 数组中的元素按照索引（从 0 开始的数字）进行排序。
  • 异构性： 可以存储任意数据类型的元素。
  • 动态大小： 数组的长度可以随时改变。
  • 零基索引： 第一个元素的索引是 0，第二个是 1，依此类推。
  • 对象本质： 数组是 Array 构造函数的实例，继承了 Array.prototype 上的方法。

创建数组：

主要有两种方式创建数组：

  1. 数组字面量（推荐）：
    javascript
    const fruits = ["Apple", "Banana", "Cherry"];
    const numbers = [1, 2, 3, 4, 5];
    const mixed = [1, "hello", true, { name: "Alice" }];
    const emptyArray = [];

  2. Array 构造函数：
    javascript
    const fruits = new Array("Apple", "Banana", "Cherry");
    const numbers = new Array(1, 2, 3, 4, 5);
    const emptyArray = new Array(); // 创建一个空数组
    const sizeArray = new Array(5); // 创建一个包含 5 个 empty slots 的数组，而不是元素 5
    注意： 当 new Array() 只有一个数字参数时，它会创建一个指定长度但没有实际元素的数组（空槽）。这在某些情况下可能导致意外行为，因此通常推荐使用数组字面量。

二、访问和修改数组元素

通过索引可以轻松访问和修改数组中的元素。

访问元素：
javascript
const fruits = ["Apple", "Banana", "Cherry"];
console.log(fruits[0]); // Output: "Apple"
console.log(fruits[1]); // Output: "Banana"
console.log(fruits[fruits.length - 1]); // 访问最后一个元素

修改元素：
javascript
const fruits = ["Apple", "Banana", "Cherry"];
fruits[1] = "Orange";
console.log(fruits); // Output: ["Apple", "Orange", "Cherry"]

获取数组长度：
length 属性返回数组中元素的数量。
javascript
const fruits = ["Apple", "Banana", "Cherry"];
console.log(fruits.length); // Output: 3
注意： 改变 length 属性会截断或扩展数组：
“`javascript
let arr = [1, 2, 3, 4, 5];
arr.length = 3; // 截断数组
console.log(arr); // Output: [1, 2, 3]

arr.length = 5; // 扩展数组，新添加的元素是 empty slots
console.log(arr); // Output: [1, 2, 3, <2 empty items>]
“`

三、常用的数组方法

JavaScript 提供了大量内置数组方法，极大地简化了对数组的操作。

1. 添加/删除元素

  • push()： 在数组末尾添加一个或多个元素，返回新长度。
    javascript
    const arr = [1, 2];
    arr.push(3, 4); // [1, 2, 3, 4]
  • pop()： 删除数组最后一个元素，返回被删除的元素。
    javascript
    const arr = [1, 2, 3];
    const last = arr.pop(); // last = 3, arr = [1, 2]
  • unshift()： 在数组开头添加一个或多个元素，返回新长度。
    javascript
    const arr = [1, 2];
    arr.unshift(0); // [0, 1, 2]
  • shift()： 删除数组第一个元素，返回被删除的元素。
    javascript
    const arr = [1, 2, 3];
    const first = arr.shift(); // first = 1, arr = [2, 3]
  • splice(start, deleteCount, item1, ...)： 通用方法，可用于添加、删除或替换元素。
    • start: 起始索引。
    • deleteCount: 要删除的元素数量。
    • item1, ...: 要添加的元素。
      javascript
      const arr = [1, 2, 3, 4, 5];
      arr.splice(2, 1); // 从索引2开始删除1个元素: [1, 2, 4, 5]
      arr.splice(1, 0, 'a', 'b'); // 从索引1开始删除0个元素，并添加'a', 'b': [1, 'a', 'b', 2, 4, 5]
      arr.splice(2, 1, 'x', 'y'); // 从索引2开始删除1个元素，并添加'x', 'y': [1, 'a', 'x', 'y', 4, 5]

2. 遍历数组

  • for 循环（传统）：
    javascript
    const arr = ['a', 'b', 'c'];
    for (let i = 0; i < arr.length; i++) {
    console.log(arr[i]);
    }
  • for...of 循环（ES6+，推荐遍历值）：
    javascript
    const arr = ['a', 'b', 'c'];
    for (const item of arr) {
    console.log(item);
    }
  • forEach()（ES5+，推荐，不返回新数组）：
    javascript
    const arr = ['a', 'b', 'c'];
    arr.forEach((item, index) => {
    console.log(`Element at index ${index}: ${item}`);
    });

3. 转换和查找

  • map()： 创建一个新数组，其结果是调用对原数组中的每个元素调用一次提供的函数。
    javascript
    const numbers = [1, 2, 3];
    const doubled = numbers.map(num => num * 2); // [2, 4, 6]
  • filter()： 创建一个新数组，其中包含通过提供函数实现的测试的所有元素。
    javascript
    const numbers = [1, 2, 3, 4, 5];
    const evens = numbers.filter(num => num % 2 === 0); // [2, 4]
  • reduce(callback, initialValue)： 对数组中的所有元素执行一个 reducer 函数（你提供），将其结果汇总为单个返回值。
    javascript
    const numbers = [1, 2, 3, 4];
    const sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0); // 10
  • find()： 返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。
    javascript
    const users = [{ id: 1, name: 'A' }, { id: 2, name: 'B' }];
    const user = users.find(u => u.id === 2); // { id: 2, name: 'B' }
  • findIndex()： 返回数组中满足提供的测试函数的第一个元素的索引。否则返回 -1。
    javascript
    const users = [{ id: 1, name: 'A' }, { id: 2, name: 'B' }];
    const index = users.findIndex(u => u.id === 2); // 1
  • includes()（ES7+）： 判断一个数组是否包含一个指定的值，返回 true 或 false。
    javascript
    const arr = [1, 2, 3];
    console.log(arr.includes(2)); // true
    console.log(arr.includes(4)); // false
  • indexOf()： 返回在数组中可以找到一个给定元素的第一个索引，如果不存在，则返回 -1。
    javascript
    const arr = ['a', 'b', 'c', 'a'];
    console.log(arr.indexOf('a')); // 0
    console.log(arr.indexOf('d')); // -1

4. 排序和反转

  • sort()： 对数组的元素进行原地排序，并返回数组。默认按字符串 Unicode 码点排序。
    • 对于数字排序，需要提供比较函数：
      javascript
      const numbers = [3, 1, 4, 1, 5, 9];
      numbers.sort((a, b) => a - b); // 升序: [1, 1, 3, 4, 5, 9]
      numbers.sort((a, b) => b - a); // 降序: [9, 5, 4, 3, 1, 1]
  • reverse()： 反转数组中元素的顺序，原地操作。
    javascript
    const arr = [1, 2, 3];
    arr.reverse(); // [3, 2, 1]

5. 合并和分割

  • concat()： 用于合并两个或多个数组。此方法不会更改现有数组，而是返回一个新数组。
    javascript
    const arr1 = [1, 2];
    const arr2 = [3, 4];
    const newArr = arr1.concat(arr2); // [1, 2, 3, 4]
  • 扩展运算符 (...)（ES6+，推荐合并）：
    javascript
    const arr1 = [1, 2];
    const arr2 = [3, 4];
    const newArr = [...arr1, ...arr2]; // [1, 2, 3, 4]
    const anotherArr = [...arr1, 3, 4, 5]; // [1, 2, 3, 4, 5]
  • slice(start, end)： 返回一个从 start 到 end（不包含 end）的新数组，不会修改原数组。
    javascript
    const arr = [1, 2, 3, 4, 5];
    const subArr = arr.slice(1, 4); // [2, 3, 4]
    const copyArr = arr.slice(); // 创建一个浅拷贝
  • join(separator)： 将数组中的所有元素连接成一个字符串。
    javascript
    const fruits = ["Apple", "Banana", "Cherry"];
    const str = fruits.join(', '); // "Apple, Banana, Cherry"
  • split(separator)（字符串方法，用于将字符串分割成数组）：
    javascript
    const str = "Apple,Banana,Cherry";
    const fruits = str.split(','); // ["Apple", "Banana", "Cherry"]

四、实用技巧与注意事项

  1. 数组的浅拷贝与深拷贝：

    • 浅拷贝： slice(), 扩展运算符 (...), concat() 都会创建数组的浅拷贝。如果数组中包含对象或数组，拷贝的只是引用，修改内部对象会影响原数组。
    • 深拷贝： 对于复杂数据结构（包含嵌套对象或数组），需要使用 JSON 方法 JSON.parse(JSON.stringify(arr)) (有局限性，如不能拷贝函数、undefined 等) 或专业的深拷贝库（如 Lodash 的 cloneDeep）。

  2. 判断是否是数组：

    • Array.isArray()（推荐）：
      javascript
      Array.isArray([1, 2, 3]); // true
      Array.isArray({}); // false
    • instanceof Array：
      javascript
      [1, 2, 3] instanceof Array; // true
      注意： 在多个 iframe 或 Realm 环境中，instanceof 可能不准确，Array.isArray 更可靠。

  3. 类数组对象：
    一些对象（如 arguments 对象或 DOM 集合）看起来像数组，但没有数组的内置方法。你可以将它们转换为真数组：
    javascript
    function sum() {
    // arguments 是类数组对象
    const args = Array.from(arguments); // 使用 Array.from() 转换为真数组
    // 或者使用扩展运算符
    // const args = [...arguments];
    return args.reduce((acc, val) => acc + val, 0);
    }

  4. 优化性能：

    • 避免在循环中修改 length： 在 for 循环中，将 arr.length 缓存到变量中可以避免每次迭代都重新计算长度。
    • 选择合适的方法： forEach, map, filter, reduce 等迭代方法通常比手动 for 循环更具可读性和安全性，并且在许多现代 JavaScript 引擎中经过高度优化。
    • 插入/删除的性能： push() 和 pop() 在数组末尾操作通常比 unshift() 和 shift() 在数组开头操作更高效，因为后者可能导致所有其他元素的索引发生变化。

  5. 解构赋值（ES6+）：
    可以方便地从数组中提取值到独立的变量：
    javascript
    const [first, second, ...rest] = [1, 2, 3, 4, 5];
    console.log(first); // 1
    console.log(second); // 2
    console.log(rest); // [3, 4, 5]

五、总结

JavaScript 数组是数据处理的核心，理解其工作原理和掌握常用方法是每个 JavaScript 开发者必备的技能。通过灵活运用这些方法和技巧，你可以高效、优雅地管理和操作数据，为构建健壮的应用程序奠定基础。不断实践和探索数组的更多高级用法，将使你在前端开发中游刃有余。

滚动至顶部