前言

介绍一下es6 的set 和 weakset

正文

set

ES6 提供了新的数据结构 Set。它类似于数组,但是成员的值都是唯一的,没有重复的值。

Set 本身是一个构造函数,用来生成 Set 数据结构。

{
let list = new Set();
list.add(5);
list.add(7);
console.log(list.size); //2
}

Set 函数可以接受一个数组作为参数,用来初始化。

{
let arr = [1,2,3,4,5];
let list = new Set(arr);
console.log(list.size); //5
}

Set中重复的元素不会添加,可以用于去重

Set不会转换数据类型,数字就是数字,字符串就是字符串

{
let arr=[1,2,3,1,'2']
let list2=new Set(arr);
console.log(list2); //Set(4) {1, 2, 3, "2"}
}

在 Set 内部,两个NaN是相等。

let set = new Set();
let a = NaN;
let b = NaN;
set.add(a);
set.add(b);
set // Set {NaN}

两个对象总是不相等的。

let set = new Set();
set.add({});
set.size // 1
set.add({});
set.size // 2

Set 实例的属性和方法

Set 实例的方法分为两大类:操作方法(用于操作数据)和遍历方法(用于遍历成员)

四个操作方法:

add(value):添加某个值,返回 Set 结构本身。

delete(value):删除某个值,返回一个布尔值,表示删除是否成功。

has(value):返回一个布尔值,表示该值是否为Set的成员。

clear():清除所有成员,没有返回值。

{
let arr=['add','delete','clear','has'];
let list=new Set(arr); console.log(list.has('add')); //true
console.log(list.delete('add'),list);
//true Set(3){"delete", "clear", "has"}
list.clear(); //清空
console.log(list); // Set(0){}
}
{
let arr=['add','delete','clear','has'];
let list=new Set(arr); for(let key of list.keys()){
console.log(key); // add delete clear has
}
for(let value of list.values()){
console.log(value); // add delete clear has
}
for(let [key,value] of list.entries()){
console.log(key,value);
// add add delete delete clear clear has has
} list.forEach(function(item){console.log(item);})
// add delete clear has
}

Set 结构的实例默认可遍历,它的默认遍历器生成函数就是它的values方法。

{
let arr=['add','delete','clear','has'];
let list=new Set(arr); for(let key of list.keys()){
console.log(key); // add delete clear has
}
for(let value of list.values()){
console.log(value); // add delete clear has
}
for(let [key,value] of list.entries()){
console.log(key,value);
// add add delete delete clear clear has has
} list.forEach(function(item){console.log(item);})
// add delete clear has
}

这意味着,可以省略values方法,直接用for...of循环遍历 Set。

