ES6 Set和Map数据结构

最新推荐文章于 2025-04-17 02:43:48 发布
最新推荐文章于 2025-04-17 02:43:48 发布
阅读量211 收藏 1
点赞数 1
CC 4.0 BY-SA版权
分类专栏： ES6
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/ladream/article/details/110090211

一、Set

1.基本用法

Set数据类型类似数组，但里面的元素都是唯一的。

		var s = new Set();
        [2,2,3,4,3,2,2].forEach(x=>s.add(x));
        console.log(s);	//[2,3,4]

        const a = new Set([2,8,4,6,2,2,3]);
        console.log(a);	//[2,8,4,6,3]
        console.log("a的size:" + a.size);	//5
        console.log("-------------------------");

        const c = new Set(document.querySelectorAll('div'));
        console.log(c.size); 	//2,此时body有两个div
  • 去除数组重复成员：
        var array = [1,2,2,3,3,4,4,4,6];
        console.log([...new Set(array)]);//[1,2,3,4,6]
        console.log([...new Set(array)].join(''));//12346
  • 去除字符串重复字符：
console.log([...new Set("aabbccddee")].join(''));	//abcde

在Set内部认为两个NaN是相等的，而两个对象总是不同的。

        var d = new Set();
        d.add(NaN);
        d.add(NaN);
        console.log(d.size);		//1

        d.add({});
        d.add({});
        console.log(d.size);	//3

3.Set 实例的属性和方法

（1）两个属性

Set.prototype.constructor：构造函数，默认就是Set函数。
Set.prototype.size：返回Set实例的成员总数。

        var d = new Set();
        d.add(NaN);
        d.add(NaN);
        d.add({});
        d.add({});
        console.log(d.size);	//3
        console.log(d.constructor);	// ƒ Set() { [native code] }

（2）四个方法

Set.prototype.add(value)：添加某个值，返回 Set 结构本身。
Set.prototype.delete(value)：删除某个值，返回一个布尔值，表示删除是否成功。
Set.prototype.has(value)：返回一个布尔值，表示该值是否为Set的成员。
Set.prototype.clear()：清除所有成员，没有返回值。

        var e = new Set();
        e.add(1);
        e.add(2);
        e.add(3);
        e.delete(1);
        console.log(e);		//Set(2) {2, 3}
        console.log(e.has(1));	//false
        console.log(e.has(2));	//true
        e.clear();
        console.log(e);		//Set(0){}
  • Array.from() : 可以把Set结构转化为数组
const items = new Set([1, 2, 3, 4, 5]);
const array = Array.from(items);

3.遍历操作

（1）keys()，values()，entries()

Set.prototype.keys()：返回键名的遍历器
Set.prototype.values()：返回键值的遍历器
Set.prototype.entries()：返回键值对的遍历器
Set.prototype.forEach()：使用回调函数遍历每个成员

let set = new Set(['red', 'green', 'blue']);

for (let item of set.keys()) {
  console.log(item);
}
// red
// green
// blue

for (let item of set.values()) {
  console.log(item);
}
// red
// green
// blue

for (let item of set.entries()) {
  console.log(item);
}
// ["red", "red"]
// ["green", "green"]
// ["blue", "blue"]
  • Set 结构的实例默认可遍历，它的默认遍历器生成函数就是它的values方法。这意味着，可以省略values方法，直接用for…of循环遍历 Set。
		var g = new Set(["red","blue","green"]);
		for(let item of g)
        {
            console.log(item);
        }
        //red
		//blue
		//green

（2）forEach()

let set = new Set([1, 4, 9]);
set.forEach((value, key) => console.log(key + ' : ' + value))
// 1 : 1
// 4 : 4
// 9 : 9

（3）遍历的应用
1）去除数组的重复元素
2）数组的并集、交集、差集

二、WeakSet数据结构

WeakSet与set类似，不能有重复的值。与set的区别是，WeakSet的成员之能是对象，不能是其他类型的值。

        var a = [[1,2],[3,4]];
        const ws = new WeakSet(a);
        console.log(ws);
// {[1, 2], [3, 4]}

（1）三个方法：

WeakSet.prototype.add(value)：向 WeakSet 实例添加一个新成员。
WeakSet.prototype.delete(value)：清除 WeakSet 实例的指定成员。
WeakSet.prototype.has(value)：返回一个布尔值，表示某个值是否在 WeakSet 实例之中。
WeakSet没有size属性，所以没办法遍历所有成员。

三、Map

1.含义和基本用法

Map类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。
Object 结构提供了“字符串—值”的对应，Map 结构提供了“值—值”的对应，是一种更完善的 Hash 结构实现。

