Array.from
Array.from方法用于将两类对象转为真正的数组:类似数组的对象(array-like object)和可遍历(iterable)的对象(包括ES6新增的数据结构Set和Map)
const arrayLike = { '0': 'apple', '1': 'banana', '2': 'mango', '3': 'grape', length: 4 // 有length 属性 } // es5的写法 const fruitsArr = [].slice.call(arrayLike) // es6的写法 const fruitsArr = Array.from(arrayLike) // ["apple", "banana", "mango", "grape"] // 也可以用对象的展开运算符{...obj}注意这里是对象的展开,而数组的展开是 [...arr] const fruitsArr = {...arrayLike} //{0: "apple", 1: "banana", 2: "mango", 3: "grape", length: 4} // 实际应用中,常见的类似数组的对象是DOM操作返回的NodesList集合(比如:document.childNodes(),document.querySelectorAll()),以及函数内部的arguments对象。 //Array.from都可以将它们转为真正的数组。 // NodesList 对象 let pE = document.querySelectorAll('p') // 使用Array.from()转为真正的数组后,调用数组的方法 forEach() Array.from(pE).forEach((item, index) => console.log(`${index} ${item}`)) // [...document.querySelectorAll('div')] // arguments 对象 function foo() { // 数组的slice方法可以将“类似数组的对象”变成真正的数组 // Array.prototype.slice.call(arguments) // 或 [].slice.call(arguments) var args = Array.from(arguments) // var args = [...arguments] } //上面代码中,querySelectorAll方法返回的是一个类似数组的对象,只有将这个对象转为真正的数组,才能使用forEach方法。 // 只要是部署了Iterator接口的数据结构,Array.from都能将其转为数组 Array.from('hello') // ["h", "e", "l", "l", "o"] let namesSet = new Set(['zhangsan', 'lisi', 'wangwu']) // {"zhangsan", "lisi", "wangwu"} 注意:set的key和value一样 Array.from(namesSet) // ["zhangsan", "lisi", "wangwu"] // 上面代码中,字符串和Set集合都具有Iterator接口,因此可以被Array.from转为真正的数组 // Array.from方法可以将Set结构转为数组。 var nums= new Set([1, 2, 3, 4, 5]) var array = Array.from(nums) // var array = [...nums] // 这就提供了去除数组重复成员的另一种方法。 function dedupe(array) { return Array.from(new Set(array)) } const arr = ['zhangsan', 'lisi', 'wangwu', 'zhangsan'] dedupe(arr) // ["zhangsan", "lisi", "wangwu"]总结:其实,我们注意到扩展运算符(…)也可以将某些数据结构转为数组, 扩展运算符背后调用的是遍历器接口(Symbol.iterator),如果一个对象没有部署这个接口,就无法转换。Array.from方法则是还支持类似数组的对象。 所谓类似数组的对象,本质特征只有一点,即必须有length属性。因此,任何有length属性的对象,都可以通过Array.from方法转为数组