用JS巧妙转换伪数组为真实数组，解锁新用法！

2023-12-23 11:12:23

揭开伪数组的神秘面纱

在JS的世界里，除了传统的数组之外，还存在着一种特殊的存在——伪数组。伪数组的外表和数组非常相似，都有索引值和length属性，但本质上却有所不同。伪数组不能直接使用数组的方法，如forEach()和map()，只能通过转换为真实数组才能使用这些方法。

方法一：巧用forEach()轻松转换伪数组

第一步，首先使用forEach()方法遍历伪数组的每个元素。

const pseudoArray = [1, 2, 3, 4, 5];
const realArray = [];
pseudoArray.forEach((element) => {
  realArray.push(element);
});
console.log(realArray); // [1, 2, 3, 4, 5]

这种方法的原理是，forEach()方法会依次遍历伪数组的每个元素，并将每个元素添加到realArray中，最终形成一个真实数组。

方法二：Array.from()一站式转换伪数组

第二步，使用Array.from()方法将伪数组直接转换为真实数组。

const pseudoArray = [1, 2, 3, 4, 5];
const realArray = Array.from(pseudoArray);
console.log(realArray); // [1, 2, 3, 4, 5]

Array.from()方法可以接受一个伪数组或可迭代对象作为参数，并返回一个新的真实数组。

Bonus：巧用reduce()和Array.isArray()识别真实数组

第一步，使用reduce()方法检查一个变量是否是真实数组。

const isArray = (variable) => {
  return Array.isArray(variable) || variable && typeof variable === 'object' && 'length' in variable && variable.length >= 0 && variable.length === Math.floor(variable.length) && Object.prototype.toString.call(variable) === '[object Array]';
};