展开运算符应用

展开运算符应用

1.展开运算符: ...

相当于数组/对象 遍历的简写

2.展开运算符应用场景 :

(1)H5端下拉刷新： 连接数组

(2)连接对象 : 把两个盒子的数据 合成一个对象发给服务器

(3)浅拷贝数据

//(1)连接数组
        let arr = [10,20,30]
        //服务器返回了一个新数组,添加到列表后面
        let arr1 = [40,50,60]
        arr.push(...arr1)
        console.log(arr)

        //(2)连接对象
        let obj = {
            username:'admin',
            password:'123456'
        }

        let form = {
            name:'张三',
            age:20,
            ...obj
        }

        console.log( form )

        //(3)浅拷贝数据
        /* 
        浅拷贝 : 浅拷贝拷贝地址,只拷贝一层
        深拷贝 : 深拷贝拷贝数据,拷贝多层
        */

        const person = {
            name:'王五',
            age:30,
            sex:'男',
            hobby:['学习','代码','干饭']
        }

        //浅拷贝 : 拷贝地址
        const person1 = person
        person1.name = '老六'
        console.log(person1,person)//{name: '老六', age: 30, sex: '男', hobby: Array(3)}

        //需求： 拷贝person的数据, 修改拷贝后的数据不影响
        /* 原理：只拷贝person第一层数据
            const person2 = {
                name: person.name,
                age: person.age,
                sex: person.sex,
                hobby: person.hobby,
            }
        */
        const person2 = { ...person }
        person2.name = '老铁'
        console.log(person2,person)