对象字面量为啥不能在数组或函数参数中使用...展开语法

2019-07-17230次阅读javascript
var obj = { x: 1, y: 2, z: 3 };
[...obj]; // 会导致TypeError错误 

...展开语法(其实内部使用for...of循环)和for-of语句遍历iterable对象定义要遍历的数据。Array或Set、Map是具有默认迭代行为的内置迭代器。对象不是可迭代的,但是可以通过使用iterableiterator协议使它们可迭代。

在Mozilla文档中,如果一个对象实现了@@iterator方法,那么它就是可迭代的,这意味着这个对象(或者它原型链上的一个对象)必须有一个带有@@iterator键的属性,这个键可以通过常量Symbol.iterator获得。

var obj = { x: 1, y: 2, z: 3 };
obj[Symbol.iterator] = function() {
  
  // iterator 是一个具有 next 方法的对象,
  // 它的返回至少有一个对象
  // 两个属性:value&done。

  // 返回一个 iterator 对象
  return {
    next: function() {
      if (this._countDown === 3) {
        const lastValue = this._countDown;
        return { value: this._countDown, done: true };
      }
      this._countDown = this._countDown + 1;
      return { value: this._countDown, done: false };
    },
    _countDown: 0
  };
};
[...obj]; // 打印 [1, 2, 3]

还可以使用generator函数来定制对象的迭代行为:

var obj = {x:1, y:2, z: 3}
obj[Symbol.iterator] = function*() {
  yield 1;
  yield 2;
  yield 3;
}
[...obj]; // 打印 [1, 2, 3]

 

上一篇: 五个JavaScript小技巧  下一篇: textContentt和innerText取文本节点  

对象字面量为啥不能在数组或函数参数中使用...展开语法相关文章