ECMAscript6 中Set数据结构【分分快三计划】

作者:分分快三计划
const set = new Set(document.querySelectorAll('div'));

提示

1.[阮一峰]用obj[somename]来判断是否对象里有这个健,打出来是undefined,以上修正了一下
2.判断set数据结构中是否有某个成员,用set.has()来判断


另外再介绍一下另一种数组去重方式

Array.from()是es6数组中新带的一个方法

        function demo(array){
            return Array.from(new Set(array))
        }
        let result = demo([1,1,2,2,3])
        console.log(result)//1,2,3

Array.from是什么鬼以后具体讲到es6数组我给大家讲讲,我现在只知其一,不知其二,讲不透彻的就不给大家讲


遍历操作
Set结构的实例有四个遍历方法,可以用于遍历成员。

keys():返回键名的遍历器
values():返回键值的遍历器
entries():返回键值对的遍历器
forEach():使用回调函数遍历每个成员
需要特别指出的是,Set的遍历顺序就是插入顺序。这个特性有时非常有用,比如使用Set保存一个回调函数列表,调用时就能保证按照添加顺序调用。

keys方法、values方法、entries方法返回的都是遍历器对象,因为set没有健名只有健值 ,所以健名和健值可以说是同一个值 ,keys和values返回的都是同一个值

       let set  = new Set([1,2,3,4])
       for(item of set.keys()){
           console.log(item) //1,2,3,4
       }
       for(item of set.values()){
           console.log(item) //1,2,3,4
       }
       for(item of set.entries()){
           console.log(item) //[1,1],[2,2],[3,3],[4,4]
           console.log(typeof item)//都是object对象
       }

1.keys,values,entries()返回的都是遍历器对象
2.entries返回的是健值对,因为为健和值都是一样的,所以里面两个也一样,但是返回出来是是一个对象,本值 上是一个类数组对象


Set结构的实例默认可遍历,它的默认遍历器生成函数就是它的values方法。第一个张图我也打印出prototype原型上的方法和属性里,里面的symbol.iterator里是values()所以也可以直接for of Set构造函数返回的实例

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

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

可以看出我们直接遍历SET实例和调用value()返回的遍历器对象是一样的


forEach()

Set结构的实例的forEach方法,用于对每个成员执行某种操作,没有返回值。

       let set  = new Set([1,2,3,4])
       set.forEach(function(value,key){
           console.log(value*key) //1,4,9,16
       })

上面代码说明了,对set实例里的健和值互乘,其实value和key都是一个值


数组的map和filter方法也可以用set上

       let set  = new Set([1,2,3])
       set = new Set([...set].map(item => item*2))
       console.log(set) //{2,4,6}
       set2 = new Set([...set].filter(item =>item>3))
       console.log(set2)//{4,6}

给大家解释一下用了那些关键方法
1[...set]把set实例进行转成数组再用map方法把线个值乘2给返回当作Set函数里的成员
2.filter方法也是同理,只是对数组 的值 进行筛选再返回


因此使用Set可以很容易地实现并集(Union)、交集(Intersect)和差集(Difference)。
1.并集Union

        let a = new Set([1,2,3,4,5])
        let b = new Set([1,2,3,6,7])
        let set = new Set([...a,...b])
        console.log(set) //1,2,3,4,5,6,7

上面把a,b里遍历出来在放入数组,再用set的特性进行去重

2.交集

        let a = new Set([1,2,3,4,5])
        let b = new Set([1,2,3,6,7])
        let intersect = new Set([...a].filter(x => b.has(x)))
        console.log(intersect) //{1,2,3}

上面是把a进行转化成数组用filter进行过滤,过滤的返回结果是b里面有的值

差集

        let a = new Set([1,2,3,4,5])
        let b = new Set([1,2,3,6,7])
        let intersect = new Set([...a].filter(x => !b.has(x)))
        console.log(intersect) //{4,5}

4.1支持for... of和foreach循环

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

let set = new Set(['red', 'green', 'blue']);

for (let x of set) {
  console.log(x);
}
// red
// green
// blue

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

简单介绍一下吧

Set基本介绍

