首页 > 文章 > 前端

JS数组创建与使用技巧解析

时间：2025-08-17 19:48:32 439浏览收藏

掌握JS数组，玩转前端数据！本文**《JS数组创建与操作全解析》**深入探讨了JavaScript数组的核心概念与实用技巧，助你提升前端开发效率。文章详细讲解了数组字面量、`new Array()`、`Array.of()`、`Array.from()`等多种创建方式，并着重推荐简洁直观的字面量法。同时，全面梳理了`push`、`pop`、`splice`等增删改查操作，以及`forEach`、`map`、`filter`等常用遍历方法。此外，还对比了数组与普通对象的区别，阐述了选择数组的时机，并针对大数据处理中可能出现的性能问题，提供了优化建议，如避免频繁使用`unshift`和`shift`，以及合并高阶函数调用等。最后，揭示了数组在异步编程中模拟栈和队列的应用，为前端开发者提供了一份全面而实用的数组操作指南。

JavaScript数组是前端开发中处理有序数据的核心工具，它通过数字索引存储元素，支持丰富的增删改查操作，而普通对象则用于存储键值对形式的结构化数据；在处理大量数据时，unshift、shift和splice等导致元素位移的操作可能引发性能问题，可通过优先使用push/pop、合并高阶函数调用或改用for循环来优化；数组还可模拟栈（用push/pop实现LIFO）和队列（用push/shift实现FIFO），并在异步编程中用于任务队列或结果收集，适用于需顺序处理的场景。

JS数组如何创建和操作

JavaScript数组是前端开发中非常核心的数据结构，它本质上是一种特殊的对象，用于存储有序的元素集合。理解它的创建和操作方式，是高效处理数据的基础。可以说，无论你是在处理用户列表、商品信息，还是复杂的图表数据，数组都无处不在，掌握它能让你在数据处理上如鱼得水。

解决方案

创建JavaScript数组的方法有好几种，我个人最常用也最推荐的是字面量方式，因为它简洁直观，出错的概率也小。

数组的创建：

数组字面量 []： 这是最常见也是我最推荐的方式。
```
const myArray = [1, 2, 3, 'hello', true]; // 包含不同类型元素的数组
const emptyArray = []; // 空数组
```
这种方式非常直观，一眼就能看出它是一个数组，并且包含了哪些元素。
new Array() 构造函数：
```
const arr1 = new Array(); // 创建一个空数组，等同于 []
const arr2 = new Array(5); // 创建一个长度为5的空数组，元素都是 undefined
const arr3 = new Array(1, 2, 3); // 创建包含指定元素的数组，等同于 [1, 2, 3]
```
这里有个小陷阱，new Array(5) 创建的是一个有5个空槽位的数组，而不是包含数字5的数组。如果你想创建只包含一个数字5的数组，你得写成 [5] 或者 new Array(5) 后面再 push(5)，但那样就多此一举了。所以，我一般不太喜欢用 new Array() 来创建已知元素的数组，除非是需要预先指定长度的场景。
Array.of()：
```
const arr4 = Array.of(1, 2, 3, 5); // [1, 2, 3, 5]
const arr5 = Array.of(7); // [7]
```
Array.of() 解决了 new Array() 在处理单个数字参数时的歧义，无论参数是一个还是多个，它都会把这些参数作为数组的元素。我觉得这个方法挺有意思，但在实际项目中，字面量还是我的首选。
Array.from()：
```
const str = "hello";
const arrFromStr = Array.from(str); // ['h', 'e', 'l', 'l', 'o']

const set = new Set([1, 2, 3]);
const arrFromSet = Array.from(set); // [1, 2, 3]

// 结合 map 函数
const numbers = [1, 2, 3];
const doubledNumbers = Array.from(numbers, x => x * 2); // [2, 4, 6]
```
Array.from() 是一个非常强大的方法，它可以从类数组对象（比如 arguments 对象、DOM NodeList）或可迭代对象（比如 Set, Map, String）创建一个新的数组。当你需要把一个非数组的数据结构转换成数组，并且可能需要同时进行一些转换时，它就派上用场了。

数组的常见操作：

数组的操作方法非常丰富，覆盖了增、删、改、查、遍历等各个方面。

