Skip to main content

RestおよびSpread演算子

@serverSerrverlesskiy

多くの⚙️JavaScript組み込み関数は、任意の数の引数をサポートしています。

例えば:

Math.max(arg1, arg2, ..., argN) – 渡された引数から最大数を計算します。

Math.min(arg1, arg2, ..., argN) - 渡された引数から最小値を返します。

この記事では、独自の関数で同じことを行う方法⚙️と、そのような関数に配列パラメーターを渡す方法⚙️を学習します。

残留パラメータ (...rest)

Parametrs

定義方法に関係なく、任意の数の引数を使用して関数⚙️を呼び出すことができます。

たとえば:

Live Editor
Result
Loading...

余分な引数はエラーを引き起こしませんが、もちろん最初の3つだけがカウントされます。

コンセプト ES6

Idea

ES6標準以降、...restがRESTパラメーターであるという概念が登場しました。

let goFun = (...rest) => {
// アルゴリズム
}

無料のオプションは、3つのドット...で表すことができます。 文字通り、これは「残りのパラメータを収集して配列に入れる」ことを意味します。

たとえば、すべての引数を配列 argsに集めましょう:

Live Editor
Result
Loading...

答えはすでに28で、エラーはありません! 引数と配列の次元を変更してみてください。

複数のオプション

最初のいくつかのパラメーターを変数に入れて、残りを配列に集めることができます。 これは、最後の関数パラメータの代わりにのみ、...restを挿入できることを意味します。

paste

let goFun = (first, second, ...rest) => {
// アルゴリズム
}

以下の例では、最初の2つの2️⃣関数の引数が名前と最後の名前になり、3番目以降の引数が titles [i]配列になります:

Live Editor
Result
Loading...

考えられる間違い

error

残りのパラメーターは最後に配置する必要があるため、その後にを書き込むことはできません。 これはエラーをスローします:

function f(arg1, ...rest, arg2) {   // arg2 後 ...rest ?
// Ошибка!
}
覚えて

...rest 常に最後のものでなければなりません。

拡張演算子 ...spread

operators

パラメータのリストから配列を取得する方法を学びましたが、逆のことを行う必要がある場合もあります。配列を呼び出された関数にプッシュします⚙️。

たとえば、組み込み関数⚙️Math.maxがあります。 リストから最大数を返します:

Live Editor
Result
Loading...

それほど単純ではありません

Index_finger

数字の配列[3、5、1]があるとしましょう。 そのためにMath.maxを呼び出す方法は?

そのように挿入することはできません。Math.maxは、単一の配列ではなく、数値のリストを取得することを期待しています。

Live Editor
Result
Loading...

もちろん、手動で数字を入力することもできます。 Math.max(arr[0], arr[1], arr[2]).

しかし、第一に、それは見栄えが悪く、第二に、私たちは常にいくつの議論があるかを知っているわけではありません。 それらはたくさんあるかもしれませんし、まったくないかもしれません。

パラメータ入力

Transform

ここで、...spreadスプレッド演算子が役立ちます。 これは残差パラメータに似ています-...も使用しますが、まったく逆になります。

⚙️...spread関数が関数呼び出し⚙️で使用されると、arr配列オブジェクトが引数のリストに変換されます。

Math.maxの場合:

Live Editor
Result
Loading...

同様に、複数の反復可能オブジェクトを渡すことができます:

Live Editor
Result
Loading...

涼しい! プログラミングへの非常に柔軟なアプローチ。 スプレッド演算子を通常の値と組み合わせることもできます。

配列のマージ

Merger

スプレッド演算子...Spreadを使用して、配列をマージすることもできます:

Live Editor
Result
Loading...

文字列に変換

Transform

... Spread Spread演算子の⚙️機能は、任意の反復可能なオブジェクトで機能します。

たとえば、展開演算子は、文字列を文字の配列に変換するのに適しています:

let str = 'おい, Alex!'
let result = [...str]

しばらく様子を見てみましょう。 内部的には、スプレッド演算子はイテレータを使用して要素を反復処理します。 for..ofと同じように。

for..ofループは文字列を文字のシーケンスとして繰り返すため、 ...strは"P"、 "p"、 "u"、 "v"、 "e"、"t"を生成します。 .. 結果の文字は、標準の配列宣言を使用して配列に収集されます[...str]。

このタスクにはArray.fromを使用することもできます。 また、反復可能なオブジェクト(文字列など)を配列に変換します:

let str = 'おい'
Array.from(str) // "お" "い"
// Array.fromは、反復可能なオブジェクトを配列に変換します

結果は[...str] .に似ていますが、 Array.from(obj)[... obj]には違いがあります:

--Array.fromは、疑似配列と反復可能配列の両方で機能します。 -...spreadスプレッド演算子は反復可能オブジェクトでのみ動作します。

したがって、Array.fromはより一般的なメソッドです。

合計

Elipsis

コードに"... "が表示されている場合は、...rest残差パラメーターまたは...spreadスプレッド演算子のいずれかです。

それらを区別する方法:

-...が関数の引数リストの最後にある場合、これらは「残差パラメータ」です。残りの未指定の引数を収集し、それらから配列を作成します。 -関数呼び出しなどで...が発生した場合、それは「拡張演算子」です。関数を初期化するために配列から要素を取得します。

覚えておいてください:

-残差パラメーターは、引数の数が不定の新しい関数を作成するために使用されます。 -spread演算子を使用すると、デフォルトで通常の引数リストで機能する配列を関数に挿入できます。 -一緒に、これらの構成により、値のセットを配列に、またはその逆に簡単に変換できます。

問題?

Problem

に書き込む Discord または電報 チャット, また、私たちの購読 ニュース

質問

Question

...が関数の引数リストの最後にある場合、次の処理を行っています。

  1. 残差パラメータ
  2. 拡張演算子
  3. ランダムインジケーター

引数の数が不定の関数を作成するには、次を使用します。

  1. 残りの...restパラメータ
  2. スプレッド演算子...Spread
  3. 外部呼び出し機能

次を使用して、2つのアレイを1つにマージできます。

  1. 拡張演算子
  2. 演算子Array.from
  3. 残留パラメータ

このレッスンでどれだけ学んだかを理解するために、モバイルアプリ このトピックに関する私たちの学校。

Sumerian school

リンク

  1. MDNWebドキュメント。 記事「構文の拡散」
  2. 記事「残差パラメータと拡張演算子」
  3. 記事「SpreadandRest演算子」

Contributors ✨

Thanks goes to these wonderful people (emoji key):


Dmitriy K.


Dmitriy Vasilev

💵

Resoner2005

🐛 🎨 🖋

Navernoss

🖋 🐛 🎨

EnglishMoji!