Set是ES6中数据结构中其中一个新的特性,我们看上去往往很像数组,但是他的每个成员都是唯一的,不会存在重复的值

Set也是一个构造函数,用来生成Set这个数据结构,我们可以看看他实例原型上有那些东西,简单看一下

分分快三计划 1

在set原型上放了这么多方法,接下来我一一介绍一下吧,记住学习一定要学到根本!!!!

注意我的每一步代码都是自上而下有着关联的

add方法

let set = new Set()
let array = [1,"ziksang",3,3,true,5,5]
array.forEach(item => {
        set.add(item)
})
console.log(set)
// Set {1, "ziksang", 3, true, 5}

1.先new出set这个构造函数实列,我们存在set变量上
2再声明一个array这个数组,里面的数组成员有各种数据类型和重复的值
3.用Set原型上add方法把用es5中each方法把每个值添加到set成员里
4.打印出来是一个对象,里面相同类型相同值都会去掉,但是里面的整体结构和类组数对象一样,有着自己的长度

 for (let i of set) {
         console.log(i);
         console.log(typeof i)
}

以上我们再次用for of的方法也,同样也是es6的新特性,此时就可以把set对象里每一个值可以打印出来,里面的打印出的每一个数据类型也同样是我们array数组里定义的数据类型


上面代码通过add方法向Set结构加入成员,结果表明Set结构不会添加重复的值。
Set函数可以接受一个数组(或类似数组的对象)作为参数,用来初始化。

        function demo(){
            let set = new Set(arguments)
            console.log(set)
        }
        demo(1,2,4,4,5)
        //Set {1, 2, 4, 5}
        let set = new Set([1,2,4,4,5])
        console.log(set)
        //Set {1, 2, 4, 5}

1.Set函数里我们可以接受参数来作为初始化跟new Array[1,2,3,4]性质是一样的
2.第一个我在demo函数里让set函数接收了demo里arguments对象作为参数
3.第二个我直接在set函数里放入一个数组
4.两都console.log()打印出来的是一样的,同样不会包含同类型同样的值的成员

size方法

size方法是用来判断出,set里成员的个数

var items = new Set([1, 2, 3, 4, 5, 5, 5, 5]);
items.size // 5

1.虽然上面我定义了8个成员数量,但是最后个数只有5个,因为还是同样的不会把重复同类型同样的值算进去,只算一个

数组去重方法
在以前数我面试的时候别人一直接我数组去重怎么样,我现在只想回答他,看下面

       let array = [1,2,2,3,3,4]
       let set = new Set(array)
       array = [...set]
       console.log(array)
      //[1,2,3,4]

1.声明一个数组
2.把数组作为set构造函数的初始化成员
3.再把set用[...set]来重新复制给array//简称拓展运算符...
4.扩展运算符(...)内部使用for...of循环,所以也可以用于Set结构。

关于类型转换,NaN,object的区别

在往set数据结构中添加值的值,并不会发生类型转换,4和“4”不同的数据类型不会发生转换,他的内部是用Same-value equality,也就是跟恒等差不多,但是NaN不一样很特殊

       console.log(NaN === NaN) //false
       const a = NaN;
       const b = NaN;
       const c = "1";
       const d = 1;
       let set = new Set()
       set.add(a)
       set.add(b)
       set.add(c)
       set.add(d)
       console.log(set) //Set {NaN, "1", 1}

1.如果单纯的比对NaN === NaN肯定是不相等的,但是在set数据结构中,里面的计算原理是把NaN看成相等的


对于两个对象来说,无是里面是否有值 ,可者有什么样的值都是不相等的,空对象也不相等

       let set = new Set()
       set.add({})
       set.add({})
       console.log(set)  //Set {Object {}, Object {}}
       console.log(set.size)//2

1.可以看出空对象是不相等的,所以它们被视为两个值。总个数依然是2个


Set实例的属性和方法,也就是Set构造函数上定义的方法和属性

Set结构的实例有以下属性。
Set.prototype.constructor:构造函数,默认就是Set函数。
Set.prototype.size:返回Set实例的成员总数。

Set实例的方法分为两大类:操作方法(用于操作数据)和遍历方法(用于遍历成员)。下面先介绍四个操作方法。

