js--ES6新特性之解构

前言

　　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

写在最后

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

巴特西

js--ES6新特性之解构

最新文章

热门文章