首页 > 其他分享 >ES6 Set和Map数据结构用法详解

ES6 Set和Map数据结构用法详解

时间：2024-11-17 19:45:12浏览次数：3  
标签：ES6 Set const Map console new myMap

文章目录

前言

在ES6（ECMAScript 2015）引入了两种新的数据结构：Set 和 Map。这两种数据结构提供了更加高效的数据存储和检索方式，以下是它们的特性和用法

Set 数据结构

Set 是一种集合数据结构，它类似于数组，但是成员的值都是唯一的，没有重复的值。Set中的每个值只能出现一次，这意味着你可以使用 Set 来过滤掉数组中的重复元素。

创建Set

let mySet = new Set();

// 例一
const mySet2 = new Set([1, 2, 3, 4, 4]);
console.log([...mySet]) // [1, 2, 3, 4]

// 例二
const mySet3 = new Set([1, 2, 3, 4, 5, 6, 6, 7,6,3]);
mySet3.size // 7

添加元素

Set不会添加重复的值

let mySet = new Set();

mySet.add(1);
mySet.add('some text');
mySet.add({a: 3});

删除元素

删除某个值，返回一个布尔值，表示删除是否成功。

const mySet = new Set([1, 2, 3, 4, 4]);
mySet.delete(1); // 删除值为 1 的元素

删除所有数据

const mySet = new Set([1, 2, 3, 4, 4]);

mySet.clear(); // 移除所有元素

获取set的大小（类似于数组的长度）

console.log(mySet.size); // 返回 Set 中元素的数量

检查是否包含某个元素

返回一个布尔值，表示该值是否为Set的成员。

const mySet = new Set([1, 2, 3, 4, 4]);
let hasOne = mySet.has(1); // 返回 true 或 false

四种遍历set的方法

1.for…of循环
let mySet = new Set([1, 8, 5, 9, 10]);

for (let value of mySet) {
    console.log(value); // 1，8，5，9，10；依次打印Set中的值
}
2.forEach方法

Set 对象有一个 forEach 方法，该方法接受一个回调函数作为参数，这个回调函数会在每次迭代时被调用，同时传递当前值、当前值（因为 Set 只有值）、以及 Set 本身作为参数。

let mySet = new Set([1, 8, 5, 9, 10]);

mySet.forEach(function(value) {
    console.log(value);
});

// 使用箭头函数
mySet.forEach(value => console.log(value));
3.转换为数组后使用 for 循环

将 Set 转换成数组，然后利用数组的方法进行操作。可以使用扩展运算符 ... 或者 Array.from() 将 Set 转换成数组，之后就可以使用传统的 for 循环或者数组的其他方法来遍历了。

let mySet = new Set([1, 8, 5, 9, 12]);

// 使用扩展运算符
let arrayFromSet = [...mySet];
for (let i = 0; i < arrayFromSet.length; i++) {
    console.log(arrayFromSet[i]);
}

// 使用 Array.from()
let anotherArray = Array.from(mySet);
for (let i = 0; i < anotherArray.length; i++) {
    console.log(anotherArray[i]);
}
4.keys(),values(),entries()

虽然 Set 只有值没有键，但为了保持与其他数据结构的一致性，Set 仍然提供了 keys(), values(), 和 entries() 方法。这些方法返回的都是迭代器对象，可以配合 for…of 循环使用。

  • keys()
    keys()方法返回的值和values()实际上上相同的结果，因为set中键就是值
let mySet = new Set([1, 8, 5, 9, 12]);
for (let key of mySet.keys()) {
    console.log(key);
}


const mySet2 = new Set(['html', 'css', 'js']);
const keysArray = Array.from(mySet2.keys());
console.log(keysArray); // 输出: ['html', 'css', 'js']
  • values()
    values() 方法返回一个新的迭代器对象，它包含了 Set 对象中每个元素的值。
const mySet = new Set([1, 2, 3, 4, 4]);

for (let value of mySet.values()) {
    console.log(value);
}

