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]
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
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()
访问和修改元素：
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
let arr = ['a', 'b', 'c'];
for (const item of arr) {
console.log(item); // 'a', 'b', 'c'
}我个人在不需要索引时，非常喜欢用
for...of
查找元素：
indexOf()
lastIndexOf()
includes()
find()
findIndex()
其他常用方法：
concat()
slice(start, end)
join(separator)
reverse()
sort(compareFunction)
这问题问得挺好，很多人初学JS时会混淆数组和普通对象。最核心的区别在于它们的结构和用途。
数组是有序的集合，它的元素通过数字索引来访问，索引从0开始递增。你可以把它想象成一排整齐的抽屉，每个抽屉都有一个编号，里面放着一个东西。数组的主要目的是存储列表型数据，比如一系列用户ID、一个月的销售额、一堆待办事项。它的内部实现通常会优化对连续内存区域的访问，使得按索引查找和迭代非常高效。
而普通对象（或称作字典、哈希表）是无序的键值对集合，它的键是字符串（或者Symbol），值可以是任何数据类型。你可以把它想象成一个档案柜，每个文件都有一个名字（键），里面装着相关的信息（值）。对象的主要目的是存储结构化数据，表示一个实体的属性，比如一个用户的姓名、年龄、地址等。
何时选择使用数组？
我通常会根据以下几个点来决定：
push
pop
splice
forEach
Map
filter
reduce
何时选择使用对象？
反之，如果你的数据：
{ name: '张三', age: 30, city: '北京' }user.name
user[0]
说实话，有时候数组和对象也会混用，比如一个数组里装着多个对象：
[{ id: 1, name: 'A' }, { id: 2, name: 'B' }]处理大量数据时，JavaScript数组的性能确实是个需要考虑的问题。有些操作在小数组上几乎无感，但数据量一上去，就可能成为瓶颈。
我个人在实际开发中，最常遇到性能问题的操作主要有以下几种：
unshift()
shift()
unshift
push()
pop()
shift
unshift
splice()
splice()
shift
unshift
splice
splice
filter()
filter()
频繁的 map()
filter()
reduce()
map()
filter()
arr.filter(...).map(...).reduce(...)
优化建议：
合并操作： 尝试将多个操作合并到一个
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
for...of
let sum = 0;
for (const item of largeArray) {
if (item.isActive) {
sum += item.value * 2;
}
}我个人觉得，对于绝大多数日常业务，高阶函数带来的可读性提升远大于其微小的性能损失，所以除非真的遇到性能瓶颈，否则我不会盲目地去用
for
不当的 sort()
sort()
[1, 10, 2].sort()
[1, 10, 2]
[1, 2, 10]
sort()
arr.sort((a, b) => a - b)
总的来说，优化数组操作性能的关键在于：减少不必要的遍历、避免频繁的元素移动（尤其是数组头部操作）、以及合理利用不同方法的特性。 实践中，通常是先写出可读性好的代码，只有在性能分析工具（如浏览器开发者工具的 Performance 面板）显示数组操作确实是瓶颈时，才考虑进行优化。
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数组如何创建和操作的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
746
收藏
