JS 伪数组转数组：ES5 与 ES6 Array.from 方法详解

前言

在 JS 开发中，伪数组（也称为类数组）十分常见，这可能会让 JS 初学者感到困惑。

本文将深入解析伪数组的定义，并分别演示在 ES5 和 ES6 环境中如何将伪数组转换为真正的数组。

什么是伪数组？

伪数组的核心特征是它是一个对象，且具备 length 属性。

例如：

let arrayLike = {
  "0": "a",
  "1": "b",
  "2": "c",
  "length": 3
}

上述 arrayLike 对象拥有 length 属性，其 key 为有序序列，支持遍历和长度查询，但无法调用数组方法（如 push、pop 等）。

在 ES6 推出前，arguments 是另一种常见的伪数组形式。

arguments 看似数组，却缺失数组方法。

例如执行 arguments.push(1) 会直接报错。

除 arguments 外，NodeList 表示节点集合也是伪数组，如通过 document.querySelectorAll 获取的节点集合。

转换

将伪数组转为真数组有多种方式，我们从 ES5 开始介绍。

ES5 的做法

在 ES6 出现前，开发者通常采用以下方法转换。

方法1

// 通过 makeArray 方法，把数组转成伪数组
function makeArray(arrayLike) {
  let result = [];
  for (let i = 0, len = arrayLike.length; i < len; i++) {
    result.push(arrayLike[i]);
  }
  return result;
}
function doSomething () {
  let args = makeArray(arguments);
  console.log(args);
}
doSomething(1, 2, 3);
// 输出: [1, 2, 3]

此法有效但代码冗余。

方法2

function doSomething () {
  let args = Array.prototype.slice.call(arguments);
  console.log(args);
}
doSomething(1, 2, 3);

// 输出: [1, 2, 3]

功能同方法1，代码更简，但意图不够直观。

ES6的做法

ES6 引入的 Array.from 方法完美解决了上述问题。

function doSomething () {
  let args = Array.from(arguments);
  console.log(args);
}
doSomething('一', '二', '三');

// 输出: ['一', '二', '三']

Array.from 的核心功能是将伪数组和可遍历对象转为数组。

之所以强调“主要作用”，是因为 Array.from 额外提供了两个可传递的参数。这使得它可以衍生出多种不同的应用场景。

Array.from 的第二个参数是类似 map 遍历的函数，用于遍历处理。

Array.from 的第三个参数接收 this 对象，用于指定 this 指向。

第三个参数的用法（不常用）

let helper = {
  diff: 1,
  add (value) {
    return value + this.diff; // 注意这里有个 this
  }
};
function translate () {
  return Array.from(arguments, helper.add, helper);
}
let numbers = translate(1, 2, 3);
console.log(numbers); // 2, 3, 4

Array.from 其他玩法

创建长度为5的数组，且初始化数组每个元素都是1

let array = Array.from({length: 5}, () => 1)
console.log(array)

// 输出: [1, 1, 1, 1, 1]

第二个参数作用类似 map 遍历，具备相同功能。

把字符串转换成数组

let msg = 'hello';
let msgArr = Array.from(msg);
console.log(msgArr);

// 输出: ["h", "e", "l", "l", "o"]

若传入真数组，Array.from 将返回完全相同的数组。

到此这篇关于JavaScript如何将伪数组转换成数组的文章就介绍到这了,更多相关JS 数组内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！

JavaScript 如何将伪数组转换成数组

前言