基本用法
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 = ;
這種寫法不合理,右邊不屬於合法的值
預設值let [foo = true] = ;
foo // true
let [x, y = 'b'] = ['a']; // x='a', y='b'
let [x, y = 'b'] = ['a', undefined]; // x='a', y='b'
let [x = 1] = [undefined];
x // 1
let [x = 1] = [null];
x // null
舉例理解:
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
使用
物件的解構與陣列的解構有乙個重要的不同,陣列的元素是按次序排列的,變數的取值由他的位置決定的,而物件的屬性沒有次序,變數必須與屬性同名,才能取到正確的值
let = ;
a //"aaa"
b //"bbb"
let = ;
c //undefined
如果變數名與屬性名不一致
let = ;
baz // "aaa"
let obj = ;
let = obj;
f // 'hello'
l // 'world'
let = ;
baz // "aaa"
foo // error: foo is not defined
上面的**,foo
是匹配的模式,baz
才是變數。真正被賦值的是變數baz,而不是模式foo。
3. 解構用於巢狀結構的物件
let obj =
]};let ] } = obj;
x // "hello"
y // "world"
這個時候,p是模式,不是變數,因此不會被賦值,如果p要歐威變數賦值,應該寫成如下:
let obj =
]};let ] } = obj;
x // "hello"
y // "world"
p // ["hello", ]
預設值var = {};
x // 3
var = ;
x // 1
y // 5
預設值生效的條件是,物件的屬性值嚴格等於undefined。
注意點js會將理解成**塊 ,只有在不將大括號寫在行首,才能解決這個問題
//錯誤的寫法
let x;
= ;//正確的寫法
( = });
解構賦值允許等號左邊的模式之中,不放置任何變數名。但是表示式毫無意義
({} = [true, false]);
由於陣列本質是特殊的物件,因此可以對陣列進行物件屬性的解構。
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
數值和布林值的包裝物件都有tostring
屬性
let = 123;
s === number.prototype.tostring // true
let = true;
s === boolean.prototype.tostring // true
undefined
和null
無法轉為物件,所以對他們進行解構賦值,都會報錯typeerror
let = undefined; //typeerror
let = null; //typeerror
函式引數的解構賦值舉例說明:
[[1, 2], [3, 4]].map(([a, b]) => a + b);
// [ 3, 7 ]
函式引數資料的解構的預設值,函式的引數是物件,通過對物件進行解構,得到x
和y
值,解構失敗等於x
和y
預設值
function move( = {})
move(); // [3, 8]
move(); // [3, 0]
move({}); // [0, 0]
move(); // [0, 0]
對函式的引數指定預設值會有不同的效果
function move( = )
move(); // [3, 8]
move(); // [3, undefined]
move({}); // [undefined, undefined]
move(); // [0, 0]
不能使用圓括號的情況
變數宣告語句
//全部報錯
let [(a)] = [1];
let = {};
let () = {};
let = {};
let = {};
let ) } = };
函式引數
//報錯
function f( [(a)] )
賦值語句的模式
//報錯
() = ;
可以使用圓括號的情況
是賦值語句,而不是宣告語句
圓括號都不屬於模式的一部分
[(b)] = [3]; // 正確
( = {}); // 正確
[(parseint.prop)] = [3]; // 正確
在第二個例子裡,p是模式,(d)是變數
let x =1;
let y = 2;
[ x, y ] = [ y, x ];
// 返回陣列
function example ()
let [a, b, c]=example();
//返回物件
function example()
} let = example();
//引數是有序的
function f([x, y, z])
f([1, 2, 3]);
//引數是無序的
function f()
f();
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
} = {}) ;
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)
import from 'mint-ui'
ES6之變數與解構賦值
變數宣告var 函式作用域 可以重新賦值,重新定義 let 塊級作用域 不能重新宣告,可以修改 const 塊級作用域 不能重新宣告,不能修改 常量 var 是全域性變數,for var i 0 i 10 i for let i 0 i 10 i 1000 script 變數提公升var命令會發生 ...
es6基礎之變數的解構賦值
本文源自阮老師的es6入門教程,為了之後方便自己隨時檢視,將常用的es6部分整理了一下 傳送門概念 es6 允許按照一定模式,從陣列和物件中提取值,對變數進行賦值 基本用法 1 let a,b,c 1,2,3 上面 表示,可以從陣列中提取值,按照對應位置,對變數賦值,也就是說,只要兩邊的模式相同,左...
es6基礎之變數的解構賦值
本文源自阮老師的es6入門教程,為了之後方便自己隨時檢視,將常用的es6部分整理了一下 傳送門概念 es6 允許按照一定模式,從陣列和物件中提取值,對變數進行賦值 基本用法 1 let a,b,c 1,2,3 上面 表示,可以從陣列中提取值,按照對應位置,對變數賦值,也就是說,只要兩邊的模式相同,左...