JavaScriptスプレッド演算子の10の使い方を詳しく解説（まとめ）

この記事では、JavaScript でスプレッド演算子を使用する 10 の方法を紹介します。一定の参考値があるので、困っている友達が参考になれば幸いです。

配列のコピー

スプレッド演算子を使用して配列をコピーできますが、これは であることに注意してください。浅いコピー。

const arr1 = [1,2,3];
const arr2 = [...arr1];
console.log(arr2);
// [ 1, 2, 3 ]

この方法で基本的な配列をコピーできますが、マルチレベル配列や日付や関数を含む配列では機能しないことに注意してください。

配列のマージ

2 つの配列を 1 つにマージしたいとします。初期の頃は、concat メソッドを使用できました。ですが、展開演算子:

const arr1 = [1,2,3];
const arr2 = [4,5,6];
const arr3 = [...arr1, ...arr2];
console.log(arr3);
// [ 1, 2, 3, 4, 5, 6 ]

を使用できるようになりました。また、さまざまな配置を使用して、どれを最初に表示するかを指定することもできます。

const arr3 = [...arr2, ...arr1];
console.log(arr3);
[4, 5, 6, 1, 2, 3];

さらに、展開演算子は複数の配列を結合するのにも適しています:

const output = [...arr1, ...arr2, ...arr3, ...arr4];

配列に要素を追加します

let arr1 = ['this', 'is', 'an'];
arr1 = [...arr1, 'array'];
console.log(arr1);
// [ 'this', 'is', 'an', 'array' ]

Toオブジェクト プロパティの追加

user のオブジェクトがあるが、age プロパティが欠落しているとします。

const user = {
  firstname: 'Chris',
  lastname: 'Bongers'
};

この user オブジェクトに age を追加するには、スプレッド演算子を再度利用します。

const output = {...user, age: 31};

Math() 関数の使用

数値の配列があり、これらの数値の最大値、最小値、または合計を取得したいとします。

const arr1 = [1, -1, 0, 5, 3];

最小値を取得するには、スプレッド演算子と Math.min メソッドを使用できます。

const arr1 = [1, -1, 0, 5, 3];
const min = Math.min(...arr1);
console.log(min);
// -1

同様に、最大値を取得するには、次のようにします。

const arr1 = [1, -1, 0, 5, 3];
const max = Math.max(...arr1);
console.log(max);
// 5

ご覧のとおり、 を削除すると、最大値は 5 になります。 5 の場合、3 が返されます。

スプレッド演算子を使用しないとどうなるのかと疑問に思われるかもしれません。

const arr1 = [1, -1, 0, 5, 3];
const max = Math.max(arr1);
console.log(max);
// NaN

JavaScript は配列の最大値がわからないため、NaN が返されます。

残りのパラメータ

3 つのパラメータを持つ関数があるとします。

const myFunc(x1, x2, x3) => {
    console.log(x1);
    console.log(x2);
    console.log(x3);
}

この関数は次のように呼び出すことができます:

myFunc(1, 2, 3);

しかし、配列を渡したい場合はどうなるでしょうか。

const arr1 = [1, 2, 3];

スプレッド演算子を使用して、この配列を関数に展開できます。

myFunc(...arr1);
// 1
// 2
// 3

ここでは、配列を 3 つの個別のパラメーターに分割し、関数に渡します。

const myFunc = (x1, x2, x3) => {
  console.log(x1);
  console.log(x2);
  console.log(x3);
};
const arr1 = [1, 2, 3];
myFunc(...arr1);
// 1
// 2
// 3

無限パラメータを関数に渡す

次のように無限パラメータを受け入れる関数があるとします。

const myFunc = (...args) => {
  console.log(args);
};

今、この関数を呼び出すとき複数のパラメーターを使用すると、次の状況が表示されます。

myFunc(1, 'a', new Date());

戻り値:

[
  1,
  'a',
  Date {
    __proto__: Date {}
  }
]

次に、パラメーターを動的にループできます。

nodeList を array に変換します

スプレッド演算子を使用してページ上のすべての p を取得するとします:

const el = [...document.querySelectorAll('p')];
console.log(el);
// (3) [p, p, p]

Here dom から 3 p を取得したことがわかります。

これらの要素は配列であるため、簡単に反復処理できます。

const el = [...document.querySelectorAll('p')];
el.forEach(item => {
  console.log(item);
});
// <p></p>
// <p></p>
// <p></p>

オブジェクトの構造

オブジェクトがあるとします。user:

const user = {
  firstname: 'Chris',
  lastname: 'Bongers',
  age: 31
};

これで、スプレッド演算子を使用できるようになります。個々の変数に分割されます。

const {firstname, ...rest} = user;
console.log(firstname);
console.log(rest);
// 'Chris'
// { lastname: 'Bongers', age: 31 }

ここでは、user オブジェクトと firstname を firstname 変数に分解し、オブジェクトの残りの部分を rest# に分解します。 ##変数。

文字列の展開

スプレッド演算子の最後の使用例は、文字列を個々の単語に分割することです。

次の文字列があるとします:

const str = 'Hello';

この文字列に対してスプレッド演算子を使用すると、文字の配列が得られます。

const str = 'Hello';
const arr = [...str];
console.log(arr);
// [ 'H', 'e', 'l', 'l', 'o' ]

~ End

元のアドレス: https://dev.to/dailydevtips1/10-ways-to-use-the-spread-operator-in-javascript-1imb

著者: Chris Bongers

翻訳アドレス: https://segmentfault.com/a/1190000038998504

プログラミング関連の知識については、次のサイトを参照してください。

プログラミングビデオ! ！

以上がJavaScriptスプレッド演算子の10の使い方を詳しく解説（まとめ）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。