Object.entries()、Object.fromEntries()、ES6的Map三者之间的关系

1个采集

已于 2024-06-13 11:02:09 修改

阅读量1.1k

点赞数 19

文章标签： es6 前端 ecmascript javascript

于 2024-06-11 20:37:53 首次发布

本文链接：https://blog.csdn.net/weixin_71388883/article/details/139585990

版权

简要说明一下，三者的作用，后续依次通过代码详细具体演示三者之间存在的联系

Object.entries 传入一个对象，返回该对象的键值对的数组，即每个键和对应的值，转化为一个数组，以此类推，最后这些数组再被放到一个新数组中

Object.fromEntries 传入一个数组，或者传入一个Map，数组最好是和Object.entries生成的数组结构一致，根据传入的返回一个对象

Map ES6新增的数据结构，能够进行迭代，使用...展开运算符可将Map类型转化为Object.entries生成的数组对象，将Map传入Object.fromEntries能得到一个对象

Object.entries和Object.fromEntries

const person = {
            name: '王二',
            age: 18,
            sex: '男',
            say() {
                console.log('说话');
            }
        }

        const obj1 = Object.entries(person)//返回对象的键值对数组
        const obj2 = Object.fromEntries(obj1);//通过上述的键值对数组，返回对应的对象
        console.log(obj1);
        console.log(obj2);

结果输出

结果分析

上述可得，Object.entries和Object.fromEntries两个得到的结果可以相互转换

前者通过对象可以得到键值对数组，后者可以将前者的数组，转化为对象

个人猜测，可以实现深拷贝

Map和 Object.entries()、Object.fromEntries()

Map和 Object.entries()

        const map1 = new Map();
        map1.set('name', '张三');
        map1.set('age', 30);
        map1.set('sex', '女');
        map1.set('say', function () {
            console.log('不说话');
        })
        console.log(map1);//返回Map对象
        console.log(map1.entries()); //返回Map对象
        //Map和Object.entries()
        const arr1 = [...map1] //返回键值对数组
        const obj1 = Object.fromEntries(arr1) //通过键值对数组得到对应的对象
        console.log(arr1);
        console.log(obj1);


        //Map直接使用entries() 
        const iterator = map1.entries()//返回一个可迭代对象
        console.log(iterator.next());
        console.log(iterator.next());
        console.log(iterator.next());
        console.log(iterator.next());
        console.log(iterator.next());

结果输出

结果分析

上述，我们最先能发现，Map对象能转换成键值对数组，也能通过该数组使用Object.fromEntries()，从而得到对应的对象(Object.fromEntries()也能直接传入Map类型，下边会有演示)

其次，也能发现，Map类型其实可以直接使用entries()方法，打印返回的结果似乎和普通的Map没有任何区别，但其实我们通过它的原型可以发现，它的原型上边具有next方法，那么就代表该对象是一个可迭代对象，可以使用fo of 遍历，也能使用next()遍历输出，关于迭代器我上篇文章提的有，这里不再赘述

Map和 Object.fromEntries()

     const map1 = new Map();//创建一个map对象
        map1.set('name', '张三');
        map1.set('age', 30);
        map1.set('sex', '女');
        map1.set('say', function () {
            console.log('不说话');
        })
        const obj1 = Object.fromEntries(map1);//返回上述set对应的对象
        const obj2 = Object.entries(obj1) // 返回对象对应的键值对数组
        const map2 = new Map(obj2) //返回和map1一样的map对象，但是两者不相等
        console.log(obj1);
        console.log(obj2);
        console.log('map1', map1);
        console.log('map2', map2);
        console.log(`map1和map2 ${map1 === map2}`);//

结果输出