JavaScript 如何将伪数组转换成数组
本文解析 JavaScript 中伪数组(类数组)的概念,并详细介绍在 ES5 和 ES6 环境下将其转换为真数组的方法。重点讲解 Array.from 的用法,包括第二个参数映射函数的使用及 this 指向控制,涵盖创建定长数组、字符串转数组等实际场景。
前言
在 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, 4Array.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 数组 内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站!
JS处理含Emoji或中文的字符串转数组乱码问题
2026-11-05 16:12:28
JS怎么使用展开运算符合并对象
2026-11-05 14:42:18
ES6+环境下判断JS对象为空的简洁写法
2026-11-05 12:12:23
怎么通过replacer函数自定义JS中JSON的格式化输出
2026-11-05 11:19:44
JS正则表达式基础:字面量与RegExp构造函数的区别及常用元字符
2026-11-05 11:16:58
