ES6成员Set的用法

发布时间:2019-08-09 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了ES6成员Set的用法脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

Set是一个可存储基础类型及引用类型的容器,且容器中数据唯一。
(唯一:除NaN==NaN外,其余使用===判断)

常用属性与方法:

Set.PRototyPE.size         -- 返回Set实例的个数

Set.prototype.add()        --添加元素
Set.prototype.delete()    --删除元素
Set.prototype.has()        --判断是否存在某元素
Set.prototype.clear()    --清空容器

Set.prototype.foreach()    --遍历容器
Set.prototype.keys()    --返回容器键名遍历器
Set.prototype.values()    --返回容器键值遍历器器
Set.prototype.entries()    --返回容器键值对的遍历器

基本用法:

//创建容器
let s = new Set();

//添加基本类型元素 --元素compare不存在隐式转换 使用===,切记
s.add(1);
s.add("1");

//添加特殊类型元素  --特例 NaN与NaN 比较结果返回true
s.add(NaN);
s.add(NaN);

//添加引用类型元素 -- 直接添加引用地址不同,所以属于两个元素
s.add({a:1});
s.add({a:1});

//添加对象的形式,则只会添加一个元素进去
let obj = {a:2};
s.add(obj);
s.add(obj);

console.LOG([...s]); //添加顺序与数组push一样
/* [1, "1", {…}, {…}, NaN, {…}]
    0: 1
    1: "1"
    2: {a: 1}
    3: {a: 1}
    4: NaN
    5: {a: 2}
    length: 6
*/

//判断元素是否存在容器中 存在返回true,不存在返回false
s.has(obj)
//true

s.has({a:1})
//false

s.has("1")
//true

//删除元素 -- 删除成功返回true,失败返回false
s.delete({a:1}); 
//false  

s.delete(obj)
//true

console.log([...s]);
/* [1, "1", {…}, {…}, NaN]
    0:1
    1:"1"
    2:{a: 1}
    3:{a: 1}
    4:NaN
    length:5
*/

//size属性存储容器元素个数
console.log(s.size)
//5

//清空容器
s.clear(); 
s.size;
//0

遍历:

keys()        -- 返回键名的遍历器
values()    -- 返回键值的遍历器
entries()    -- 返回键值对的遍历器
注意: Set的遍历顺序即为添加顺序,且Set没有键名,故Set的键名与键值为同一值

let s = new Set(['a',11,{a:1},NaN]);
s.keys();
//SetIterator {"a", 11, {…}, NaN}

[...s.keys()] //--转化为数组形式
//["a", 11, {…}, NaN]

//遍历容器的键名
for(let item of s.keys()){
    console.log(item);
}
/*
    a
    11
    {a: 1}
    NaN
*/

//----values()与entries()用法同上
----------------------------------------------------------
/*
    forEach()    -- 使用回调函数遍历每个元素
    第一个参数为遍历函数 函数参数依次为:键值、键名、集合本身,且参数可选
    第二个参数可传入内部this对象(可选参数)
*/

//仅仅使用遍历的用法 -- 常用
s.forEach((v,k,obj)=>{
  console.log(k+":"+v);
  console.log(obj);
});
/*
    a:a
    Set(4) {"a", 11, {…}, NaN}
    11:11
    Set(4) {"a", 11, {…}, NaN}
    [object Object]:[object Object]
    Set(4) {"a", 11, {…}, NaN}
    NaN:NaN
    Set(4) {"a", 11, {…}, NaN}
*/

//第二个参数用法
let op = {
  minus:function(x){
    return x*x;
  }
};
let ss = [1,2,3,4,5,6];
ss.forEach((v)=>console.log(op.minus(v)),op);
/*
    1
    4
    9
    16
    25
    36
*/

Set的使用场景:

//数组去重:
let arr = [1,23,4,4,56,5,56];
arr = [...new Set(arr)];
//[1, 23, 4, 56, 5]

//数组的并集、交集与差集
let a = [1,3,5,7,10];
let b = [1,2,4,6,8,10];

//并集
[...new Set([...a,...b])];
//[1, 3, 5, 7, 10, 2, 4, 6, 8]

//交集
let sss = new Set(b);
a.filter(i=>sss.has(i))
//[1, 10]

//差集
a.filter(i=>!sss.has(i));
//[3, 5, 7]

第一次写文章,如有bug,请指正Thanks♪(・ω・)ノ

脚本宝典总结

以上是脚本宝典为你收集整理的ES6成员Set的用法全部内容,希望文章能够帮你解决ES6成员Set的用法所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。