變數的解構賦值

2021-10-25 06:13:49 字數 4719 閱讀 6899

es6 允許按照一定模式, 從陣列和物件中提取值, 對變數進行賦值, 這被稱為解構(destructruing)

基本用法

let


[foo,


[[bar]


, baz]]=


[1,[


[2],


3]];


//foo - 1  bar - 2  baz - 3 


let[x,


,y]=[1


,2,3


];//x - 2  y - 3


let[head,


...tail]=[


1,2,


3,4]


;//head - 1  tail - [2,3,4]


let[x, y,


...z]=[


'a']


// x - a  y - undefined  z -
預設值

let


[a =1]


=[]a // 1


let[a, b =2]


=[1]


;// a=1, b=2


let[a, b =2]


=[1, undefined]


;// a=1, b=2
基本用法

物件的解構與陣列的解構不同, 陣列的元素是按次序排列的, 變數的取值是由它的位置決定的; 而物件的屬性沒有次序, 變數必須與屬性同名, 才能取到正確的值. 如果解構失敗, 變數的值變為undefined.

let=;


a // 1


b // 2


c // undefined
//將math物件的對數,正弦,余弦三個方法, 賦值到對應的變數上


let= math


//將console.log賦值到log變數


let= console;


log(


'hello'


)// hello
let obj =


;let


= obj


c // 1


d // 2
這說明了, 物件的解構賦值是下邊的簡寫

let


=
也就是說, 物件的解構賦值的內部機制, 是先找到同名屬性, 然後再賦值給對應的變數, 真正被賦值的是後者, 而不是前者.

let obj =]}


;let]}


= obj


x // hello


y // world
let obj =]}


;let]}


= obj


x // hello


y // world


p // ['hello', ]
const node =}}


;let


, loc:}}


= node;


line //1


start //object 


loc //object
最後一次對line屬性的解構賦值之中, 只用line是變數, loc和start都是模式不是變數.

let obj =


;let arr =


;(=)


;obj // 


arr // [true]
預設值

var=;


x // 1


y // 5


var=


;y // 3


var=


;y // 5
預設值生效的條件是, 物件的屬性值嚴格等於undefined

注意點(1) 如果要將乙個已經宣告的變數用於解構賦值, 必須非常小心.

//錯誤寫法


let x;=;


//正確寫法


let x;(=


);
(2) 解構賦值允許等號左邊的模式之中, 不放置任何變數名.

(3) 由於陣列本質是特殊的物件, 因此可以對陣列進行物件屬性的解構

let arr =[1


,2,3


];let= arr;


first // 1


last // 3
字串被解構賦值時, 被轉換成了乙個類似陣列的物件

const


[a,b,c,d,e]


='hello'


a // h


b // e


c // l


d // l


e // o
類似陣列的物件都有乙個length屬性, 因此還可以對這個屬性解構賦值

let


='hello'


len // 5
解構賦值時, 如果等號右邊是不數值和布林值, 則會先轉為物件

let


=123


s === number.prototype.tostring // true


let=


true


;s === boolean.prototype.tostring // true
解構賦值時, 由於undefined和null無法轉為物件, 所以對他們進行解構賦值都會報錯.

例子

function


add(


[x,y]


)add([


1,2]


);//3[[1


,2],


[3,4


]].map((


[a,b]


)=> a + b)


;//[3,7]
以下三種解構賦值不得使用圓括號:

變數宣告語句

let


[(a)]=


[1]
函式引數

functionf(


[(z)])
賦值語句的模式

(


[a])=[


5];

可以使用圓括號的情況

[


(b)]=[


3];(


=);[


(parseint.prop)]=


[3];
交換變數的值

let x =


1let y =


2[x,y]


=[y,x]
從函式返回多個值

函式只能返回乙個值, 如果要返回多個值, 只能將他們放在陣列或物件裡返回.

//返回乙個陣列


functionf(


)let


[a,b,c]=f


();//返回乙個物件


functionf(


);}let=f


();
函式引數的定義

functionf(


[x, y, z])f


([1,


2,3]


);
提取json資料

let jsondata =


;let


= jsondata;


console.


log(id, status, number)


;// 42, "ok", [867, 5309]
函式引數的預設值

jquery.


ajax


=function


(url,


,  cache =


true


,complete


=function()


,  crossdomain =


false


,  global =


true


,// ... more config}=


);
遍歷map結構

const map =


newmap()


;map.


set(


'first'


,'hello');


map.


set(


'second'


,'world');


for(


let[key, value]


of map)


// first is hello


// second is world
如果只想獲取鍵名, 或者只想獲取鍵值

//獲取鍵名


for(


let[key]


of map)


//獲取鍵值


for(


let[


,value]


of map)
輸入模組的指定方法

載入模組時，往往需要指定輸入哪些方法。解構賦值使得輸入語句非常清晰。

const


=require


("source-map"


);

變數解構賦值

1.從陣列物件中提取值，對變數進行賦值，被稱為結構。2.false，1，nan undefind null轉化為物件後不具備iterator介面，本身不具備iterator介面。3.set結構也可使用陣列的解構賦值，只需要資料機構具備iterator 迭代器 介面，都可以採用陣列形式的解構賦值 ar...

變數的解構賦值

從陣列和物件中提取值，對變數進行賦值，這被稱為解構 本質上，這種寫法屬於 模式匹配 只要等號兩邊的模式相同，左邊的變數就會被賦予對應的值 例子 let a,b,c 1,2,3 let foo,bar baz 1,2 3 foo 1 bar 2 baz 3 let third foo bar baz ...

變數的解構賦值

什麼是解構 es6允許按照一定的模式，從陣列或者物件中提取值，然後賦值給相應變數，此為解構。解構分為完全解構和不完全解構，前者要求一一對應，後者可以是等號左邊只匹配等號右邊的一部分。解構不成功會返回undefined。let foo alert foo undefined重點 不是只有陣列才可以解構...