ECMAScript6 入門 變數的解析賦值

2022-03-25 12:04:52 字數 4444 閱讀 2519

重點:如果等號的右邊的資料結構不存在iterator介面,那麼就會報錯.

//

以前,為變數賦值,只能直接指定值

let a = 1;

let b = 2;

let c = 3;

//es6 允許寫成下面這樣

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

注釋:可以從陣列中提取值,按照對應位置,對變數賦值,本質上,這種寫法屬於「模式匹配」,只要等號兩邊的模式相同,左邊的變數就會被賦予對應的值

let [foo, [[bar], baz]] = [1, [[2], 3]];

foo //1

bar //

2baz //

3let [ , , third] = ["foo", "bar", "baz"];

third

//"baz"

如果解構不成功,變數的值就等於undefined。

let [foo] =;

let [bar, foo] = [1];

//foo的值都是undefined

對於set的資料結構也是可以解構賦值

let [x, y, z] = new set(['a', 'b', 'c']);

let [foo = true] =;

foo

//true

let [x, y = 'b'] = ['a']; //

x='a', y='b'

let [x, y = 'b'] = ['a', undefined]; //

x='a', y='b'

注意,es6 內部使用嚴格相等運算子(===),判斷乙個位置是否有值。所以,只有當乙個陣列成員嚴格等於undefined,預設值才會生效

let [x = 1] =[undefined];

x //

1let [x = 1] = [null

];x

//null

因為null !== undefined ,所以預設值是沒有效果

如果預設值是乙個表示式,那麼這個表示式是惰性求值的,即只有在用到的時候,才會求值

function

f()

let [x = f()] = [1];

因為1 !== undefined,所以x是可以取到值的,那麼對於表示式就不會去執行

let x;

if ([1][0] ===undefined)

else

預設值可以引用解構賦值的其他變數,但該變數必須已經宣告

let [x = 1, y = x] = ;     //

x=1; y=1

let [x = 1, y = x] = [2]; //

x=2; y=2

let [x = 1, y = x] = [1, 2]; //

x=1; y=2

let [x = y, y = 1] = ; //

referenceerror: y is not defined

1:物件解析與陣列解析的不同點在於,陣列的按照一定的順序的,變數的取值取決於他的位置;而物件的屬性沒用順序,變數必須與物件的屬性名相同,才可以正確的取到值

let  = ;

foo

//"aaa"

bar //

"bbb"

let = ;

baz

//undefined

let = ;

baz

//"aaa"

//如果變數名與屬性名不一致,必須寫成下面這樣

let obj = ;

let =obj;

f //

'hello'

l //

'world'

說明物件的解構賦值是下面形式的簡寫

let = ;

注釋:與陣列相同點

1物件的解構賦值也是可以巢狀的,

2另外物件也可以定義預設值,並且屬性的值為undefined,預設值才會有效果

3解析失敗那麼值為undefined。

注意點:注意是模式還是變數,變數採用的是逗號分開,模式後面緊跟的是冒號,我們只對變數賦值,不對模式賦值

const node =

}};let , loc: } } =node;

line //1

loc //

object

start //

object

小貼士:由於陣列本質是特殊的物件,因此可以對陣列進行物件屬性的解構

let arr = [1, 2, 3];

let =arr;

first //1

last //

3

字串也可以解構賦值。這是因為此時,字串被轉換成了乙個類似陣列的物件,

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

const [a, b, c, d, e] = 'hello';

a //

"h"b //

"e"c //

"l"d //

"l"e //

"o"let = 'hello';

len

//5

解構賦值時,如果等號右邊是數值和布林值,則會先轉為物件,數值和布林值的包裝物件都有tostring屬性

重點:解構賦值的規則是,只要等號右邊的值不是物件或陣列,就先將其轉為物件。由於undefinednull無法轉為物件,所以對它們進行解構賦值,都會報錯

let  = 123;

s === number.prototype.tostring //

true

let = true

;s === boolean.prototype.tostring //

true

function

add([x, y])

add([1, 2]); //3//

那麼肯定也可以使用預設值了

function move( ={})

move(); //

[3, 8]

move(); //

[3, 0]

move({}); //

[0, 0]

move(); //

[0, 0]

1互動變數的值

let x = 1;

let y = 2;

[x, y] = [y, x];

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

function

example()

let [a, b, c] =example();

//返回乙個物件

function

example() ;

}let = example();

3:函式引數的定義,也就是說我們((我們也可以給引數定義預設值,這樣避免在函式體內部在對變數進行空判斷))傳引數的時候不必再拘謹與順序

//

引數是一組有次序的值

function

f([x, y, z])

f([1, 2, 3]);

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

function

f()

f();

4:提取 json 物件中的資料

let jsondata =;

let =jsondata;

console.log(id, status, number);

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

5:遍歷map結構

任何部署了 iterator 介面的物件,都可以用for...of迴圈遍歷

const map = new

map();

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)

6:輸入模組的指定方法

const  = require("source-map");

ECMA Script 6 變數的解構賦值

1 陣列的結構和賦值 es6 允許按照一定模式,從陣列和物件中提取值,對變數進行賦值,這被稱為解構 2 物件等可以這麼賦值 3 函式引數的解構賦值 function add x,y add 1,2 3 基本用途 交換變數 a,b b,a 函式返回多個值 類似於陣列 返回乙個陣列 function e...

ECMAScript 6入門類繼承筆記

看類繼承前,先回顧建構函式怎麼實現物件的繼承的 function f function son function inherit s,f inherit son,f let son new son 它實現了哪幾個功能 用來extends和super關鍵字,看乙個簡單的繼承 class a class...

EcmaScript 6 箭頭函式

es5 var total values.reduce function a,b 0 es6 var total values.reduce a,b a b,0 箭頭即乙個函式的簡化 es5 confetti btn click function event es6 confetti btn cli...