es6解構(gòu)賦值的概念是什么

這篇文章主要講解了“es6解構(gòu)賦值的概念是什么”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“es6解構(gòu)賦值的概念是什么”吧！

在es6中，解構(gòu)賦值是針對數(shù)組或者對象進(jìn)行模式匹配，然后對其中的變量進(jìn)行賦值的意思；解構(gòu)賦值也是對賦值運(yùn)算符的擴(kuò)展，語法為“l(fā)et 解構(gòu)的目標(biāo) = 解構(gòu)的源;”。

本教程操作環(huán)境：windows10系統(tǒng)、ECMAScript 6.0版、Dell G3電腦。

es6解構(gòu)賦值是什么意思

概述

解構(gòu)賦值是對賦值運(yùn)算符的擴(kuò)展。

他是一種針對數(shù)組或者對象進(jìn)行模式匹配，然后對其中的變量進(jìn)行賦值。

在代碼書寫上簡潔且易讀，語義更加清晰明了；也方便了復(fù)雜對象中數(shù)據(jù)字段獲取。

解構(gòu)模型

在解構(gòu)中，有下面兩部分參與：

• 解構(gòu)的源，解構(gòu)賦值表達(dá)式的右邊部分。

• 解構(gòu)的目標(biāo)，解構(gòu)賦值表達(dá)式的左邊部分。

數(shù)組模型的解構(gòu)（Array）

基本

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

可嵌套

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

可忽略

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

不完全解構(gòu)

let [a = 1, b] = []; // a = 1, b = undefined

剩余運(yùn)算符

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

示例如下：

注意點(diǎn):

• 賦值等號的左右側(cè)的數(shù)組結(jié)構(gòu)需要一直,這個叫做”模式匹配”

• 如果左右兩側(cè)的變量數(shù)與數(shù)值數(shù)的數(shù)量不匹配, 那么就直接跳過缺失部分(謹(jǐn)記, 左邊的跳過了, 右側(cè)相應(yīng)位置的也要跳過)

• 如果左側(cè)某個變量前有三個小點(diǎn), 那么意味著右側(cè)對應(yīng)位置及以后的所有數(shù)值將組合成一個數(shù)組,賦值給左側(cè)的該變量,且左側(cè)必須是最后一個變量才可以在前面加三個小點(diǎn),否則報錯

感謝各位的閱讀，以上就是“es6解構(gòu)賦值的概念是什么”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對es6解構(gòu)賦值的概念是什么這一問題有了更深刻的體會，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識點(diǎn)的文章，歡迎關(guān)注！