6 JavaScriptの配列によるスプレッドの使用例

ここでは、JavaScriptの配列でスプレッド演算子を使用する6つの方法があります.を使用すると、マージまたは配列を複製できます.または、iterableを配列に変換するために使用します.

// Merge Array
[...array1, ...array2]

// Clone Array
[...array]

// Sting → Array
[...'string']

// Set  → Array
[...new Set([1,2,3])]

// Node List → Array
[...nodeList]

// Arguments → Array
[...arguments]

理解普及

MDN: Spread syntax allows an iterable such as an array expression or string to be expanded in places where zero or more arguments (for function calls) or elements (for array literals) are expected, or an object expression to be expanded in places where zero or more key-value pairs (for object literals) are expected.

泥としてクリア😂 スプレッドは理解するのに長い時間かかった.それで、私が私を助けた2つの類似物で説明しようとしましょう.うまくいけば、それはまた、あなたを助けることができる🤞

スプレッドはロシア人形
スプレッド構文は配列を取り、要素に展開します.あなたの配列は、それらのロシア人形のように想像してください.あなたがそれに広げられた構文を呼ぶとき、それは入れ子になった個々の人形を取り出して、それ自身の個々の部分にそれを置きます.

ウィキペディア

スプレッドは消しゴムのようだ
ロシア人形の類推が助けられなかったならば😵 その場合は、単に... 配列のブラケットを削除する消しゴムとしての構文😂

[
  ...[1, 2, 3] // 👈 The dots erases the brackets
]

/*  Becoming this: */
[
  1, 2, 3 // 👈 "Erased"
]

配列操作
スプレッド構文についての最もよいことは配列操作のためにそれを使うことです👏

1 .マージ配列に使用するスプレッド
2つの配列があるとしましょう.

const array1 = [1, 2, 3];

const array2 = [4, 5, 6];

スプレッド構文なしで配列をマージしようとするときに起こることを見ましょう.

const attemptToMerge = [array1, array];

attemptToMerge;
// [ [1, 2, 3],  [4, 5, 6] ] 👈 😱

👆 スプレッドシンタックスなしで配列をマージしようとすると、入れ子状または多次元配列で巻き上げます.
それで、括弧を「消す」ために、広げられた構文を使いましょう.

const mergedArray = [
  ...array1,
  ...array2
];

mergedArray;
// [ 1, 2, 3, 4, 5, 6 ]

クローン配列
JavaScriptの配列の配列は直進ではありません.それで、それが2つの経路でされるのを見ましょう🛣

クローン配列間違った方法
JavaScriptでは、配列は参照型であるので、= . 私たちがそのようにそれをしようとするならば、どんな問題が起こるかについて見ましょう.

const original = ['zero', 'one'];
const newArray = original;

original; // ['zero', 'one']
newArray; // ['zero', 'one']

👆それで、すべてはこれまでにわかります、しかし、我々が要素を変えるならば、何が起こるかについて見ましょう.

newArray[1] = '💩';

newArray;
// ['zero', '💩']

original;
// ['zero', '💩']  👈 😱 Our original array is affected

呉毅😱 変化するnewArray は元の配列を👎
参照をアドレスとして考えてください.配列のコピーを作成するとき= , 我々はアドレスをコピーしました.我々は、我々が欲しいものである基になる配列をコピーしませんでした.そのためには、配列を新しいアドレスにコピーする必要があります.このように、私たちが新しい配列に変更を加えるとき、それはオリジナルの配列に影響を及ぼしません.

クローニングアレイ正しい方法

const original = ['zero', 'one'];
const newArray = [...original];

original; // ['zero', 'one']
newArray; // ['zero', 'one']

それで、我々が正しくこれをするならばoriginal 配列を変更した場合には影響を受けるべきではないnewArray . 大丈夫、これを試してみましょう💪

newArray[1] = '💩';

newArray;
// ['zero', '💩']

original;
// ['zero', 'one']  ✅ original array is NOT affected

配列への反復
スプレッドを使用すると、配列に異なるデータ型を変換することは容易になりませんでした👏

array to string
我々が広がるときstring , 個々の文字列の配列を返します.

const string = 'hi';

const array = [...string];

array;
// [ 'h' , 'i' ]

4 .配列に設定する
新しいものを作ろうset 対象:

const set = new Set([1, 2, 3]);

set;
// Set(3) {1, 2, 3}

スプレッドを使うと、set 配列に

const array = [...set];

array;
// [1, 2, 3]

5 .配列へのノードリスト
ノードリストを作成しましょう

const nodeList = document.querySelectorAll('p');

nodeList;
// [p, p, p]

ここで、スプレッドを使用してノードリストを配列に変換できます.

const array = [...nodeList];

array;

6 .配列への引数
始める前に、何を理解するのに時間がかかりましょうarguments オブジェクトは.

MDN: arguments is an Array-like object accessible inside functions that contains the values of the arguments passed to that function.

👆 そこに鍵があります.array-like -- それで、それは配列のように見えます、しかし、それはそうです😅). 引数オブジェクトを配列に変換する利点は、すべての素晴らしい配列メソッドにアクセスできることを意味します.map , filter , find ) 👍

function names() {
  arguments;
  // Arguments(4)['samantha', 'sam']

  arguments.map(name => `hi ${name}`);
  // ❌ TypeError: arguments.map is not a function
}

names('samantha', 'sam');

では、引数を配列に変換して配列メソッドを適用します🙌

function names() {
  const argumentsArray = [...arguments];

  argumentsArray.map(name => `hi ${name}`);
  // ✅ ['hi samantha', 'hi sam']
}

names('samantha', 'sam');

コミュニティ入力

: スプリットは、セパレータと制限にかかるオプションを与える

: あなたがスプレッドなしで2つの配列を合併するならば、それは二次元配列であるようになります、しかし、フラットはそれを1次元にします.あなたはそれを試すことができます

: The min() and max() メソッドとして配列を取ることができないので、それを広げることはその問題を解決することができます.それは私に多くの頭痛を救った.

array = [1, 2, 3, 4, 5];
var minimum = Math.min(...array);
var maximum = Math.max(...array);

資源

Code Tidbit: Split String Using ES6 Spread

MDN Web Docs: Spread syntax

MDN Web Docs: Set

MDN Web Docs: The arguments object

より多くのコードtidbitsを見つけるためにsamanthaming.com

読書ありがとう❤
よろしくSamanthaMing.com