增加元素：
- push()：在数组末尾添加一个或多个元素，返回新数组的长度。
```
let arr = [1, 2];
arr.push(3, 4); // arr 现在是 [1, 2, 3, 4]
```
- unshift()：在数组开头添加一个或多个元素，返回新数组的长度。
```
let arr = [3, 4];
arr.unshift(1, 2); // arr 现在是 [1, 2, 3, 4]
```
  需要注意的是，unshift() 会改变所有元素的索引，在大数组上性能开销可能比较大。

删除元素：

pop()：删除并返回数组的最后一个元素。

let arr = [1, 2, 3];
let last = arr.pop(); // last 是 3, arr 现在是 [1, 2]

shift()：删除并返回数组的第一个元素。
```
let arr = [1, 2, 3];
let first = arr.shift(); // first 是 1, arr 现在是 [2, 3]
```
和 unshift() 类似，shift() 也会引起索引变化，性能问题需要留意。

splice(start, deleteCount, ...items)：这是一个非常灵活且强大的方法，可以删除、替换或添加元素。

let arr = [1, 2, 3, 4, 5];
arr.splice(2, 1); // 从索引2开始删除1个元素，arr 现在是 [1, 2, 4, 5]
arr.splice(1, 0, 'a', 'b'); // 在索引1处添加'a', 'b'，不删除任何元素，arr 现在是 [1, 'a', 'b', 2, 4, 5]
arr.splice(2, 2, 'x', 'y'); // 从索引2开始删除2个元素，然后添加'x', 'y'，arr 现在是 [1, 'a', 'x', 'y', 4, 5]

splice() 真的很万能，但参数多的时候也容易搞混，我有时候会先在控制台试一下。

访问和修改元素：

通过索引：数组元素通过从0开始的索引访问。

let arr = ['apple', 'banana', 'orange'];
console.log(arr[0]); // 'apple'
arr[1] = 'grape'; // arr 现在是 ['apple', 'grape', 'orange']

length 属性：获取或设置数组的长度。

let arr = [1, 2, 3];
console.log(arr.length); // 3
arr.length = 2; // arr 现在是 [1, 2]
arr.length = 5; // arr 现在是 [1, 2, undefined, undefined, undefined]

遍历数组：
- forEach()：遍历数组，对每个元素执行回调函数，没有返回值。
```
let arr = [1, 2, 3];
arr.forEach(item => console.log(item * 2)); // 输出 2, 4, 6
```
- map()：遍历数组，对每个元素执行回调函数，并返回一个新数组，新数组的元素是回调函数的返回值。
```
let arr = [1, 2, 3];
let newArr = arr.map(item => item * 2); // newArr 是 [2, 4, 6]
```
  map() 非常适合做数据转换。
- filter()：遍历数组，对每个元素执行回调函数，返回一个新数组，新数组包含所有回调函数返回 true 的元素。
```
let arr = [1, 2, 3, 4, 5];
let evenNumbers = arr.filter(item => item % 2 === 0); // evenNumbers 是 [2, 4]
```
  数据筛选的利器。
- reduce() / reduceRight()：将数组元素“归约”成一个单一的值。
```
let arr = [1, 2, 3, 4];
let sum = arr.reduce((acc, current) => acc + current, 0); // sum 是 10
```
  这个方法非常强大，可以实现很多复杂的聚合操作。
- for...of 循环：ES6 引入的遍历方式，更简洁，可以直接获取元素值。
```
let arr = ['a', 'b', 'c'];
for (const item of arr) {
    console.log(item); // 'a', 'b', 'c'
}
```
  我个人在不需要索引时，非常喜欢用 for...of。
查找元素：
- indexOf() / lastIndexOf()：查找元素在数组中的第一个/最后一个索引，找不到返回 -1。
- includes()：判断数组是否包含某个元素，返回布尔值。
- find() / findIndex()：查找第一个满足条件的元素/其索引。
其他常用方法：
- concat()：连接两个或多个数组，返回一个新数组。
- slice(start, end)：截取数组的一部分，返回一个新数组，不改变原数组。
- join(separator)：将数组的所有元素连接成一个字符串。
- reverse()：反转数组元素顺序，改变原数组。
- sort(compareFunction)：对数组元素进行排序，改变原数组。排序默认按字符串Unicode编码，所以数字排序需要提供比较函数。

