重新认识JS伪数组

你好同学，我是沐爸，欢迎点赞、收藏和关注！今天一起重新认识下伪数组吧！个人知乎

什么是伪数组？

在JavaScript中，伪数组（“pseudo-array”）是指那些具有数字索引和length属性的对象，但它们不是真正的数组。常见的伪数组对象包括NodeList（DOM元素集合）、arguments（函数参数列表）等。伪数组有时也被成为“类数组”。

创建一个手写的伪数组对象：

let arrayLike = {
    0: 'Apple',
    1: 'Banana',
    2: 'Cherry',
    length: 3
};

// 打印伪数组对象
console.log(arrayLike);

// 打印伪数组对象的length属性
console.log('Length:', arrayLike.length);

// 访问伪数组对象的元素
console.log(arrayLike[0]); // 输出: Apple
console.log(arrayLike[1]); // 输出: Banana

如何遍历伪数组？

要遍历伪数组，可以使用以下几种方法：

1. 使用 **for** 循环

let divs = document.querySelectorAll('div'); // 假设是一个NodeList
for (let i = 0; i < divs.length; i++) {
  console.log(divs[i]);
}

2. 使用 **for...of** 循环

for (let item of divs) {
  console.log(item);
}

3. 使用 **Array.from** + 数组遍历

let arr = Array.from(divs);
arr.forEach(item => {
  console.log(item);
});

4. 使用 **while** 循环

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

注意：

• forEach方法可以直接遍历NodeList，但不能遍历arguments。
• for...in 循环可以遍历对象的所有可枚举属性，包括原型链上的属性，因此不推荐用于遍历伪数组。
  

如何将伪数组转为真数组？

1.使用 **for** 循环：

let realArray = [];
for (let i = 0; i < arguments.length; i++) {
  realArray.push(arguments[i]);
}

2.使用 **spread** 操作符（ES6+）：

let realArray = [...arguments];

3.使用 **Array.from()** （ES6+）：

let realArray = Array.from(arguments);

4.借助数组的 **slice()** 方法：

let realArray = Array.prototype.slice.call(arguments);

5.借助数组的 **map()** 方法：

let realArray = Array.prototype.map.call(arguments, function(item) {
  return item;
});

6.借助数组的 **map()** 方法：

let realArray = []
Array.prototype.map.call(arguments, function(item) {
  realArray.push(item)
});

遍历伪数组和将伪数组转为真数组，都推荐使用 ES6 的新语法。为啥？方便啊😁