重點:如果等號的右邊的資料結構不存在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 ,所以預設值是沒有效果
如果預設值是乙個表示式,那麼這個表示式是惰性求值的,即只有在用到的時候,才會求值
functionf()
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
屬性
重點:解構賦值的規則是,只要等號右邊的值不是物件或陣列,就先將其轉為物件。由於undefined
和null
無法轉為物件,所以對它們進行解構賦值,都會報錯
let = 123;s === number.prototype.tostring //
true
let = true
;s === boolean.prototype.tostring //
true
functionadd([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:函式只能返回乙個值,如果要返回多個值,只能將它們放在陣列或物件裡返回。有了解構賦值,取出這些值就非常方便(重點是取這些值)。
functionexample()
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...