es6基礎之變數的解構賦值

本文源自阮老師的es6入門教程，為了之後方便自己隨時檢視，將常用的es6部分整理了一下

傳送門概念：es6 允許按照一定模式，從陣列和物件中提取值，對變數進行賦值

基本用法：

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

上面**表示，可以從陣列中提取值，按照對應位置，對變數賦值,也就是說，只要兩邊的模式相同，左邊的變數就會對應賦為右邊的值

例如：

123

4567

891011

1213

1415

let [a, [[b], c]] = [1, [[2], 3]];
a // 1
b// 2
c // 3
let [ , , str] = ["foo", "bar", "baz"];
str // "baz"
let [x, , y] = [1, 2, 3];
x // 1
y // 3
let [fir, ...sce] = [1, 2, 3, 4];
fir // 1
sce // [2, 3, 4]

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

let [foo] = ;
let [bar, foo] = [1];

以上兩種情況都屬於解構不成功，foo的值都會等於undefined。

另一種情況是不完全解構，即等號左邊的模式，只匹配一部分的等號右邊的陣列。這種情況下，解構依然可以成功

123

4567

let [x, y] = [1, 2, 3];
x // 1
y // 2
let [a, [b], d] = [1, [2, 3], 4];
a // 1
b // 2
d // 4

預設值解構賦值允許指定預設值。

123

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 內部使用嚴格相等運算子（===），判斷乙個位置是否有值

123

let  = ;
foo // "aaa"
bar // "bbb"

物件解構賦值時變數必須與屬性同名，才能取到正確的值

陣列的元素是按次序排列的，變數的取值由它的位置決定。而物件不用受位置限制

上面**的第乙個例子，等號左邊的兩個變數的次序，與等號右邊兩個同名屬性的次序不一致，但是對取值完全沒有影響。第二個例子的變數沒有對應的同名屬性，導致取不到值，最後等於undefined。

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

123

4567

let  = ;
baz // "aaa"
let obj = ;
let = obj;
f // 'hello'
l // 'world'

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

例如：

123

let  = ;
baz // "aaa"
foo // error: foo is not defined

上面**中，foo是匹配的模式，baz才是變數。真正被賦值的是變數baz，而不是模式foo。

交換變數的值

123

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

函式返回多個值

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

123

4567

891011

1213

function example() 
let [a, b, c] = example();
// 返回乙個物件
function example() ;
}let = example();

函式引數的定義

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

123

4567

// 引數是一組有次序的值
function f([x, y, z]) 
f([1, 2, 3]);
// 引數是一組無次序的值
function f() 
f();

提取 json 資料

123

4567

8910

let jsondata = ;
let = jsondata;
console.log(id, status, number);
// 42, "ok", [867, 5309]

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

es6基礎之變數的解構賦值

本文源自阮老師的es6入門教程，為了之後方便自己隨時檢視，將常用的es6部分整理了一下傳送門概念 es6 允許按照一定模式，從陣列和物件中提取值，對變數進行賦值基本用法 1 let a,b,c 1,2,3 上面表示，可以從陣列中提取值，按照對應位置，對變數賦值,也就是說，只要兩邊的模式相同，左...

ES6之變數與解構賦值

變數宣告var 函式作用域可以重新賦值，重新定義 let 塊級作用域不能重新宣告，可以修改 const 塊級作用域不能重新宣告，不能修改常量 var 是全域性變數,for var i 0 i 10 i for let i 0 i 10 i 1000 script 變數提公升var命令會發生 ...

ES6（二）之變數的解構賦值

基本用法let arr 1,2,3 let a arr 0 let b arr 1 let c arr 2 console.log a,b,c 解構賦值後 let a,b,c 1,2,3 console.log a,b,c let num,str 6,str let 這種寫法不合理，右邊不屬於合法的...

es6基礎之變數的解構賦值

es6基礎之變數的解構賦值

ES6之變數與解構賦值

ES6（二）之變數的解構賦值

相關推薦