es6 - 解構(gòu)賦值

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

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

解構(gòu)賦值

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

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

語(yǔ)法

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

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

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

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

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

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

當(dāng)=左邊與右邊不完全匹配時(shí)，未能匹配到的變量會(huì)被賦值為undefined,比如：

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

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

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

注意：只有當(dāng)在右邊找不到對(duì)應(yīng)的值或值為undefined時(shí)，才會(huì)使用默認(rèn)值。

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

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

在解構(gòu)賦值中，通過(guò)在變量前加...號(hào)，表示生成的變量為一個(gè)數(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]

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

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

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

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

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

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

這是由于如果不加(),js會(huì)把左邊看成一個(gè)代碼塊，會(huì)報(bào)錯(cuò)。加了()后，整個(gè)變成了一個(gè)合法的表達(dá)式。

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

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

這樣相應(yīng)的名字和年齡就被賦值給myName和myAge了。

也可以同時(shí)使用默認(rèn)值：

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

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

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);

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

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

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

函數(shù)參數(shù)的解構(gòu)功能對(duì)于實(shí)現(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ù)是常用的實(shí)現(xiàn)多參函數(shù)的方式，name, value為必填參數(shù)，所有可選參數(shù)封裝到options中，作為options的屬性使用。
但上面的函數(shù)存在一個(gè)問(wèn)題就是，你只看函數(shù)的定義，是無(wú)法知道到底可選參數(shù)的名稱(chēng)是什么的？你需要閱讀函數(shù)代碼，了解函數(shù)才能使用它。

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

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

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

但是這種寫(xiě)法有種問(wèn)題是當(dāng)只傳入name和value參數(shù)時(shí)，會(huì)報(bào)錯(cuò)。

更好的寫(xiě)法是使用函數(shù)的默認(rèn)參數(shù)。

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

注意事項(xiàng)

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

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

最佳實(shí)踐

變量交換值

在es6之前，交換兩個(gè)變量的值，需要?jiǎng)?chuàng)建一個(gè)中間變量，類(lèi)似這樣

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

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

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

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

數(shù)組的復(fù)制

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

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

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

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

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/107514.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

DirtyMind

男|高級(jí)講師

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

TA的文章

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

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

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

閱讀 2953·2019-08-30 15:53
如何實(shí)現(xiàn)響應(yīng)式圖片？

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

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

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

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

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

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

es6 - 解構(gòu)賦值

相關(guān)文章

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

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

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

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

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

發(fā)表評(píng)論

0條評(píng)論

DirtyMind

男|高級(jí)講師

TA的文章

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

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

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

如何實(shí)現(xiàn)響應(yīng)式圖片？

css選擇器總結(jié)

設(shè)計(jì)原則

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

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

最新活動(dòng)

資訊專(zhuān)欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

es6 - 解構(gòu)賦值

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！