时间戳

首页 > 技术文章 > js--ES6新特性之解构

js--ES6新特性之解构

zaishiyu 2021-07-18 17:02 原文

前言

　　es6 中引入了解构这一新特性，了解解构成为一个格合前端必须掌握的基础知识，不仅作为了面试的重要考查知识，同时能极大提高我们平常工作的开发效率。本文来总结一下需要掌握的解构知识点。

正文

　　1.什么是解构赋值

　　解构赋值允许你使用类似数组或对象字面量的语法将数组和对象的属性赋给各种变量。这种赋值语法极度简洁，同时还比传统的属性访问方法更为清晰。解构有什么作用呢？解构提供了更方便的数据访问。下面对比一下es6的解构之前后访问对象或者数组的信息的方式对比：

    // Es6之前
    let obj = { name: "小明", sex: "男" };
    var name = obj.name
    var sex = obj.sex
    console.log(name);//小明
    console.log(sex)//男
    // Es6之后
    let info = { name: "xiaoming", age: "18" }
    var { name ,age} = info
    console.log(name);//xiaoming
    console.log(age);//18

　　2.对象解构

　　（1）解构赋值

    let obj = {
      type: "objType",
    }
    type = "myType";
    ({ type } = obj) ；
    console.log(type);//objType
　　这里必须使用（）因为默认js会把{}解析为代码块，块语句不允许在赋值语句左侧出现，加了（）之后，该语句被当作表达式，不是块语句，从而完成赋值操作。

　　（2）解构默认值，设置默认值

    let obj = {
      type: "objType",
    }
    let { type, type1,type2 = "type2" } = obj
    console.log(type);//objType
    console.log(type1);//undefined
    console.log(type2);//type2
　　当使用解构赋值语句时，如果所指定的本地变量在对象中没有找到同名属性，那么该变量会被赋值为undefined。type2变量被赋值为默认值 type2 ,当obj对象中招不到同名属性的时候，使用了默认值。

　　（3）解构后赋值给不同的本地变量名

    let obj = {
      type: "objType",
    };
    let { type: myType, name: otherName = "otherName" } = obj;
    console.log(myType);//objType 
    console.log(otherName);//otherName

　　上面的代码，首先读取 type 变量的属性，并把它的值存储在变量 myType 上，后半行由于 obj 中不存在 name 属性 ，赋值给 otherName的时候使用了默认值。

　　（4）嵌套的对象解构

    let myInfo = {
      name: "xiaomign",
      loc: {
        start: {
          data: "123"
        },
        end: {
          data: "345"
        }
      }
    }
    let { name, loc: { start: { data: myDate } } } = myInfo
    console.log(myDate);//123

　　3.数组解构

　　（1）解构赋值

        var arr = ["red", "blue", "green"]
        var [firstColor, secondColor] = arr
        console.log(firstColor);//red
        var [, , thirdColor] = arr
        console.log(thirdColor);//green

　　（2）两个变量交换位置

        var a = 1,b = 2;
        [a,b] = [b,a]
        console.log(a);//2
        console.log(b);//1

　　（3）设置默认值

        let arr = ["red", "blue", "green"]
        let [first,second = "second",third,four = "four"] = arr
        console.log(first);//red
        console.log(second);//blue
        console.log(third);//green
        console.log(four);//four

　　（4）嵌套解构

        var colorArr = ["red",["red1","red2"],"blue"]
        var [first,[first1]] = colorArr
        console.log(first1);//red1

　　（5）剩余解构

        var arr = ["red", "blue", "green"]
        var [first,...restArr] = arr
        console.log(restArr);//["blue","green"]

　　（6）数组克隆

        // es6之前数组克隆
        let arr = ["red", "blue", "green"]
        let cloneArr = arr.concat()
        console.log(cloneArr);//["red", "blue", "green"]
        // es6利用剩余解构完成数组克隆
        let [...cloneArr1] = arr
        console.log(cloneArr1) //["red", "blue", "green"]

　　4.混合解构

        let node = {
            name: "foo",
            loc: {
                start: {
                    line: 1,
                    column: 1
                },
                end: {
                    line: 1,
                    column: 4
                }
            },
            range: [0, 3]
        };
        let {
            loc: { start },
            range: [startIndex]
        } = node;
        console.log(start.line); // 1
        console.log(start.column); // 1
        console.log(startIndex); // 0

写在最后

　　以上就是本文的全部内容，希望给读者带来些许的帮助和进步，方便的话点个关注，小白的成长之路会持续更新一些工作中常见的问题和技术点。

 

推荐阅读