es6--剩余参数与展开运算符

最新推荐文章于 2024-05-06 07:31:12 发布

小白小白从不日白

最新推荐文章于 2024-05-06 07:31:12 发布

阅读量464

点赞数 1

分类专栏： es6 文章标签： es6/es7

本文链接：https://blog.csdn.net/weixin_43285360/article/details/117438431

版权

es6 专栏收录该内容

20 篇文章 1 订阅

订阅专栏

一、剩余参数

a.什么是剩余参数

const add = (x,y,...args)=>{};

由三个点以及参数名组成，在打印的时候需要省略三个点，直接写参数名即可

console.log(x,y,args);

剩余参数永远是个数组，即使没有值，也是空数组

 <script>
        const add = (x, y, ...args) => {
            console.log(x, y, args);
        };
        add(4, 4);
        add(1, 8, 7, 9, 1, 4, 2, 4);
</script>

b.剩余参数的注意事项

箭头函数的剩余参数：

箭头函数的参数部分即使只有一个剩余参数，也不能省略圆括号

const add=(...args)=>{};

使用剩余参数替代arguments获取实际参数：

const add = (...args) => {

console.log(args);

};

add(7,8);

剩余参数的位置：

剩余参数只能作为最后一个参数，否则会报错

<script>
 const add = (...args,c) => {

       console.log(args);

            };
</script>

c.剩余参数的应用

示例1：

<script>
        const add = (...args) => {
            let sum = 0;
            for (var i = 0; i < args.length; i++) {
                sum += args[i];
            }

            return sum;
        }

        var result = add(7, 7, 8, 954, 0, 12);
        console.log(result);
</script>

示例2：

 <script>
        //剩余参数与解构赋值结合
        //剩余参数不一定非要作为函数参数使用
        const [num, ...args] = [1, 2, 7, 8, 9];
        console.log(args);
        console.log(num);
</script>

示例3：

 <script>
        //剩余参数与函数参数结合使用
        const func = (num, ...args) => {};
        func(1, 2, 3);
</script>

示例4：

<script>
        //剩余参数与对象解构赋值结合使用
        const {
            x,
            y,
            ...args
        } = {
            a: 3,
            x: 9,
            y: 12,
            b: 345
        };
        console.log(x, y, args);
</script>

示例5：

 <script>
        const func = ({
            x,
            y,
            ...z
        }) => {};
        func({
            a: 45,
            x: 67,
            y: 123,
            b: 23,
            d: 67
        });
</script>

二、展开运算符

1.数组的展开运算符

数组展开运算符的基本用法

console.log(Math.min(...([3,2,1])));

a.区分剩余参数和展开运算符

根本区别：

展开运算符：[3,2,1]-->3,2,1

剩余运算符：3,2,1-->[3,2,1]

示例1：

<script>
        const add = (...args) => {
            console.log(args); //剩余参数
            console.log(...args); //展开运算符
        };
        add(1, 4, 7);
</script>

示例2：

<script>
        //将二维数组变为一维数组
        console.log([1, ...[4, 8, 7]]);
    </script>

b.数组展开运算符的应用

示例1：

<script>
        //复制数组
        const arr = [1, 4, 7, 8];
        const newArr = [...arr];
        arr[2] = 47;
        console.log('newArr：' + newArr);
        console.log(newArr instanceof Array);
        console.log('arr：' + arr);
        console.log(arr instanceof Array);
</script>

示例2：

 <script>
        //合并数组
        const arr1 = [1, 4, 7];
        const arr2 = [7, 78, 15];
        const arr3 = [10, 20, 30, 60];
        console.log([79, ...arr2, 101, 120, ...arr3, ...arr1, 14, 56]);
</script>

示例3：

<script>
        //字符串转换为数组
        //字符串可以按照数组的形式展开
        console.log([...
            'jack'
        ]);
</script>

示例4：

 <script>
        //常见的类数组转化为数字
        //arguments   NodeList
        function func() {
            console.log([...arguments]);
        }
        func(4, 7, 8);
</script>

示例5：

 <script>
        //常见的类数组转化为数字
        //arguments   NodeList
        console.log(document.querySelectorAll('p'));
        console.log([...document.querySelectorAll('p')]);
 </script>

2.对象展开运算符

a.对象展开运算符的基本用法

展开对象

 <script>
        //对象的展开：把属性罗列出来，用逗号分隔，放到一个{}中，构成新对象
        const apple = {
            color: '红色',
            shape: '球形',
            taste: '甜甜的'
        }
        console.log({...apple
        });
 </script>

合并对象

<script>
        //对象的合并：新对象拥有全部属性，相同属性后者覆盖前者
        const apple = {
            color: '红色',
            shape: '球形',
            taste: '甜甜的'
        }

        const pen = {
            color: '黑色',
            shape: '圆柱形',
            use: '写字'
        }
        console.log({...apple,
            ...pen
        });

        console.log({...pen,
            ...apple
        });

        console.log({
            apple,
            pen
        });

        console.log({...apple,
            pen
        });
</script>

b. 对象展开运算符的注意事项

空对象的展开

<script>
        //展开一个空对象，则没有任何效果
        const obj = {};
        console.log({...obj
        });
</script>

非对象的展开

<script>
        //非对象的展开:如果展开的不是对象，则会自动将其转为对象，再将其属性罗列出来
        console.log({...1
        });
        console.log({...undefined
        });
        console.log({...null
        });
        console.log({...true
        });

        //如果展开运算符后面是字符串，它会自动转成一个类似数组的对象，因此不会返回空对象
        console.log({...
            'jack'
        });

        console.log({...[4, 7, 9]
        });
</script>

对象中对象属性的展开

<script>
        //不会展开对象中的对象属性
        const apple = {
            feature: {
                test: '甜甜的'
            }
        };

        const pen = {
            feature: {
                color: '褐色',
                shape: '圆柱形'
            },
            use: '写字'
        };
        console.log({...apple
        });
        console.log({...apple,
            ...pen
        });
</script>

c.对象展开运算符的应用

示例1：

<script>
        //复制对象
        const a = {
            x: 1,
            y: 2
        }
        const b = {...a
        };
        console.log(a);
        console.log(b);
        console.log(b === a);
</script>

示例2：

<script>
        //用户参数和默认参数
        //方式1
        // const logUser = ({
        //     username = 'zhangsan',
        //     age = 0,
        //     sex = 'male'
        // } = {}) => {
        //     console.log(username, age, sex);
        // }


        //方式2
        const logUser = userParam => {
            const defaultParam = {
                username: 'zhangsan',
                age: 0,
                sex: 'male'
            };

            // const param = {...defaultParam,
            //     ...userParam
            // };
            // console.log(param.username);

            const {
                username,
                age,
                sex
            } = {...defaultParam,
                ...userParam
            };
            console.log(username, age, sex);
        }
        logUser();
</script>