ES6精解：變量的解構賦值

neu 發布于2019-08-23 14:09 / 837人閱讀

摘要：真正被賦值的是后者，而不是前者。第一行語句中，模式是取數組的第一個成員，跟圓括號無關第二行語句中，模式是，而不是第三行語句與第一行語句的性質一致。本文參考鏈接主要是看了阮一峰老師的文章，自己整理了一下，供后期自己看筆記用的

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 [aa, [[bb], cc]] = [1, [[2], 3]]

aa,bb,cc分別對應1,2,3

     let [,,d] = [10, 20, 30];
     console.log(d);

d的值為30

  let [e, ...f] = [1, 2, 3, 4, 5];

e為1, f為[2,3,4,5]

let [x, y, ...z] = [1];

x為1，y為undefined，z為[]，如果沒有對應值會等于undefined

解構賦值也允許默認值，如下：

let [ x = "默認值"] = [];

x的值為默認值

  let [ a = 123 ] = [ undefined ];
  let [ b = 321 ] = [ null ];

a的值為123，b的值為321，因為ES6中是嚴格遵循（===），所以只有當數組對應的值為undefined的時候，才能等于默認值

默認值可以引用解構賦值的其他變量，但是這個變量必須得聲明過的，如下：

 let [ a = 0, b = a] = [];

這里a、b分別為0,0

但是如果這個變量沒有聲明，就會報錯，如下：

  let [ a = b, b = 1] = [];

這里就會報錯：Uncaught ReferenceError: b is not defined

2.對象的解構賦值

 let { a, b } = { a: 1, b: 2 };

a,b的值為1,2

對象解構賦值可以無需按照順序一一對應，但是括號兩邊的變量名稱和屬性名稱要相同，才能取到正確值

let { a, b } = { a: 1, c : 2};

a為1，b為undefined，這里b在右邊括號中沒有對應的屬性值與其對應，所以此時b為undefined

如果變量名和屬性名不一樣，則要按照如下寫：

 let { aa: fa, bb: fb } = { aa: 1, bb: 2 };

fa為1，fb為2

這里可以說明，對象解構賦值實際上是如下的簡寫：

let { aa: aa, bb: bb } = { aa: 1, bb: 2}

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

 let { aa: fa } = { aa: 1 }
 
 //fa為 1
 //aa為 Uncaught ReferenceError: aa is not defined

這里就說明了，fa是真正被賦值的,此時的aa是模式而不是變量，如果你要讓aa為變量，則如下：

  {
       let { aa: fa, aa } = { aa: 1 };
       // aa 為 1
       // fa 為 1
     }

此時aa為1，bb為1,此時aa就是變量了

當然對象也可以多層嵌套如下：

   {
        let obj = {
          p: [1, { y: 2 }]
        }

        let { p: [x, { y }]} = obj;
        console.log(x); // 1
        console.log(y); // 2
      }

   {
        let obj = {};
        let arr = [];
        ({a: obj.name, b: arr[0] } = { a: 321, b: 123});

        console.log(obj); // { name: 321 }
        console.log(arr); // [123]
      }

對象解構默認值：

  {
         let { x = 1 } = {};
         console.log(x); //1
       }

       {
         let { x : y = 4 } = {};
         console.log(y); //4
       }

       {
        let { x : y = 4 } = { x: 5};
         console.log(y); //5
       }

默認屬性生效條件必須是對象的屬性嚴格等于undefined，如果是null就不會生效，如下：

   {
      let { x = 1 } = { x : null};
      console.log(x); //null
   }

已聲明的變量解構賦值：

  {
    let x;
    ({ x } = { x : 1 });
    console.log(1); // 1
  }

得要加個小括號才可以，否則會報錯；

數組對應對象屬性的解構：

   {
     let arr = [1, 2, 3];
     let  { 0 : one, [arr.length-1] : three } = arr;
     console.log(one); // 1
     console.log(three); // 3
   }

3.字符串的解構賦值

字符串也可以解構賦值，因為字符串可以轉換成一個類似數組的對象

  {
      let [a, b, c, d] = "hero";

      console.log(a); //h
      console.log(b); //e
      console.log(c); //r
      console.log(d); //o
    }

類似數組的對象都有一個length屬性，可以對這個屬性解構賦值

  {
    let { length: len } = "hero";
    console.log(len); // 4
  }

4.數值和布爾值的解構賦值

解構賦值時，如果等號右邊是數值或者布爾值時，則會先轉換成對象

 {
    let { toString: s } = 123;
    console.log(s === Number.prototype.toString); //true
  }

   {
    let { toString: s } = true;
    console.log(s === Boolean.prototype.toString); //true
  }

解構賦值的規則：如果等號右邊的值不是對象或者數組則會先轉為對象，由于undefined和null無法轉為對象，所以無法對它們進行解構賦值，會報錯，如下：

{
    let { props: x} = undefined; //報錯
    let { props: y} = null; //報錯
}

5.函數參數的解構賦值

{
  const arr = [[1,2],[3,4]].map(([a, b])=> a+b);
  console.log(arr); //[3,7]
}

函數參數默認值：

function func({x = 0, y = 0} = {}) {
  return [x, y];
}

console.log(func({x:5,y:6})); //[5,6]
console.log(func({x:5})); //[5,0]
console.log(func({})); //[0, 0]
console.log(func()); //[0, 0]

如果按照以下定義就不同了，如下：

function fn({x, y} = { x: 1, y: 2}) {
  return [x, y];
}
console.log(fn({ x: 11, y: 22})); // [11, 22]
console.log(fn({ x: 11 })); // [11, undefined]
console.log(fn({})); // [undefined, undefined]
console.log(fn()); // [1, 2]

undefined會觸發函數參數的默認值，如下：

{
  const a = [1, undefined, 3].map((x = "noundefine") => x);
  console.log(a); //[1, "noundefine", 3]
}

6.圓括號問題

圓括號只能一種情況才能使用：賦值語句的非模式部分，可以使用圓括號

[(b)] = [3]; // 正確
({ p: (d) } = {}); // 正確
[(parseInt.prop)] = [3]; // 正確

上面三行語句都可以正確執行，因為首先它們都是賦值語句，而不是聲明語句；其次它們的圓括號都不屬于模式的一部分。第一行語句中，模式是取數組的第一個成員，跟圓括號無關；第二行語句中，模式是p，而不是d；第三行語句與第一行語句的性質一致。

本文參考鏈接：http://es6.ruanyifeng.com/#do...
主要是看了阮一峰老師的文章，自己整理了一下，供后期自己看筆記用的

云服務器 GPU云服務器解構賦值 php的變量賦值 php 賦值類的變量變量賦值

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

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

ES6 學習筆記（一）let，const和解構賦值

摘要：另外對于已經聲明的變量進行解構賦值時，要非常小心。因此在行首加，將其強制轉化為表達式執行。由于和無法轉為對象，所以對它們進行解構賦值，都會報錯。 let和const let和const是es6新增的兩個變量聲明關鍵字，與var的不同點在于：（1）let和const都是塊級作用域，在{}內有效，這點在for循環中非常有用，只在循環體內有效。var為函數作用域。（2）使用let和con...

iOS122 2019-08-23 15:29 評論0 收藏0
es6 - 解構賦值

摘要：比如上面展示的情況都是可以聯合使用的比如對象的解構賦值對象的解構賦值是基于屬性的。當給已存在的變量解構賦值時，注意加這是由于如果不加會把左邊看成一個代碼塊，會報錯。注意事項數組的解構賦值中，使用的變量必須放在最后。解構賦值解構賦值是一個聽起來比較高大上的特性，但按我的理解，它就是一種語法糖。它并沒有賦予js更強大的能力，只是讓賦值操作更加的靈活，效率。在es6之前，賦值操作需要=...

DirtyMind 2019-08-26 11:45 評論0 收藏0
ES6學習第二章變量的解構賦值

摘要：前言前言該篇筆記是第二篇變量的解構賦值。這一章原文鏈接變量的解構賦值解構賦值解構賦值允許按照一定模式，從數組和對象中提取值，對變量進行賦值，這被稱為解構。對象的解構賦值是根據對象值進行匹配。前言該篇筆記是第二篇變量的解構賦值。這一章原文鏈接：變量的解構賦值解構賦值ES6 允許按照一定模式，從數組和對象中提取值，對變量進行賦值，這被稱為解構（Destructuring）。解構賦值是對賦值運...

番茄西紅柿 2021-11-24 09:38 評論0 收藏2637
ES6學習第二章變量的解構賦值

摘要：前言該篇筆記是第二篇變量的解構賦值。這一章原文鏈接變量的解構賦值解構賦值允許按照一定模式，從數組和對象中提取值，對變量進行賦值，這被稱為解構。對象的解構賦值是根據對象值進行匹配。前言該篇筆記是第二篇變量的解構賦值。這一章原文鏈接：變量的解構賦值解構賦值ES6 允許按照一定模式，從數組和對象中提取值，對...

番茄西紅柿 2021-11-24 09:38 評論0 收藏2637
ES6-變量的解構賦值(3)

摘要：數組的解構賦值特點根據數據的下標來賦值的，有次序。模式能夠匹配起來，如長度為數值和布爾值的解構賦值解構賦值的規則是只要等號右邊的值不是對象或數組，就先將其轉為對象。布爾值解構賦值為字符串的一種。在很多獨立細小的方面，解構賦值都非常有用。 1、解構賦值簡介官方解釋：按照一定的模式，從數組和對象中提取值，對變量進行賦值，這被稱為解構（Destructuring）。舉個例子，想獲取數組中...

Jason_Geng 2019-08-23 16:46 評論0 收藏0