一道解构面试题

ES6推出了一种新的语法解构赋值,关于它的用法我们都已经很熟练了，但是解构的原理很多人还不了解。 本章我们通过一道题目，了解解构的本质，并学习灵活运用解构原理来处理一些算法。

// 让下面的代码成立
var [ a, b ] = { a: 1, b: 2}

运行结果:
TypeError: {(intermediate value)(intermediate value)} is not iterable

思路分析

报错信息

• 报错信息表示，右侧结构并不是一个 可迭代对象。
• 思路：通过一些操作，让右侧的结构变为可迭代对象。

可迭代对象

• 可迭代对象：满足可迭代协议

{
 [Symbol.interator]: function() {
   return 迭代器
 }
}

• 迭代器示意, 通过迭代器中的next方法 （每执行一次，迭代出一个值）

 let arr = [1, 2, 3]
 const iter = arr[Symbol.iterator]()
 console.log('迭代结果：', iter.next())  // 迭代结果：{ value: 1, done: false }
 console.log('迭代结果：', iter.next())  // 迭代结果：{ value: 2, done: false }
 console.log('迭代结果：', iter.next())  // 迭代结果：{ value: 3, done: false }
 console.log('迭代结果：', iter.next())  // 迭代结果：{ value: undefined, done: true}

解构原理示意

  const arr = [1, 2, 3]
  var [a, b] = arr
  // 等同于执行了以下操作：
  const iter = arr[Symbol.iterator]()
  var a = iter.next().value
  var b = iter.next().value

解题

1. 初始版

var [ a, b ] = {
  a: 1,
  b: 2,
  [Symbol.iterator]: function() {
    var arr =[1, 2]
    const iter = arr[Symbol.iterator]()
    return iter
  }
}
console.log(a, b)  // 1, 2

2.封装优化

Object.prototype[Symbol.iterator] = function() {
  var arr = Object.values(this)
  const iter = arr[Symbol.iterator]()
  return iter
}

3.进阶

使用ES6函数生成器 — yield

Object.prototype[Symbol.iterator] = function*() {
  return yield Object.values(this)
}
var [ a, b] = { a: 1, b: 2}
console.log(a, b)  // 1, 2