es6 map是引用类型吗

ES6 map 2023-05-14 22:05:33 163人浏览安东尼

摘要

本教程操作环境：windows7系统、ECMAScript 6版、Dell G3电脑。map是引用类型。es6 map在es6之前，在javascript中实现‘键’=>‘值’，也就是我们常说的键值对，是用Object来完成的。但这种

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

内存占用
浏览器的差异会导致两种存储方式占用的内存占用所不同，不过在给定内存大小的情况下，map比Object多存储大约50%的键值对
插入性能
插入速度上面 map 和 Object性能大致相同，但是如果代码涉及大量的插入，建议使用map
查找速度
差异较小，只包含少量键值对的情况下Object更好
删除性能
Object 的delete()性能较差，而map的删除delete()性能好，如果数据涉及到大量的删除操作，建议使用map

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

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

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: es6 map是引用类型吗

本文链接: https://www.lsjlt.com/news/206830.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档

去做题

猜你喜欢

es6 map是引用类型吗

本教程操作环境：windows7系统、ECMAScript 6版、Dell G3电脑。map是引用类型。es6 map在ES6之前，在JavaScript中实现‘键’=>‘值’，也就是我们常说的键值对，是用Object来完成的。但这种...

99+

2023-05-14

ES6 map
es6 map是不是引用类型

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

99+

2023-07-05
es6的map是有序吗

本篇内容主要讲解“es6的map是有序吗”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“es6的map是有序吗”吧!map是有序的。ES6中的map类型是一种储存着许多键值对的有序列表，其中的键名...

99+

2023-07-04
js map方法是es6的吗

本教程操作环境：windows7系统、ECMAScript 6版、Dell G3电脑。JavaScript中的map()方法详解（均采用es6语法）JavaScript map() 方法可以对数组的每个元素调用指定的回调函数，并返回包含结果...

99+

2023-05-14

map ES6
es6中set类型是有序的吗

这篇文章主要介绍了es6中set类型是有序的吗的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇es6中set类型是有序的吗文章都会有所收获，下面我们一起来看看吧。es6中set类型是有序的。set类型是es6中新...

99+

2023-06-29
promise类型是不是es6的

这篇“promise类型是不是es6的”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“pro...

99+

2022-10-19
es6中的symbol属于基本类型吗

这篇文章主要为大家展示了“es6中的symbol属于基本类型吗”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“es6中的symbol属于基本类型吗”这篇文章吧。 ...

99+

2022-10-19
C#基元类型、值类型、引用类型是什么

这篇文章主要讲解了“C#基元类型、值类型、引用类型是什么”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“C#基元类型、值类型、引用类型是什么”吧！首先了解下什么是基元类型，基元类型是编译器直接...

99+

2023-06-17
Javascript中基本类型和引用类型是什么

这篇文章给大家分享的是有关Javascript中基本类型和引用类型是什么的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。 1.基础类型A. 基础类型有5种，Number，...

99+

2022-10-19
php数组是不是引用类型

php数组不是引用类型，而是值类型；数组赋值时会创建不同的变量（副本），因此修改另一个变量，并不会影响到数组本身。且PHP数组传递是值传递；在调用函数时通过将PHP数组作为实参赋给形参，在函数中修改，并不会影响到数组本身，说明此过程中的传递...

99+

2022-09-20
c#引用类型与值类型的区别是什么

这篇文章主要讲解了“c#引用类型与值类型的区别是什么”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“c#引用类型与值类型的区别是什么”吧！解析：CLR支持两种类型：值类型和引用类型。用Jeff...

99+

2023-06-17
js中值类型和引用类型的区别是什么

这篇文章主要介绍“js中值类型和引用类型的区别是什么”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“js中值类型和引用类型的区别是什么”文章能帮助大家解决问题。1.JavaScript中的变量类型有哪...

99+

2023-07-02
C#中的预定义类型与引用类型是什么

今天小编给大家分享一下C#中的预定义类型与引用类型是什么的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。一、预定义的值类型一个...

99+

2023-06-30
C++中的引用类型是什么

这篇文章主要讲解了“C++中的引用类型是什么”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“C++中的引用类型是什么”吧！引用，顾名思义是某一个变量或对象的别名，对引用的操作与对其所绑定的变量...

99+

2023-06-27
javascript引用类型指的是什么

这篇文章主要介绍了javascript引用类型指的是什么，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。1、概念引用类型有Object：Array、Function、Date、...

99+

2023-06-15
java四种引用类型是什么

Java中有四种引用类型，它们分别是：1. 强引用（Strong Reference）：最常见的引用类型，只要一个对象有强引用与之关...

99+

2023-09-28

java
云服务器实例类型不是数据类型吗对吗

数据库实例类型不是数据类型：数据库实例类型通常用于存储数据和与数据库交互。如果云服务器实例类型不是数据类型，那么它可能不适合用于存储数据。如果需要存储大量数据，建议使用云服务器实例类型作为数据库实例类型。虚拟机实例类型不是数据类型：虚拟...

99+

2023-10-27

数据类型实例类型
C#中的引用类型以及特殊引用类型详解

基本哪些属于引用类型类(object,string)，接口、数组、委托引用类型分配在哪里引用类型变量位于线程栈。引用类型实例分配在托管堆上。当引用类型实例的大小小于85000...

99+

2022-11-13

C# 引用类型特殊引用类型
JavaScript基本数据类型和引用数据类型是什么

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

99+

2022-10-19
ES6中Symbol数据类型怎么用

这篇文章主要介绍ES6中Symbol数据类型怎么用，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！具体如下：Symbol，是ES6中引入的新的数据类型，表示独一无二的值。在面向对象中，...

99+

2022-10-19