js--ES6新特性之解構

丶Serendipity丶發表於2021-07-18
JS

前言

　　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

 

寫在最後

　　以上就是本文的全部內容，希望給讀者帶來些許的幫助和進步，方便的話點個關注，小白的成長踩坑之路會持續更新一些工作中常見的問題和技術點。

 

相關文章