广告
返回顶部
首页 > 资讯 > 精选 >ES6中的Map与Set怎么用
  • 484
分享到

ES6中的Map与Set怎么用

2023-06-27 21:06:30 484人浏览 薄情痞子
摘要

这篇文章主要介绍了es6中的Map与Set怎么用的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇ES6中的Map与Set怎么用文章都会有所收获,下面我们一起来看看吧。Map 对象Map 对象保存键值对。任何值(对

这篇文章主要介绍了es6中的Map与Set怎么用的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇ES6中的Map与Set怎么用文章都会有所收获,下面我们一起来看看吧。

ES6中的Map与Set怎么用

Map 对象

Map 对象保存键值对。任何值(对象或者原始值) 都可以作为一个键或一个值。

Maps 和 Objects 的区别

  1. 一个 Object 的键只能是字符串或者 Symbols,但一个 Map 的键可以是任意值。
  2. Map 中的键值是有序的(FIFO 原则),而添加到对象中的键则不是。
  3. Map 的键值对个数可以从 size 属性获取,而 Object 的键值对个数只能手动计算。
  4. Object 都有自己的原型,原型链上的键名有可能和你自己在对象上的设置的键名产生冲突。

Map 中的 key

key 是字符串

var myMap = new Map();var keyString = "a string";myMap.set(keyString, "和键'a string'关联的值");myMap.get(keyString);    // "和键'a string'关联的值"myMap.get("a string");   // "和键'a string'关联的值"                        // 因为 keyString === 'a string'

key 是对象

var myMap = new Map();var keyObj = {},myMap.set(keyObj, "和键 keyObj 关联的值");•myMap.get(keyObj); // "和键 keyObj 关联的值"myMap.get({}); // undefined, 因为 keyObj !== {}

key 是函数

var myMap = new Map();var keyFunc = function () {}, // 函数myMap.set(keyFunc, "和键 keyFunc 关联的值");myMap.get(keyFunc); // "和键 keyFunc 关联的值"myMap.get(function() {}) // undefined, 因为 keyFunc !== function () {}

key 是 NaN

var myMap = new Map();myMap.set(NaN, "not a number");myMap.get(NaN); // "not a number"var otherNaN = Number("foo");myMap.get(otherNaN); // "not a number"

虽然 NaN 和任何值甚至和自己都不相等(NaN !== NaN 返回true),NaN作为Map的键来说是没有区别的。

Map 的迭代

对 Map 进行遍历,以下两个最高级。

for…of

var myMap = new Map();myMap.set(0, "zero");myMap.set(1, "one");// 将会显示两个 log。 一个是 "0 = zero" 另一个是 "1 = one"for (var [key, value] of myMap) { console.log(key + " = " + value);}for (var [key, value] of myMap.entries()) { console.log(key + " = " + value);}// 将会显示两个log。 一个是 "0" 另一个是 "1"for (var key of myMap.keys()) { console.log(key);}// 将会显示两个log。 一个是 "zero" 另一个是 "one"for (var value of myMap.values()) { console.log(value);}

forEach()

var myMap = new Map();myMap.set(0, "zero");myMap.set(1, "one");// 将会显示两个 logs。 一个是 "0 = zero" 另一个是 "1 = one"myMap.forEach(function(value, key) { console.log(key + " = " + value);}, myMap)

Map 对象的操作

Map 与 Array的转换

var kvArray = [["key1", "value1"], ["key2", "value2"]];// Map 构造函数可以将一个 二维 键值对数组转换成一个 Map 对象var myMap = new Map(kvArray);// 使用 Array.from 函数可以将一个 Map 对象转换成一个二维键值对数组var outArray = Array.from(myMap);

Map 的克隆

var myMap1 = new Map([["key1", "value1"], ["key2", "value2"]]);var myMap2 = new Map(myMap1);console.log(original === clone);// 打印 false。 Map 对象构造函数生成实例,迭代出新的对象。

Map 的合并

var first = new Map([[1, 'one'], [2, 'two'], [3, 'three'],]);var second = new Map([[1, 'uno'], [2, 'dos']]);// 合并两个 Map 对象时,如果有重复的键值,则后面的会覆盖前面的,对应值即 uno,dos, threevar merged = new Map([...first, ...second]);

Set 对象

Set 对象允许你存储任何类型的唯一值,无论是原始值或者是对象引用。

Set 中的特殊值

Set 对象存储的值总是唯一的,所以需要判断两个值是否恒等。有几个特殊值需要特殊对待:

  1. +0 与 -0 在存储判断唯一性的时候是恒等的,所以不重复;
  2. undefined 与 undefined 是恒等的,所以不重复;
  3. NaN 与 NaN 是不恒等的,但是在 Set 中只能存一个,不重复。

代码

let mySet = new Set();mySet.add(1); // Set(1) {1}mySet.add(5); // Set(2) {1, 5}mySet.add(5); // Set(2) {1, 5} 这里体现了值的唯一性mySet.add("some text");// Set(3) {1, 5, "some text"} 这里体现了类型的多样性var o = {a: 1, b: 2};mySet.add(o);mySet.add({a: 1, b: 2});// Set(5) {1, 5, "some text", {…}, {…}}// 这里体现了对象之间引用不同不恒等,即使值相同,Set 也能存储

类型转换

Array

// Array 转 Setvar mySet = new Set(["value1", "value2", "value3"]);// 用...操作符,将 Set 转 Arrayvar myArray = [...mySet];String// String 转 Setvar mySet = new Set('hello');  // Set(4) {"h", "e", "l", "o"}// 注:Set 中 toString 方法是不能将 Set 转换成 String

Set 对象作用

数组去重

var mySet = new Set([1, 2, 3, 4, 4]);[...mySet]; // [1, 2, 3, 4]

并集

var a = new Set([1, 2, 3]);var b = new Set([4, 3, 2]);var uNIOn = new Set([...a, ...b]); // {1, 2, 3, 4}

交集

var a = new Set([1, 2, 3]);var b = new Set([4, 3, 2]);var intersect = new Set([...a].filter(x => b.has(x))); // {2, 3}

差集

var a = new Set([1, 2, 3]);var b = new Set([4, 3, 2]);var difference = new Set([...a].filter(x => !b.has(x))); // {1}

关于“ES6中的Map与Set怎么用”这篇文章的内容就介绍到这里,感谢各位的阅读!相信大家对“ES6中的Map与Set怎么用”知识都有一定的了解,大家如果还想学习更多知识,欢迎关注编程网精选频道。

--结束END--

本文标题: ES6中的Map与Set怎么用

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

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

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

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • ES6中的Map与Set怎么用
    这篇文章主要介绍了ES6中的Map与Set怎么用的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇ES6中的Map与Set怎么用文章都会有所收获,下面我们一起来看看吧。Map 对象Map 对象保存键值对。任何值(对...
    99+
    2023-06-27
  • ES6中怎么使用Map与Set集合
    这期内容当中小编将会给大家带来有关ES6中怎么使用Map与Set集合,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。集合的概念以及和数组的区别其实数组也是集合, 只不过数组...
    99+
    2022-10-19
  • ES6中Set和Map怎么用
    这篇文章将为大家详细讲解有关ES6中Set和Map怎么用,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。一.SetES6提供了新的数据结构Set。类似于数组,只不过其成员值...
    99+
    2022-10-19
  • ES6中如何使用Map与Set集合
    本篇内容主要讲解“ES6中如何使用Map与Set集合”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“ES6中如何使用Map与Set集合”吧!集合的概念以及和数组的区别其实数组也是集合, 只不过数组...
    99+
    2023-06-17
  • ES6中for循环和Map、Set怎么用
    这篇文章给大家分享的是有关ES6中for循环和Map、Set怎么用的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。具体如下:现在大家先想一想,如果要你遍历一个数组的元素,你会选择如...
    99+
    2022-10-19
  • Map与Set怎么使用
    这篇文章主要介绍“Map与Set怎么使用”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“Map与Set怎么使用”文章能帮助大家解决问题。1.基本概念我们先来了解以下 Map 和 Set 的基本概念,这...
    99+
    2023-07-02
  • ES6 javascript中class类的get与set怎么用
    这篇文章将为大家详细讲解有关ES6 javascript中class类的get与set怎么用,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。具体如下:与 ES5 一样, 在...
    99+
    2022-10-19
  • ES6之map、set与数组、对象的对比示例
    这篇文章给大家分享的是有关ES6之map、set与数组、对象的对比示例的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。前言ES5中的数据结构,主要是用Array和Object。在E...
    99+
    2022-10-19
  • ES6基础语法之Map和Set对象怎么用
    本篇内容主要讲解“ES6基础语法之Map和Set对象怎么用”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“ES6基础语法之Map和Set对象怎么用”吧!一、Map对象Map 对象保存键值对。任何值...
    99+
    2023-06-30
  • es6中的set怎么使用
    这篇文章主要讲解了“es6中的set怎么使用”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“es6中的set怎么使用”吧!本文操作环境:windows7系统、...
    99+
    2022-10-19
  • es6的set怎么用
    本篇内容介绍了“es6的set怎么用”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成! ...
    99+
    2022-10-19
  • Nodejs中Set和Map怎么用
    小编给大家分享一下Nodejs中Set和Map怎么用,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!数据类型set作用和数组类似,和数组不同的是:它不能存放重复的元...
    99+
    2023-06-14
  • javascript ES6中set集合、map集合如何使用
    本文小编为大家详细介绍“javascript ES6中set集合、map集合如何使用”,内容详细,步骤清晰,细节处理妥当,希望这篇“javascript ES6中set集合、map集合如何使用”文章能帮助大家解决疑惑,下...
    99+
    2023-07-04
  • es6的set怎么使用
    这篇文章主要讲解了“es6的set怎么使用”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“es6的set怎么使用”吧!Set是一种用于存储有序数据的数据结构,Set中的元素具有唯一性,不允许存...
    99+
    2023-07-04
  • ES6中Set结构怎么用
    这篇文章主要介绍了ES6中Set结构怎么用,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。具体如下:Set 类似于数组,但是成员的值都是唯一的...
    99+
    2022-10-19
  • ES6中Map结构怎么用
    这篇文章主要介绍了ES6中Map结构怎么用,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。具体如下:Map 数据结构类似于对象,也是键值对的集...
    99+
    2022-10-19
  • ES6中Set和Map数据结构的示例分析
    这篇文章主要介绍了ES6中Set和Map数据结构的示例分析,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。ES6 的 Set:ES6 提供了新...
    99+
    2022-10-19
  • javascript ES6中set集合、map集合使用方法详解与源码实例
    set与map理解 ES6中新增,set集合和map集合就是一种数据的存储结构(在ES6之前数据存储结构只有array,object),不同的场景使用不同的集合去存储数据 set集合...
    99+
    2022-12-10
    javascript ES6中set集合 map集合使用方法详解与源码实例 JS ES6中set集合使用方法 JS ES6中map集合使用方法
  • ES6新数据结构Set与WeakSet怎么用
    这篇文章主要介绍ES6新数据结构Set与WeakSet怎么用,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!新数据结构Set与WeakSet1. SetSet类似于数据,但是成员值都是...
    99+
    2022-10-19
  • Java数据结构中的Map与Set该怎么理解
    这篇文章主要为大家分析了Java数据结构中的Map与Set该怎么理解的相关知识点,内容详细易懂,操作细节合理,具有一定参考价值。如果感兴趣的话,不妨跟着跟随小编一起来看看,下面跟着小编一起深入学习“Java数据结构中的Map与Set该怎么理...
    99+
    2023-06-29
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作