ES6 中 Map 和 Set 数据结构

news/2024/11/28 9:47:41/

Map

为什么要引入Map?

传统的对象的键只能用字符串，局限性比较大，所以引入了Map

Map介绍

Map类似于对象，也是键值对的集合，但是键的范围不限于字符串，

各种类型(包括对象)的值都可以作为键，

Object 结构提供了 “字符串——值”

Map 结构提供了"值——值"

创建一个Map对象

 const m = new Map();

新建Map实例时，就可以指定键值
案例：Map构造函数接受数组作为参数

const m1 = new Map([["name",'张三'],["age",12]
])

事实上，不仅仅是数组但是需要注意任何具有 Iterator 接口、且每个成员都是一个双元素的数组的数据结构

const m2 = new Map([[{"name":'张三'},{"age":12}]
])

实例的属性和方法：

  1. Map.size属性:返回Map结构的成员总数

  2. Map.set():

    1. set(key,value)
    2. set方法设置键名key对应的键值为value
    3. 如果key已经有值，则键值会被更新，否则就新生成该键。
    4. 如果set第二个参数没有传默认为undefined

  3. Map.get(): get(key) 获取某个value值

  4. Map.has(): has(key)判断是否有没有那个键

  5. Map.delete():delete(key) 删除所指定的键

  6. Map.clear(): clear(key) 清除所有成员，没有返回值

Map中key

  1. 键为字符串
m.set("a","b")
console.log(m.get('a'));//b

​ 2. 键为对象

const obj = {name:'map',age:12}
m.set(obj,1)
console.log(m.get(obj));//1

​ 2.1 键为空对象

m.set({},2)
console.log(m.get({}));//undefined

​ 2.2 键为Object

m.set(Object,2)
console.log(m.get(Object));//{function Object() { [native code] } => 2}

​ 3. 键为数组

const arr = [12,32,45];
m.set(arr,3)
console.log(m.get())//3

​ 3.1 键为空数组

m.set([],3)
console.log(m.get([]))//undefined

​ 3.2 键为Array

m.set(Array,3)
console.log(m.get(Array))//{function Array() { [native code] } => 3}

遍历方法

Map 结构原生提供三个遍历器生成函数和一个遍历方法。

  • Map.prototype.keys()：返回键名的遍历器。
for(let key of m.keys()){console.log(key)}
  • Map.prototype.values()：返回键值的遍历器。
for(let value of m.values()){console.log(value)}
  • Map.prototype.entries()：返回所有成员的遍历器。
for(let i of m.entries()){console.log(i)
}

或者

 for(let [key,value] of m.entries()){console.log(key,value)}
  • Map.prototype.forEach()：遍历 Map 的所有成员。
for(let [key,value] of m){console.log(key,value)}

将Map结构转换成数组结构，比较快的方法是使用扩展运算符[…]

console.log([...m.keys()]);
console.log([...m.values()]);
console.log([...m.entries()]);
console.log([...m]);

转换成数组，这样就可以使用数组的方法，filter过滤 、 map遍历

const mp =new Map()
.set(1,"a")
.set(2,"b")
.set(3,"c")
//filter过滤
console.log([...mp].filter(([key,value]) =>  key<2));//0: (2) [1, 'a']
//map遍历
console.log([...mp].map(([key,value]) =>  [key,value]));
//0: (2) [1, 'a']
//1: (2) [2, 'b']
//2: (2) [3, 'c']

与其他数据结构的相互转换

  1. Map转换为数组

方法1：将Map结构转换成数组结构，比较快的方法是使用扩展运算符[…]

console.log([...m]);

方法2：Array.from()

console.log(Array.from(m))
  1. 数组转换为Map

将数组传入Map构造函数，就可以转换成Map

const m1 = new Map([["name",'张三'],["age",12]
])
//Map(2)
//[[Entries]]
/0: {"name" => "张三"}
1: {"age" => 12}

set

Set新的数据结构，类似于数组，但是成员的值都是唯一的，没有重复的值

const s = new Set();[2,3,4,5,1,2,2].forEach(x => s.add(x))for(let i of s){console.log(i)}
const set = new Set([1,2,3,4,5,2])//是一个中括号，不要和Map弄混了
console.log(set);//1,2,3,4,5

实例的属性和方法

  • Set.size属性:返回Set实例的成员总数
  • Set.add(vlaue)：添加某个值，返回Set结构本身
  • Set.delete(value):删除某个值，返回Set结构本身
  • Set.has(value):返回一个布尔值，表示该值是否为Set的成员
  • Set.clear()：清除所有成员，没有返回值
let se = new Set();
se.add(12).add(2).add(2);
console.log(se);//12,2        2添加了两次但是会自动去重

遍历方法

  • Set.prototype.keys()：返回键名的遍历器
  • Set.prototype.values()：返回键值的遍历器
  • Set.prototype.entries()：返回键值对的遍历器
  • Set.prototype.forEach()：使用回调函数遍历每个成员
