似たような仕事をしているように見えるにもかかわらず、拡散と破壊が異なる理由

Question

拡散と破壊は異なった働きをしますが、どちらも同様の仕事をしているようです。彼らはなぜ異なっているのですか？ただ1つだけを使用してみませんか？

let foo = [1,2,3]; 
let [o,t,th] = foo; //destructing works 

let [o,t,th] = ...foo; // spreading doesn't work. will not compile 

function test (a,b,c) { 
console.log(`${a}, ${b}, ${c}`) 
} 

test(...foo); //works but is sort of destructinng foo into a,b,c 
test(foo) //assigns foo to a. b and c are undefined. 

Answer 1

次の3つの変数を宣言すると同時に、それらを配列要素から直接値割り当てている。ここ

let [o,t,th] = [1, 2, 3]; 

な破壊。

したがって、非構造は直接明示 変数に割り当てる必要なく、オブジェクトの（ も配列することができる）プロパティにアクセスする方法です。

それは、これに相当します

let o = foo[0]; 
let t = foo[1]; 
let th = foo[2]; 

スプレッド

test(...foo); 

ここでは、カンマ区切りの配列要素に配列要素を広げています。

はこれに等しい：

test(foo[0], foo[1], foo[2]); 

従って、これら二つは互いに異なります。

Answer 2

まず第一に、あなたは

[a, b, c] 

と

func(a, b, c) 

ことを注意しなければならない2つの完全に異なるものです。確かに彼らは両方ともカンマと同じ文字を持っていますが、func(a, b, c)のa, b, cは配列ではありません。

test(...foo)では、...fooは、カンマで区切られた引数として配列の内容を展開します。関数に配列を渡すことと同じではありません。

let [o,t,th] = ...foo;この仕様ではこのような使用が許可されていないため、機能しません。とにかくそれは意味をなさない。あなたはfooの内容を何に広げようとしていますか？

これは、しかし、理にかなって：あなたは、変数の束に一つのことを割り当てるとき

[...foo] // spread the content into an array 

Destructureのみ動作します。例は次のとおりです。

let [a, b] = [1, 2]; 
let {a, b} = {a: 1, b: 2}; 
function([a, b]){};