解構：按照一定模式，從陣列和物件中提取值，對變數進行賦值。

1.陣列的解構賦值

基本用法

之前的賦值形式為直接指定值，例如let a = 1。ES6允許寫成let [a,b,c] = [1,2,3]，從陣列中提取值，按照對應的位置，對變數賦值，只要等號兩邊的模式相同，左邊的變數就會被賦予相應的值。

如果解構不成功，變數的值就會等於undefined
等號左邊的模式只匹配等號右邊的一部分陣列，這是不完全解構，但解構依然成功
如果等號右邊不是陣列（不是可遍歷的結構，比如數值、布林值、NaN、undefined、null、{}等），則會報錯

//巢狀陣列解構
let [foo,[[bar], baz]]=[1,[[2],3]];
foo // 1
bar // 2
baz // 3
let [,, third]=["foo","bar","baz"];
third // "baz"
let [x,, y]=[1,2,3];
x // 1
y // 3
let [head,...tail]=[1,2,3,4];
head // 1
tail // [2, 3, 4]
let [x, y,...z]=['a'];
x // "a"
y // undefined
z // []
//解構不成功
let [foo]=[];
let [bar, foo]=[1];//foo都等於undefined
//不完全解構
let [x, y]=[1,2,3];
x // 1
y // 2
let [a,[ b], d]=[1,[2,3],4];
a // 1
b // 2
d // 4
// 報錯
let [foo]=1;
let [foo]=false;
let [foo]=NaN;
let [foo]=undefined;
let [foo]=null;
let [foo]={};

對於Set結構，也可以使用陣列的解構賦值（set資料結構類似於陣列，但是成員值是唯一的且沒有重複值）。

let [x, y, z]=newSet(['a','b','c']);
x // "a"

預設值

解構賦值允許指定預設值，但ES6內部使用嚴格相等運算子（===）來判斷一個位置是否有值，即如果變數是嚴格等於undefined，預設值才生效（理解為變數沒有被賦值才需要用到預設值）。

//指定預設值
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，因為null不嚴格等於undefined

如果預設值是一個表示式，那麼這個表示式是惰性求值的，只有在用到的時候才會求值。

function f(){
console.log('aaa');
}
let [x = f()]=[1];//x為1，因為x能夠取到值，函式f不會執行，即變數賦值嚴格等於undefined時，預設值才會生效

預設值可以引用解構賦值的其他變數，但是該變數必須已經宣告。

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，x賦值為undefined，預設值為y，但y沒有宣告，報錯

2.物件的解構賦值

基本用法

與陣列解構賦值不同的是，陣列的元素是按次序排列的，物件的屬性沒有次序，變數必須與屬性同名，才能取到正確的值，物件解構賦值的內部機制是，先找到同名屬性，然後再賦值給對應的變數。

let { foo: baz }={ foo:"aaa", bar:"bbb"};
baz // "aaa"
foo // error: foo is not defined
foo是匹配的模式，baz才是變數，被賦值的是變數

變數名和屬性名一致時，可以簡寫：

let { bar, foo }={ foo:"aaa", bar:"bbb"};
foo // "aaa"
bar // "bbb"
let { baz }={ foo:"aaa", bar:"bbb"};
baz // undefined

物件的解構賦值的變數宣告和賦值是一體的，let和const變數不允許重新宣告。

let foo;
let {foo}={foo:1};// SyntaxError: Duplicate declaration "foo"
let baz;
let {bar: baz}={bar:1};// SyntaxError: Duplicate declaration "baz"
let foo;
({foo}={foo:1});// 成功
let baz;
({bar: baz}={bar:1});// 成功，圓括號必須有，解析器會將圓括號為首理解成程式碼塊，而不是賦值語句

解構也可以用於巢狀解構的物件。

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

預設值

物件的解構也可以指定預設值，生效的條件是物件的屬性值嚴格等於undefined
如果解構失敗，變數的值等於undefined
如果解構模式是巢狀的物件，而且子物件所在的父屬性不存在，會報錯

var{x =3}={};
x // 3
var{x, y =5}={x:1};
x // 1
y // 5
var{x:y =3}={};
y // 3
var{x:y =3}={x:5};
y // 5
var{ message: msg ='Something went wrong'}={};
msg // "Something went wrong"
// 報錯，foo對應子物件，bar是子物件的屬性，foo此時為undefined，取子屬性就會報錯
let {foo: {bar}} = {baz: 'baz'};
相當於let {foo: {bar: bar}} = {baz: 'baz'};

物件的解構賦值，可以將現有的方法，賦值到某個變數。

let { log, sin, cos }=Math;

陣列的本質是物件，可以對陣列進行物件屬性的解構。

對陣列進行物件解構，arr.length-1對應索引為2，所以值為3
let arr =[1,2,3];
let {0: first,[arr.length -1]: last}= arr;
相關推薦

nodejs中的變數解構賦值

所謂的解構賦值，就是把某個物件中的屬性，當作變數，給解放出來，這樣，今後就能夠當作變數直接使用了可以使用 : 為解構出來的變數重新命名 const person = { name: 'zs', age: 22, gender:

es6變數解構賦值（1）

es6陣列解構賦值： let a = 1; let b = 2; == let [a, b, c] = [1, 2, 3]; let c = 3; console.log(a,b,c) /

變數的解構賦值整理

1、陣列的解構賦值基本用法 ES6 允許按照一定模式，從陣列和物件中提取值，對變數進行賦值，這被稱為解構（Destructuring）。 let x = 1; let y = 2; let z = 3; let x = 1, y = 2, z = 3; let [

ES6——變數的解構賦值

解構賦值：從陣列或物件中提取值為相同格式對應位置的變數賦值。下面這種寫法屬於“模式匹配”，只要等號兩邊的模式相同，左邊的變數就會被賦予對應的值。一、陣列的解構賦值 //ES5 { let a = 10; let b = 20; let c = 30; console.l

變數的解構賦值及用途

一、陣列的解構賦值 1、基本用法：完全解構： let a = 1; let b = 2; let c = 3; 可以寫成 let [a, b, c] = [1, 2, 3]; 不完全解構：等號左邊的模式，只匹配一部分的等號右邊的陣列，解構依然成功 2、預設值：解構解析允許指定預

ES6學習（二）---變數的解構賦值

1.陣列的解構賦值（1）等式左右兩邊結構相同，等式右邊的值就會被賦值給等式左邊的 let [a,b,c] = [1,2,3]; //相當於a =1 ,b =2, c =3 let [head,...tail] = [1,2,3,4]; //tail 4 //head 1 le

es6學習二：變數的解構賦值

變數的解構賦值：陣列的解構賦值： let [a,b,c] = [1,2,3]; // let [a,b,c] = [,123,]; // let [a=111,b,c] = [,123,]; console.log(a,b,c); // let [a,b,c] = [1,2,3]

ES6系列_3之變數的解構賦值

ES6允許按照一定模式，從陣列和物件中提取值，對變數進行賦值，這被稱為解構。解構有三種類型： 1.陣列的解構賦值（1）簡單的陣列解構以前，我們給變數賦值是直接單個指定值，比如： let a=0; let b=1; let c=2; 陣列解構的方式來進行賦值，如下： le

20181128——阮一峰ES6閱讀 let與const 變數的解構賦值

let命令與var類似宣告變數，只不過在在當前的程式碼塊中有效。 for迴圈的計數器，就很適合let命令 for (let i = 0; i < 10; i++) { // ... } console.log(i); 程式碼中，計數器i只在for迴圈體內有效，再迴圈體外引用

ES6:變數的解構賦值

1.理解 * 從物件或陣列中提取資料並賦值給變數(多個) 2.物件的解構賦值 * let {n,a} = {n:'tom',a:18} 3.陣列的解構賦值 * let [a,b] = [1,'yoona'] 4.用途

JS 進階(9) ECMAScript6 基礎入門：變數、函式、解構賦值、陣列、字串、面向物件、json、promise

一、ES6是啥 ECMAScript 和 JavaScrip的關係簡單的說ECMA 是一個標準，任何語言都可以去實現這個標準，但目前為止只有javascript 實現了。所以也就預設認為ECMAScript就是javascript。 ECMAScript

es6-變數的解構賦值

ES6 允許按照一定模式，從陣列和物件中提取值，對變數進行賦值，這被稱為解構（Destructuring）。 1.陣列的解構賦值 let [a, b, c] = [1, 2, 3]; let [foo, [[bar], baz]] = [1, [[2], 3

ES6精解：變數的解構賦值

1.陣列的解構賦值我們知道以前我們給一個變數賦值要這樣如下： let a = 1; let b = 2; let c = 3; 但是ES6出來之後，我們可以這樣： let [a, b, c] = [1, 2, 3] 以上就是從陣列中提起值，一一對應賦值，a、b、c分別為1、2、3 let

ES6標準入門之變數的解構賦值簡單解說

　　首先我們來看一看解構的概念，在ES6標準下，允許按照一定模式從陣列和物件中提取值，然後對變數進行賦值，這被稱作解構，簡而言之粗糙的理解就是變相賦值。　　解構賦值的規則是，只要等號右邊的值不是物件或者陣列，就先將其轉為物件。　　一、陣列的結構賦值　　以前為變數賦值只能直接指定。而ES6允許從陣列

變數的解構賦值

解構：按照一定模式，從陣列和物件中提取值，對變數進行賦值。 1.陣列的解構賦值基本用法之前的賦值形式為直接指定值，例如let a = 1。ES6允許寫成let [a,b,c] = [1,2,3]，從陣列中提取值，按照對應的位置，對變數賦值，只要等號兩邊的

【ECMAScript 5_6_7】3、ES6——變數的解構賦值

一、變數的解構賦值 1. 理解: * 從物件或陣列中提取資料, 並賦值給變數(多個) 2. 物件的解構賦值 let {n, a} = {n:'tom', a:12} 3. 陣列的解構賦值 let [a,b] = [1, 'onedean']; 4. 用途 * 給多個形參

ES6學習之變數的解構賦值

前言：什麼是ES6？ECMAScript 6（簡稱ES6）是JavaScript語言的下一代標準，已經在2015年6月正式釋出了。其中相比較於ES5新增了諸多的特性，並且ES6可轉換為ES5的語法。->線上ES6轉換為ES5工具。本系列學習隨筆參考了阮一峰老師的《ES6標準入門

ES6之——變數的解構賦值

一、陣列的結構賦值 1>、什麼是解構？ ES6允許我們隊陣列和物件中提取值，對變數進行賦值，這被叫做“解構”。通常我們像下面這樣為變數賦值： var a = 1; b = 2; c = 3; 但是，ES6允許我們像下面這樣

react native 語法ECMAScript 6 學習筆記----變數的解構賦值

預設值解構賦值允許指定預設值。 var [foo = true] = []; foo // true [x, y = 'b'] = ['a']; // x='a', y='b' [x, y = 'b'] = ['a', undefined]; // x='a', y='b' 物件的解構賦值解

【ES6學習】— (1)ES6簡介、let與const命令以及變數的解構賦值

最近團隊要求使用React Native開發移動應用, 會使用到JS的相關知識, 趁此機會學習一下ES6, 也算是拓寬自己的知識棧了。學習參考的是阮一峰老師的《ES6標準入門(第二版)》一書, 同時也參考了《JavaScript 標準參考教程》回顧JS在ES6之

變數的解構賦值

1.陣列的解構賦值

基本用法

預設值

2.物件的解構賦值

基本用法

預設值

相關推薦