web-dev-qa-db-ja.com

どして {。 。 。 {0}に評価されますか。

友達のコードに{....0}が見つかりました。コンソールで評価すると、{}(空のオブジェクト)が返されます。

何故ですか? JavaScriptの4ドットの意味は何ですか?

77
Mist

4つのドットは実際には意味がありません。 ...spread演算子 、そして.00.0の短縮形です。

オブジェクトに0(または任意の数)を展開すると、空のオブジェクトになります。したがって、{}です。

87
NikxDa

オブジェクトリテラル内の3つのドットは スプレッドプロパティ です。

  const a = { b: 1, c: 1 };
  const d = { ...a, e: 1 }; // { b: 1, c: 1, e: 1 }

最後の0のドットは数字リテラルです.00.0と同じです。したがってこれ:

 { ...(0.0) }

数値オブジェクトのすべてのプロパティをオブジェクトに展開します。ただし、数値には(独自の)プロパティがないため、空のオブジェクトが返されます。

55
Jonas Wilms

簡単に言うと、JavaScriptの{...} spread演算子は、あるオブジェクト/配列を別のオブジェクト/配列に拡張します。

そのため、babelifierが互いに拡張しようとするときには、配列またはオブジェクトを拡張しようとしているのかどうかを識別する必要があります。

arrayの場合は、要素を繰り返し処理します。

objectの場合は、キーを反復処理します。

このシナリオでは、babelyfierは、numberに欠けているObjectのown property callをチェックすることによってnumberのキーを抽出しようとしているため、空のObjectを返します。

拡散演算子{...}を使用すると、反復可能オブジェクトを展開できます。 key-valueペアの形式で定義できるデータ型は拡張できるということです。 Objectの観点からは、キーと値のペアをObjectプロパティと呼び、その値をarraysの観点からは、インデックスをキーとし、配列内の要素を値と見なすことができます。

let obj = { a: 4, b: 1};
let obj2 = { ...obj, c: 2, d: 4}; // {a: 4, b: 1, c: 2, d: 4}

let arr1 = ['1', '2'];
let obj3 = { ...arr1, ...['3']}; // {0: "3", 1: "2"}

配列に関しては、インデックスをキーとしているので、ここではarr1の要素 '1'を '3'に置き換えています。どちらも異なる配列で同じインデックスを持っているためです。

文字列が広がりすぎると、演算子は空でないオブジェクトを返します。文字列は文字の配列なので、文字列を配列として扱います。

let obj4 = {...'hi',...'hello'}   // {0: "h", 1: "e", 2: "l", 3: "l", 4: "o"}
let obj5 = {...'y',...'x'}   // {0: "x" }

しかし他のプリミティブデータ型では空のオブジェクトを返します

番号付き

let obj6 = { ...0.0, ...55} // {}

ブール値

let obj7 = { ...true, ...false} // {}

結論として、拡散演算子{...}と一緒に使用したときにキーと値のペアの形式で処理できるデータ型は、空でないオブジェクトを返します。それ以外の場合は空のオブジェクト{}を返します。

0
an0nym0us