JavaScript数组与普通对象有什么区别，何时选择使用数组？

这问题问得挺好，很多人初学JS时会混淆数组和普通对象。最核心的区别在于它们的结构和用途。

数组是有序的集合，它的元素通过数字索引来访问，索引从0开始递增。你可以把它想象成一排整齐的抽屉，每个抽屉都有一个编号，里面放着一个东西。数组的主要目的是存储列表型数据，比如一系列用户ID、一个月的销售额、一堆待办事项。它的内部实现通常会优化对连续内存区域的访问，使得按索引查找和迭代非常高效。

而普通对象（或称作字典、哈希表）是无序的键值对集合，它的键是字符串（或者Symbol），值可以是任何数据类型。你可以把它想象成一个档案柜，每个文件都有一个名字（键），里面装着相关的信息（值）。对象的主要目的是存储结构化数据，表示一个实体的属性，比如一个用户的姓名、年龄、地址等。

何时选择使用数组？

我通常会根据以下几个点来决定：

数据是否有序且同质性高？ 如果你有一组数据，它们的顺序很重要，或者它们都属于同一类型（比如都是数字、都是字符串），那么数组是首选。例如，一个商品列表、一个用户评论流。
需要频繁进行增删改查操作，且这些操作基于位置或顺序？ 比如，你需要删除列表中的第N个元素，或者在列表末尾添加新项，数组的 push, pop, splice 等方法非常适合。
需要遍历整个集合进行处理？ 数组提供了丰富的迭代方法（forEach, map, filter, reduce），这些方法专门为处理列表数据而设计，用起来非常方便。

何时选择使用对象？

反之，如果你的数据：

是结构化的，有明确的属性名？ 比如，你需要表示一个人的信息：{ name: '张三', age: 30, city: '北京' }。
需要通过有意义的键来访问数据？ 你想通过 user.name 而不是 user[0] 来获取姓名。
数据的顺序不重要？ 对象的属性顺序在ES2015后对于字符串键是保持插入顺序的，但从概念上讲，它不是一个“有序”的数据结构，你不会依赖它的索引。

说实话，有时候数组和对象也会混用，比如一个数组里装着多个对象：[{ id: 1, name: 'A' }, { id: 2, name: 'B' }]，这在前端数据处理中太常见了，它完美结合了数组的有序性和对象的结构化能力。

在处理大量数据时，JavaScript数组的哪些操作可能影响性能，如何优化？

处理大量数据时，JavaScript数组的性能确实是个需要考虑的问题。有些操作在小数组上几乎无感，但数据量一上去，就可能成为瓶颈。

我个人在实际开发中，最常遇到性能问题的操作主要有以下几种：

unshift() 和 shift()： 这两个方法在数组头部添加或删除元素。它们的问题在于，每次操作都会导致数组中所有后续元素的索引发生变化。这意味着JavaScript引擎需要重新索引（或者说，移动）数组中所有现存的元素。如果数组有10000个元素，你 unshift 一个新元素，那么这10000个元素都需要被“挪动”一下，这个开销是线性的，也就是O(n)复杂度。
- 优化建议：
  - 如果可以，尽量使用 push() 和 pop() 在数组尾部操作，它们是O(1)复杂度，性能最好。
  - 如果必须在头部操作，并且数据量巨大且操作频繁，可以考虑使用双端队列（deque）的数据结构，或者用两个数组模拟一个队列，一个用于头部，一个用于尾部，或者在某些特定场景下，用对象来模拟稀疏数组。不过，对于大多数前端应用，shift/unshift 的性能问题只有在极端情况下才会显现。
splice() 的大量删除或插入：splice() 方法非常强大，但也继承了 shift/unshift 的部分性能问题。当你在数组中间进行大量元素的删除或插入时，同样会导致后续元素的重新索引。比如，在一个10万个元素的数组中间删除5万个元素，那性能消耗是巨大的。
- 优化建议：
  - 尽量避免在大型数组的中间频繁使用 splice 进行大量元素的增删。
  - 如果需要删除多个元素，并且这些元素是连续的，splice 仍然是合适的。
  - 如果是需要移除不符合条件的元素，可以考虑使用 filter() 方法。filter() 会创建一个新数组，虽然也是遍历，但它避免了原地修改带来的索引移动开销。
  - 如果需要替换或更新大量元素，可以考虑先构建一个新数组，然后替换旧数组，而不是原地修改。
