面试题：如何让 var [a, b] = {a: 1, b: 2} 解构赋值成功？

前言

这是一道字节面试题，大家第一眼看到这个面试题的时候，是不是脑瓜子嗡嗡的？有一种熟悉又陌生的感觉？我当时也一样的😭😭😭

在 JavaScript 中，解构赋值语法的左侧是一个数组，而右侧则应该是一个具有迭代器接口的对象（如数组、Map、Set等）。因此，将对象 {a: 1, b: 2} 解构赋值给 [a, b] 会导致语法错误，可偏偏面试官要求我们让这个解构赋值表达式成立，真是有苦说不出的感受啊！！！

思路

错误思路

既然将一个对象解构赋值给数组，是一个语法错误，那我们直接把这个解构语法变为对象的解构赋值语法不就好了。直接改成var { a, b } = { a: 1, b: 2 }; 如果这样做的话，哈哈哈哈哈哈，恭喜你面试结束了。

所以我们得好好想清楚，这可是一个字节的面试题，它的考点可不是这么显而易见的。

正确解题思路

我们首先来看看报错是什么样的：

var [a, b] = {a: 1, b: 2}

TypeError: {(intermediate value)(intermediate value)} is not iterable

这个错误是个类型错误，并且是对象有问题，因为对象是一个不具备迭代器属性的数据结构。所以我们可以知道，这个面试题就是考验我们对于迭代器属性的认识，我们再来个场景加深下理解。

scss复制代码let arr = [1, 2, 3]
let obj = {
    a: 1,
    b: 2,
    c: 3
}
for(let item of arr){
    console.log(item)
}
for(let item of obj){
    console.log(item)
}

我们知道for of 只能遍历具有迭代器属性的，在遍历数组的时候会打印出1 2 3，遍历对象时会报这样的一个错误TypeError: obj is not iterable，那么数组上的迭代器属性究竟是什么样的呢，我们来看一看。

我们可以在最下面发现，数组原型上有Symbol.iterator这样一个属性，这个属性显然是从Array身上继承到的，并且这个属性的值是一个函数体，如果我们调用一下这个函数体会怎么样？我们打印来看看

css复制代码console.log(arr.__proto__[Symbol.iterator]());
// Object [Array Iterator] {}

最重要的点来了🔥🔥🔥🔥

它返回的是一个对象类型，并且是一个迭代器对象！！！所以一个可迭代对象的基本结构是这样的：

javascript复制代码interable
{
    [Symbol.iterator]: function () {
        return 迭代器 (可通过next()就能读取到值)
    }
}

我们可以得出只要一个数据结构身上，具有[Symbol.iterator]这样一个属性，且值是一个函数体，可以返回一个迭代器的话，我们就称这个数据结构是可迭代的。

这时候我们回到面试题之中，面试官要我们让 var [a, b] = {a: 1, b: 2} 这个等式成立，那么有了上面的铺垫，我们可以知道，我们接下来的操作就是：人为的为对象打造一个迭代器出来，也就是让对象的隐式原型可以继承到迭代器属性，我们可以先这样做：

css复制代码Object.prototype[Symbol.iterator] = function(){

}

var [a, b] = {a: 1, b: 2}
console.log(a,b);

这样的话，报错就改变了，变成：

TypeError: Result of the Symbol.iterator method is not an object

接下来，我们知道var [a, b] = [1, 2]这是肯定没有问题的，所以我们可以将对象身上的迭代器，打造成和数组身上的迭代器（arr[Symbol.iterator]）一样，代码如下：

javascript复制代码Object.prototype[Symbol.iterator] = function(){
    // 使用 Object.values(this) 方法获取对象的所有值，并返回这些值的迭代器对象
    return Object.values(this)[Symbol.iterator]()
}

这段代码是将 Object.prototype 上的 [Symbol.iterator] 方法重新定义为一个新的函数。新的函数通过调用 Object.values(this) 方法获取对象的所有值，并返回这些值的迭代器对象。

通过这个代码，我们可以使得任何 JavaScript 对象都具有了迭代能力。例如，对于一个对象 obj，我们可以直接使用 for...of 循环或者 ... 操作符来遍历它的所有值。

结尾 🌸🌸🌸

看到这里，恭喜你解决了一个字节面试题！！！在被面试官询问这种熟悉又陌生的问题时，你也可以很好的应对了。最后祝你也祝我在今后日子里能够登高望远，心向彼岸。

关于Python学习指南

学好 Python 不论是就业还是做副业赚钱都不错，但要学会 Python 还是要有一个学习规划。最后给大家分享一份全套的 Python 学习资料，给那些想学习 Python 的小伙伴们一点帮助！

包括：Python激活码+安装包、Python web开发，Python爬虫，Python数据分析，人工智能、自动化办公等学习教程。带你从零基础系统性的学好Python！

👉Python所有方向的学习路线👈

Python所有方向路线就是把Python常用的技术点做整理，形成各个领域的知识点汇总，它的用处就在于，你可以按照上面的知识点去找对应的学习资源，保证自己学得较为全面。（全套教程文末领取）

👉Python学习视频600合集👈

观看零基础学习视频，看视频学习是最快捷也是最有效果的方式，跟着视频中老师的思路，从基础到深入，还是很容易入门的。

温馨提示：篇幅有限，已打包文件夹，获取方式在：文末

👉Python70个实战练手案例&源码👈

光学理论是没用的，要学会跟着一起敲，要动手实操，才能将自己的所学运用到实际当中去，这时候可以搞点实战案例来学习。

👉Python大厂面试资料👈

我们学习Python必然是为了找到高薪的工作，下面这些面试题是来自阿里、腾讯、字节等一线互联网大厂最新的面试资料，并且有阿里大佬给出了权威的解答，刷完这一套面试资料相信大家都能找到满意的工作。

👉Python副业兼职路线&方法👈

学好 Python 不论是就业还是做副业赚钱都不错，但要学会兼职接单还是要有一个学习规划。

👉 这份完整版的Python全套学习资料已经上传，朋友们如果需要可以扫描下方CSDN官方认证二维码或者点击链接免费领取【保证100%免费】