阮一峰-變量的解構(gòu)賦值

大神寫得算是相當(dāng)?shù)挠押昧? 我感覺基本都不用寫筆記了.

把不會(huì)的大概記一下.

數(shù)組的解構(gòu)

1. new Set([]) 是個(gè)什么東西?

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

yield ?
fuction* ?

function* fibs() {
  let a = 0;
  let b = 1;
  while (true) {
    yield a;
    [a, b] = [b, a + b];
  }
}

let [first, second, third, fourth, fifth, sixth] = fibs();
// 相當(dāng)于
let [first, second, third, fourth, fifth, sixth] = [0,1,1,2,3,5]?

image.png

這道題挺奇怪的.
fibs() 會(huì)返回一個(gè)迭代器,
可用 next迭代.

let i = fibs();
i.next();/0
i.next();/1
i.next();/1
i.next();/2
i.next();/3
i.next();/5
i.next();/8
...

也可以用 for of 迭代

      function* fibs() {
        let a = 0;
        let b = 1;
        while(true) {
          if (a > 100) {
        /如果沒有限制條件, 下面的 for of 會(huì)死循環(huán).
            return "over"
          }
          yield a;
          [a, b] = [b, a + b];
        }
      }

let i = fibs();
for(let item of i){
  console.log(item);
}

image.png

let [a,b,c,d,e] = fibs();

所以我們可以這么假設(shè)
解構(gòu)賦值可以解構(gòu)迭代器
解構(gòu)迭代器賦值內(nèi)部調(diào)用的應(yīng)該也是 next
解構(gòu)迭代器不會(huì)死循環(huán), 而是會(huì) 惰性取值?

對(duì)象的解構(gòu)

這里要注意, :可以省略, 但心中一定要把這個(gè)冒號(hào)補(bǔ)全.

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

對(duì)象的解構(gòu)賦值的內(nèi)部機(jī)制，是先找到同名屬性，然后再賦給對(duì)應(yīng)的變量。真正被賦值的是后者，而不是前者。
記住= 后面的沒有變量, 都是值, 對(duì)象,數(shù)組,字符串
= 前面有變量, 但所有形式都是模式.
: 前面的都是模式, 類似房間號(hào), 而不是變量
: 后面的才是變量.
所以必須找準(zhǔn)哪個(gè)是變量.哪個(gè)是模式, 哪個(gè)是值,(哪個(gè)又是默認(rèn)值)

let { foo: baz } = { foo: "aaa", bar: "bbb" };
baz // "aaa"
foo // error: foo is not defined

下面語句是否會(huì)報(bào)錯(cuò)?
不會(huì)

let {x} = {x: 1};

下面語句是否會(huì)報(bào)錯(cuò)?
會(huì)

// 錯(cuò)誤的寫法
let x;
{x} = {x: 1};
// SyntaxError: syntax error

因?yàn)?JavaScript 引擎會(huì)將{x}理解成一個(gè)代碼塊，從而發(fā)生語法錯(cuò)誤。只有不將大括號(hào)寫在行首，避免 JavaScript 將其解釋為代碼塊，才能解決這個(gè)問題。

問題 { } 能代表的含義有哪些?

1. 對(duì)象 比如 let obj = {name : 123}
2. 代碼塊 如function () {代碼塊},if(){代碼塊},for(){代碼塊}
3. 模式, 類似對(duì)象, 用于結(jié)構(gòu)賦值 比如 let {x} = {x: 1};

// 正確的寫法
let x;
({x} = {x: 1});

字符串的結(jié)構(gòu)賦值

數(shù)值和布爾值的結(jié)構(gòu)賦值

會(huì)把123 先轉(zhuǎn)為 Number(123)
把 true 先轉(zhuǎn)為 Boolean(true)

let {toString: s} = 123;
s === Number.prototype.toString // true

let {toString: s} = true;
s === Boolean.prototype.toString // true

函數(shù)參數(shù)的結(jié)構(gòu)賦值

function add([x, y]){
  return x + y;
}

add([1, 2]); // 3

一定要分清, 哪些是變量, 哪些是模式, 哪些是傳進(jìn)來的值,默認(rèn)值

下面這兩個(gè)比較,就真的是相當(dāng)?shù)男懔?/p>

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

move({x: 3, y: 8}); // [3, 8]
move({x: 3}); // [3, 0]
move({}); // [0, 0]

這個(gè)好理解,再看下面的

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

move({x: 3, y: 8}); // [3, 8]
move({x: 3}); // [3, undefined]
move({}); // [undefined, undefined]
move(); // [0, 0]

原文說的是: 上面代碼是為函數(shù)move的參數(shù)指定默認(rèn)值，而不是為變量x和y指定默認(rèn)值，所以會(huì)得到與前一種寫法不同的結(jié)果。
合理啊, 因?yàn)榈谝环N,我們用的是多重默認(rèn)值,
第二種,我們只對(duì)第一層做了默認(rèn)值.
換言之, 我們可以設(shè)置多層的默認(rèn)值. 這就他娘的讀起來也挺費(fèi)勁的.

      function move({x = 1, y = 1} = { x: 0, y: 0 }) {
        return [x, y];
      }

但如果我們像上面這么寫, x = 1,y = 1 這兩個(gè)默認(rèn)值是永遠(yuǎn)也不會(huì)被觸發(fā)的.
也就是說, 默認(rèn)值這個(gè)東西是, 外層的會(huì)覆蓋里層的.
也就是說, 我們?cè)O(shè)置默認(rèn)值的時(shí)候, 一定要稍微注意一下

可以使用圓括號(hào)的情況

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

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