四川盐亭网站制作公司

es6map是不是引用类型

本篇内容主要讲解“es6 map是不是引用类型”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“es6 map是不是引用类型”吧!

创新互联建站是一家集网站建设,石林企业网站建设,石林品牌网站建设,网站定制,石林网站建设报价,网络营销,网络优化,石林网站推广为一体的创新建站企业，帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿，时刻以成就客户成长自我，坚持不断学习、思考、沉淀、净化自己，让我们为更多的企业打造出实用型网站。

map是引用类型；map（集合）是es6新增的一种引用数据类型，表示数据的映射关系。map集合数据类型中数据是以“键/值”的方式存储的，可以使用对象的属性作为键，使用属性来引用值；map可以使用new来创建，例“const myMap = new Map();”。

map是引用类型。

es6 map

在ES6之前，在JavaScript中实现‘键’=>‘值’，也就是我们常说的键值对，是用Object来完成的。但这种实现方式在特殊场景下的有问题的，ES6又出了一个为Map的新集合类型，为这门语言带来正真的键值对存储机制。

map（集合）是es6新增的一种引用数据类型，表示数据的映射关系；map集合数据类型中数据是以“键/值”的方式存储的，可以使用对象的属性作为键，使用属性来引用值。

1-1 创建Map

使用new关键字来实例一个map

let m = new Map();

console.log(m);
// Map(0) {}

创建时初始化:
传入一个二维数组参数(可迭代对象，内部以数组的方式传入键值)
每个子数组，第一个元素是map对应的key， 第二个元素是map对应的value

let m = new Map([[{}, 222], [{}, '123']]);

console.log(m);
// Map(2) { {} => 222, {} => '123' }

1-2 Map Api

1-2-1 添加映射元素

通过set()方法添加，传入两个参数，第一个传入映射的键，第二个传入映射的值。返回的是该映射集合（意味着可以链式添加）

let m = new Map();

m.set('prop', '值');

console.log(m);
// Map(1) { 'prop' => '值' }

链式添加键值

let m = new Map();

m.set('prop', '值').set('prop2', false).set('num', {id: 13});

console.log(m);
// Map(3) { 'prop' => '值', 'prop2' => false, 'num' => { id: 13 } }

1-2-2 映射集合长度

使用size属性可以获取到当前集合元素数量

let m = new Map();

m.set('prop', '值').set('prop2', false).set('num', {id: 13});

console.log(m.size);

1-2-3 获取元素

通过get()方法获取到元素，传入获取目标的key

let m = new Map();

m.set('prop', '值').set('prop2', false).set('num', {id: 13});

console.log(m.get('prop2'));
// false

1-2-4 删除元素

通过delete()方法删除映射集合中的某个元素，返回删除成功或失败的布尔值

let m = new Map();

m.set('prop', '值').set('prop2', false).set('num', {id: 13});

m.delete('prop2');
// true

console.log(m.get('prop2'), m.size);
// undefined 2

1-2-5 检测元素是否存在

使用has()方法检测目标元素是否存在，返回检测结果的布尔值

let m = new Map();

m.set('prop', '值').set('prop2', false).set('num', {id: 13});

m.delete('prop2');
// true

console.log(m.has('prop2'), m.has('num'));
// false  true

1-2-6 清除元素方法

使用clear()方法可以清除所有的元素， 返回清除成功的布尔值

let m = new Map();

m.set('prop', '值').set('prop2', false).set('num', {id: 13});

m.clear();
// true

console.log(m);
// Map(0) {}

1-3 顺序与迭代

map可以根据插入顺序迭代元素
映射实例会提供(iterator).能够以插入的顺序生成[key, value]形式的数组， 可以通过entries()方法(或者提供的Symbol.iterator)迭代器接口遍历。

let m = new Map();

m.set('prop', '值').set('prop2', false).set('num', {id: 13});

console.log(m.entries === m[Symbol.iterator]);// true

for(let k1 of m.entries()){
    console.log(k1);
    // [ 'prop', '值' ]
    // [ 'prop2', false ]
    // [ 'num', { id: 13 } ]
    // 遍历的属性即对应映射元素的键值对数组
}

for(let k2 of m.keys()){
    console.log(k2);
    // prop
    // prop2
    // num
    // 遍历的属性对应映射元素的键
}

for(let k3 of m.values()){
    console.log(k3);
    // 值
    // false
    // { id: 13 }
    // 遍历的属性对应映射元素的值
}

for(let k4 of m[Symbol.iterator]()){
    console.log(k4);
    // [ 'prop', '值' ]
    // [ 'prop2', false ]
    // [ 'num', { id: 13 } ]
    // 遍历的属性即对应映射元素的键值对数组
}

1-4 与Object对比

  • 内存占用

    浏览器的差异会导致两种存储方式占用的内存占用所不同，不过在给定内存大小的情况下，map比Object多存储大约50%的键值对

  • 插入性能

    插入速度上面 map 和 Object性能大致相同， 但是如果代码涉及大量的插入，建议使用map

  • 查找速度

    差异较小，只包含少量键值对的情况下Object更好

  • 删除性能

    Object 的delete()性能较差，而map的删除delete()性能好，如果数据涉及到大量的删除操作，建议使用map

到此，相信大家对“es6 map是不是引用类型”有了更深的了解，不妨来实际操作一番吧！这里是创新互联网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！


当前文章：es6map是不是引用类型
网页链接：http://scyanting.com/article/pseogj.html

其他资讯