11.1、Set数据结构


        /*
            11.1.1  Set基本用法:

            es6 提供了新的数据结构 ———— Set。
            它类似于数组,但是成员的值都是唯一的,没有重复。
            Set本身是一个构造函数,用来生成 Set 数据结构 
        */

        const s = new Set()

        var arr = [2, 3, 4, 5, 2, 2]
        arr.forEach(element => {
            // console.log(element)
            s.add(element)
            // console.log(s)  
        });
        console.log(s)    // {2, 3, 4, 5}

        for( let i of s) {
            console.log(i)
        }

        // 上面的代码通过 add 方法向 Set 结构加入成员,结果表明 Set 结构不会添加重复的值。
        // Set 函数可以接受一个数组(或者具有 iterable 接口的其他数据结构)作为参数,用来初始化。

        // 例1:
        const set1 = new Set([1, 2, 3, 4, 4])
        console.log(set1)        // Set(4) {1, 2, 3, 4}
        console.log(set1.size)   // 4
        console.log(...set1)     // 1 2 3 4
        console.log([...set1])   // [1, 2, 3, 4]

        // 例2:
        const items = new Set([1, 2, 5, 5, '5', 9])
        console.log(items)      // Set(5) {1, 2, 5, "5", 9}
        console.log(items.size) // 5

        // 例3:
        function divs () {
            return [...document.querySelectorAll('div')]
        }
        console.log(divs())     // [div, div, div]
        const set2 = new Set(divs())       
        console.log(set2)       // Set(0) {}     // Set(3) {div, div, div}
        console.log(set2.size)  // 0             // 3

        

        

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




        /*
            向 Set 加入值时不会发生类型转换,所以 '5' 和 5 是两个不同的值.Set 内部判断两个值是否相同使用的算法叫作 "Same-value equality",
            它类似于精确相等运算符(===),主要的区别是是 NaN 等于自身,而精确相等运算符认为 NaN 不等于自身.
        */

        let set4 = new Set()
        let a = NaN 
        let b = NaN
        set4.add(a)
        set4.add(b)
        console.log(set4)       // Set(1) {NaN}
        console.log(set4.size)  // 1

        // 上面的代码表明: 在 Set 内部,两个 NaN 是相等的

        // 另外,两个对象是不相等的

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

        // 上面的代码表示,由于两个空对象不是精确相等,所以它们被视为两个值





        /*
            11.1.2 Set 实例的属性和方法

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

            Set 实例的方法分为两大类: 操作方法(用于操作数据)和遍历方法(用于遍历成员).下面先介绍 4 个操作方法
                + add(value) : 添加某个值,返回 Set 实例的成员总数
                + delete(value) :  删除某个值,返回一个布尔值,表示删除是否成功
                + has(value) : 返回一个布尔值,表示参数是否为 Set 的成员
                + clear(value) : 清楚所有成员,没有返回值        
        */

        // 上面这些属性和方法的实例如下:
        var set6 = new Set()
        set6.add(1).add(2).add(2)
        console.log(set6)      // Set(2) {1, 2}
        console.log(set6.size) // 2

        console.log(set6.has(1)) // true
        console.log(set6.has(2)) // true
        console.log(set6.has(3)) // false

        console.log(set6.delete(2)) // true
        console.log(set6.has(2))    // false


        // 下面是一个对比,判断是否包括一个键上 Object 结构和 Set 结构的写法不同
        
        // 对象的写法:
        const properties1 = {
            'width': 1,
            'height': 2
        }
        if (properties1['width']) {
            // 如果对象 properties1 存在属性 width, 则做一些事情
            // do something
        }

        // Set 的写法:
        const properties2 = new Set()
        properties2.add('width')
        properties2.add('height')
        if (properties2.has('width')) {
            // 如果对象 properties2 存在属性 width, 则做一些事情
            // do something
        }




        // Array.from 方法可以将Set 结构转为数组
        const set7 = new Set([1, 2, 3, 4, 5])
        console.log(set7)     // Set(5) {1, 2, 3, 4, 5}
        const array = Array.from(set7)
        console.log(array)    // [1, 2, 3, 4, 5]


        // 这就提供了一种去除数组的重复元素的方法:
        function dedupe(array) {
            return Array.from(new Set(array))
        }
        var res = dedupe([1, 1, 2, 4])
        console.log(res)       // [1, 2, 4]








        /*
            11.1.3 遍历操作:

            Set 结构的实例有 4 个遍历方法,可用于遍历成员
                + keys() : 返回键名的遍历器
                + values() : 返回键值的遍历器
                + entries() : 返回键值对的遍历器
                + forEach() : 使用回调函数遍历每个成员


            需要特别指出的是,Set 的遍历顺序就是插入顺序。这个特性有时非常有用,比如使用 Set 保存一个回调函数列表,调用时就能保证按照添加顺序调用。
        */


        /*
            keys()、values()、entries()

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

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

        for (let item of set8.keys(0)) {
            console.log(item)
        }
        // red
        // green
        // blue

        for (let item of set8.values()) {
            console.log(item)
        }
        // red
        // green
        // blue

        for (let item of set8.entries()) {
            console.log(item)
        }
        // ["red", "red"]
        // ["green", "green"]
        // [" blue", " blue"]



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

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

        console.log(Set.prototype[Symbol.iterator] === Set.prototype.values)   // true

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

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






        /*
            forEach()

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

        let set10 = new Set([1, 2, 3])

        set10.forEach((value, key) => console.log(value + ',' + key))   
        // 1,1
        // 2,2
        // 3,3  

        /*
            上面的代码说明,forEach 方法的参数就是一个处理函数。该函数的参数依次为键值、键名、集合本身。
            另外,forEach 方法还可以有第二个参数,表示绑定的 this 对象
        */ 

        

 
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值