ECMAScript6-Set和Map

最新推荐文章于 2024-07-06 16:47:02 发布

菜鸟一枚在这

最新推荐文章于 2024-07-06 16:47:02 发布

阅读量235

点赞数

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

本文链接：https://blog.csdn.net/weixin_45969711/article/details/121254675

版权

前端专栏收录该内容

17 篇文章 0 订阅

订阅专栏

系列文章目录

上期我们讲解了数组方面的内容，这期我们将set和map方面的知识。

es6 提供了两种新的数据结构 Set 和 Map

文章目录

系列文章目录
1、Set
2、Map
总结

1、Set

Set 是⼀个构造函数，⽤来⽣成 Set 数据结构，它类似于数组，但是成员的值都是唯⼀的，没有重复的值.
初始化 Set 可以接受⼀个数组或类数组对象作为参数，也可以创建⼀个空的 Set

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
  <script>
      var s1 = new Set();
      var s2 = new Set([1, 2, 3]);
      console.log(s1);// Set(0) {}
      console.log(s2);// Set(3) {1, 2, 3}
  </script>
</body>
</html>

在 Set 中成员的值是唯⼀的，重复的值⾃动被过滤掉

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
  <script>
      var s1 = new Set([1, 2, 2, 3, 1, 4]);
      console.log(s1);// Set(4) {1, 2, 3, 4}
  </script>
</body>
</html>

Set 的⼀些属性⽅法：

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
  <script>
      var set = new Set([1,2]);
      set.add(3);// 添加成员
      console.log(set.size);// 3 成员总数
      console.log(set);// Set(3) {1, 2, 3}
      set.add([4,5]);// 添加成员
      console.log(set.size);// 4 成员总数
      console.log(set.has(2));// true 有该成员
      console.log(set);// Set(4) {1, 2, 3, [4, 5]}
      set.delete(2);// 删除成员
      console.log(set);// Set(3) {1, 3, [4, 5]}
      console.log(set.has(2));// false 没有该成员
      set.clear();// 清除所有成员
      console.log(set);// Set(0) {}
  </script>
</body>
</html>

得益于数据结构 Set 查找更快速⾼效，但也因为数据结构的内部数据是⽆序的，⽆法实现按下标改查，排序等操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
  <script>
      var arr = [1,2,3,'a',4,'b'];
      var set = new Set(arr);
      console.log(set[0]);// undefined
      console.log(set['a']);// undefined
  </script>
</body>
</html>

2、Map

Map 是⼀个构造函数，⽤来⽣成 Map 数据结构，它类似于对象，也是键值对的集合.
但是“键”可以是⾮字符串, 初始化 Map 需要⼀个⼆维数组，或者直接初始化⼀个空的 Map

var m1 = new Map();
var m2 = new Map([['a', 123], ['b', 456], [3, 'abc']]);
console.log(m1);// Map(0) {}
console.log(m2);// Map(3) {"a" => 123, "b" => 456, 3 => "abc"}

Map 的⼀些操作⽅法：

set(key, value)：设置键值对
get(key)：获取键对应的值
has(key)：是否存在某个键
delete(key)：删除某个键值对，返回⼀个布尔值，表示删除是否成功

var map = new Map([['a', 123], ['b', 456], [3, 'abc']]);
map.set('c',789);
console.log(map.get('c')); // 789
console.log(map.has('b')); // true 此key存在
map.delete(3); // true 成功删除key
console.log(map); // Map(3) {"a" => 123, "b" => 456, "c" => 789}

传统 Object 只能⽤字符串作键，Object 结构提供了“字符串 — 值”的对应
Map 结构提供了“键 — 值”的对应，是⼀种更完善的 Hash 结构实现
如果你需要“键值对”的数据结构，Map ⽐ Object 更快速更⾼效更合适
遍历Map和Set对象

//遍历Map
var map = new Map([['a', 123], ['b', 456], [3, 'abc'],['c', 789]]);
map.forEach((val,key,obj)=>{
 console.log('val: '+val);
 console.log('key: '+key);
 console.log(obj);
}); // 结果如下图
//遍历Set
var set = new Set(['a','b','c','d']);
set.forEach((val,key,obj)=>{
 console.log('val: '+val);
 console.log('key: '+key);
 console.log(obj);
});// 结果如下图

当然，还可以使⽤es6中的 for of 遍历

var map = new Map([['a', 123], ['b', 456], [3, 'abc'],['c', 789]]);
for (const [key,val] of map) {
 console.log(key+' : '+val);
}
// a : 123
// b : 456
// 3 : abc
// c : 789

var set = new Set(['a','b','c','d']);
for (const val of set) {
 console.log(val);// a b c d
}

总结

本文学习了set和map相关的知识，下一期我们开始学习对象方面的知识。

菜鸟一枚在这

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
ECMAScript6-Set和Map

系列文章目录上期我们讲解了数组方面的内容，这期我们将set和map方面的知识。es6 提供了两种新的数据结构 Set 和 Map文章目录系列文章目录1、Set2、Map总结1、SetSet 是⼀个构造函数，⽤来⽣成 Set 数据结构，它类似于数组，但是成员的值都是唯⼀的，没有重复的值.初始化 Set 可以接受⼀个数组或类数组对象作为参数，也可以创建⼀个空的 Set<!DOCTYPE html><html lang="en"><head>
复制链接

扫一扫