es6 - 解構(gòu)賦值

DirtyMind 發(fā)布于2019-08-26 11:45 / 3356人閱讀

摘要：比如上面展示的情況都是可以聯(lián)合使用的比如對象的解構(gòu)賦值對象的解構(gòu)賦值是基于屬性的。當給已存在的變量解構(gòu)賦值時，注意加這是由于如果不加會把左邊看成一個代碼塊，會報錯。注意事項數(shù)組的解構(gòu)賦值中，使用的變量必須放在最后。

解構(gòu)賦值

解構(gòu)賦值是一個聽起來比較高大上的特性，但按我的理解，它就是一種語法糖。它并沒有賦予js更強大的能力，只是讓賦值操作更加的靈活，效率。

在es6之前，賦值操作需要=左邊是一個變量，右邊是一個數(shù)據(jù)或返回數(shù)據(jù)的函數(shù)等。
而解構(gòu)賦值，是將=右邊的結(jié)構(gòu)分解(解構(gòu))，然后按照格式給=左邊進行賦值，主要分為數(shù)組的解構(gòu)賦值和對象的解構(gòu)賦值。

語法

解構(gòu)賦值的格式為，=左邊為解構(gòu)賦值的語法，=右邊為初始化器，即一個對象或數(shù)組。

數(shù)組的解構(gòu)賦值

數(shù)組的解構(gòu)賦值是基于數(shù)組位置的，比如：

let [a,b] = [1,2] // 結(jié)果a等于1，b等于2

也可以通過解構(gòu)改變變量的值。比如：

let a = 1, b = 2;
[a,b] = [100, 200];

當=左邊與右邊不完全匹配時，未能匹配到的變量會被賦值為undefined,比如：

let [a,b,c] = [1,2] //a為1，b為2，c為undefined

所以可以通過給一些變量指定默認值，以防止這種情況的發(fā)生。比如：

let [a,b,c=3] = [1,2] //a==1, b==2, c==3

注意：只有當在右邊找不到對應的值或值為undefined時，才會使用默認值。

有時候，解構(gòu)賦值中，你可能只關(guān)心一部分數(shù)據(jù)，這時可以通過占位符只給某些值賦值。比如：

let [a,,,b,,] = [1,2,3,4,5,6,7,8] //a==1 b==4

在解構(gòu)賦值中，通過在變量前加...號，表示生成的變量為一個數(shù)組。比如：

let [a,,...b] = [1,2,3,4,5] //a == 1, b==[3,4,5]

上面展示的情況都是可以聯(lián)合使用的,比如：

let [a,b=8,,..c] = [1,2,3,4,5,6] //a==1 b==2 c=[4,5,6]

對象的解構(gòu)賦值

對象的解構(gòu)賦值是基于屬性的。比如：

let {name, age} = {
    name: "icode007",
    age: 27
}
//name == "icode007" age==27

與數(shù)組的解構(gòu)賦值一樣，對象的解構(gòu)賦值一樣給未能解構(gòu)的變量賦值undefined，一樣可以使用默認值。

當給已存在的變量解構(gòu)賦值時，注意加()

let name, age;
({name, age} = {name: "icode007", age: 27});

這是由于如果不加(),js會把左邊看成一個代碼塊，會報錯。加了()后，整個變成了一個合法的表達式。

在上面的解構(gòu)賦值中，變量名和對象中的屬性名必須相同，只有這樣，才能找到對應的要解構(gòu)賦值的數(shù)據(jù)。
但如果我們想要給數(shù)據(jù)賦一個不同的名字呢？也是有辦法的。

let {name:myName, age: myAge} = {name: "icode007", age: 27}

這樣相應的名字和年齡就被賦值給myName和myAge了。

也可以同時使用默認值：

let {name:myName, age: myAge, jog: myJob = "soft Engineer"} = {name: "icode007", age: 27}

以上我們列舉的對象的解構(gòu)賦值的例子都非常的簡單，但在實際開發(fā)中，JSON數(shù)據(jù)可能是非常復雜的，這時的解構(gòu)賦值語法也可能變得復雜。比如：

let node = {
    type: "Identifier",
    name: "foo",
    loc: {
        start: {
            line: 1,
            column: 1
        },
        end: {
            line: 1,
            column: 4
        }
    }
};
let {loc: { start }} = node;
console.log(start.line);
console.log(start.column);

注意：每當有:出現(xiàn)在解構(gòu)賦值中時，:左邊的標識符表示要檢查的位置，右邊表示要賦值的目標，如果右邊是{}或[]時，表示要賦值的變量在更深層次結(jié)構(gòu)中。