add(value):添加某个值,返回Set结构本身。
delete(value):删除某个值,返回一个布尔值,表示删除是否成功。
has(value):返回一个布尔值,表示该值是否为Set的成员。
clear():清除所有成员,没有返回值。

size和add我在前面已经讲过了,再少许提一下吧

        let set = new Set()
        set.add(3).add(2).add(2).add("ziksang");
        console.log(set)//set{3,2,ziksang}
        console.log(set.has(3)) //true
        console.log(set.delete(2))  //true
        console.log(set)   //set{3,ziksang}
        console.log(set.clear()) //undefined
        console.log(set) //set{}

1.我们new出Set构造函数的实列对象进行一个一个add进行添加,但是添加了两个同类型同样值 的2 !最后打印出来同样的一个会被去除
2.set.has()是进行对set数据结构中成员是否存在的判断
3.删除set数据结构中成员
4set.clear()是进行清除所有成员,set实列也因此成为了一个空对象


不同对比的例子,看看Object和Set两个数据结构判断方式不同

        let obj={
            name : "ziksang",
            age : 22
        }
        let set = new Set(["name",22])
        if(obj.name){
            console.log("在对象里有name这个健值")
        }
        if(set.has("name")){
            console.log("set数据结构中有name这个成员")
        }

8直接在遍历操作中改变原来的 Set 结构。

如果想在遍历操作中,同步改变原来的 Set 结构,目前没有直接的方法,但有两种变通方法。一种是利用原 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));
// set的值是2, 4, 6

要点:

1、 set判断两个值是不是一样,使用的是===,并不会转化类型。

2、set中只能有一个NaN,他认为两个NaN相等。

3、set中两个对象始终不等,即使两个空对象,也是不等的。

4、经常用来数组去重:

// 去除数组的重复成员
[...new Set(array)]

 

上面是把a进行转化成数组用filter进行过滤,过滤的返回结果是b里面没有的值

如果想在遍历操作中,同步改变原来的Set结构,目前没有直接的方法,但有两种变通方法。一种是利用原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));
// set的值是2, 4, 6

第一个方法本质上是把set重新进行赋值,先把原先的set里面的成为用[...set]化为数组再用map来进行重新操作再返回给set构造函数的成员

第二个方法等我弄懂了再告诉大家

这里我大部分都是按着阮一锋老师的书籍来进行分析,讲的好的我就记录下来,再用更白的话跟大家讲,有些不清楚说的模糊 的地方也更清楚的跟大家解释明白了,接下来我会把阮一锋老师 ES6所有的知识点都给大家搞明白,搞透彻

3.数组去重

看上一条
实际上,利用Set数据结构不能容许重复值的特性,将数组转成set 在转成数组就是去重了。

分分快三计划 2

image.png

给数组去重的另一种方法

分分快三计划 3

image.png

  • 向 Set 加入值的时候,不会发生类型转换,所以5和"5"是两个不同的值。Set 内部判断两个值是否不同,使用的算法叫做“Same-value equality”,它类似于精确相等运算符(===),主要的区别是NaN等于自身,而精确相等运算符认为NaN不等于自身。