// 过滤出满足条件的值
const mySet2 = new Set([1, 3, 4.5,0.75, 1.25, 2.5, 3.75, 5]);
const filteredValues = Array.from(mySet2.values()).filter(num => num > 1 && num < 4);
console.log(filteredValues); // 输出: [3,1.25, 2.5, 3.75]
  • entries()
    entries() 方法返回 [value, value] 形式的数组，其中两个值相同，这与 Map 的 entries() 不同。
let mySet = new Set([1, 8, 5, 9, 12]);

for (let entry of mySet.entries()) {
    console.log(entry); // [value, value]
}

//使用 entries() 和解构来遍历 Set
const mySet2 = new Set(['html', 'css', 'js']);
for (const [key, value] of mySet2.entries()) {
    console.log(`Key: ${key}, Value: ${value}`);
}
// 输出:
// Key: html, Value: html
// Key: css, Value: css
// Key: js, Value: js

集合运算方法

  • .union()是并集运算，返回包含两个Set中存在的所有元素的集合
const mySet1 = new Set(["js", "html", "css"]);
const mySet2 = new Set(["Python", "Java", "js"]);

const all = mySet1.union(mySet2);
// 输出： {"js", "html", "css", "Python", "Java"}
  • .intersection()是交集运算，返回同时包含在两个Set中的成员
const mySet1 = new Set(["js", "html", "css"]);
const mySet2 = new Set(["Python", "Java", "js"]);

const newSet = mySet1.intersection(mySet2);
// 输出： {"js"}
  • .difference()是差集运算，返回第一个集合中存在但第二个集合中不存在的所有元素的集合。
const mySet1 = new Set(["js", "html", "css"]);
const mySet2 = new Set(["Python", "Java", "js"]);

const newSet1 = mySet1.difference(mySet2);
// Set {"html", "css"}

const newSet2 = mySet2.difference(mySet1);
// Set {"Python", "Java"}
  • .isSubsetOf()返回一个布尔值，判断第一个集合是否为第二个集合的子集，即第一个集合的所有元素是否都是第二个集合中的元素
const mySet1 = new Set(["js", "html", "css"]);
const mySet2 = new Set(["Python", "Java", "js"]);

mySet2.isSubsetOf(mySet1);
// true

mySet1.isSubsetOf(mySet2);
// false

Map数据结构

Map 是一种键值对的集合，任何类型的值（包括对象）都可以作为键或值。与对象不同的是，Map 的键是有序的，所以当你遍历它的时候，会按照插入顺序来。

创建Map

let myMap = new Map()

添加元素(设置键值对)

let myMap = new Map()

myMap.set('name', '张三');
myMap.set(1, 'one');
myMap.set(true, 7);

// 输出：
// new Map([
//     [
//         "name",
//         "张三"
//     ],
//     [
//         1,
//         "one"
//     ],
//     [
//         true,
//         7
//     ]
// ])

删除元素

let myMap = new Map([
  ['name','张三'],
  ['age','18']
])

myMap.delete('name'); // 删除键为 'name' 的键值对

删除所有数据

let myMap = new Map([
  ['name','张三'],
  ['age','18']
])

myMap.clear(); // 移除所有键值对

获取Map的大小

let myMap = new Map([
  ['name','张三'],
  ['age','18']
])

// 返回 Map 中键值对的数量; 
console.log(myMap.size);//输出：2

检查键是否存在

检查是否存在某个数据，返回布尔值

let myMap = new Map([
  ['name','张三'],
  ['age','18']
])

let hasName = myMap.has('name'); // true

Map的3种遍历方法

1.forEach

forEach方法允许你为Map中的每一个键值对执行一个函数。这个函数可以接收三个参数：值，键和Map对象本身

myMap.forEach((value, key, map) => {
  console.log(`${key} = ${value}`);
});
2.使用 for…of 循环遍历 entries()

entries() 方法返回一个新的迭代器对象，它包含了 Map 对象中每个元素的 [key, value] 数组形式的条目。使用 for...of 循环可以直接遍历这些条目

const myMap = new Map([
  ['name', 'Alice'],
  ['age', 18],
  ['city', 'Wonderland']
]);

