ES6中的 扩展运算符(...) 和 Set()数据结构(可以称为集合)

目录

1.扩展运算符 (...)

1.对象的扩展运算符

1.扩展运算符运用举例说明: 

 2.用于合并两个对象

2. 数组的扩展运算符 (三个点相当于数组展开)

1.复制数组

2.合并数组

3.字符串变数组

2.Set()对象里面存数据方式

3.Set函数的语法

 ​编辑

4. Set 实例的方法

1.操作方法有4个

2.遍历方法4个 (Set.prototype.)

4、Set 对象的应用

1.去重

2.并集(求与)

3.交集(求交)

4.差集


1.扩展运算符 (...)

1.对象的扩展运算符

扩展运算符是三个点(...)。用于取出参数对象的所有可遍历属性,然后拷贝到当前对象之中。

只要是具有遍历器的类数组对象(可以遍历)都可以利用扩展运算符转为真正的数组,同样Map也可以,来看这样一个例子:

    <script>
        let map = new Map([
            [1, 'one'],
            [2, 'two'],
            [3, 'three'],
        ]);
        let arr = [...map];
        console.log(arr); 
    </script>

结果:

 

用...操作符,将 Set 转 Array

<script>
    // Array 转 Set
    var mySet = new Set(["value1", "value2", "value3"]);
    // 用...操作符,将 Set 转 Array
    var myArray = [...mySet];
    console.log(myArray); // ['value1', 'value2', 'value3']
</script>

1.扩展运算符运用举例说明: 

    <script>
        //新建了一个对象a,然后通过扩展运算符将其属性x,y一并拷贝到b对象中。
        let a = {x:3,y:4};
        let b = {...a};
        console.log(b); //{x: 3, y: 4}
    </script>

 2.用于合并两个对象

    <script>
        //新建了一个对象a,然后通过扩展运算符将其属性x,y一并拷贝到b对象中。
        let a = {x:3,y:4};
        let b = {m:1,n:2};
        let c = {...a,...b};
        console.log(c);  //{x: 3, y: 4, m: 1, n: 2}
    </script>

 注意点:合并时,如果自定义的属性,放在扩展运算符后面,则扩展运算符内部的同名属性会被覆盖掉

    <script>
        let a = {x:1,y:2};
        let c = {...a,x:3,z:5};
        console.log(c); //{x: 3, y: 2, z: 5} x:1被覆盖为x:3
    </script>

2. 数组的扩展运算符 (三个点相当于数组展开)

1.复制数组

扩展运算符提供了复制数组的简便写法。

<script>
    let arr1 = [1,2];

    //取出参数对象的所有可遍历属性,然后拷贝到当前对象
    let arr2 = [...arr1];
    console.log(arr2);  //(2) [1, 2]
</script>

2.合并数组

<script>
    let arr1 = [1,2];
    let arr2 = [3,4];
    //取出参数对象的所有可遍历属性,然后拷贝到当前对象
    let arr3 = [...arr1,...arr2];
    console.log(arr3); //(4) [1, 2, 3, 4]
    //let arr3 = [...arr2,...arr1];
    //console.log(arr3); //(4) [3, 4, 1, 2]
</script>

3.字符串变数组

<script>
    let a = [..."helloGirl!"];
    console.log(a);//['h', 'e', 'l', 'l', 'o', 'G', 'i', 'r', 'l', '!']
</script>

2.Set()对象里面存数据方式

01. 调用add()方法 ,里面参数为要存的数据

<script>
    let setvalue2 = new Set();
    setvalue2.add(1);
    setvalue2.add(null);
    setvalue2.add(undefined);
    setvalue2.add(function(){});
    setvalue2.add([1,2,3]);
    console.log(setvalue2); //Set(5) {1, null, undefined, ƒ, Array(3)}
</script>

02. 写到Set()括号里面:

Set 函数可以接受一个数组(或类似数组的对象)作为参数,用来进行数据初始化。
eg:  let i = new Set([1, 2, 3, 4, 4]);  会得到  set{1, 2, 3, 4,}

<script>
    let set = new Set(['red', 'green', 'blue']);
    console.log(set);
</script>

<script>
    //字符串也是一个类数组  想到字符串可以去下标
    let set1 = new Set("hello");
    console.log(set1); //Set(4) {'h', 'e', 'l', 'o'}
</script>

3.Set函数的语法

01.Set 对象允许存储任何类型的唯一值,无论是原始值或者是对象引用。

也可通俗的说是:Set类似于数组,但是Set成员的值都是唯一的,没有重复的值,所以可以利用Set里面没有重复的值这一特性,实现去重操作。

对 允许存储任何类型的唯一值 的理解:Set数据容器里面可以存任何数据类型数据,但是相同的数据(同一引用空间的数据)只能存一次,重复存也只能存入一次。但是形式相同,不是同一内存空间数据可以一起存入,例如:{ } 和 { }

<script>
    let setvalue = new Set();
    setvalue.add(1);
    setvalue.add(1);
    setvalue.add({});
    setvalue.add({});
    console.log(setvalue); //Set(3) {1, {…}, {…}}
</script>

02.Set()本身是一个构造函数(ES6中提出),通过new关键字来生成Set数据结构(集合)

