如果你看了上一节关于迭代器的介绍后，可能会感觉有点奇怪：
当我们要获取一个数组时，需要自己创建一个index变量，再创建一个所谓的迭代器对象，然后调用next()方法，才能实现数据元素的获取，这可能很麻烦，而且不适用。 事实上我们可以对上面的代码进行进一步的封装，让其变为一个可迭代对象

什么是可迭代对象？

：他和迭代器是不同的概念；
：当一个对象实现了iterable protocol协议时，它就是一个可迭代对象;
: 这个对象必须实现@@iterator方法，在代码中我们使用Symbol.iterator 访问该属性；

它的好处?

当一个对象变成一个可迭代对象的时候，进行某些迭代操作，比如 for...of 操作时，其实就会调用它的@@iterator 方法

const info = {
  names:['詹姆斯','库里','哈登','科比'],
  [Symbol.iterator]:function(){
    let index = 0;
    return {
      next:()=>{
        if(index < this.names.length){
          return {done:false,value:this.names[index++]}
        }else{
          return {done:true,value:undefined}
        }
      }
    }
  }
}

const iteratorA = info[Symbol.iterator]();//可迭代对象
console.log(iteratorA.next())//{ done: false, value: '詹姆斯' }

原生迭代对象？

事实上我们平时创建的很多原生对象已经实现了可迭代协议，会生成一个迭代器对象的：
String、Array、Map、Set、arguments对象、NodeList集合；

const names = ["abc", "cba", "nba"]
console.log(names[Symbol.iterator])

// const iterator1 = names[Symbol.iterator]()
// console.log(iterator1.next())
// console.log(iterator1.next())
// console.log(iterator1.next())
// console.log(iterator1.next())

for (const item of names) {
  console.log(item)
}

// Map/Set
const set = new Set()
set.add(10)
set.add(100)
set.add(1000)

console.log(set[Symbol.iterator])

for (const item of set) {
  console.log(item)
}

// 函数中arguments也是一个可迭代对象
function foo(x, y, z) {
  console.log(arguments[Symbol.iterator])
  for (const arg of arguments) {
    console.log(arg)
  }
}

foo(10, 20, 30)

可迭代对象的应用?

JavaScript中语法：
for ...of、展开语法（spread syntax）、yield*（后面讲）、解构赋值（Destructuring_assignment）；
创建一些对象时：new Map([Iterable])、new WeakMap([iterable])、new Set([iterable])、new WeakSet([iterable]);
一些方法的调用：Promise.all(iterable)、Promise.race(iterable)、Array.from(iterable);

// 1.for of场景

// 2.展开语法(spread syntax)
const iterableObj = {
  names: ["abc", "cba", "nba"],
  [Symbol.iterator]: function() {
    let index = 0
    return {
      next: () => {
        if (index < this.names.length) {
          return { done: false, value: this.names[index++] }
        } else {
          return { done: true, value: undefined }
        }
      }
    }
  }
}

const names = ["abc", "cba", "nba"]
const newNames = [...names, ...iterableObj]
console.log(newNames)

const obj = { name: "why", age: 18 }
// for (const item of obj) {

// }
// ES9(ES2018)中新增的一个特性: 用的不是迭代器
const newObj = { ...obj }
console.log(newObj)


// 3.解构语法
const [ name1, name2 ] = names
// const { name, age } = obj 不一样ES9新增的特性

// 4.创建一些其他对象时
const set1 = new Set(iterableObj)
const set2 = new Set(names)

const arr1 = Array.from(iterableObj)

// 5.Promise.all
Promise.all(iterableObj).then(res => {
  console.log(res)
})

下一讲介绍自定义迭代对象