ES6解構賦值

2021-10-07 13:16:07 字數 2283 閱讀 6788

es6中新增了解構賦值: 給我們提供了一種賦值方式,讓資料的儲存更方便。可以對陣列和物件進行操作。

使用方法:

使用方式:

陣列:

let

[x,y]=[

1,2]

;console.

log(x)

//1console.

log(y)

//2

物件:

let=;

console.

log(uname)

;// lusy

console.

log(uage)

;//60

其實再給物件進行解構賦值的時候,有一種需求就是給物件的變數進行重新命名。

let =

解析:foo是用來做匹配的,用來去解構物件裡尋找值,在es5中獲取物件的屬性 : 物件名.屬性值,baz就相當於屬性名

用途:

交換變數的值

let x =1;

let y =2;

[x, y]

=[y, x]

;

上面**交換變數x和y的值,這樣的寫法不僅簡潔,而且易讀,語義非常清晰。

從函式返回多個值

函式只能返回乙個值,如果要返回多個值,只能將它們放在陣列或物件裡返回。有了解構賦值,取出這些值就非常方便。

// 返回乙個陣列

function

example()

let[a, b, c]

=example()

;// 返回乙個物件

function

example()

;}let=

example()

;

函式引數的定義

解構賦值可以方便地將一組引數與變數名對應起來。

// 引數是一組有次序的值

functionf(

[x, y, z])f

([1,

2,3]

);// 引數是一組無次序的值

functionf(

)f()

;

提取json資料

解構賦值對提取json物件中的資料,尤其有用。

let jsondata =

;let

= jsondata;

console.

log(id, status, number)

;// 42, "ok", [867, 5309]

上面**可以快速提取 json 資料的值。

函式引數的預設值

jquery.

ajax

=function

(url,

, cache =

true

,complete

=function()

, crossdomain =

false

, global =

true

,// ... more config})

;

指定引數的預設值,就避免了在函式體內部再寫var foo = config.foo || 『default foo』;這樣的語句。

(6)遍歷map結構

任何部署了iterator介面的物件,都可以用for…of迴圈遍歷。map結構原生支援iterator介面,配合變數的解構賦值,獲取鍵名和鍵值就非常方便。

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

ES6 解構賦值

陣列的解構賦值 let a,b 12,13 let a,b,c d 13,15,16 let a,b c 78,12 23 let x,y 1,3,5 x 1,y 3 let x,y,z a x a,y undefined z let h,b 1,2,3,4 1,2,3,4 預設值 let x tr...

ES6解構賦值

一 基本用法 解構 destructuring 按照一定的模式,從陣列或者物件中提取值,對變數進行賦值。let par1,par2,par3 1,2 console.log par1,par2,par3 1 2 不完全解構時par3對值為undefined 解構賦值允許指定變數對預設值。let pa...

es6解構賦值

coding changes the world accumulating makes yourself 主要從三個方面講述 陣列式的解構賦值 物件式的解構賦值 函式中的解構賦值 preface 現今的變數宣告語法十分的直接 左邊是乙個變數名,右邊可以是乙個陣列 的表示式或乙個物件 的表示式,等等。...