（1）方法：set（）,get（）,has（）,delete（），
clear（）:清除所有成员

        const m = new Map();
        const o = {p:'HelloWorld'};
        m.set(o,'abc');
        console.log(m.get(o));		//abc
        console.log(m.has(o));		//true
        m.delete(o);	
        console.log(m.has(o));		//false

（2）用Map添加成员

        console.log(ws);
        console.log(ws.size);
        console.log(ws.has('name'));
        console.log(ws.get("name"));
        console.log(ws.has("age"));
        console.log(ws.get("age"));
  • Map 的键实际上是跟内存地址绑定的，只要内存地址不一样，就视为两个键。

如果 Map 的键是一个简单类型的值（数字、字符串、布尔值），则只要两个值严格相等，Map
将其视为一个键，比如0和-0就是一个键，布尔值true和字符串true则是两个不同的键。另外，undefined和null也是两个不同的键。虽然NaN不严格相等于自身，但
Map 将其视为同一个键。

		var m = new Map();
        m.set(0,111);
        m.set(-0,222);
        console.log(m.get(0));
        m.set(true,333);
        m.set("true",444);
        console.log(m.get("true"));
        console.log(m.get(true));
        m.set(undefined,5);
        m.set(null,6);
        console.log(m.get(undefined));
        console.log(m.get(null));
        m.set(NaN,7);
        m.set(NaN,8);
        console.log(m.get(NaN));
//打印的值
222
444
333
5
6
8

2.遍历方法

Map.prototype.keys()：返回键名的遍历器。
Map.prototype.values()：返回键值的遍历器。
Map.prototype.entries()：返回所有成员的遍历器。
Map.prototype.forEach()：遍历 Map 的所有成员。

        var m = new Map([
            ["one",111],
            ["two",222]
        ]);
        for(let key of m.keys()){
            console.log(key);
        }
        for(let value of m.values()){
            console.log(value);
        }
        for(let [key,value] of m.entries()){
            console.log(key,value);
        }
//打印结果：
one
two
111
222
one 111
two 222
one 111
two 222
  • 把Map结构转化为数组
        var m = new Map([
            ["one",111],
            ["two",222]
        ]);
        console.log([...m.keys()]);
        console.log([...m.values()]);
        console.log([...m.entries()]);
        console.log([...m]);
     	m.forEach(function(key,value){
            console.log("Key:%s,value:%s",key,value);
        })
//打印结果
["one", "two"]
[111, 222]
[["one",111],["two",222]]
[["one",111],["two",222]]
Key:111,value:one
Key:222,value:two

3.与其他数据类型的转换

（1）Map转换为数组：使用扩展运算符（…）。
（2）数组 转为 Map：将数组传入 Map 构造函数，就可以转为 Map
（3）Map 转为对象

function strMapToObj(strMap) {
  let obj = Object.create(null);
  for (let [k,v] of strMap) {
    obj[k] = v;
  }
  return obj;
}

const myMap = new Map()
  .set('yes', true)
  .set('no', false);
strMapToObj(myMap)
// { yes: true, no: false }

（4））对象转为 Map：通过Object.entries()。

        let obj = {"a":1, "b":2};
        let map = new Map(Object.entries(obj));
        console.log([...map]);
//打印结果
[["a", 1],["b", 2]]

（5）Map转换为JSON
1）Map 的键名都是字符串，这时可以选择转为对象 JSON。

function strMapToJson(strMap) {
  return JSON.stringify(strMapToObj(strMap));
}

let myMap = new Map().set('yes', true).set('no', false);
strMapToJson(myMap)
// '{"yes":true,"no":false}'

2）Map 的键名有非字符串，这时可以选择转为数组 JSON。

function mapToArrayJson(map) {
  return JSON.stringify([...map]);
}

let myMap = new Map().set(true, 7).set({foo: 3}, ['abc']);
mapToArrayJson(myMap)
// '[[true,7],[{"foo":3},["abc"]]]'

（6）JSON转为Map
1）所有键名都是字符串

function jsonToStrMap(jsonStr) {
  return objToStrMap(JSON.parse(jsonStr));
}

jsonToStrMap('{"yes": true, "no": false}')
// Map {'yes' => true, 'no' => false}

2）整个 JSON 就是一个数组，且每个数组成员本身，又是一个有两个成员的数组。

function jsonToMap(jsonStr) {
  return new Map(JSON.parse(jsonStr));
}

jsonToMap('[[true,7],[{"foo":3},["abc"]]]')
// Map {true => 7, Object {foo: 3} => ['abc']}

四、WeakMap