![](https://upload-images.jianshu.io/upload_images/7999981-09875f49c4b8b84c.png)

他认为NaN等于自身的图证!
  • BUT! 他认为两个对象永远不相等。。
![](https://upload-images.jianshu.io/upload_images/7999981-21f0948040f959b1.png)

明明是两个相同的空对象
const setset = new Set([1, 2, 3, 4, 4]);

setset
>>Set(4) {1, 2, 3, 4}

setset.size  // set长度用size属性
>>4

[...setset] //使用扩展运算符 将set结构变数组结构
>> [1, 2, 3, 4]

大家好混元霹雳手Ziksang又来了,给大家讲讲es6,Set这个新的数据结构

分分快三计划 4

大年初三,先给大家拜个年,我知道我的拜方式错了!!红包即将打到你的支付宝中,请接收!

2017年的目标就是把ecmscript6所有的知识点全弄明白,我相信以后会基于ecmascript6的新特性肯定会出一些更牛B的框架,就像vue一样用了Object.defineProperty ecmascript5的新特性来进行数据劫持,所以我很期待

1.简单介绍

  • 类似于数组
    //区别:成员的值都是唯一的,没有重复!以下代码证明:
  • Set本身是一个构造函数,用来生成set数据结构
const s = new Set();

[2, 3, 5, 4, 5, 2, 2].forEach(x => s.add(x));

for (let i of s) {
  console.log(i);
}
// 2 3 5 4

Set 函数可以接受一个数组(比如上面例子中)(或者具有 iterable 接口的其他数据结构)作为参数,用来初始化。

6.Set转数组

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

2.数组转Set(接受【数组】or【类似数组的对象】参数)

Set函数可以接受一个数组(或者具有iterable接口的其他数据结构作为参数),用来初始化。
输出用[...name],Set数据结构有.size方法,相当于数组的length

分分快三计划 5

image.png

上图展示了参数是数组的情况,下面演示参数是对象的情况:

分分快三计划 6

image.png

5.和对象写法的对比

// 对象的写法
const properties = {
  'width': 1,
  'height': 1
};

if (properties[someName]) {
  // do something
}

// Set的写法
const properties = new Set();

properties.add('width');
properties.add('height');

if (properties.has(someName)) {
  // do something
}

8.直接在遍历操作中改变原来的 Set 结构。

-------------------------------------鸽------鸽----鸽----------------------------------------

7.数组的map 和filter 方法用于set数据结构

let set = new Set([1, 2, 3]);
set = new Set([...set].map(x => x * 2));
// 返回Set结构:{2, 4, 6}

let set = new Set([1, 2, 3, 4, 5]);
set = new Set([...set].filter(x => (x % 2) == 0));
// 返回Set结构:{2, 4}

因此使用 Set 可以很容易地实现并集(Union)、交集(Intersect)和差集(Difference)。

let a = new Set([1, 2, 3]);
let b = new Set([4, 3, 2]);

// 并集
let union = new Set([...a, ...b]);
// Set {1, 2, 3, 4}

// 交集
let intersect = new Set([...a].filter(x => b.has(x)));
// set {2, 3}

// 差集
let difference = new Set([...a].filter(x => !b.has(x)));
// Set {1}

4.Set实例的属性和方法

set结构的实例有以下属性

  • Set.prototype.constructure:构造函数,默认是Set函数。
  • Set.prototype.size:返回set实例的成员总数

4.1支持for...of 和foreach循环

9.WeakSet

  • 成员只能是对象
  • 垃圾回收机制不考虑WeakSet的引用
  • ECMAscript6 中Set数据结构【分分快三计划】。ES6规定不可遍历

1.简单介绍

ECMAscript6 中Set数据结构【分分快三计划】。方法:

  • 操作方法
  • 遍历方法
    操作方法:
    -- add(value):添加某个值,返回set结构本身。
    -- delete(value):删除某个值,返回一个bool值,表示是否成功。
    ECMAscript6 中Set数据结构【分分快三计划】。-- has(value):返回一个布尔值,表示该值是否为Set的成员。
    -- clear():清除所有成员,没有返回值。
    遍历方法:4种
    --keys():返回键名
    --values():返回键值
    --entries():返回键值对
    --forEach():使用回调函数遍历每一个成员
    需要特别指出的是,Set的遍历顺序就是插入顺序。这个特性有时非常有用,比如使用 Set 保存一个回调函数列表,调用时就能保证按照添加顺序调用。
    (1)keys(),values(),entries()

keys方法、values方法、entries方法返回的都是遍历器对象(详见《Iterator 对象》一章)。由于 Set 结构没有键名,只有键值(或者说键名和键值是同一个值),所以keys方法和values方法的行为完全一致。

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"]

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

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

5.和对象写法的对比

2.数组转Set

7.数组的map 和filter 方法用于set数据结构

4.Set实例的属性和方法

3.利用Set给数组去重

6.set转为数组

分分快三计划 7

set转数组

数组去重的另一种方法

分分快三计划 8

image.png

本文由分分快三计划发布,转载请注明来源

关键词: 分分快三计划 日记本 Web 前端开发 ecmascript6