...obj报错了?对象不可以用扩展运算符吗?

75 阅读1分钟

首先我们得知道只有含有迭代器的数据才能使用扩展运算符 通过以下例子帮你搞懂为什么有些数据类型可以用扩展运算符,有的用扩展运算符会报错。

let obj={x:1,y:2,z:3}
let iterator=obj[Symbol.iterator] //undefined,因为iterator为undefined的,对象不含迭代器导致...obj会报错。
console.log(...obj)//报错:Spread syntax requires ...iterable[Symbol.iterator] to be a function
let arr=[1,2,3]
let iterator=arr[Symbol.iterator]()
console.log(...arr) //打印1 2 3

console.log(iterator.next()) //{value: 1, done: false}
console.log(iterator.next()) //{value: 2, done: false}
console.log(iterator.next()) //{value: 3, done: false}
console.log(iterator.next()) //{value: undefined, done: true}

为对象添加迭代器iterator,使...obj不会报错

//为对象obj添加迭代器
let obj={x:1,y:2,z:3}
obj[Symbol.iterator]=function(){
  return {
    next:function(){
      let objArr=Reflect.ownKeys(obj)
      if(this.index<objArr.length-1){
        let key=objArr[this.index]
        this.index++
        return{
          value:obj[key],
          done:false
        }
      }else{
        return {
          value:undefined,
          done:true
        }
      }
      
    },
    index:0
  }
}
console.log(...obj)//打印1 2 3
let iterator=obj[Symbol.iterator]()
console.log(iterator.next()) //{value: 1, done: false}
console.log(iterator.next()) //{value: 2, done: false}
console.log(iterator.next()) //{value: 3, done: false}
console.log(iterator.next()) //{value: undefined, done: true}