WeakMap结构与Map结构类似，也是用于生成键值对的集合。

1.与Map的区别：
（1）WeakMap只接受对象作为键名（null除外），不接受其他类型的值作为键名。
（2）WeakMap的键名所指向的对象，不计入垃圾回收机制。

2.特点：元素一旦不再需要，WeakMap 里面的键名对象和所对应的键值对会自动消失，不用手动删除引用。

3.WeakMap的用法：
WeakMap 与 Map 在 API 上的区别主要是两个，
（1）没有遍历操作（即没有keys()、values()和entries()方法）
（2）没有size属性。
（3）不可以使用clear()
（4）只能用get(),set(),has(),delete()

C++程序设计之STL模板（常用容器及迭代器）
qq_43328751的博客
09-22 555
参考：《ACM程序设计》——曾宗根 STL模板 1. vector向量容器 vector向量容器可以像数组一样对元素进行随机访问，还能在尾部插入元素，是一种简单高效的容器，用来代替数组 vector具有内存自动管理的功能，对于元素的插入和删除，可以动态调整所占的内存空间 vector容器有两个重要的方法，begin(),end() begin()返回的识首元素位置的迭代器，end()返回的是最后一个元素的下一个元素位置的迭代器。 创建vector对象 常用以下三种方式： (1)不指定容器的元素个...
ES6 set和map数据结构(数据结构之间的转换)
kangyi158的博客
11-26 474
一、set 1,基本用法 ES6提供了新的数据结构Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。 Set本身是一个构造函数，用来生成Set数据结构。 var s = new Set(); var arr = [1, 2, 2, 2, 3, 4, 5, 6, 6]; arr.map(x => s.add(x)); console.log(s); //1,2,3,4,5,6 以上代码通过add方法向s中添加成员，结果表示Set
Object.values()获取对象中的所有值，并返回一个数组
qq_42238554的博客
11-12 5339
Object.values() 作用：返回一个数组，返回值是对象自身的（不含继承的）所有可遍历（ enumerable ）属性的键值。 Object.values()返回一个数组，其元素是在对象上找到的可枚举属性值。属性的顺序与通过手动循环对象的属性值所给出的顺序相同。 Object.values()方法返回一个给定对象自身的所有可枚举属性值的数组，值的顺序与使用for…in循环的顺序相同 ( ...
ES6 | Map数据类型
最新发布
千禧年无敌优香大王的博客
04-17 1253
Map是什么？ES6 提供的另一种新的引用类型的数据结构 它类似于，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键）以前引用类型中的对象也是键值对的集合 但是键限于字符串总结起来就是Object 结构提供了“字符串—值”的对应，Map 结构提供了“值—值”的对应，是一种更完善的 “键值对” 结构实现。如果你需要“键值对”的数据结构，Map 比 Object 更合适怎么声明Map数据结构证明是引用类型数据还可以用字面量的方式来创建map对象。
C#中string.format用法详解
北京谢吉华的专栏
11-06 2493
C#中string.format用法详解 string.Format对C#字符串格式化 String.Format 方法的几种定义： String.Format (String, Object) 将指定的 String 中的格式项替换为指定的 Object 实例的值的文本等效项。 String.Format (String, Object[]) 将指定 String 中的格式项替换为指定数组中相应 Object 实例的值的文本等效项。 String.Format (IFormatProvider, S
三种办法遍历对象数组，获取数组对象中所有的属性值（key,value）；四种方法查找对象数组里面的某个值
lin_s_c的博客
07-24 1万+
如果是要获取具体第几个属性的值，倒是可以用arr[i].name的方法来实现。查看数据里面是否含有这个布尔值(只要有一个满足就可以了)2、every；查看数组中是否有不满足条件的，和some有相反意思。若是全部的属性的值，并返回一个新的数组嘞，思路是加循环遍历。3、forEach 方法。map方法抽取成公共方法。
es6 获取对象的所有值_ES6学习--对象属性的遍历
weixin_39849894的博客
12-19 2552
ES6一共有5种方法可以遍历对象的属性。(1)for...infor...in循环遍历对象自身的和继承的可枚举属性(不含Symbol属性)。(2)Object.keys(obj)Object.keys返回一个数组，包括对象自身的(不含继承的)所有可枚举属性(不含Symbol属性)。(3)Object.getOwnPropertyNames(obj)Object.getOwnPropertyName...
ES6中Set和Map数据结构，Map与其它数据结构互相转换操作实例详解
10-17
主要介绍了ES6中Set和Map数据结构，Map与其它数据结构互相转换操作,结合实例形式详细分析了ES6中的Set和Map数据结构的概念、原理、遍历、去重等操作,以及Map与其它数据结构互相转换操作,需要的朋友可以参考下
ES6 Set 与 Map 数据结构（复习/面试）
m0_71071209的博客
02-20 708
特性：唯一，不重复，成员值不限Set的原理是：如果传入的数组，那么它会遍历数组， 传入的是字符串，字符串会被自动拆分为单个字符 ，并逐个添加到Array.from()方法 可以将Set 结构转为数组注意点： Set的遍历顺序是插入顺序思考： 使用Set 如何实现数据并集（通过扩展运算符）、交集（通过filter过滤，条件has方法）、差集 （通过filter过滤，条件has方法取反）
ES6 Set与Map数据结构深度解析
"ES6学习笔记之Set和Map数据结构详解" 在JavaScript的ES6标准中，Set和Map是两种全新的数据结构，它们为开发者提供了更高效的数据管理方式，特别是处理唯一值和键值对的场景。 一、Set数据结构 1. 定义：Set是一...
es6 map 获取数组对象的值
yuyu_2019的博客
04-26 1706
var obj = [ {name:'小明',age:16,sex:'男'}, {name:'小红',age:17,sex:'女'}, {name:'小白',age:18,sex:'女'}, ] function getter(obj){ obj.map( item => { console.log(item.age); }) } getter(obj); //16 //17 //18
es6 获取对象的所有值_前端开发必备 - ES6 新特性之 Set和Map数据结构
很多时候犯错都是在不知情的情况下发生的
11-06 803
10.1 Set 介绍: Set数据结构类似数组，但所有成员的值唯一。 Set本身为一个构造函数，用来生成Set数据结构，使用add方法来添加新成员。 基础使用： 注意： 向Set中添加值的时候，不会类型转换，即5和'5'是不同的。 属性和方法： 属性： Set.prototype.constructor：构造函数，默认就是Set函数。 Set.prototype.size：返回Set实例的成员总数。 操作方法： add(value)：添加某个值，返回 Set 结构本身。 delete(v
【javaScript/ES6】获取对象数组中其中一个属性值的集合（forEach、Array.from）
花间半盘棋
03-05 999
有一个对象数组，但只需要其中的某一个属性值。，它是 ES6 的新增语法；Array.from 接收了第2个参数，会把它循环处理，将最终的结果返回；
用js如何输出一个对象的所有属性值（迭代/枚举）
热门推荐
余光的博客
08-07 2万+
做过js的人都知道，变量就var，一般我们是看不出来这个var有什么属性，要想知道它的各种属性有什么，方法如下： function ds(demo) { var str = ""; for (var i in demo.data) { str += i + " = " + demo.data[i]...
js如何获取对象所有的属性和值及使用举例
qq_42931285的博客
08-22 6143
// 使用Object.keys()方法 let obj={} obj.name="马冬梅" obj.age=18 console.log(Object.keys(obj)); 运行结果如下： let obj={} obj.name="马冬梅" obj.age=18 console.log(Object.values(obj)); 运行结果： 使用场景： 如何将数组去重： let ary =[12,33,10,22,12,12,34]; let obj={}; for(let i=0;i<ar
前端对象{}取属性值
qq_45473377的博客
08-04 583
文章目录前言一、pandas是什么？二、使用步骤1.引入库2.读入数据总结 前言 提示：这里可以添加本文要记录的大概内容： 例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。 提示：以下是本篇文章正文内容，下面案例可供参考 一、pandas是什么？ 示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。 二、使用步骤 1.引入库 代码如下（示例）： import numpy as np import
前端 ——js 获取数组对象中的值--demo
宁静致远
05-29 1万+
今天写一个 获取数组对象的小demo。先来说下思路： 1、有多个人，每个人都有有自己的属性及值。 可以存放多个值的是数组， 能同时存放 属性和属性值的是 对象 数组中可以存放对象 2、将数据全部取出，(一个个的对象)，利用for/in语句遍历这些对象 利用字符串拼接的方式 依次放入td中， 再将td放入tr中 3、将tr放入tbody元素中 <div id="content"> <table> <thead&gt...
ES6获取对象数组中某个属性值最小的对象元素
宝贝QY的博客
05-04 5573
获取对象数组中某个属性值最小的对象
获取数组对象中某一属性值的集合
weixin_44379204的博客
05-22 1万+
之前在工作中遇到了将数组对象中的某一个属性值提取出来的需求，当时是利用foreach循环然后放入数组中的，后来发现一些简单的方法如下。 一、from方法 var user = [ { id: 1, name: "李四" }, { id: 2, name: "张三" }, { id: 3, name: "李五" } ] var userName =
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值