web前端练习18----es6新语法5，展开运算符...

Posted 2022-12-09 zhaihaohao1

百度搜索 mdn 展开运算符

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Spread_syntax

1、操作数组

1.1、展开元素

        /**
         * 把数组中的元素展开
         */
        function iClick1() 
            let iArray = ['1', '2', '3'];
            console.log(...iArray);
            // 打印结果  1 2 3
        

1.2、添加元素

        /**
         * 给数组添加元素
         */
        function iClick2() 
            let array1 = [1, 2, 3, 4, 5];
            // 在头部添加元素
            array1 = [0, ...array1];
            // 在尾部添加元素
            array1 = [...array1, 6, 7];
            console.log(array1);
        

1.3、解构，删除某个元素

        /**
         * 解构，删除某个元素
         */
        function iClick3() 
            const [first, ...rest] = [1, 2, 3, 4, 5];
            console.log(first);
            // 打印结果 1
            console.log(rest);
            // 打印结果 [2, 3, 4, 5]
        

1.4、数组的合并

        /**
         * 数组的合并
         */
        function iClick4() 
            let array1 = [1, 2, 3, 4, 5];
            let array2 = [6, 7, 8, 9];
            let array3 = [...array1, ...array2];
            console.log(array3);
        

2、操作对象

2.1、对象添加属性

        /**
         * 扩展运算符操作对象
         * 添加一个属性
         */
        function object1() 
            let a =  age: 18, id: 10 ;
            // 把 name 属性，放到对象中
            let c =  name: 'zhh', ...a ;
            console.log(c);
            //  打印结果  name: "zhh", age: 18, id: 10
        
        object1();

2.2、对象修改属性

        /**
         * 扩展运算符操作对象
         * 修改一个属性
         */
        function object2() 
            let a =  name: 'zhh', age: 18, id: 10 ;
            //先拿到a, 后面的name:zhh1,把 a 中name 的值替换掉了
            let c =  ...a, name: 'zhh1' ;
            console.log(c);
            // 打印结果  name: "zhh1", age: 18, id: 10

        
        object2();

2.3、删除一个属性（拿出属性或者对象）

        /**
         * 删除一个属性（拿出属性或者对象）
         */
        function object3() 
            let a =  name: 'zhh', age: 18, id: 10 ;
            let  name, ...c  = a;
            console.log(name, c);
            //  打印结果 zhh age: 18, id: 10
        
        object3();

3、操作 Set 集合

3.1、set 转成数组

        /**
         * 操作 Set 集合
         * set 转成数组
         */
        function iSet1() 
            let xSet = new Set();
            xSet.add('1').add('2').add('3');
            let array = [...xSet];
            console.log(array);
        
        iSet1();

3.2、数组转成集合

        /**
         * 数组转成 Set
         */
        function iSet2() 
            let array = [1, 2, 3, 4, 5];
            let xSet = new Set(array);
            console.log(xSet);
        
        iSet2();

4、操作 Map 集合

4.1、map 转成数组（二维数组）

        /**
         * 操作 Map 集合
         * Map 转成二维数组
         */
        function iMap1() 
            let map = new Map();
            // 存数据
            map.set(0, 'zhh0');
            map.set(1, 'zhh1');
            map.set(2, 'zhh2');
            // 转成数组
            let array = [...map];
            console.log(array);
        
        
        iMap1();

4.2、二维数组转成 Map

        /**
         * 二维数组转成 Map
         */
         function iMap2() 
            // 数组 
            let array =[[0,'zhh0'],[1,'zhh1'],[2,'zhh2']]; 
            // 数组转成 Map
            let map = new Map(array);
            console.log(map);
        
        iMap2();

5、操作生成器对象Generator

        // 生成器对象转成数组
        function* foo3() 
            yield 'a';
            yield 'b';
            yield 'c';
           
        console.log([...foo3()]);
        // 打印结果  ["a", "b", "c"]

 有关生成器对象参考：https://blog.csdn.net/zhaihaohao1/article/details/102074019

6、操作字符串

6.1、字符串转成数组

        /**
         * 操作字符串
         * 字符串转成数组
         */
        function iString() 
            let iString = 'woshizhongguoren';
            console.log([...iString]);
            //  打印结果 ["w", "o", "s", "h", "i", "z", "h", "o", "n", "g", "g", "u", "o", "r", "e", "n"]

        
        iString();

6.2、解构，字符串的剩余参数

        //字符串的剩余参数
        function method6() 
            let str = '秦始皇';
            let [a, ...b] = str;
            console.log(a,b);
            //秦 ["始", "皇"]
        
        method6();

7、方法中当做参数使用

        /**
         * 方法中参数
         */
        function method(...args) 
            console.log(args);
            //[0, 1, 2, 3, 4]
        
        method(0, 1, 2, 3, 4);

参考文章

https://blog.csdn.net/zhaihaohao1/article/details/89468444