JavaScript スプレッド演算子を使用する 10 の方法を共有する

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

関連する推奨事項: 「JavaScript ビデオ チュートリアル 」

配列のコピー

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

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' ]

オブジェクトに属性を追加

前提条件 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]

ここで確認できます。ドムから3p。

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

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' ]

元のアドレス: 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 サイトの他の関連記事を参照してください。