for (const [key, value] of myMap.entries()) {
  console.log(`${key}: ${value}`);
}
3.使用 for…of 循环遍历 keys() 和 values()
  • keys() :返回一个新的迭代器对象，包含了Map对象中每个元素的键
  • values():返回一个新的迭代器对象，包含了Map对象中每个元素的值
const myMap = new Map([
  ['name', 'Alice'],
  ['age', 18],
  ['city', 'Wonderland']
]);

// 遍历键
for (const key of myMap.keys()) {
  console.log(key);
}

// 遍历值
for (const value of myMap.values()) {
  console.log(value);
}

Map类型转换

1.Map转换为数组
const myMap = new Map([
 ['name', 'Alice'],
 ['age', 18],
 ['city', 'Wonderland']
]);

// 使用扩展运算符
const entriesArray = [...myMap.entries()];
console.log(entriesArray); // 输出: [['name', 'Alice'], ['age', 18], ['city', 'Wonderland']]

// 使用 Array.from()
const keysArray = Array.from(myMap.keys());
const valuesArray = Array.from(myMap.values());
const mapToArray = Array.from(myMap);
console.log(keysArray); // 输出: ['name', 'age', 'city']
console.log(valuesArray); // 输出: ['Alice', 18, 'Wonderland']
console.log(mapToArray); // 输出: [['name', 'Alice'], ['age', 18],['city','Wonderland']]

// 使用数组方法，比如 map
const keyValuePairs = Array.from(myMap).map(([key, value]) => ({ key, value }));
console.log(keyValuePairs); // 输出: [{key: 'name', value: 'Alice'}, {key: 'age', value: ¾}, {key: 'city', value: 'Wonderland'}]
2.数组转换Map

将数组转换为 Map 可以通过 Map构造函数完成，只要数组的元素是键值对的形式

const arrayToMap = new Map([
  ['name', 'Alice'],
  ['age', 18]
]);
console.log(arrayToMap); 
// 输出: Map(2) { 'name' => 'Alice', 'age' => 18 }
3.Map转换对象

Map转换为普通对象可以使用 Object.fromEntries() 方法，这个方法接受一个键值对数组并返回一个对象

const myMap = new Map([
  ['name', 'Alice'],
  ['age', 18],
  ['city', 'Wonderland']
]);
const myObj = Object.fromEntries(myMap);
console.log(myObj); 
// 输出: { name: 'Alice', age: 18, city: 'Wonderland' }
4.对象转换Map

普通对象转换为 Map 可以通过Object.entries()方法，它返回一个给定对象自身可枚举属性的键值对数组，然后使用这个数组初始化 Map

const obj = { name: 'Bob', age: 25, city: 'New York' };
const newMap = new Map(Object.entries(obj));
console.log(newMap); 
// 输出: Map(3) { 'name' => 'Bob', 'age' => 25, 'city' => 'New York' }
5.Map转换JSON

将 Map 直接转换为 JSON 字符串需要首先将 Map 转换为对象，然后再使用 JSON.stringify() 方法将其转换为 JSON 字符串。

const myMap = new Map([['name', 'Alice'], ['age', 18]]);
const mapToObject = Object.fromEntries(myMap);
const mapToJson = JSON.stringify(mapToObject);
console.log(mapToJson); 
// 输出: '{"name":"Alice","age":18}'
6.JSON转换Map

JSON 字符串转换为 Map，你需要先解析 JSON 字符串得到一个对象，然后将这个对象转换为 Map

const jsonStr = '{"name":"Alice","age":18}';
const obj = JSON.parse(jsonStr);
const jsonToMap = new Map(Object.entries(obj));
console.log(jsonToMap); 
// 输出: Map(2) { 'name' => 'Alice', 'age' => 18 }

标签：ES6,Set,const,Map,console,new,myMap
From： https://blog.csdn.net/cx18333/article/details/143837021

