【ES6系列第二篇】适用JS初学者的Set对象和Map对象学习笔记

简介: 【ES6系列第二篇】适用JS初学者的Set对象和Map对象学习笔记
一、Set对象

概念:Set:类似于数组,但是成员的值是唯一的,不允许重复,允许添加任意类型的值,包括原始值和对象。

  1. 如何创建set数据结构?set本身就是一个构造函数,创建此构造函数的实例对象就是在创建set数据结构。

也就是跟数组使用new创建的方式一样。

var s=new Set();//没有值·
  1. set数据结构还可以接受一个数组作为参数,用来初始化。
var s=new Set([2,3,4]);//没有值
//注意:如果直接打印s,则会输出如下:
//Set(4) {3, 2, 4, 5},也就是它长得像对象,展开如下图所示

  1. 作用:可利用set的特性(不允许重复)做数组去重 等操作。
1、去重
var s=new Set([3,2,3,4,5,4]);
var arr=[...s];//[3,2,4,5]
2、并集
var a = new Set([1, 2, 3]);
var b = new Set([4, 3, 2]);
var union = new Set([...a, ...b]); // {1, 2, 3, 4}
3、交集
var a = new Set([1, 2, 3]);
var b = new Set([4, 3, 2]);
var intersect = new Set([...a].filter(x => b.has(x))); // {2, 3}
4、差集
var a = new Set([1, 2, 3]);
var b = new Set([4, 3, 2]);
var difference = new Set([...a].filter(x => !b.has(x))); // {1}
二、Set对象常用属性和方法

  1. 属性 size
    类似于数组的length属性,注意不会将重复的计算在内。
var s=new Set([3,2,3,4,5,4]);
console.log(s.size);//4

  1. 添加某个值,返回 Set 结构本身
// 创建 Set
const letters = new Set();
// 向 Set 添加一些值
letters.add("a");
letters.add("b");
letters.add("c");
//注意:如果添加相等的元素,则只会保存第一个元素
//删除某个值,返回一个布尔值,表示删除是否成功
语法:
Set实例.delete(要删除的值);
//比如:
const s = new Set([1,2,3]);
var boo=s.delete(1);
console.log(boo);//true
//---对比对象的delete方法---
var obj={
    name:'张三'
}
delete obj.name
console.log(obj);//{}
//删除全部,没有返回值
const s = new Set([1,2,3]);
s.clear();
console.log(s.size);//0
//----在JS的本地存储中也有个clear方法,用于清空所有的本地存储--
localStorage.clear();

  1. 没有直接的方法。但有两种变通方法。一种是利用原 Set 结构映射出一个新的结构,然后赋值给原来的 Set 结构;另一种是利用Array.from方法。
// 方法一
let set = new Set([1, 2, 3]);
set = new Set([...set].map(val => val * 2));
// set的值是2, 4, 6
// 方法二
let set = new Set([1, 2, 3]);
set = new Set(Array.from(set, val => val * 2));

  1. 查找单个,没有直接的方法。可以通过Set的遍历方法查找所有。
    Set.prototype.keys():返回键名的遍历器
    Set.prototype.values():返回键值的遍历器
    Set.prototype.entries():返回键值对的遍历器
    Set.prototype.forEach():使用回调函数遍历每个成员
    由于 Set 结构没有键名,只有键值(或者说键名和键值是同一个值),所以keys方法和values方法的行为完全一致。
//keys(),values(),entries()
let set = new Set(['red', 'green', 'blue']);
for (let item of set.keys()) {
  console.log(item);
}
// red
// green
// blue
for (let item of set.values()) {
  console.log(item);
}
// red
// green
// blue
for (let item of set.entries()) {
  console.log(item);
}
// ["red", "red"]
// ["green", "green"]
// ["blue", "blue"]
  1. 判断
    使用has方法判断,返回一个布尔值,表示某个值是否在 WeakSet 实例之中。
const s = new Set([1,2,3]);
//例子
s.has(1) // true
s.has(2) // true
s.has(5) // false
s.delete(2);
s.has(2) // false
三、Map对象

有了Set基础后,再来看Map,会清晰很多。Map类似于对象,是一个存储键值对的集合,但是‘键’’的范围不仅仅是字符串,所有类型的值包括对象都可以当做键。也就是它是用来解决Object的属性名只能是字符串的痛点问题。

创建Map集合有两种:

  1. 直接new Map()创建实例对象;
  2. 接收一个数组作为参数来创建实例对象(该数组的成员必须是一个个表示键值对的数组)
//1、直接创建
let m=new Map();
//2、接收一个数组作为参数来创建Map集合
let m2=new Map([
    ['id',1],  //相当于是Map的键值对
    ['name','张三'],
    ['age',18]
])
四、Map对象的方法和属性

方法和属性基本同Set类似,用法也类似。

方法例举:

  1. has(key); 查找key,返回布尔值
  2. .get(key); 根据key查找value
  3. .set(key,value);添加键值对
  4. .size获取存储的数量
let m2=new Map([
    ['id',1],  //相当于是Map的键值对
    ['name','张三'],
    ['age',18]
])
//添加
m.set('sex','男');
//判断
var flag=m.has('id');
console.log(flag);//true
//获取
var name=m.get('name');
console.log(name);//'张三'
//属性的使用
var len=m.size;
console.log(len);//4
总结:

1、Set数据结构的声明方式分为两种:1、直接实例化一个空的Set()构造函数;2、在Set构造函数中传入一个数组。Set构造函数可以用来做数组去重等操作。

2、Map数据结构的声明方式分为两种:1、直接实例化一个空的Map()构造函数;2、在Map构造函数中传入一个带有键值对的数组。

参考资料

  1. https://www.runoob.com/w3cnote/es6-map-set.html
  2. https://es6.ruanyifeng.com/#docs/set-map
  3. https://www.w3school.com.cn/js/js_object_sets.asp
  4. https://www.imqd.cn/?p=136
相关文章
|
6月前
|
JavaScript 前端开发
如何在 JavaScript 中使用 __proto__ 实现对象的继承?
使用`__proto__`实现对象继承时需要注意原型链的完整性和属性方法的正确继承,避免出现意外的行为和错误。同时,在现代JavaScript中,也可以使用`class`和`extends`关键字来实现更简洁和直观的继承语法,但理解基于`__proto__`的继承方式对于深入理解JavaScript的面向对象编程和原型链机制仍然具有重要意义。
|
26天前
|
编解码 JavaScript 前端开发
【Java进阶】详解JavaScript的BOM(浏览器对象模型)
总的来说,BOM提供了一种方式来与浏览器进行交互。通过BOM,你可以操作窗口、获取URL、操作历史、访问HTML文档、获取浏览器信息和屏幕信息等。虽然BOM并没有正式的标准,但大多数现代浏览器都实现了相似的功能,因此,你可以放心地在你的JavaScript代码中使用BOM。
66 23
|
6月前
|
Web App开发 JavaScript 前端开发
如何确保 Math 对象的方法在不同的 JavaScript 环境中具有一致的精度?
【10月更文挑战第29天】通过遵循标准和最佳实践、采用固定精度计算、进行全面的测试与验证、避免隐式类型转换以及持续关注和更新等方法,可以在很大程度上确保Math对象的方法在不同的JavaScript环境中具有一致的精度,从而提高代码的可靠性和可移植性。
|
2月前
|
JavaScript 前端开发 API
JavaScript中通过array.map()实现数据转换、创建派生数组、异步数据流处理、复杂API请求、DOM操作、搜索和过滤等,array.map()的使用详解(附实际应用代码)
array.map()可以用来数据转换、创建派生数组、应用函数、链式调用、异步数据流处理、复杂API请求梳理、提供DOM操作、用来搜索和过滤等,比for好用太多了,主要是写法简单,并且非常直观,并且能提升代码的可读性,也就提升了Long Term代码的可维护性。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
2月前
|
JavaScript 前端开发 网络架构
ES6解构赋值详解;全面掌握:JavaScript解构赋值的终极指南
解构赋值是一个强大且灵活的工具,它使得从数组和对象中提取数据变得更加简单和直观。通过掌握解构赋值的基本语法和实践,你可以写出更加简洁、可读性更强的代码。在实际项目中,解构赋值广泛应用于函数参数处理、变量交换、嵌套结构操作等场景,极大地提升了代码的灵活性和简洁度。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
6月前
|
JSON 前端开发 JavaScript
JavaScript中对象的数据拷贝
本文介绍了JavaScript中对象数据拷贝的问题及解决方案。作者首先解释了对象赋值时地址共享导致的值同步变化现象,随后提供了五种解决方法:手动复制、`Object.assign`、扩展运算符、`JSON.stringify`与`JSON.parse`组合以及自定义深拷贝函数。每种方法都有其适用场景和局限性,文章最后鼓励读者关注作者以获取更多前端知识分享。
68 1
JavaScript中对象的数据拷贝
|
6月前
|
JavaScript 前端开发 安全
ECMAScript 6(以下简称 ES6)的出现为 JavaScript 带来了许多新的特性和改进,其中 let 和 const 是两个非常重要的关键字。
ES6 引入了 `let` 和 `const` 关键字,为 JavaScript 的变量管理带来了革新。`let` 提供了块级作用域和暂存死区特性,避免变量污染,增强代码可读性和安全性;`const` 用于声明不可重新赋值的常量,但允许对象和数组的内部修改。两者在循环、函数内部及复杂项目中广泛应用,有助于实现不可变数据结构,提升代码质量。
84 5
|
6月前
|
JavaScript 前端开发 图形学
JavaScript 中 Math 对象常用方法
【10月更文挑战第29天】JavaScript中的Math对象提供了丰富多样的数学方法,涵盖了基本数学运算、幂运算、开方、随机数生成、极值获取以及三角函数等多个方面,为各种数学相关的计算和处理提供了强大的支持,是JavaScript编程中不可或缺的一部分。
|
6月前
|
存储 JavaScript 前端开发
JS的ES6知识点
【10月更文挑战第19天】这只是 ES6 的一些主要知识点,ES6 还带来了许多其他的特性和改进,这些特性使得 JavaScript 更加现代化和强大,为开发者提供了更多的便利和灵活性。
80 3
|
7月前
|
JavaScript 前端开发 索引
JavaScript ES6及后续版本:新增的常用特性与亮点解析
JavaScript ES6及后续版本:新增的常用特性与亮点解析
234 4