let set1 = new Set(['one','two','three']);
//Set.keys()
for(let item of set1.keys()){console.log(item);  //one two three}
//Set.values
for(let item of set1.values()){console.log(item);  //one two three
}

由于 Set 结构没有键名，只有键值（或者说键名和键值是同一个值），所以keys方法和values方法的行为完全一致。

Set.entries()

 for(let item of set1.entries()){console.log(item);//['one', 'one']//['two', 'two']//['three', 'three']}

Set.forEach()

set1.forEach((value,key) => console.log(value,key))//one one//two two//three three

Set结构的键名就是键值，两者就是同一个值，因此第一个参数和第二个参数永远一样

扩展运算符也可以用于Set结构

let set = new Set([12,14,15,16,12])
console.log([...set]);//[12, 14, 15, 16]
  • 数组的map和filter方法也可以间接用于Set
  • Set实现并集，交集，差集
//并集，使用扩展运算符
let set1 = new Set([1,2,3,4])
let set2 = new Set([2,4,6,8])
console.log([...set1,...set2]);

//交集
console.log([...set1].filter(item => set2.has(item)));//2,4

//差集
console.log([...set1].filter(item => !set2.has(item)));//1,3

  • 改变Set结构有两种方法

    • Array.from()方法
 let set = new Set([1, 2, 3]);set = new Set(Array.from(set, val => val * 2));console.log(set);//2,4,6
  • ​ 利用原 Set 结构映射出一个新的结构，然后赋值给原来的 Set 结构
let set = new Set([1, 2, 3]);
set = new Set([...set].map(set val => val * 2));
console.log(set);//2,4,6

​

补充遍历数组的用法：

  1. map()方法

map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。

array.map(function(currentValue,index,arr), thisValue)

  • function(),必选。函数，数组中的每个元素都会执行这个函数
    函数参数:

    • currentValue 必选。当前元素的值
    • index 可选。当前元素的索引值
    • arr 可选。当前元素属于的数组对象

  • thisValue 可选。对象作为该执行回调时使用，传递给函数，用作 “this” 的值。

  • 返回值：返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。

  1. filter()方法

filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。

array.filter(function(currentValue,index,arr), thisValue)

  • function(),必选。函数，数组中的每个元素都会执行这个函数
    函数参数:

    • currentValue 必选。当前元素的值
    • index 可选。当前元素的索引值
    • arr 可选。当前元素属于的数组对象

  • thisValue 可选。对象作为该执行回调时使用，传递给函数，用作 “this” 的值。

  • 返回值：返回数组，包含了符合条件的所有元素。如果没有符合条件的元素则返回空数组。

map()和filter()方法两者的返回值不一样

  1. from()方法

Array.from(object, mapFunction, thisValue)

  • object 必选。要转换为数组的对象
  • mapFunction 可选。数组中每个元素要调用的函数
  • thisValue 可选。映射函数(mapFunction)中的this对象

http://www.ppmy.cn/news/487361.html

相关文章

《Python数据挖掘入门与实践》学习笔记1

《Python数据挖掘入门与实践》学习笔记1

第八章-用神经网络破解验证码 在8.3.1 反向传播算法一节中出现的一点有问题 在这节中&#xff0c;需要对创建好的神经网络进行训练、预测并评估。 得到预测值后&#xff0c;可以用scikit-learn计算F1值。 from sklearn.metrics import f1_score print("F-score: {0:.2f…
阅读更多...
java 中几种常用数据结构

java 中几种常用数据结构

JAVA中常用的数据结构&#xff08;java.util. 中&#xff09; java中有几种常用的数据结构&#xff0c;主要分为Collection和map两个主要接口&#xff08;接口只提供方法&#xff0c;并不提供实现&#xff09;&#xff0c;而程序中最终使用的数据结构是继承自这些接口的数据结构…
阅读更多...
数据结构（顺序队列/链队列//循环队列）

数据结构（顺序队列/链队列//循环队列）

顺序队列 #include<iostream> #include<malloc.h> using namespace std; typedef int ElemType; const int MaxSize200; typedef struct {ElemType data[MaxSize];int rear,front;}SqQueue;void InitQueue(SqQueue *&s) {s(SqQueue *)malloc(sizeof(SqQueue))…
阅读更多...
数据结构（单链表，顺序结构）

数据结构（单链表，顺序结构）

//顺序表基本运算算法 实现算法的初始化&#xff0c;求是否为空表&#xff0c;返回长度&#xff0c;查询&#xff0c;插入&#xff0c;删除 #include <stdio.h> #include <malloc.h> #define MaxSize 50 typedef int ElemType; typedef struct { ElemType data[…
阅读更多...
LLM - 基于 Vicuna-13B 参数计算搭建私有 ChatGPT 在线聊天

LLM - 基于 Vicuna-13B 参数计算搭建私有 ChatGPT 在线聊天

欢迎关注我的CSDN&#xff1a;https://spike.blog.csdn.net/ 本文地址&#xff1a;https://blog.csdn.net/caroline_wendy/article/details/131312366 LLaMA 和 Vicuna 都是大语言模型(LLM)&#xff0c;两者的差异如下&#xff1a; LLaMA (Large Language Model Meta AI)&#…
阅读更多...
木一githab

木一githab

git常用命令 本地项目代码上传到远端GitLab仓库&#xff1a; https://blog.csdn.net/weixin_42104592/article/details/106196306 GitLab配置ssh key&#xff1a; https://www.cnblogs.com/hafiz/p/8146324.html 拉取&#xff1a; git clone git192.168.200.109:snail/GitTest…
阅读更多...
数据结构（链栈-链表）

数据结构（链栈-链表）

方法一&#xff1a;引用 #include<iostream> #include<cstdio> #include<malloc.h> using namespace std; typedef int ElemType; const int MaxSize50; typedef struct LNode {ElemType data;struct LNode *next; } LinkList;void InitList(LinkList *&…
阅读更多...
数据结构（双链表/循环链表例题 ）

数据结构（双链表/循环链表例题 ）

有一个带头结点的双链表L设计一个算法让其所有元素逆置&#xff0c;即第一个元素变成最后元素&#xff0c;第二个元素变成倒数第二个元素 typedef struct DNode {ElemType data;struct DNode *prior;struct DNode *next; } Dlinknode; void conversion(Dlinknode *&L) {Dl…
阅读更多...
最新文章

Copyright @ 2022~2023