问答

Map与Object的区别是什么

作者:admin 2021-06-10 我要评论

目前了解到的区别有 Object的键只能是字符串或者Symbol,Map的键值可以是任意值 Map的键值对数量可以通过size属性获取,Object则需要通过Object.keys(obj).lengt...

在说正事之前,我要推荐一个福利:你还在原价购买阿里云、腾讯云、华为云服务器吗?那太亏啦!来这里,新购、升级、续费都打折,能够为您省60%的钱呢!2核4G企业级云服务器低至69元/年,点击进去看看吧>>>)

目前了解到的区别有

  • Object的键只能是字符串或者Symbol,Map的键值可以是任意值
  • Map的键值对数量可以通过size属性获取,Object则需要通过Object.keys(obj).length类似的方式获取

以上两点已经过证实,
但还看到其他的

  • Map的键值是有序的,而对象不是
  • Object有自己的原型,原型链上的键名可能与对象的键名产生冲突。

想问下这两点该怎么证实。求助各位大佬

###

有序的问题……反正两个遍历结果是一样的,没见排序

const entries = [
    ["def", 1],
    ["abc", 2],
    ["cfg", 3]
]

Array.from(new Map(entries))
    .forEach(([key, value]) => console.log(`${key} = ${value}`));

console.log("-----------------------------");

Object
    .entries(entries.reduce((o, [key, value]) => {
        o[key] = value;
        return o;
    }, {}))
    .forEach(([key, value]) => console.log(`${key} = ${value}`));

原型的问题,截个图给你吧

image.png

再来张图

image.png

图中的代码

console.log("------------------------------------");
const oMap = {
    toString: "hello"
};

const mMap = new Map([["toString", "hello"]]);


console.log(`mMap.toString = ${mMap.get("toString")}`);
console.log("mMap.toString()", mMap.toString());
console.log(`oMap.toString = ${oMap["toString"]}`);
console.log("oMap.toString()", oMap.toString());
###

主要体现在key值为数字字符串时,object会自动排序 ,

比如

{
'1': 'a',
'3': 'c',
'2': 'b'
}

会被自动调整为

{
'1':'a',
'2':'b',
'3':'c'
}

可以遍历一遍打印 , 很容易看到结果,
而map不会,原来定义是什么顺序就是什么顺序

new Map(
[
    ['1','a'],
    ['3','c'],
    ['2','b'],
]
)
###
"Map的键值是有序的,而对象不是" ???

印象中记得对象的属性是无序的,直到看到React代码里提到:Issue 4118: Object.getOwnPropertyNames returns names in wrong order

  1. 整型字符串属性名按照升序排列;
  2. 非整型字符串属性名按照插入顺序排列;
  3. Symbol型属性名也是按照插入顺序排列;
  4. 总体上先后顺序依次是:整型字符串 > 整型数字型字符串 > Symbol型。
var a = {    
    b: 2, 
    a: 1,
    [Symbol('name')]: 'join',
    [Symbol('age')]: 12,
    1: 1, 
    2: 2,
    1.1: 4,
    name: 'join',
    age: '20'
};

// ["1", "2", "b", "a", "1.1", "name", "age"]
console.log(Object.getOwnPropertyNames(a)); // Object.keys,for-in

// [Symbol(name), Symbol(age)]
console.log(Object.getOwnPropertySymbols(a));

>>> getOwnPropertyNames <<<

版权声明:本文转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的,如有侵权请联系QQ/微信:153890879删除

相关文章
  • Map与Object的区别是什么

    Map与Object的区别是什么

  • echart 散点图x轴标记的点偏移,对不上

    echart 散点图x轴标记的点偏移,对不上

  • ant-design-vue修改导航栏颜色和布局出

    ant-design-vue修改导航栏颜色和布局出

  • 超级计算机与一般的云计算有什么区别,

    超级计算机与一般的云计算有什么区别,

腾讯云代理商
海外云服务器