文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

es6 map是引用类型吗

2023-05-14 22:29

关注

es6 map是引用类型吗

本教程操作环境:windows7系统、ECMAScript 6版、Dell G3电脑。

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对比

【相关推荐:javascript视频教程、编程视频】

以上就是es6 map是引用类型吗的详细内容,更多请关注编程网其它相关文章!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