一篇文章，带你搞懂大厂如何考察你对Array的理解

引言

在一切的源头，我们要了解，数组是什么,在JavaScript 中，数组是一种动态、灵活的类数组结构 ，继承自 Object，具有自动扩容、索引访问、元素类型不限等特点。它通过 length 属性跟踪长度，支持多种遍历方式（如 for、forEach、for...of）和丰富的操作方法（如 map、filter、reduce）。数组本质是对象，但以数字索引作为键，支持快速访问和修改。

---

如何创建数组

有俩种方法：new Array和[]

使用new Array:

const arr = new Array(5);
console.log(arr); 
console.log(arr.length); 

创建的是一个长度为 5 的数组，但没有实际的元素 。这些位置是"空槽"（empty slots），不是 undefined。for...in 无法遍历这些空槽 。 在 V8 引擎内部，这样的数组被称为 Holey Elements，性能上不如"完整数组";

这里可以使用fill方法:

new Array(5).fill(undefined)：创建一个"真实数组"

const arr = new Array(5).fill(undefined);
console.log(arr);

• 每个位置都填上了 undefined，是一个真实可遍历的数组 ， for...in、forEach 等都可以正常访问每个元素。

使用数组字面量[]：

const arr = ['1', '2', '3']

这种方式简洁明了，不过不灵活

---

数组的静态方法

1. Array.of()

Array.of(1, 2, 3); // [1, 2, 3]
Array.of(3);        // [3]

• 用于创建数组，参数会直接作为数组元素。
• 与 new Array() 不同：Array.of(3) 会创建 [3]，而 new Array(3) 会创建 [empty × 3]。

2. Array.from()

Array.from('hello'); // ['h', 'e', 'l', 'l', 'o']
Array.from({ length: 3 }, (_, i) => i); // [0, 1, 2]

• 将类数组对象（如 arguments、DOM NodeList）或可迭代对象（如字符串）转换为数组。
• 支持传入 map 函数，进行转换处理。

3.Array.fill(上面提到过的)

const arr = new Array(6);
arr.fill(1);//[1,1,1,1,1,1]

• 填充数组，将数组中的元素全部填充为指定值
• 无论有没有值，fill方法都会将之前的值覆盖。

如何遍历数组

1. for 循环（传统方式）

for (let i = 0; i < arr.length; i++) {
  console.log(arr[i]);
}

• 性能好，适合大数据量处理。
• 可读性一般，不能直接访问索引和值。

2. while 循环（较少使用）

let i = 0;
while (i < arr.length) {
  console.log(arr[i]);
  i++;
}

• 控制更灵活，但使用较少。

3. forEach（简洁易读）

arr.forEach((item, index) => {
  console.log(item, index);
});

• 语法简洁，适合只遍历不中断的场景。
• 不能 break、return、continue。

4. map, filter, find, some, every（函数式编程）

arr.map(item => item * 2); // 返回新数组
arr.filter(item => item > 3); // 返回符合条件的元素
arr.find(item => item > 3); // 返回第一个符合条件的元素
arr.some(item => item > 3); // 有一个满足就返回 true
arr.every(item => item > 3); // 所有都满足才返回 true

• 这些方法不会修改原数组，返回新数组或布尔值。
• 更适合函数式编程风格，代码更简洁。

Tips:这里的map遍历数组的方法，若没有指定key元素，则默认按索引值一一对应创建新数组。

5. for...of（推荐方式）

for (const item of arr) {
  console.log(item);
}

• 语法简洁，语义清晰。
• 支持 break、continue。
• 不返回索引 ，如需索引可结合 entries()

几个重要的API

1. hasOwnProperty(key)

const arr = ['a', 'b', 'c'];
console.log(arr.hasOwnProperty(1)); // true
console.log(arr.hasOwnProperty(3)); // false

• 判断数组是否拥有某个索引（键）。
• 注意：数组本质是对象，所以可以使用 hasOwnProperty。
• 适用于判断某个位置是否有元素（不是空槽）。

2. reduce()

const sum = [1, 2, 3].reduce((acc, curr) => acc + curr, 0);
console.log(sum); // 6

• 用于累加 、聚合操作。
• 参数：(累加器, 当前值, 当前索引, 原数组)。
• 可以实现很多复杂逻辑，如扁平化、统计、分组等。
• reduce() 方法 ：这是数组的一个高阶函数，用于将数组元素累积为单个值。它接受两个参数：第一个参数是一个回调函数，用于定义累积逻辑。第二个参数是初始值

示例：数组扁平化

const flat = [[1, 2], [3, 4]].reduce((acc, curr) => [...acc, ...curr], []);
console.log(flat); // [1, 2, 3, 4]

3. entries()

const arr = ['a', 'b', 'c'];
const iterator = arr.entries();
console.log([...iterator]); // [[0, 'a'], [1, 'b'], [2, 'c']]

• 返回一个迭代器，每次迭代返回一个数组 [index, value]。
• 可用于 for...of 遍历索引和值。

示例：

for (const [index, value] of arr.entries()) {
  console.log(index, value);

结语

JavaScript 中的数组是一种灵活且功能强大的数据结构，兼具对象的特性与类数组的访问方式。它不仅支持动态扩容、多种创建方式，还提供了丰富的遍历与操作方法，如 map、filter、reduce 等，极大提升了开发效率。同时，数组的一些特性，如空槽、索引机制、length 属性等，也要求开发者对其底层机制有一定理解，以避免潜在的陷阱。掌握数组的使用与原理，是深入学习 JavaScript 的关键一步。通过合理选择创建和操作方式，可以更高效地处理数据，提升代码质量。数组虽小，功能却强大，值得我们深入学习与灵活运用。