資訊專欄INFORMATION COLUMN
摘要：不執(zhí)行對象的解構(gòu)賦值對象的解構(gòu)賦值和數(shù)組有一個不同，數(shù)組的元素是按次序排列的，變量的取值由它的位置決定而對象的屬性沒有次序，變量必須與屬性同名，才能取到正確的值。實際上，對象的解構(gòu)賦值是以下形式的簡寫。
什么是解構(gòu)？
按照一定的模式從數(shù)組或者對象中取值，對變量進行賦值的過程稱為「解構(gòu)」
在 ES5 中，為變量賦值只能直接指定值：
var a=1,b=2,c=3 a; // 1 b; // 2 c; // 3
但是在 ES6 中，我們可以被允許寫成：
var [a,b,c]=[1,2,3]; a; // 1 b; // 2 c; // 3
ES6 中可以很明顯看出來，我們可以在數(shù)組中取數(shù)據(jù)，按照位置的對應(yīng)關(guān)系對變量賦值。
[默認(rèn)值]解構(gòu)賦值允許使用默認(rèn)值
var [foo = true] = []; foo; // true
[x,y = "b"] = ["a"] x; // "a" y; // "b"
[x,y = "b"] = ["a","c"] x; // "a" y; // "c"
ES6 內(nèi)部使用的是嚴(yán)格相等運算符(===)判斷一個位置是否有值。所以，如果一個數(shù)組成員不嚴(yán)格等于 undefind，默認(rèn)值是不會生效的。
var [x = 1] = [undefined]; x; // 1
null == undefined // true var [x = 1] = [null]; x; // null
上述代碼中，一個數(shù)組成員是 null,因此默認(rèn)值不生效。因為 null 不嚴(yán)格等于 undefined。
function f(){
console,log("aaa");
}
let [x = f()] = [1]; // undefined ,不執(zhí)行 f()
x; // 1
對象的解構(gòu)賦值
var {foo,bar}={foo:"aaa",bar:"bbb"};
foo; // "aaa"
bar; // "bbb"
對象的解構(gòu)賦值和數(shù)組有一個不同，數(shù)組的元素是按次序排列的，變量的取值由它的位置決定；而對象的屬性沒有次序，變量必須與屬性同名，才能取到正確的值。
var {laf} = {foo:"aaa",bar:"bbb"};
laf; // undefined;
在上面代碼中，變量沒有對應(yīng)的同名屬性，導(dǎo)致取不到值，最后等于 undefind。
實際上，對象的解構(gòu)賦值是以下形式的簡寫。
var { foo: foo, bar: bar } = { foo:"aaa", bar:"bbb" }
實際上，在對象的解構(gòu)賦值的內(nèi)部機制，是先找到同名屬性，然后在賦值給對應(yīng)的變量。真正被賦值的是后者，而不是前者。
var { foo : bar } = {foo : "aaaa"};
foo; // foo is not defined
bar; // "aaaa"
采用這種寫法是，變量的聲明和賦值都是一體的。對于 let 和 const 而言，變量不能重新聲明，所以一旦賦值的變量以前聲明過，就會報錯。
let foo;
let {foo}={foo:"1"}
// Uncaught SyntaxError: Identifier "foo" has already been declared
所以不能重復(fù) let 聲明：
let foo;
({foo} = {foo:1})
對象的解構(gòu)也可以制定默認(rèn)值。
var {x,y = 5} = {x:1};
x; // 1
y; // 5
默認(rèn)值生效條件是，對象屬性嚴(yán)格不等于 undefined
var {x = 3} = {x: undefined};
x; // 3
var {x = 3} = {x:null};
x; // null
和數(shù)組一樣，解構(gòu)也可以用于嵌套解構(gòu)的對象。
var obj={
p:[
"hello",
{y:"world"}
]
}
這時的 p 是模式，不是變量，因此不會被賦值。如果 p 也要作為變量賦值，應(yīng)該寫成這樣：
var obj = {
p:{
"Hello",
{
y:"World"
}
}
}
let {p, p : { x , [ { y } ] = obj;
x // "Hello"
y // "World"
p // ["Hello", {y: "World"}]
下面一個例子：
var {loc,loc:{start},loc:{ start: { { line,column } } }={
loc:{
start:{
line:1,
column:5
}
}
}
上面代碼有三次解構(gòu)賦值，分別是對loc、start、line三個屬性的解構(gòu)賦值。注意，最后一次對line屬性的解構(gòu)賦值之中，只有l(wèi)ine是變量，loc和start都是模式，不是變量。
var obj = [];
var arr = [];
({foo:obj.prop,bar: arr[0]} = {foo:123,bar:true});
obj; // {prop:123}
arr; // [true]
如果解構(gòu)模式是嵌套的對象，而且子對象所在的父屬性不存在，則會報錯
var {foo : {bar}} = {baz:"baz"};
正確的寫法：
var {foo,foo:{bar}}={foo:{bar:"bar"}};
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/104438.html
let和const let和const兩者并不存在變量提升 這里要說明的是變量一定要在聲明后使用，否則報錯?！ ara=[]; for(vari=0;i<10;i++){ a[i]=function(){ console.log(i); }; } a[6]();//10 變量i是var聲明的，我們要知道這里在全局范圍內(nèi)都有效。我們要知道在每一次循環(huán)中，新的...
摘要：返回布爾值，表示參數(shù)字符串是否在源字符串的頭部。參考語法返回一個布爾值與的全等操作符比較兼容環(huán)境把對象的值復(fù)制到另一個對象里淺拷貝定義方法用于將所有可枚舉的屬性的值從一個或多個源對象復(fù)制到目標(biāo)對象。語法要設(shè)置其原型的對象。 一步一步似爪牙。 前言 學(xué)習(xí)es6之前我們可能并不知道es6相比es5差距在哪, 但是這并不妨礙我們站在巨人的肩膀上; 程序員就是要樂于嘗鮮; 學(xué)習(xí)es6最終目的是...
摘要：在中必須調(diào)用方法，因為子類沒有自己的對象，而是繼承父類的對象，然后對其進行加工而就代表了父類的構(gòu)造函數(shù)。雖然代表了父類的構(gòu)造函數(shù)，但是返回的是子類的實例，即內(nèi)部的指的是，因此在這里相當(dāng)于。要求，子類的構(gòu)造函數(shù)必須執(zhí)行一次函數(shù)，否則會報錯。 1.class ES6 提供了更接近傳統(tǒng)語言的寫法，引入了 Class（類）這個概念，作為對象的模板。通過class關(guān)鍵字，可以定義類?；旧?，ES...
摘要：在中必須調(diào)用方法，因為子類沒有自己的對象，而是繼承父類的對象，然后對其進行加工而就代表了父類的構(gòu)造函數(shù)。雖然代表了父類的構(gòu)造函數(shù)，但是返回的是子類的實例，即內(nèi)部的指的是，因此在這里相當(dāng)于。要求，子類的構(gòu)造函數(shù)必須執(zhí)行一次函數(shù)，否則會報錯。 1.class ES6 提供了更接近傳統(tǒng)語言的寫法，引入了 Class（類）這個概念，作為對象的模板。通過class關(guān)鍵字，可以定義類。基本上，ES...
閱讀 3326·2021-09-08 09:45
閱讀 1261·2019-08-30 15:53
閱讀 1538·2019-08-30 14:12
閱讀 989·2019-08-29 17:01
閱讀 2579·2019-08-29 15:35
閱讀 401·2019-08-29 13:09
閱讀 1982·2019-08-29 12:32
閱讀 3093·2019-08-26 18:37
