学习ES6扩展运算符时,文档中提到 "对于那些没有部署 Iterator 接口的类似数组的对象,扩展运算符就无法将其转为真正的数组",还举了如下两个例子:
例1:
let nodeList = document.querySelectorAll('div');
let array = [...nodeList];
上面代码中,querySelectorAll
方法返回的是一个NodeList
对象。它不是数组,而是一个类似数组的对象。这时,扩展运算符可以将其转为真正的数组,原因就在于NodeList
对象实现了 Iterator 。
而例2:
let arrayLike = {
'0': 'a',
'1': 'b',
'2': 'c',
length: 3
};
// TypeError: Cannot spread non-iterable object.
let arr = [...arrayLike];
例2证明,对于那些没有部署 Iterator 接口的类似数组的对象,扩展运算符就无法将其转为真正的数组。
我看着疑问就来了,怎么判断这个对象是否有部署Iterator接口?
参考百度知道:答案是看这个对象有没有 Symbol.iterator 方法,原文档:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols
function isIterable(obj) {
// checks for null and undefined
if (obj == null) {
return false;
}
return typeof obj[Symbol.iterator] === 'function';
}
再试试上面方法结合上面两个例子来看,的确有效。
typeof nodeList[Symbol.iterator]
// "function"
typeof arrayLike[Symbol.iterator]
// "undefined"