javascript数组是前端开发中处理有序数据的核心工具，它通过数字索引存储元素，支持丰富的增删改查操作，而普通对象则用于存储键值对形式的结构化数据；在处理大量数据时，unshift、shift和splice等导致元素位移的操作可能引发性能问题，可通过优先使用push/pop、合并高阶函数调用或改用for循环来优化；数组还可模拟栈（用push/pop实现lifo）和队列（用push/shift实现fifo），并在异步编程中用于任务队列或结果收集，适用于需顺序处理的场景。
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
对象、DOMNodeList
）或可迭代对象（比如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]
- 通过索引：数组元素通过从0开始的索引访问。
-
遍历数组：
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);