{
let set = new Set(['red', 'green', 'blue']);
for (let x of set) {
console.log(x);
}

WeakSet

WeakSet 的成员只能是对象,而不能是其他类型的值。

{
let weakList=new WeakSet();
let arg={};
weakList.add(arg);
console.log(weakList); //{{}} } const ws = new WeakSet();
ws.add(1)
// TypeError: Invalid value used in weak set
ws.add(Symbol())
// TypeError: invalid value used in weak set

WeakSet 可以接受一个数组或类似数组的对象作为参数。

{const a = [[1, 2], [3, 4]];
const ws = new WeakSet(a);
console.log(ws)}
//WeakSet {Array(2), Array(2)}
//__proto__:WeakSet
//[[Entries]]:Array(2)
//0:Array(2)
//value:(2) [3, 4]
//1:Array(2)
//value:(2) [1, 2]
//length:2

注意,是a数组的成员成为 WeakSet 的成员,而不是a数组本身。这意味着,数组的成员只能是对象。

{
const b = [3, 4];
const ws = new WeakSet(b);
// Uncaught TypeError: Invalid value used in weak set(…)
}
WeakSet 结构有以下三个方法。 add(value):添加某个值,返回 WeakSet结构本身。
delete(value):删除某个值,返回一个布尔值,表示删除是否成功。
has(value):返回一个布尔值,表示该值是否为WeakSet的成员。
const ws = new WeakSet();
const obj = {};
const foo = {}; ws.add(window);
ws.add(obj); ws.has(window); // true
ws.has(foo); // false ws.delete(window);
ws.has(window); // false

WeakSet 没有size属性,没有办法遍历它的成员。

WeakSet 没有size属性,没有办法遍历它的成员。
ws.size // undefined
ws.forEach // undefined

js es6 介绍set,WeakSet的更多相关文章

  1. vue框架入门和ES6介绍

    vue框架入门和ES6介绍 vue-mvvm模式,vue是一种轻量级的前端框架,主要为模板渲染,数据同步,组件化,模块化,路由等. https://cn.vuejs.org/ 源码:https://g ...

  2. JDK中内嵌JS引擎介绍及使用

    原文: JDK中内嵌JS引擎介绍及使用 - Stars-One的杂货小窝 最近研究阅读这个APP,其主要功能就是通过一个个书源,从而实现移动端阅读的体验 比如说某些在线小说阅读网站,会加上相应的广告, ...

  3. doT.js详细介绍

    doT.js详细介绍   doT.js特点是快,小,无依赖其他插件. 官网:http://olado.github.iodoT.js详细使用介绍 使用方法:{{= }} for interpolati ...

  4. Web3D编程入门总结——WebGL与Three.js基础介绍

    /*在这里对这段时间学习的3D编程知识做个总结,以备再次出发.计划分成“webgl与three.js基础介绍”.“面向对象的基础3D场景框架编写”.“模型导入与简单3D游戏编写”三个部分,其他零散知识 ...

  5. Node.js简单介绍并实现一个简单的Web MVC框架

    编号:1018时间:2016年6月13日16:06:41功能:Node.js简单介绍并实现一个简单的Web MVC框架URL :https://cnodejs.org/topic/4f16442cca ...

  6. 【js】IE、FF、Chrome浏览器中的JS差异介绍

    如何判断浏览器类型 转:http://www.cnblogs.com/carekee/articles/1854674.html 1.通过浏览器特有的对象 如ie 的ActiveXObject  ff ...

  7. js es6 map 与 原生对象区别

    区别 object和Map存储的都是键值对组合.但是: object的键的类型是 字符串: map的键的类型是 可以是任意类型: 另外注意,object获取键值使用Object.keys(返回数组): ...

  8. js cookie介绍和实例(用于自动登录,记住用户名等)

    js cookie介绍和实例(用于自动登录,记住用户名等) 一.总结 1.cookie在客户端:因为js是最初是用来在客户端和服务器端进行通信使用的,所以客户端比如js可以操作cookie正常 2.c ...

  9. Node.js NPM 介绍

    章节 Node.js NPM 介绍 Node.js NPM 作用 Node.js NPM 包(Package) Node.js NPM 管理包 Node.js NPM Package.json NPM ...

  10. JS面向对象介绍

    JS面向对象介绍 首先面向对象是什么?为什么要使用面向对象. 因为JavaScript对每个创建的对象都会自动设置一个原型(谷歌火狐中是proto),指向它的原型对象prototype,举个例子: f ...

随机推荐

  1. C++ //栈 stack 容器 先进后出 不允许遍历

    1 //栈 stack 容器 先进后出 不允许遍历 2 3 4 #include<iostream> 5 #include<stack> 6 7 using namespace ...

  2. 私有网盘服务 dzzoffice部署

    官网地址: https://dzzoffice.com/ dzzoffice有多种部署方式, docker方式,源码方式, 经过测试,这两种部署方式在数据进行备份恢复时都会存在一些bug, 所有这里采 ...

  3. Server-side template injection 模板注入问题总结

    概念: 服务器模板注入(Server-side template injection) 攻击者能够使用本地的模板语法去注入一个恶意的payload,然后在服务器端执行该攻击,当与欧股直接输入数据到模板 ...

  4. chatGPT初体验

    chatGPT NLP技术,通过统计的手段模拟出更正确的答案. 他与以前的NLP不一样,他有上下文语义,他能够模拟场景,能够总结很多文章信息. 因此对于谷歌等搜索引擎就很有攻击性了,因为chatGPT ...

  5. element_ui 知识点整理

    第一章复习,树型组件数据填充:数据组件需要的数据绑定到:data   但是具体那些字绑生成标签需要在定义一人:props ="这儿绑定对象" 对象中label  children ...

  6. python 读取txt并绘制波形图实例解析

    一 用python绘图有很多方法,笔者找到了一种最简单的方法,使用非常便利,这里分享一下: import numpy as np import matplotlib.pyplot as plt a = ...

  7. Git进阶命令-reset

    之前有关Git,写过一片文章: Git五个常见问题及解决方法 一.reset命令使用场景 有时候我们提交了一些错误的或者不完善的代码,需要回退到之前的某个稳定的版本,面对这种情况有两种解决方法: 解决 ...

  8. 标记SA_RESTART的作用

    在程序执行的过程中,有时候会收到信号,我们可以捕捉信号并执行信号处理函数,信号注册函数里有一个struct sigaction的结构体,其中有一个sa_flags的成员,如果sa_flags |= S ...

  9. 22_播放器之使用SDL显示YUV视频

    简介 使用SDL实现简单的YUV播放器. 这里还需要使用到像素格式和计算图片大小,这两个我们直接使用ffmpeg来实现,因此需要使用ffmpeg的libavutil/avutil.h和libavuti ...

  10. 【Spring注解驱动开发】你敢信?面试官竟然让我现场搭建一个AOP测试环境!

    写在前面 今天是9月1号,金九银十的跳槽黄金期已拉开序幕,相信很多小伙伴也在摩拳擦掌,想换一个新的工作环境.然而,由于今年疫情的影响,很多企业对于招聘的要求是越来越严格.之前,很多不被问及的知识点,最 ...