JS:ES6-9 初识Set与Map

小白目

已于 2022-02-25 12:08:12 修改

阅读量501

点赞数 1

分类专栏： ES6 -- 11 文章标签： javascript 前端开发语言 es6 ecmascript

于 2021-12-23 20:00:04 首次发布

本文链接：https://blog.csdn.net/qq_37974755/article/details/122115209

版权

ES6 -- 11 专栏收录该内容

17 篇文章 2 订阅

订阅专栏

Set概述： ES6 提供了新的数据结构 Set（集合）。它类似于数组，但成员的值都是唯一的，集合实现了 iterator 接口，所以可以使用『扩展运算符』和『for…of…』进行遍历，集合的属性和方法：

1. size 返回集合的元素个数；

2. add 增加一个新元素，返回当前集合；

3. delete 删除元素，返回 boolean 值；

4. has 检测集合中是否包含某个元素，返回 boolean 值；

5. clear 清空集合，返回 undefined；

set基本语法：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Set</title>
</head>
<body>
<script>
// Set集合
let s = new Set();
console.log(s,typeof s);
let s1 = new Set(["大","二","三","三"]);
console.log(s1); // 自动去重
// 1. size 返回集合的元素个数；
console.log(s1.size);
// 2. add 增加一个新元素，返回当前集合；
s1.add("大");
console.log(s1);
// 3. delete 删除元素，返回 boolean 值；
let result = s1.delete("三");
console.log(result);
console.log(s1);
// 4. has 检测集合中是否包含某个元素，返回 boolean 值；
let r1 = s1.has("四");
console.log(r1);
// 5. clear 清空集合，返回 undefined；
s1.clear();
console.log(s1);
</script>
</body>
</html>

Set集合实践：去重、交集、并集、差集

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Set集合实践</title>
</head>
<body>
<script>
// Set集合实践
let arr = [1,2,3,4,5,4,3,2,1];
// 数组去重
let s1 = new Set(arr);
console.log(s1);
// 交集
let arr2 = [3,4,5,6,5,4,3];
// 看来我需要学学数组的一些方法
let result = [...new Set(arr)].filter(item=>new
Set(arr2).has(item));
console.log(result);
// 并集
// ... 为扩展运算符，将数组转化为逗号分隔的序列
let union = [...new Set([...arr,...arr2])];
console.log(union);
// 差集：比如集合1和集合2求差集，就是1里面有的，2里面没的
let result1 = [...new Set(arr)].filter(item=>!(new
Set(arr2).has(item)));
console.log(result1);
</script>
</body>
</html>

Map概述： ES6 提供了 Map 数据结构。它类似于对象，也是键值对的集合。但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。Map 也实现了iterator 接口，所以可以使用『扩展运算符』和『for…of…』进行遍历；

Map 的属性和方法：

1. size 返回 Map 的元素个数；

2. set 增加一个新元素，返回当前 Map；

3. get 返回键名对象的键值；

4. has 检测 Map 中是否包含某个元素，返回 boolean 值；

5. clear 清空集合，返回 undefined；

基本语法实现：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Map集合</title>
</head>
<body>
<script>
// Map集合
// 创建一个空 map
let m = new Map();
// 创建一个非空 map
let m2 = new Map([
['name','白骨精'],
['slogon','长生不老']
]);
// 1. size 返回 Map 的元素个数；
console.log(m2.size);
// 2. set 增加一个新元素，返回当前 Map；
m.set("张三","大哥");
m.set("李四","二哥");
console.log(m);
// 3. get 返回键名对象的键值；
console.log(m.get("张三"));
// 4. has 检测 Map 中是否包含某个元素，返回 boolean 值；
console.log(m.has("张三"));
// 5. clear 清空集合，返回 undefined；
m.clear();
console.log(m);
</script>
</body>
</html>

众所周知：对象可for...in 但不可for...of

        const m = {}
        m[1] = 2
        m['a'] = 'b'
        console.log(m)
        for (i in m)
            console.log(i)
            //  以下会报错提示'm is not iterable'
            //         for (i of m)
            //            console.log(i)
            //         for ([i, j] of m)
            //             console.log([i, j])

小白目

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
JS:ES6-9 初识Set与Map

Set概述： ES6 提供了新的数据结构 Set（集合）。它类似于数组，但成员的值都是唯一的，集合实现了 iterator 接口，所以可以使用『扩展运算符』和『for…of…』进行遍历，集合的属性和方法：1. size 返回集合的元素个数；2. add 增加一个新元素，返回当前集合；3. delete 删除元素，返回 boolean 值；4. has 检测集合中是否包含某个元素，返回 boolean 值；5. clear 清空集合，返回 undefined；set基本语法：..
复制链接

扫一扫