前端 （四）ES6新特性之解構賦值

2021-10-23 14:39:21 字數 1788 閱讀 4547

等號左右兩邊的格式一樣，就可以將右邊的值賦值給左邊的變數，這種寫法實質是「模式匹配」。

舉個例子：

以前賦值:

var a =1;


var b =2;


var c =


3;
解構賦值:

var


[a, b, c]=[


1,2,


3];
let


= undefined;


// typeerror


let=


null


;// typeerror
要求：等號右邊必須為陣列

基本用法：

var


[a, b, c]=[


1,2,


3];
如果解構不成功，變數的值就等於undefined。

var


[bar, foo]=[


1];//foo為undefined
不完全結解構

let


[a,[b]


, d]=[


1,[2


,3],


4];a // 1


b // 2


d // 4
對於set結構，也可以使用陣列的解構賦值。

let


[x, y, z]


=new


set(


["a"


,"b"


,"c"])


;x // "a
設定預設值

[x, y =


'b']=[


'a', undefined]


;// x='a', y='b'
注意，es6內部使用嚴格相等運算子（===），判斷乙個位置是否有值。所以，如果乙個陣列成員不嚴格等於undefined，預設值是不會生效的。

var


[x =1]


=[undefined]


;x // 1


var[x =1]


=[null];


x // null
基本用法

var=}


;foo // "aaa"


bar // "bbb"


fun(


)// fun
冒號設定屬性別名

var=;


a // "aaa"


foo // error: foo is not defined
物件的解構賦值的內部機制，是先找到同名屬性，然後再賦給對應的變數。真正被賦值的是後者，而不是前者。foo是匹配的模式，a才是變數。真正被賦值的是變數a，而不是模式foo。

不完全解構

類似陣列的解構賦值。

預設值類似陣列的解構賦值

字串被轉換成了乙個類似陣列的物件。

const


[a, b, c, d, e]


='hello'


;a // "h"


b // "e"


c // "l"


d // "l"


e // "o"
function


add(


[x, y]


)add([


1,2]


);// 3

ES6新特性 解構賦值

在很多場景下，我們發現乙個復合屬性中像物件 陣列，我們在使用時並不會每一次都用到其中的每一項 每乙個元素，所以es6的解構賦值就可以單獨將我們需要的屬性 元素取出，不用將物件 陣列全部載入，可以提高專案的執行效率。先宣告乙個物件 let obj 在這個物件中有兩個屬性，通過解構賦值，我們可以做到只載...

ES6新特性四 變數的解構賦值例項

1.陣列的解構賦值 可以從數lohdsvgsi組中提取值，按照對應位置，對變數賦值 var a,b 1,2 a 1 b 2 下面是一些使用巢狀陣列進行解構 var d,c f 1,2 3 var third foo bar baz third baz var head,tail 1,2,3,4 he...

ES6新增特性 解構賦值

es6按照一定模式，從陣列和物件中提取值，對變數進行賦值，稱作解構賦值。按照下面的形式進行解構賦值。let a,b,c 1,2,3 console.log a 1 console.log b 2 console.log c 3若解構不成功，變數的值為undefined。let foo console...