文章目录
一、Array.from
Array.from
方法用于将两类对象转为真正的数组:类似数组的对象(array-like object)和可遍历(iterable)的对象(包括 ES6 新增的数据结构 Set 和 Map)。
1、转换类似数组的对象
所谓类似数组的对象,本质特征只有一点,即必须有 length
属性。 因此,任何有 length 属性的对象,都可以通过 Array.from 方法转为数组
Array.from({
length: 3 }); // [ undefined, undefined, undefined ]
// 返回了一个具有三个成员的数组,每个位置的值都是 undefined
下面是一个类似数组的对象,Array.from 将它转为真正的数组。
let arrayLike = {
'0': 'a',
'1': 'b',
'2': 'c',
length: 3
};
// ES5的写法
var arr1 = [].slice.call(arrayLike); // ['a', 'b', 'c']
// ES6的写法
let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']
实际应用中,常见的类似数组的对象是 DOM 操作返回的 NodeList
集合,以及函数内部的 arguments
对象。Array.from
都可以将它们转为真正的数组。
// NodeList对象
let ps = document.querySelectorAll('p');
// querySelectorAll 方法返回的是一个类似数组的对象,可以将这个对象转为真正的数组,再使用 filter 方法。
Array.from(ps).filter(p => {
return p.textContent.length > 10;
});
// arguments对象
function foo() {
var args = Array.from(arguments);
// ...
}
2、转换可遍历(iterable)的对象
只要是部署了 Iterator 接口的数据结构,Array.from
都能将其转为数组。 例如字符串和 Set 结构都具有 Iterator 接口,因此可以被 Array.from转为真正的数组。
Array.from('hello')
// ['h', 'e', 'l', 'l', 'o']
let namesSet = new Set(['a', 'b'])
Array.from(namesSet) // ['a', 'b']
如果参数是一个真正的数组,Array.from 会返回一个一模一样的新数组。
Array.from([1, 2, 3]) // [1, 2, 3]
注意:扩展运算符( ...
)也可以将某些数据结构转为数组。
// arguments对象
function foo() {
const args = [...arguments];
}
// NodeList对象
[...document.querySelectorAll('div')]
扩展运算符背后调用的是遍历器接口( Symbol.iterator
),如果一个对象没有部署这个接口,就无法转换。
有关扩展运算符的更多内容,请查看这篇博客:JS中的扩展运算符(…)和剩余运算符(…)
3、Array.from 的其它参数
Array.from
的第二个参数是一个函数,可选,作用类似于数组的 map
方法,用来对每个元素进行处理,将处理后的值放入返回的数组。
Array.from(arrayLike, x => x * x);
// 等同于
Array.from(arrayLike).map(x => x * x);
Array.from([1, 2, 3]