ES的解構賦值-數組&對象

imccl 發布于2019-08-23 17:58 / 2492人閱讀

摘要：不執行對象的解構賦值對象的解構賦值和數組有一個不同，數組的元素是按次序排列的，變量的取值由它的位置決定而對象的屬性沒有次序，變量必須與屬性同名，才能取到正確的值。實際上，對象的解構賦值是以下形式的簡寫。

什么是解構？

按照一定的模式從數組或者對象中取值，對變量進行賦值的過程稱為「解構」

在 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 中可以很明顯看出來，我們可以在數組中取數據，按照位置的對應關系對變量賦值。

[默認值]

解構賦值允許使用默認值

var [foo = true] = [];
foo; // true

[x,y = "b"] = ["a"]
x; // "a"
y; // "b"

[x,y = "b"] = ["a","c"]
x; // "a"
y; // "c"

ES6 內部使用的是嚴格相等運算符(===)判斷一個位置是否有值。所以，如果一個數組成員不嚴格等于 undefind，默認值是不會生效的。

var [x = 1] = [undefined];
x; // 1

null == undefined // true
var [x = 1] = [null];
x; // null

上述代碼中，一個數組成員是 null,因此默認值不生效。因為 null 不嚴格等于 undefined。

function f(){
    console,log("aaa");
}
let [x = f()] = [1]; // undefined ,不執行 f()
x; // 1

對象的解構賦值

var {foo,bar}={foo:"aaa",bar:"bbb"};
foo; // "aaa"
bar; // "bbb"

對象的解構賦值和數組有一個不同，數組的元素是按次序排列的，變量的取值由它的位置決定；而對象的屬性沒有次序，變量必須與屬性同名，才能取到正確的值。

var {laf} = {foo:"aaa",bar:"bbb"};
laf; // undefined;

在上面代碼中，變量沒有對應的同名屬性，導致取不到值，最后等于 undefind。
實際上，對象的解構賦值是以下形式的簡寫。

var { foo: foo, bar: bar } = { foo:"aaa", bar:"bbb" }

實際上，在對象的解構賦值的內部機制，是先找到同名屬性，然后在賦值給對應的變量。真正被賦值的是后者，而不是前者。

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

所以不能重復 let 聲明：

let foo;
({foo} = {foo:1})

對象的解構也可以制定默認值。

var {x,y = 5} = {x:1};
x; // 1
y; // 5

默認值生效條件是，對象屬性嚴格不等于 undefined

var {x = 3} = {x: undefined};
x; // 3
var {x = 3} = {x:null};
x; // null

和數組一樣，解構也可以用于嵌套解構的對象。

var obj={
    p:[
        "hello",
        {y:"world"}
    ]
}

這時的 p 是模式，不是變量，因此不會被賦值。如果 p 也要作為變量賦值，應該寫成這樣：

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
        }
    }
}

上面代碼有三次解構賦值，分別是對loc、start、line三個屬性的解構賦值。注意，最后一次對line屬性的解構賦值之中，只有line是變量，loc和start都是模式，不是變量。

var obj = [];
var arr = [];

({foo:obj.prop,bar: arr[0]} = {foo:123,bar:true});

obj; // {prop:123}
arr; // [true]

如果解構模式是嵌套的對象，而且子對象所在的父屬性不存在，則會報錯

var {foo : {bar}} = {baz:"baz"};

正確的寫法：

var {foo,foo:{bar}}={foo:{bar:"bar"}};

GPU云服務器云服務器解構賦值對象解構 java的對象賦值 java的數組賦值

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/104438.html

解析ES6變量賦值和基本數據類型

　　let和const　　let和const兩者并不存在變量提升　　這里要說明的是變量一定要在聲明后使用，否則報錯。　　vara=[]; 　　for(vari=0;i<10;i++){ 　　a[i]=function(){ 　　console.log(i); 　　}; 　　} 　　a[6]();//10　　變量i是var聲明的，我們要知道這里在全局范圍內都有效。我們要知道在每一次循環中，新的...

3403771864 2022-12-25 21:03 評論0 收藏0
JavaScript &amp; 6小時了解ES6基本語法

摘要：返回布爾值，表示參數字符串是否在源字符串的頭部。參考語法返回一個布爾值與的全等操作符比較兼容環境把對象的值復制到另一個對象里淺拷貝定義方法用于將所有可枚舉的屬性的值從一個或多個源對象復制到目標對象。語法要設置其原型的對象。一步一步似爪牙。前言學習es6之前我們可能并不知道es6相比es5差距在哪, 但是這并不妨礙我們站在巨人的肩膀上; 程序員就是要樂于嘗鮮; 學習es6最終目的是...

Amos 2019-08-20 19:03 評論0 收藏0
React&amp;ES6

摘要：在中必須調用方法，因為子類沒有自己的對象，而是繼承父類的對象，然后對其進行加工而就代表了父類的構造函數。雖然代表了父類的構造函數，但是返回的是子類的實例，即內部的指的是，因此在這里相當于。要求，子類的構造函數必須執行一次函數，否則會報錯。 1.class ES6 提供了更接近傳統語言的寫法，引入了 Class（類）這個概念，作為對象的模板。通過class關鍵字，可以定義類。基本上，ES...

jeffrey_up 2019-08-02 14:11 評論0 收藏0
React&amp;ES6

摘要：在中必須調用方法，因為子類沒有自己的對象，而是繼承父類的對象，然后對其進行加工而就代表了父類的構造函數。雖然代表了父類的構造函數，但是返回的是子類的實例，即內部的指的是，因此在這里相當于。要求，子類的構造函數必須執行一次函數，否則會報錯。 1.class ES6 提供了更接近傳統語言的寫法，引入了 Class（類）這個概念，作為對象的模板。通過class關鍵字，可以定義類。基本上，ES...

mist14 2019-08-26 13:28 評論0 收藏0