数组的转化
1.字符串转换为数组
扩展运算符可以将字符串转为真正的数组:
[...'hello'] // [ "h", "e", "l", "l", "o" ]
2.具有Iterator接口的对象可以转换为数组
任何定义了遍历器(Iterator)接口的对象(参阅 Iterator 一章),都可以用扩展运算符转为真正 的数组。
let nodeList = document.querySelectorAll('div'); let array = [...nodeList];
上面代码中,querySelectorAll
方法返回的是一个NodeList
对象。它不是数组,而是一个类似数组的对象。这时,扩展运算符可以将其转为真正的数组,原因就在于NodeList
对象实现了 Iterator 。
3.没有部署Iterator接口的类似数组的对象,扩展运算符就无法将其转为真正的数组。
但是可以用Array.from将对象转换为真正的数组
(Array.from方法用于将两类对象转为真正的数组:类似数组的对象(array-like object)和可遍历(iterable)的对象)
let arrayLike = { '0': 'a', '1': 'b', '2': 'c', length: 3 }; // TypeError: Cannot spread non-iterable object. // let arr = [...arrayLike]; var a = Array.from(arrayLike) console.log(a)// ["a", "b", "c"]
要将一个类数组对象转换为一个真正的数组,必须具备以下条件:
(1)该类数组对象必须具有length属性,用于指定数组的长度。如果没有length属性,那么转换后的数组是一个空数组。
(2)该类数组对象的属性名必须为数值型或字符串型的数字
该类数组对象的属性名可以加引号,也可以不加引号
Array还可以接受第二个参数,作用类似于数组的map方法,用来对每个元素进行处理,将处理后的值放入返回的数组。
总结:
扩展运算符背后调用的是遍历器接口(Symbol.iterator
),如果一个对象没有部署这个接口,就无法转换。Array.from方法还支持类似数组的对象。所谓类似数组的对象,必须有length属性。任何有length属性的对象,都可以通过Array.from方法转为数组,而此时扩展运算符就无法转换。
4.Array.of()方法用于将一组值,转换为数组。
Array.of(3, 11, 8) // [3,11,8] Array.of(3) // [3] Array.of(3).length // 1