Javascript 數組解構

Question

在玩數組解構時注意到 Javascript 的一個有趣行為，例如：

 let a = [1, 2, 3]; let b = [one, two, three, four = 4] = a console.log(one, two, three, four) console.log(b)

當我說a.length output是3
如果我說b.length output是3 。
但是，如果我說four output是4 。
如果four是b的一個元素，那么為什么b.length顯示為3為什么不顯示為4 ？

Answer 1

four不是b的元素（它是a ）。 您在那里使用默認值=4功能； 它沒有被分配到b 。

通過 Babel REPL 運行您的代碼，以消除這種解構的糖分，我們會得到類似的結果：

var _a, _a$;

var a = [1, 2, 3];
_a = a;
one = _a[0];
two = _a[1];
three = _a[2];
_a$ = _a[3];
four = _a$ === void 0 ? 4 : _a$;
var b = _a;

如您所見， b最終只會被分配_a ，即a ; 解構分配發生在“中間”。

Answer 2

這let b = [one, two, three, four=4] = a不會創建一個包含四個元素的新數組來分配給b 。

如果你確實let b = [one, two] = a ，你仍然會得到b.length 3因為它將值a分配給b而沒有任何修改。

請記住，您只是在這里使用解構和默認分配功能 -> [one, two, three, four=4]不會創建新數組。

如果你做a === b ，你會得到true 。

Answer 3

賦值從右到左進行，當用=賦值時（無論是否通過解構）， =左右兩側的整個表達式等於所賦值的值（在右側）。

沒有中間數組

[one, two, three, four=4] =

相反，這只是分配給現有變量，而不創建額外的表達式（除了4 ，它被分配給了four ）。

a = [1,2,3];
let b = [one, two, three, four=4] = a

就好像

a = [1,2,3];
let b = (() => {
  [one, two, three, four=4] = a;
  return a;
})()

在您的代碼中， b與a完全相同的數組：

 a = [1,2,3]; let b = [one, two, three, four=4] = a; console.log(b === a);