ES6 Set 与 Map 的基本使用

2021-07-30 13:58:30 阅读：143 来源： 互联网

使用时必须要new：

Set

是ES6提供给我们的构造函数，能构造出一种新的储存数据的结构；
Set函数可以接受数组、字符串作为参数，也可以接受类似数组的对象 （例三）作为参数。

// 例一
const set = new Set([1, 2, 3, 4, 4]);
[...set]
// [1, 2, 3, 4]

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

// 例三
const set = new Set(document.querySelectorAll('div'));
set.size // 56

// 类似于
const set = new Set();
document
 .querySelectorAll('div')
 .forEach(div => set.add(div));
set.size // 56

特点：只有属性值，成员值唯一（不重复）
用途：可以转换成数组，进行去重、取交集、并集、差集等操作；
Set的基本使用：创建时可传[]、’'等迭代数据；

const arr = [1, 2, 1, '3']
const mySet = new Set(arr)
Set.prototype === new Set([...arr]).__proto__

mySet 结构
在这里插入图片描述

const oS = new Set([1,2,false,2]);  //自带去重方法 // Set(3) {1, 2, false}
const oS1 = new Set('abcdab'); // Set(4) {"a", "b", "c", "d"}
oS.add(5);          //增加值；
oS.add([1, 4]); // Set(5) {1, 2, false, 5, [1, 4]}
oS.delete(false);     //删值；
// oS.clear();        //清空Set；
oS.has(8);         //判断oS中有没有8，返回false；
oS.forEach(val => {  //遍历属性值；
    console.log(val)
});
// 1
// 2
// 5
// [1, 4]
for (const prop of oS){  //ES6-for of方法同样可以遍历迭代数据；
    console.log(prop)
}
// 1
// 2
// 5
// [1, 4]
console.log(Array.from(oS)); //将Set转换位数组； // [1, 2, 5, [1, 4]]
console.log([...oS]);        //还可用...展开迭代数据；// [1, 2, 5, [1, 4]]

//去重：
const o = {
    name : 'll'
};
const arr = [1,2,3,4,5,o, o, {name: 'ly'}];
const oS2 = new Set(arr); // Set(7) {1, 2, 3, 4, 5, Object, Object}
 //Set方法去重，很好的将对象一并去重，比自己写的方法功能完善；

//并集、交集、差集：
const arr1 = [1,2,3,2,3];
const arr2 = [2,3,4,5,4,5];
const arrB = new Set([...arr1, ...arr2])    //取并集； // Set(5) {1, 2, 3, 4, 5}
const arr11 = new Set(arr1); // Set(3) {1, 2, 3}
const arr22 = new Set(arr2); //使arr2去重，并有has方法；// Set(4) {2, 3, 4, 5}
const arrJ = [...arr11].filter( ele => arr22.has(ele) ); // [2, 3]
//[ ].filter进行筛选，先把arr1数据进行去重；//return出arr22中有arr11中的值的值；取交集；

const arrC1 = [...arr11].filter( ele => !arr22.has(ele));  //找出arr1中arr2没有的值； // [1]
const arrC2 = [...arr22].filter( ele => !arr11.has(ele));  //找出arr2中zrr1没有的值；// [4, 5]
const arrC = [...arrC1, ...arrC2] //取出并集即可取差集；// [1, 4, 5]

Map

与Set相似，只不过本质上是键值对的集合；
特点：key对应value，key和value唯一，任何值都可以当属性；
用途：可以让对象当属性，储存，去重等；
Map的基本使用：创建时可传参，注意格式 ([[’’,’’],[’’,’’]])；

Map.prototype上的方法

set(key, val)
get(key)
has(key)
forEach()

const oM = new Map([['name', 'hello'], ['age', 18], [123, true], [{}, 123] ]); // Map(3) {"name" => "hello", "age" => 18, {…} => 123}
//Map.prototype上的方法：
const oM1 = new Map();
oM1.set('name', 'hello')   //增加值；// Map(1) {"name" => "hello"}
oM1.set('age', '18');
const obj = {};
oM1.set(obj, 123);
oM1.get(obj);        //取值（注意：如果取引用值时，现将引用值存好在取）
// oM1.delete('name');  //删除
// oM1.clear();        //初始化‘’
oM1.has(10);         //判断oM1中有没有10，返回false；

oM1.forEach((ele, index, self) => {   //遍历Map；
    console.log(ele, index, self) //self z指Map对象
})
// 11 name Map(3) {"name" => "hello", "age" => 18, {…} => 123}
// 18 "age" Map(3) {"name" => "hello", "age" => 18, {…} => 123}
// 123 {} Map(3) {"name" => "hello", "age" => 18, {…} => 123}

for(const val of oM1){             //ES6-for of方法同样可以遍历迭代数据；
    console.log(val[0], val[1])
}
// name hello
// age 18
// {} 123

标签：ES6,Set,const,name,Map,...,new
来源： https://blog.csdn.net/weixin_43743804/article/details/119216432

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

ES6 Set 与 Map 的基本使用

Set

Map