前言

介绍一下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. Java面向对象(下)--static/final/代码块/抽象/接口/内部类

    目录 1 关键字:static 2 理解main方法的语法 3 类的成员之四:代码块 4关键字:final 5 抽象类与抽象方法 6 接口(interface) 7 类的成员之五:内部类 static ...

  2. [学习笔记] Linux 环境下搭建基于Ngnix的反向代理服务

    ​之前为了方便同事测试微信小程序,搭建了基于CentOS的预发布环境,.Net5 程序也已经部署好在上面,在公网上可以通过http协议的临时域名(jevonsflash.xxx.net)访问到后台Ap ...

  3. chrome 快速执行 snippets 1. F12 2. Ctrl+Shift+P 3. show snippets 4. 上下选择 5. Ctrl + Enter

    chrome 快速执行 snippets F12 Ctrl+Shift+P show snippets 上下选择 Ctrl + Enter

  4. 摆脱鼠标系列 - vscode - ctrl+up 光标上移动4行 ctrl+down 光标下移4行

    为什么 摆脱鼠标系列 - vscode - ctrl+up 光标上移动4行 之前滚动屏幕总是用鼠标,现在改为 ctrl + 上箭头或下箭头 实现起来稍微有些麻烦 实现 需要安装 macros 插件 这 ...

  5. arch安装discover ——KDE商店

    yay  -S discover sudo pacman -S archlinux-appstream-data packagekit-qt5 flatpak fwupd 安装完就可以使用KDE商店了

  6. Winform DataGridView 添加复选框列

    1.编辑DataGridView的属性: 2.定义列的类型为chekcBox: 3.点击添加: 4.效果: 5.编辑:

  7. day07-1MySQL约束

    MySQL约束 基本介绍 约束用于确保数据库的数据满足特定的商业规则 在mysql中,约束包括:not null,unique,primary key,foreign key 和check 5种 1. ...

  8. 快速将json装DTO的GsonFormatPlus插件使用

    参考:https://www.jianshu.com/p/8fb0e4274436 https://blog.csdn.net/qq_43039260/article/details/12676582 ...

  9. 智慧党建3D可视化方案,扩大党建文化宣传数字网络影响力

    信息技术的快速发展加快了社会分化解构,重构了人际传播渠道.随着党员中网民."数字原住民"比重持续攀升,党员工作生活信息化.网络化.数据化持续加深,传统的党建方式对党员,特别是年轻一 ...

  10. Phaser3 学习资料整理

    新年新征程,今年开启H5小游戏. 接触过egret和layair,两位的工具链还是比较丰富的,但是我没能好好写出一个demo. 偶尔接触到Phaser,发现体验不错. 于是整理一些资料,方便自己和那些 ...