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

前端小草籽

已于 2022-07-12 12:47:51 修改

阅读量576

点赞数

分类专栏： ES6学习文章标签： es6 前端 javascript

于 2022-07-11 21:14:04 首次发布

本文链接：https://blog.csdn.net/weixin_47075145/article/details/125719395

版权

ES6学习专栏收录该内容

14 篇文章 10 订阅

订阅专栏

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

2.遍历方法4个（Set.prototype.）

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
评论
ES6中的扩展运算符(...) 和 Set()数据结构（可以称为集合）

扩展运算符是三个点（...）。用于取出参数对象的所有可遍历属性，然后拷贝到当前对象之中。 2.用于合并两个对象注意点：合并时，如果自定义的属性，放在扩展运算符后面，则扩展运算符内部的同名属性会被覆盖掉。2. 数组的扩展运算符（三个点相当于数组展开）1.复制数组扩展运算符提供了复制数组的简便写法。2.合并数组3.字符串变数组2.Set()对象里面存数据方式01. 调用add()方法，里面参数为要存的数据02. 写到Set()括号里面：
复制链接

扫一扫