资讯专栏INFORMATION COLUMN

ES6学习之 -- Set数据结构

wawor4827 / 2620人阅读

摘要:类似于数组,但是中不存在重复元素。可以接受一个数组或者其他具有接口的数据结构作为参数从上面的代码可以看出有去重的功能。去重还有另一个方法将数据结构的数据转换成数组。清除实例的指定成员。返回一个布尔值,表示某个值是否在实例之中。

Set

Set类似于数组,但是Set中不存在重复元素。
Set可以接受一个数组(或者其他具有itarable接口的数据结构)作为参数

const set = new Set([1,1,2,3,4,5,4,5]);
console.log([...set]);//[1, 2, 3, 4, 5]

从上面的代码可以看出Set有去重的功能。[...new Set(arr)]
去重还有另一个方法,Array.from将Set数据结构的数据转换成数组。

function removelArr(arr) {
    return Array.from(new Set(arr));
}
removelArr([1, 1, 2, 3, 2, "1"]);//[1, 2, 3, "1"]
或者
[...new Set([1, 1, 2, 3, 2, "1"])];//[1, 2, 3, "1"]

Set加入值的时候不会发生类型转变

const set = new Set([1,"1"]);
console.log([...set]);//[1, "1"]

Set内部判断两个值是否相同使用了Object.is(a, b)方法,这个方法与严格等于的不同之处在于NaNObject.is(NaN, NaN)返回的是true

let a = NaN;
let b = NaN;
let set = new Set();
set.add(a);
set.add(a);
console.log([...set]);//[NaN]

捎带提一下两个对象的总是不相等的,这就不用多说了吧,内存地址不同。。。

let obj1 = {};
let obj2 = {};
let set = new Set();
set.add(obj1);
set.add(obj2);
console.log([...set]);//[{}, {}]

Set的属性

size:获取成员个数

Set的方法

add(value):增加一个成员,返回值为set结构本身

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

clear():清空所有成员,无返回值

has(value):判断是否有某个成员,返回一个布尔值,是否存在某个元素

let set = new Set();
set.add(1).add(2).add(2).add("1");
set.size;//3
set.delete("1");//true
set.size;//2
set.has(2);//true
set.clear();
set.size;//0

Set的遍历操作

keys():返回键名的遍历器

let set = new Set([1, 1, 2, 3, 2, "1"]);
//因为keys返回的是遍历器,所以可以使用`for...of`,数组没有键名只有键值,所以keys和values返回的是一致的
for(let item of set.keys()){
    console.log(item);// 1 2 3 "1"
}

values():返回值名的遍历器

let set = new Set([1, 1, 2, 3, 2, "1"]);
//因为values返回的是遍历器,所以可以使用`for...of`
for(let item of set.values()){
    console.log(item);// 1 2 3 "1"
}

entries():返回键值对的遍历器

//entries方法返回的遍历器,同时包括键名和键值
let set = new Set([1, 1, 2, 3, 2, "1"]);
//因为values返回的是遍历器,所以可以使用`for...of`
for(let item of set.entries()){
    console.log(item);// [1, 1] [2, 2] [3, 3] ["1", "1"]
}

forEach():使用回调函数遍历每个成员

let set = new Set([1, 4, 9]);
set.forEach((value, key) => console.log(key + " : " + value))
// 1 : 1
// 4 : 4
// 9 : 9

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

Set.prototype[Symbol.iterator] === Set.prototype.values
//true

这意味着我们可以直接遍历Set

let set = new Set([1, 4, 9]);
for(let item of set) {
    console.log(item);//1 4 9
}
WeakSet

注意点:

WeakSet的成员只能是对象

WeakSet的成员是弱引用,随时都可能消失,所以无法遍历也就无法获取成员数量

WeakSet的方法

add(value)向 WeakSet 实例添加一个新成员。

delete(value)清除 WeakSet 实例的指定成员。

has(value)返回一个布尔值,表示某个值是否在 WeakSet 实例之中。

WeakSet 的一个用处,是储存 DOM 节点,而不用担心这些节点从文档移除时,会引发内存泄漏。

下面是 WeakSet 的另一个例子。

const foos = new WeakSet()
class Foo {
  constructor() {
    foos.add(this)
  }
  method () {
    if (!foos.has(this)) {
      throw new TypeError("Foo.prototype.method 只能在Foo的实例上调用!");
    }
  }
}

method只能通过Foo的实例调用不然就会抛出异常,当删除实例的时候,不用操作foos也不会引发内存泄露

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/90592.html

相关文章

  • es6习之map和set

    摘要:和定义一组键值对的集合它是一组键值对的数据结构,由于之前的键必须是字符串。 Map和Set Map 定义:一组键值对的集合 它是一组键值对的数据结构,由于之前javascript的键(key)必须是字符串。为了使键可以是多种类型的于是在最新的es6中引入了map这种数据结构,这样可以加快查询速度,类似于查字典 方法和属性 var m = map() //空map m.set(学生年龄,...

    lvzishen 评论0 收藏0
  • ES6习之 -- 解构(使数据访问更便捷)

    摘要:数组的解构赋值规定允许按照一定模式,从数组和对象中提取值对变量进行赋值,我们称之为解构。的规则是,只要有可能导致解构的歧义,就不得使用圆括号。 数组的解构赋值 ES6规定:允许按照一定模式,从数组和对象中提取值对变量进行赋值,我们称之为解构。以前赋值只能直接指定值 let a = 1; let b = 2; let c = 3; ES6允许以下这种做法 let [a, b, c] = ...

    mrcode 评论0 收藏0
  • 【抢先领】《React 习之道》我们翻译了一本最简单,且最实用的 React 实战教程……

    摘要:学习之道简体中文版通往实战大师之旅掌握最简单,且最实用的教程。前言学习之道这本书使用路线图中的精华部分用于传授,并将其融入一个独具吸引力的真实世界的具体代码实现。完美展现了的优雅。膜拜的学习之道是必读的一本书。 《React 学习之道》The Road to learn React (简体中文版) 通往 React 实战大师之旅:掌握 React 最简单,且最实用的教程。 showIm...

    oneasp 评论0 收藏0
  • es6习之let和const命令

    摘要:和命令命令是在它所在的代码块有效,它属于块级作用域,新增。只有全局作用域和函数作用域。 let和const命令 let命令是在它所在的代码块有效,它属于块级作用域,es6新增。es5只有全局作用域和函数作用域。let命令存在暂时性死区(TDZ),即在申明前使用就会报错,不存在变量提升 console.log(a); // 报错 let a = 111; ==let不允许在相同作用域中,...

    DrizzleX 评论0 收藏0
  • JS习之Object

    摘要:文中的多为构造函数原型对象属性为函数的专属属性,表示函数的原型对象。关于各种数据类型的属性的展示对象的构造器函数该属性指向创建该对象原型的构造函数。对对象的冻结状态的设置和判断,前者让冻结对象,后者判断对象是否被冻结。 前言 上篇文章介绍了JS的对象,本文将介绍Object这个基类,主要介绍其属性和方法(其实这些在MDN里都有^_^,点击这里可以直通MDN)。好了废话不多说了,直接开始...

    qujian 评论0 收藏0

发表评论

0条评论

wawor4827

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<