相关文章

  • java day13 Set集合 & Map集合 & Stream流
    目录​编辑1.Set集合： 1.Set集合的特点：  2.HashSet的底层原理：​编辑  3.LinkedHashSet集合的底层原理：  4.TreeSet集合：2.Map集合： 1.Map集合概述： 2.Map集合的常用方法：3.Map集合的遍历方式：  4.Map集合的实现类：3.Stream流：1.获取流的方法：2.流......
  • 集合类源码浅析のJDK1.8ConcurrentHashMap（上篇）
    文章目录前言一、概述二、CHM的属性1、属性三、新增方法1、put2、initTable四、分段计数1、addCount2、fullAddCount3、sumCount总结前言  本篇是JDK1.8的ConcurrentHashMap源码个人学习笔记，ConcurrentHashMap（笔记中简称CHM）是一种线程安全的HashMap，1.8中废弃了......
  • 集合类源码浅析のJDK1.8ConcurrentHashMap（下篇）
    文章目录前言一、分段扩容1、addCount2、transfer3、helpTransfer二、查询二、删除总结前言  主要记录ConcurrentHashMap（笔记中简称CHM）的查询，删除，以及扩容方法的关键源码分析。一、分段扩容1、addCount  扩容的逻辑主要在addCount方法的后半段：private......
  • MapReduce经典案例————数据去重
    目录一、问题介绍二、实验工具 三、案例实现1.打开idea，单击“file->new->project”,设置项目名称为“Hadoop_test”,在对话框下部的“Advanced Settings”中设置Groupid为“cn.lyy”。​编辑2.从左侧项目结构中打开pom.xml，并输入如下依赖：​编辑 2.1pom.xml:3.从左......
  • IDEA不使用lombok，如何快速生成get和set方法
    前言大家好，我是小徐啊。我们在开发Java应用的时候，对于实体类，一般是entity或者pojo类，需要设置好属性的get和set方法。这是比较普通的操作。当然，现在已经有lombok这个插件和依赖来帮助我们不用写get和set方法了。不过，对于一些老系统，我还是习惯于手写get和set方法。当然，IDEA提供了......
  • （长期更新）《零基础入门 ArcGIS(ArcMap) 》实验一（下）----空间数据的编辑与处理（超超超详细
    续上篇博客（长期更新）《零基础入门ArcGIS(ArcMap)》实验一（上）----空间数据的编辑与处理（超超超详细！！！）-CSDN博客继续更新        本篇博客内容为道路拓扑检查与修正，有对本实验实验目的、实验介绍有不了解的，可以看下上篇博客。        上篇博客有宝子私信我下载......
  • SCB-Dataset3：首个涵盖从幼儿园到大学的多行为类别学生课堂行为检测数据集
    2023-10-04，由成都东软学院创建首个涵盖从幼儿园到大学的多行为类别学生课堂行为检测数据集（SCB-dataset3），这个数据集通过提供丰富的学生行为图像和标签，为自动检测学生课堂行为提供了重要的资源，有助于分析学生课堂表现和提高教学效果。数据集地址：学生课堂行为数据集(SCB-dataset......
  • JDBC学习笔记（四）--JdbcUtil工具类的底层实现、解决 java.sql.SQLException: Operation
    目录（一）为什么要使用JdbcUtil工具类（二）创建一个prorperties文件1.在文件目录或src目录下，选择新建FIle2.创建properties文件 3.编写配置文件Java基础：反射4.获取资源的方式第一种第二种 ​编辑 第三种（一）为什么要使用JdbcUtil工具类问题：在编写jdbc的时候，在每一......
  • Solon MVC 的 @Mapping 用法说明
    在SolonMvc里，@Mapping注解一般是配合@Controller和@Remoting，作请求路径映射用的。且，只支持加在public函数或类上。1、注解属性属性说明备注value路径与path互为别名path路径与value互为别名method请求方式限定(def=all)可用@Post、@Get......
  • C++：基于红黑树封装map和set
    红黑树的修改想要用红黑树封装map和set，需要对之前实现的key-value红黑树进行修改，因为map是key-value结构而set是key结构，之前实现的红黑树不能满足需求。我们需要将key和key-value抽象统一成成一个类型T，需要修改红黑树节点类和红黑树类进行。红黑树节点enumColor{ RED, ......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99