ES6解构赋值

最新推荐文章于 2024-09-08 21:17:37 发布

C20001206

最新推荐文章于 2024-09-08 21:17:37 发布

阅读量44

点赞数

分类专栏： es6 文章标签： javascript 前端 vue.js 开发语言 es6

本文链接：https://blog.csdn.net/C20001206/article/details/131662777

版权

es6 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

解构赋值

1.数组解构

2.对象解构

解构赋值

概念：解构赋值是一种快速为变量赋值的简洁语法，本质上仍然为变量赋值

1.数组解构

1.概念：数组结构就是将数组的单元值快速批量赋值给一系列变量的简洁语法
2.语法：
1.赋值运算符 = 左侧的[]用于批量声明变量，右侧数组的单元值将被赋值给左侧变量
2.变量的顺序对应数组单元值的位置依次进行赋值
3.典型应用：交换两个变量的值

        // 数组解构的典型应用：交换两个变量的值
        let a = 1
        let b = 2;
        [b, a] = [a, b]
        console.log(a, b)

4.数组解构的小细节
1.变量多单元值少的情况,变量的数量大于单元值数量时，多余的变量被赋值为 undefined

        // 1.变量多，单元值少的情况
        // 多余的变量被赋值为 undefined
        let [a, b, c] = [1, 2]
        console.log(a, b, c)  // 1 2 undefined

2.变量少单元值多的情况,多余的单元之没有变量取接收

        // 2.变量少，单元值多
        // 多余的单元值没有变量接收
        let [a1, b1] = [1, 2, 3]
        console.log(a1, b1) // 1 2

3.剩余参数解决变量少单元值多的情况,剩余参数返回一个真数组

        // 3.用剩余参数解决变量少，单元值多的情况
        // 剩余参数返回一个真数组
        let [a2, ...b2] = [a, 2, 3, 4, 5]
        console.log(a2, b2) // 1 [2, 3, 4, 5]

4.防止由undefined传递单元值的情况，可以设置默认值,允许初始化变量的默认值，但只有单元值默认为undfined时默认值才会生效

        // 4.防止由undefined传递单元值的情况，可以设置默认值
        // 允许初始化变量的默认值，但只有单元值默认为undfined时默认值才会生效
        let [a3 = 1, b3 = 2, c3 = 5] = [1, 2]
        console.log(a3, b3, c3)  // 1 2 5
        // 如果不赋初值时
        let [a4, b4, c4] = [1, 2]
        console.log(a4, b4, c4)  // 1 2 undefined

5.按需导入，忽略某些返回值

        // 5.按需导入，忽略某些返回值
        // 忽略了3
        let [a5, b5, , c5] = [1, 2, 3, 4]
        console.log(a5, b5, c5) // 1 2 4

6.支持多维数组解构

        // 6.多维数组解构
        let [a6, b6, c6, [d6, e6]] = [1, 2, 3, [4, 5]]
        console.log(a6, b6, c6, d6, e6) // 1 2 3 4 5
        // 多维数组不完全解构
        let [a7, b7, c7, [d7]] = [1, 2, 3, [4, 5]]
        console.log(a7, b7, c7, d7)  // 1 2 3 4  没有解构到5
        // 多级数组解构
        let [a8, b8, c8, d8] = [1, 2, 3, [4, 5]]
        console.log(a8, b8, c8, d8)  // 1 2 3 [4, 5]

注意：当一行代码以数组[] 开头时要在数组前面加分号，可以加载数组前面，也可以加在上一行代码的后面，以这样来告诉程序上一行代码已经结束了

2.对象解构

1.概念：对象解构是将对象属性和方法快速批量赋值给一系列变量的简洁语法
2.基本语法：
1.赋值运算符 = 左侧的 {} 用于批量声明变量，右侧对象的属性值将被赋值给左侧的变量
2.对象属性的值将被赋值给与属性名相同的变量
3.注意解构的变量名不要和外面变量名冲突，否则会报错
4.对象中找不到与变量名一致的属性时变量值为 undefined

对象解构代码展示：

        // 对象解构
        let person = {
            name: 'zhangsan',
            age: 18
        }

        let {name, age} = person
        console.log(name)  // zhangsan
        console.log(age) // 18

3.对象解构的小细节
1.可以从一个对象中提取变量并同时修改成新的变量名
语法：旧变量名: 新变量名冒号表示 "什么值：赋值给谁"

        // 解构时并改名字
        let {name:username,age: newAge} = {name: 'lisi', age: 19}
        console.log(username, newAge)  // lisi 19

2.数组对象的解构注意符号相对应

        // 数组对象解构
        // 注意符号相对应，[]对应[] {}对应{}
        let [{id, gender}] = [{id:001, gender: 'male'}]
        console.log(id, gender) // 1 'male'

3.多级对象的解构

        // 多级对象的解构
        let {name:newName, ageNew, family:{father, mother} } = {name: 'Aniy', ageNew: 6, family:{father:'jiandie', mother: 'shashou'}}
        console.log(newName, ageNew, father, mother)  // Aniy 6 jiandie shashou