频繁的 map(), filter(), reduce() 等高阶函数链式调用： 这些方法非常方便，可读性也很好。但它们都有一个共同点：每次调用都会遍历整个数组（或部分数组），并且 map() 和 filter() 还会创建新的数组。如果在一个大型数组上进行多次链式调用，例如 arr.filter(...).map(...).reduce(...)，那么数组会被遍历多次，并且创建多个中间数组，这会增加内存开销和CPU时间。
- 优化建议：
  - 合并操作： 尝试将多个操作合并到一个 reduce() 调用中，这样只需要遍历数组一次。
```
// 原始链式调用
const result = largeArray.filter(item => item.isActive)
                         .map(item => item.value * 2)
                         .reduce((sum, val) => sum + val, 0);

// 优化：使用 reduce 合并
const optimizedResult = largeArray.reduce((acc, item) => {
    if (item.isActive) {
        acc += item.value * 2;
    }
    return acc;
}, 0);
```
  - 使用 for...of 或传统 for 循环： 在对性能要求极高的场景下，传统的 for 循环或 ES6 的 for...of 循环通常比高阶函数更快，因为它们避免了函数调用的开销和中间数组的创建。
```
let sum = 0;
for (const item of largeArray) {
    if (item.isActive) {
        sum += item.value * 2;
    }
}
```
    我个人觉得，对于绝大多数日常业务，高阶函数带来的可读性提升远大于其微小的性能损失，所以除非真的遇到性能瓶颈，否则我不会盲目地去用 for 循环替换它们。
不当的 sort() 使用：sort() 方法会原地修改数组，并且其默认的排序是基于字符串的Unicode编码，这在排序数字时会导致意想不到的结果（比如 [1, 10, 2].sort() 可能会得到 [1, 10, 2] 或 [1, 2, 10]，取决于JS引擎实现，但通常不是你想要的数值排序）。此外，sort() 的性能通常是O(n log n)，对于超大数组，仍然需要注意。
- 优化建议：
  - 提供比较函数： 始终为数字排序提供一个比较函数：arr.sort((a, b) => a - b)。
  - 避免不必要的排序： 如果数据已经有序，或者只需要部分排序，不要对整个数组进行排序。
  - 考虑其他排序算法： 在极特殊且性能要求严苛的场景，可能需要手写或引入更适合特定数据分布的排序算法。

总的来说，优化数组操作性能的关键在于：减少不必要的遍历、避免频繁的元素移动（尤其是数组头部操作）、以及合理利用不同方法的特性。 实践中，通常是先写出可读性好的代码，只有在性能分析工具（如浏览器开发者工具的 Performance 面板）显示数组操作确实是瓶颈时，才考虑进行优化。

JavaScript数组在异步编程或特定数据结构（如栈、队列）中如何应用？

JavaScript数组的灵活性使得它不仅仅是一个简单的数据容器，它还能在更复杂的场景中发挥作用，尤其是在异步编程和模拟特定数据结构方面。

1. 模拟栈（Stack）和队列（Queue）：

数组的 push, pop, shift, unshift 方法，简直就是为实现栈和队列量身定制的。

栈 (Stack) - 后进先出 (LIFO)： 栈的特点是最后进入的元素最先出来。这完美对应了数组的 push() 和 pop() 方法。

入栈 (Push)： 使用 push() 将元素添加到数组末尾。

出栈 (Pop)： 使用 pop() 从数组末尾移除元素。

class MyStack {
constructor() {
    this.items = [];
}

push(element) {
    this.items.push(element);
}

pop() {
    if (this.isEmpty()) {
        return "Stack is empty";
    }
    return this.items.pop();
}

peek() { // 查看栈顶元素
    if (this.isEmpty()) {
        return "Stack is empty";
    }
    return this.items[this.items.length - 1];
}

isEmpty() {
    return this.items.length === 0;
}

size() {
    return this.items.length;
}
}

const stack = new MyStack(); stack.push(10);

今天关于《JS数组创建与使用技巧解析》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！