探索如何赋予对象迭代魔法,轻松实现非传统解构赋值的艺术

前言

今天下午在网上冲浪过程中看到这样一个问题

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

据说是某大厂面试题,于是我学习了一下这个问题,写下这篇文章记录一下。

学习过程

要想解决这个问题首先要知道什么是解构赋值。

解构赋值是ES6中一种将数组或对象的属性/元素值赋给变量的语法。

运行一下题目的代码得到下面的情况

原因是对象的解构赋值需要使用对应的属性名来匹配,而不是数组的形式。

比如var {a, b} = {a: 1, b: 2} 就可以成功实现结构赋值。

但是这么高贵的问题,你10秒就回答完了,回去等通知吧。

两个普通想法

  1. 将对象属性解构到数组变量中
    首先使用Object.keys获取对象的所有键,然后使用map方法根据这些键从对象中提取对应的值,最后将这些值解构到一个数组变量中。

         var arr = [a, b];
         var obj = { a: 1, b: 2 }
         // 获取对象的键数组
         var keys = Object.keys(obj)
         // 根据键获取对应的值
         var values = keys.map(key => obj[key])
         //数组解构赋值
         var [a, b] = values;
         console.log([a, b])
    
  1. 将数组元素解构到对象变量中
    创建了一个空对象obj,然后使用数组解构赋值直接将数组的元素赋值给对象的属性。

         var arr = [1, 2];
         var obj = {};
         [obj.a, obj.b] = arr; // 数组解构赋值到对象属性
         console.log(obj); // 输出: {a: 1, b: 2}
    

高级解法

在JavaScript中数据是具有迭代器属性的一种数据结构,而对象是不具有迭代器的一种数据结构。

最直白淳朴的想法,解构赋值成功只需要把右边也变成可以迭代的对象就可以了。

在 JavaScript 中,可迭代对象是指具有 Symbol.iterator 方法的对象。这个方法返回一个迭代器(Iterator)对象,它通过 next() 方法提供对可迭代对象中的每个元素的访问。

JavaScript中数组,Set,Map,字符串都是可以迭代的对象,任何有iterator接口的对象都是可迭代的,我们可以自定义一个有iterator接口的对象。

网友做法

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

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

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

给Object对象原型添加迭代器属性之后成功实现var [a, b] = { a: 1, b: 2 }解构赋值

题目拓展

上面通过给Object对象原型添加迭代器属性返回对象的值实现var [a, b] = { a: 1, b: 2 }解构赋值,但是若题目改为var [a, b] = { b: 1, z: 4 },会出现key不对应导致的问题。

运行下面的代码

        Object.prototype[Symbol.iterator] = function () {
            return Object.values(this)[Symbol.iterator]()
        }
        var [a, b] = { b: 1, z: 4 };
        console.log([a, b])

运行结果如图

输出结果a应该是undefined,b:1,但是实际结果仍旧是a:1,b:4。

只是将{ b: 1, z: 4 }转成数组之后直接赋值,但是没有考虑到key的对应关系

最终优化结果

生成器函数function* () {}定义了一个迭代器生成器。当该迭代器被调用时,它会返回一个可迭代对象,并且通过yield*语句将对象的值作为迭代器的值逐个产生出来。为了在解构赋值时考虑到对象键的对应关系,我们需要修改迭代器函数,使其按照对象的键顺序来生成值。我们可以使用Object.entries方法来获取对象的键值对数组,然后按照这个顺序来生成值。

        Object.prototype[Symbol.iterator] = function* () {
            let entries = Object.entries(this); // 获取对象的键值对数组
            let arr = ['a', 'b']; // 假设这是我们关心的键的数组

            for (let entry of entries) {
                let key = entry[0]; // 获取键
                if (arr.includes(key)) { // 检查键是否在数组中
                    yield entry[1]; // 如果键在数组中,则生成对应的值
                }
            }
        };

        // 使用数组解构赋值
        var [a, b] = { a: 1, z: 2, c: 3 }; // 这里我们只关心键 'a'

        console.log([a, b]);

首先给Object.prototype添加了一个自定义的迭代器,它使用Object.entries来获取对象的键值对数组,并按照这个数组的顺序来生成值。然后使用数组解构赋值来尝试解构一个对象,但是由于对象的键顺序是'b', 'z',而我们只关心值'1',所以变量a被赋值为'1',而变量b因为没有对应的值而被赋值为undefined。

总结一下代码的步骤就是

  1. 添加迭代器: 通过给Object.prototype添加一个名为Symbol.iterator的方法,所有的对象都可以被迭代。
  2. 定义关心的键: 在迭代器内部定义一个数组arr其中包含迭代过程中关心的键名。
  3. 迭代对象属性: 使用Object.entries(this)获取对象的键值对数组,这里的this指的是调用迭代器的对象。
  4. 过滤属性: 在遍历键值对数组时,我们检查每个键是否在我们关心的键数组arr中。如果键存在,我们才生成对应的值。
  5. 解构赋值: 使用数组解构赋值来提取我们关心的键对应的值。由于迭代器已经过滤掉了不需要的属性,解构赋值只会得到我们想要的值。

额外的小问题:为什么上面的代码中是 let arr = ['a', 'b'];不是let arr = [a, b]?

let arr = [a, b]是错误的,在声明arr数组的时候,变量a,b没有定义,没有具体的值不能用来初始化数组。

错误的运行结果是a is not defined

总结

本文解决如何让 var [a, b] = {a: 1, b: 2} 解构赋值成功的问题的最佳实践大概是通过扩展Object.prototype来为所有对象添加一个自定义的迭代器,该迭代器允许我们以一种特定的方式遍历对象的属性。具体来说,这个迭代器会过滤掉我们不关心的属性,只返回我们指定键名对应的属性值。

相关推荐
夫琅禾费米线38 分钟前
[有趣的JavaScript] 为什么typeof null返回 object
开发语言·前端·javascript
nothing_more_than5 小时前
draggable的el-dialog实现对话框标题可以选择
javascript·vue.js·element-plus
小镇程序员6 小时前
vue2 src自定义事件
前端·javascript·vue.js
炒毛豆6 小时前
vue3+echarts+ant design vue实现进度环形图
javascript·vue.js·echarts
AlgorithmAce8 小时前
Live2D嵌入前端页面
前端
nameofworld8 小时前
前端面试笔试(六)
前端·javascript·面试·学习方法·递归回溯
前端fighter8 小时前
js基本数据新增的Symbol到底是啥呢?
前端·javascript·面试
流着口水看上帝9 小时前
JavaScript完整原型链
开发语言·javascript·原型模式
guokanglun9 小时前
JavaScript数据类型判断之Object.prototype.toString.call() 的详解
开发语言·javascript·原型模式
GISer_Jing9 小时前
从0开始分享一个React项目:React-ant-admin
前端·react.js·前端框架