编程语言
首页 > 编程语言> > JavaScript - 展开运算符

JavaScript - 展开运算符

作者:互联网

在ES6中,使用 … 来表示展开运算符,它可以展开数组/对象。

一、展开运算符…在数组中的使用

  1. 展开一个数组
        const arr = [1,2,3] ;
        console.log(...arr);  //输出: 1 2 3
  1. 复制一个数组,也称深拷贝数组
        const arr = [1,2,3] ;
        
        //深拷贝,拷贝的是数组中的值
        const arr3 = [...arr] ;
        console.log(arr3);  //输出 [1, 2, 3]
  1. 连接数组
        const arr = [1,2,3] ;
        
        const arr4 = [...arr , 5 ,6 ,7] ;
        console.log(arr4);  //输出:[1, 2, 3, 5, 6, 7]

        const arr5 = [...arr , ...arr4] ;
        console.log(arr5); //输出: [1, 2, 3, 1, 2, 3, 5, 6, 7]

二、展开运算符…在函数中的使用

对于不确定传多少个值也可以使用扩展运算符。这样在你传值的时候可以一直增加,不用再关心形参的多少!

        function add(...numbers) {
            return numbers
        }
        console.log(add(1, 2, 3, 4, 5));   //输出:[1, 2, 3, 4, 5]

三、展开运算符…在对象中的使用

注意:展开运算符…不能展开一个对象(console.log(…obj);)会报错。

  1. 深拷贝一个对象
        let ajaxData = {name:'小花猫',age: 18};
        let reactPropsAPI = {...ajaxData};
        console.log(reactPropsAPI)  //输出:{name: '小花猫', age: 18}

        reactPropsAPI.sex = '男' ;
        console.log(reactPropsAPI);  //输出:{name: '小花猫', age: 18, sex: '男'}
        console.log(ajaxData);  //输出:{name: '小花猫', age: 18}
  1. 合并对象
        const obj = {
            a: 1,
            b: 2,
            c: 3
        };
        const obj2 = {
            ...obj,
            name: 'cc'
        };
        console.log(obj2); //输出:{a: 1, b: 2, c: 3, name: 'cc'}

标签:...,arr,const,log,JavaScript,运算符,console,展开
来源: https://blog.csdn.net/m0_55710075/article/details/122335637