字
字节笔记本
2026年2月22日
ES6 新增的 Array.from 方法
本文详细介绍 ES6 新增的 Array.from 方法，包括将类数组对象转为真正数组、处理 Set 结构数据以及字符串转数组等常见用法。
一、将类数组对象转为真正的数组
具有 length 属性的对象就是类数组对象
javascript
var arrayLike = { '0': 'a', '1': 'b', '2': 'c', length: 3 };
// ES5的写法
var arr1 = [].slice.call(arrayLike); // ['a', 'b', 'c']
// ES6的写法
var arr2 = Array.from(arrayLike); // ['a', 'b', 'c']去掉 length 的情况
javascript
var arrayLike = { '0': 'a', '1': 'b', '2': 'c', };
var arr = Array.from(arrayLike); // []对象的属性名为字符串型
javascript
var arrayLike = { 'a': 'a', 'b': 'b', 'c': 'c', length: 3 };
var arr = Array.from(arrayLike); // [undefined, undefined, undefined]长度为4，元素均为 undefined 的数组。由此可见将一个类数组对象转换为一个真正的数组，必须具备以下条件：
- 该类数组对象必须具有
length属性，用于指定数组的长度。如果没有length属性，那么转换后的数组是一个空数组 - 该类数组对象的属性名必须为数值型或字符串型的数字
- 该类数组对象的属性名可以加引号，也可以不加引号
二、SET 结构数据
javascript
var arr = [11, 12, 14, 104, 105]
var set = new Set(arr)
console.log(Array.from(set)) // [11, 12, 14, 104, 105]Array.from 还可以接受第二个参数，作用类似于数组的 map 方法，用来对每个元素进行处理，将处理后的值放入返回的数组：
javascript
var arr = [11, 12, 14, 104, 105]
var set = new Set(arr)
console.log(Array.from(set, item => item + 1)) // [12, 13, 15, 105, 106]三、将字符串转换为数组
javascript
var str = 'hello world!';
console.log(Array.from(str)) // ["h", "e", "l", "l", "o", " ", "w", "o", "r", "l", "d", "!"]分享: