ES6精解：變量的解構(gòu)賦值

neu 發(fā)布于2019-08-23 14:09 / 838人閱讀

摘要：真正被賦值的是后者，而不是前者。第一行語(yǔ)句中，模式是取數(shù)組的第一個(gè)成員，跟圓括號(hào)無(wú)關(guān)第二行語(yǔ)句中，模式是，而不是第三行語(yǔ)句與第一行語(yǔ)句的性質(zhì)一致。本文參考鏈接主要是看了阮一峰老師的文章，自己整理了一下，供后期自己看筆記用的

1.數(shù)組的解構(gòu)賦值

我們知道以前我們給一個(gè)變量賦值要這樣如下：

let a = 1;
let b = 2;
let c = 3;

但是ES6出來(lái)之后，我們可以這樣：

let [a, b, c] = [1, 2, 3]

以上就是從數(shù)組中提起值，一一對(duì)應(yīng)賦值，a、b、c分別為1、2、3

 let [aa, [[bb], cc]] = [1, [[2], 3]]

aa,bb,cc分別對(duì)應(yīng)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為[]，如果沒(méi)有對(duì)應(yīng)值會(huì)等于undefined

解構(gòu)賦值也允許默認(rèn)值，如下：

let [ x = "默認(rèn)值"] = [];

x的值為默認(rèn)值

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

a的值為123，b的值為321，因?yàn)镋S6中是嚴(yán)格遵循（===），所以只有當(dāng)數(shù)組對(duì)應(yīng)的值為undefined的時(shí)候，才能等于默認(rèn)值

默認(rèn)值可以引用解構(gòu)賦值的其他變量，但是這個(gè)變量必須得聲明過(guò)的，如下：

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

這里a、b分別為0,0

但是如果這個(gè)變量沒(méi)有聲明，就會(huì)報(bào)錯(cuò)，如下：

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

這里就會(huì)報(bào)錯(cuò)：Uncaught ReferenceError: b is not defined

2.對(duì)象的解構(gòu)賦值

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

a,b的值為1,2

對(duì)象解構(gòu)賦值可以無(wú)需按照順序一一對(duì)應(yīng)，但是括號(hào)兩邊的變量名稱和屬性名稱要相同，才能取到正確值

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

a為1，b為undefined，這里b在右邊括號(hào)中沒(méi)有對(duì)應(yīng)的屬性值與其對(duì)應(yīng)，所以此時(shí)b為undefined

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

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

fa為1，fb為2

這里可以說(shuō)明，對(duì)象解構(gòu)賦值實(shí)際上是如下的簡(jiǎn)寫：

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

也就是說(shuō)，對(duì)象的解構(gòu)賦值的內(nèi)部機(jī)制，是先找到同名屬性，然后再賦給對(duì)應(yīng)的變量。真正被賦值的是后者，而不是前者。

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

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

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

此時(shí)aa為1，bb為1,此時(shí)aa就是變量了

當(dāng)然對(duì)象也可以多層嵌套如下：

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

對(duì)象解構(gòu)默認(rèn)值：

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

默認(rèn)屬性生效條件必須是對(duì)象的屬性嚴(yán)格等于undefined，如果是null就不會(huì)生效，如下：

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

已聲明的變量解構(gòu)賦值：

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

得要加個(gè)小括號(hào)才可以，否則會(huì)報(bào)錯(cuò)；

數(shù)組對(duì)應(yīng)對(duì)象屬性的解構(gòu)：

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

3.字符串的解構(gòu)賦值

字符串也可以解構(gòu)賦值，因?yàn)樽址梢赞D(zhuǎn)換成一個(gè)類似數(shù)組的對(duì)象

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

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

類似數(shù)組的對(duì)象都有一個(gè)length屬性，可以對(duì)這個(gè)屬性解構(gòu)賦值

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

4.數(shù)值和布爾值的解構(gòu)賦值

解構(gòu)賦值時(shí)，如果等號(hào)右邊是數(shù)值或者布爾值時(shí)，則會(huì)先轉(zhuǎn)換成對(duì)象

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

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

解構(gòu)賦值的規(guī)則：如果等號(hào)右邊的值不是對(duì)象或者數(shù)組則會(huì)先轉(zhuǎn)為對(duì)象，由于undefined和null無(wú)法轉(zhuǎn)為對(duì)象，所以無(wú)法對(duì)它們進(jìn)行解構(gòu)賦值，會(huì)報(bào)錯(cuò)，如下：

{
    let { props: x} = undefined; //報(bào)錯(cuò)
    let { props: y} = null; //報(bào)錯(cuò)
}

5.函數(shù)參數(shù)的解構(gòu)賦值

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

函數(shù)參數(shù)默認(rèn)值：

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會(huì)觸發(fā)函數(shù)參數(shù)的默認(rèn)值，如下：

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

6.圓括號(hào)問(wèn)題

圓括號(hào)只能一種情況才能使用：賦值語(yǔ)句的非模式部分，可以使用圓括號(hào)

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

上面三行語(yǔ)句都可以正確執(zhí)行，因?yàn)槭紫人鼈兌际琴x值語(yǔ)句，而不是聲明語(yǔ)句；其次它們的圓括號(hào)都不屬于模式的一部分。第一行語(yǔ)句中，模式是取數(shù)組的第一個(gè)成員，跟圓括號(hào)無(wú)關(guān)；第二行語(yǔ)句中，模式是p，而不是d；第三行語(yǔ)句與第一行語(yǔ)句的性質(zhì)一致。

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

云服務(wù)器 GPU云服務(wù)器解構(gòu)賦值 php的變量賦值 php 賦值類的變量變量賦值

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/100160.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

neu

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

Go iota 原理和源碼剖析

閱讀 3470·2021-11-17 17:00
UCloud夏季鉅惠：快杰云服務(wù)器低至47元/年起,價(jià)保雙11

閱讀 3837·2021-08-09 13:46
關(guān)于scroll,client,innear,avail,offset等的理解

閱讀 2879·2019-08-30 15:54
CSS規(guī)范里的一些事(一)

閱讀 644·2019-08-30 13:54
如何去除行內(nèi)元素之間的間隙

閱讀 2957·2019-08-29 17:13
面試寶典

閱讀 3234·2019-08-29 14:00
切圖崽的自我修養(yǎng)－[ES6] 迭代器Iterator淺析

閱讀 2987·2019-08-29 11:11
初探uni-app框架踩坑

閱讀 1400·2019-08-26 10:15

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

ES6精解：變量的解構(gòu)賦值

相關(guān)文章

ES6 學(xué)習(xí)筆記（一）let，const和解構(gòu)賦值

es6 - 解構(gòu)賦值

ES6學(xué)習(xí) 第二章變量的解構(gòu)賦值

ES6學(xué)習(xí) 第二章變量的解構(gòu)賦值

ES6-變量的解構(gòu)賦值(3)

發(fā)表評(píng)論

0條評(píng)論

neu

男|高級(jí)講師

TA的文章

Go iota 原理和源碼剖析

UCloud夏季鉅惠：快杰云服務(wù)器低至47元/年起,價(jià)保雙11

關(guān)于scroll,client,innear,avail,offset等的理解

CSS規(guī)范里的一些事(一)

如何去除行內(nèi)元素之間的間隙

面試寶典

切圖崽的自我修養(yǎng)－[ES6] 迭代器Iterator淺析

初探uni-app框架踩坑

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

ES6精解：變量的解構(gòu)賦值

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！