<script>
    let setvalue = new Set();
</script>

03. 虽然 NaN 和任何值甚至和自己都不相等(NaN !== NaN 返回true),但是Set认为NaN等于自身

<script>
    console.log(NaN !== NaN);//true
    let setvalue = new Set();
    let a = NaN;
    let b = NaN;
    setvalue.add(a);
    setvalue.add(b);
    console.log(setvalue);//Set(1) {NaN}
</script>

 04.Set数据容器的size属性含义是:返回Set实例的成员总数。所以形式相同,不是同一内存空间数据一起存入,例如:{ } 和 { },size会把这两个成员都记录

<script>
    let setvalue = new Set();
    setvalue.add({});
    setvalue.add({});
    console.log(setvalue);
</script>

 

4. Set 实例的方法

Set 实例的方法分为两大类:操作方法(用于操作数据)和遍历方法(用于遍历成员)

1.操作方法有4个

01.内置方法 :add(value)    添加某个值,返回 Set 结构本身。

<script>
    let setvalue = new Set();
    //因为 add(value):添加某个值,返回 Set 结构本身 
    //所以setvalue.add(1)返回的是这个 Set 结构
    setvalue.add(1).add(2).add(3);
    console.log(setvalue);   //Set(3) {1, 2, 3}
</script>

 02.内置方法:delete(value):删除某个值,返回一个布尔值,表示删除是否成功。

<script>
    let setvalue = new Set();
    setvalue.add(1).add(2).add(3);
    console.log(setvalue.delete(1)); //删除成功返回true
    console.log(setvalue.delete(4)); //没有4,删除失败 返回false
    console.log(setvalue);   //Set(2) { 2, 3}
</script>

删除成功,返回true; 删除失败返回 false

03.内置方法:has(value):该方法返回一个布尔值,表示该值是否为Set的成员。

<script>
    let setvalue = new Set();
    setvalue.add(1).add(2).add(3);
    console.log(setvalue.has(1));   //true
    console.log(setvalue.has(4));   //false
</script>

04.内置方法:clear():清除所有成员,没有返回值。

<script>
    let setvalue = new Set();
    setvalue.add(1).add(2).add(3);
    setvalue.clear();       //清楚所有成员,没有返回值
    console.log(setvalue); //Set(0)
</script>

2.遍历方法4个 (Set.prototype.)

01. 内置方法:keys():返回键名的遍历器

02. 内置方法:values():返回键值的遍历器

注意点:Set.prototype.keys()返回Set实例对象的键名遍历器。但由于Set没有键名只有键值故keys()方法和Set.prototype.values()方法的返回值是一致的,也可以理解成keys()方法是values()方法的别名 (出于与 Map 对象保持相似的原因),返回的都是键值。

03. 内置方法:entries():返回键值对的遍历器

Set.prototype.entries()方法返回一个键值对的遍历器。由于Set对象实例没有键名,故返回的迭代器的每一项的值都是两个相同值组成的数组

<script>
let set = new Set(['red', 'green', 'blue']);
// 返回键名的遍历器 keys()
 for (let item of set.keys()) {
   console.log(item);
 }
console.log("-----------------------------------");

//内置方法:values():返回键值的遍历器
 for (let item of set.values()) {
   console.log(item);
 }
 // red
 // green
 // blue
  
 console.log("-----------------------");

 //
//内置方法:entries():返回键值对的遍历器
 for (let item of set.entries()) {
   console.log(item);
 }
 // ["red", "red"]
 // ["green", "green"]
 // ["blue", "blue"]
</script>

04. 内置方法:forEach():使用回调函数遍历每个成员  取数据

Set 结构的实例与数组一样,也拥有forEach方法,用于对每个成员执行某种操作,没有返回值

4、Set 对象的应用

1.去重

<script>
    // 数组去重
    let a = [...new Set([1, 3, 3, 5, 7])];
    console.log(a); //(4) [1, 3, 5, 7]
    // 字符串去重
    let b = [...new Set('ababbc')].join('');// "abc"
    console.log(b);  //abc
</script>

分析: [...new Set([1, 3, 3, 5, 7])]; new Set([1, 3, 3, 5, 7])生成了一个 Set()数据,因为是互异性,所以去重后结果是Set(4) {1, 3, 5, 7},然后取出参数对象的所有  可遍历属性 ,然后拷贝到当前对象,所以把其把其可遍历的属性拷贝到[ ]中,就是(4) [1, 3, 5, 7]

分析:把传入Set()的字符串参数'ababbc'去重后,取出可遍历数据["a","b","c"],再把数组元素用分隔符分开后传出。因为传入jion的参数是"",所以没有分隔符,结果就是"abc"

2.并集(求与)

<script>
    var a = new Set([1, 2, 3]);
    var b = new Set([4, 3, 2]);
    var c = new Set([...a, ...b]); 
    console.log(c); //Set(4) {1, 2, 3, 4}
</script>

3.交集(求交)

学完箭头函数再回来写。。。

4.差集

学完箭头函数再回来写。。。

Set数据(集合) 与 Map数据(字典) 的区别:

共同点:集合、字典 可以储存不重复的值。
不同点:集合 是以 [value, value]的形式储存元素,字典 是以 [key, value] 的形式储存。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值