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 = ;這種寫法不合理，右邊不屬於合法的值

預設值

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基礎之變數的解構賦值

相關推薦