上面的所有實例，如默認值，變量更名等特性都可能存在于一個解構(gòu)賦值語句中。并且，數(shù)組的解構(gòu)賦值與對象的解構(gòu)賦值，也可以混合使用。這為我們從復雜的數(shù)據(jù)結(jié)構(gòu)中提取相應數(shù)據(jù)提供了極大的便利。

函數(shù)參數(shù)的解構(gòu)

函數(shù)參數(shù)的解構(gòu)功能對于實現(xiàn)多參的函數(shù)是非常有用的。
比如

function setCookie(name, value, options){
    options = options || {};
    var secure = option.secure,
        path = option.path,
        domain = option.domain
    ;
    //...
}

setCookie("type", "js", {
    secure: true,
    expires: 60000
    })

上面的函數(shù)是常用的實現(xiàn)多參函數(shù)的方式，name, value為必填參數(shù)，所有可選參數(shù)封裝到options中，作為options的屬性使用。
但上面的函數(shù)存在一個問題就是，你只看函數(shù)的定義，是無法知道到底可選參數(shù)的名稱是什么的？你需要閱讀函數(shù)代碼，了解函數(shù)才能使用它。

使用函數(shù)參數(shù)解構(gòu)則直觀很多：

function setCookie(name, value, {secure, path, domain}){
    //...
}

使用同樣的使用方式可以調(diào)用這個函數(shù)。

但是這種寫法有種問題是當只傳入name和value參數(shù)時，會報錯。

更好的寫法是使用函數(shù)的默認參數(shù)。

function setCookie(name, value, {secure, path = "/", domain} = {}){
    //...
}

注意事項

數(shù)組的解構(gòu)賦值中，使用...rest的變量必須放在最后。

與普通的變量的賦值語句一樣，解構(gòu)賦值語句也是有值的，它的值就是=右邊的內(nèi)容。

最佳實踐

變量交換值

在es6之前，交換兩個變量的值，需要創(chuàng)建一個中間變量，類似這樣

var a = 1, b = 2, temp;
temp = a; a = b; b = temp;

現(xiàn)在只需要一行代碼：
[a,b] = [b,a]

提取json中的一些數(shù)據(jù)

在實際開發(fā)中，數(shù)據(jù)解構(gòu)是非常復雜的，使用對象屬性去層層調(diào)用的語法非常不直觀，通過解構(gòu)賦值，可以讓代碼更加的直觀與簡潔。

數(shù)組的復制

數(shù)組的解構(gòu)賦值中，有個小技巧。

let arr = [1,4,9,55,244];
let [...cloneArray] = arr;
console.log(cloneArray);

這樣就實現(xiàn)了數(shù)組的淺復制，而在以前，數(shù)組的復制都是通過concat()方法來完成。

更多es6的內(nèi)容，可以關(guān)注我的專欄--學習ES6.

云服務器 GPU云服務器解構(gòu)賦值對象解構(gòu) 解構(gòu)函數(shù) ES6

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/107514.html

發(fā)表評論

登陸后可評論

0條評論

DirtyMind

男|高級講師

我要關(guān)注我要私信

TA的文章

算法練習6：旋轉(zhuǎn)數(shù)組的最小數(shù)字

閱讀 1641·2021-11-25 09:43
npm發(fā)布包的那些事

閱讀 2547·2019-08-30 15:54
Web最佳實踐閱讀總結(jié)(1)

閱讀 3016·2019-08-30 15:53
如何實現(xiàn)響應式圖片？

閱讀 1158·2019-08-30 15:53
css選擇器總結(jié)

閱讀 802·2019-08-30 15:52
設(shè)計原則

閱讀 2595·2019-08-26 13:36
JavaScript面向?qū)ο缶幊獭狝rray類型

閱讀 871·2019-08-26 12:16
腳本錯誤量極致優(yōu)化-讓腳本錯誤一目了然

閱讀 1290·2019-08-26 12:13

成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲中文字幕日韩无码

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

es6 - 解構(gòu)賦值

相關(guān)文章

ES6 學習筆記（一）let，const和解構(gòu)賦值

ES6學習第二章變量的解構(gòu)賦值

ES6學習第二章變量的解構(gòu)賦值

ES6-變量的解構(gòu)賦值(3)

**《ES6學習2》變量的解構(gòu)賦值**

發(fā)表評論

0條評論

DirtyMind

男|高級講師

TA的文章

算法練習6：旋轉(zhuǎn)數(shù)組的最小數(shù)字

npm發(fā)布包的那些事

Web最佳實踐閱讀總結(jié)(1)

如何實現(xiàn)響應式圖片？

css選擇器總結(jié)

設(shè)計原則

JavaScript面向?qū)ο缶幊獭狝rray類型

腳本錯誤量極致優(yōu)化-讓腳本錯誤一目了然

最新活動