RestおよびSpread演算子

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

例えば：

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

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

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

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

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

たとえば：

Live Editor

function learnJavaScript() { let summa = (a, b, c) => { return a + b + c } // 3つの数字の合計 return summa(1, 2, 3, 4, 5, 6, 7) }

function learnJavaScript() {
  let summa = (a, b, c) => {
    return a + b + c
  } // 3つの数字の合計

  return summa(1, 2, 3, 4, 5, 6, 7)
}

Result

Loading...

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

コンセプト ES6

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

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

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

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

Live Editor

function learnJavaScript() { let sumAll = (...args) => { // args — 渡された引数の配列の名前 let sum = 0 for (let arg of args) if (typeof arg === 'number') sum += arg // sum - すべての数値引数の合計が収集されます return sum } return sumAll(1, 2, 3, 4, 5, 6, 7, 'React', 'Native') }

function learnJavaScript() {
  let sumAll = (...args) => {
    // args — 渡された引数の配列の名前
    let sum = 0
    for (let arg of args) if (typeof arg === 'number') sum += arg // sum - すべての数値引数の合計が収集されます
    return sum
  }
  return sumAll(1, 2, 3, 4, 5, 6, 7, 'React', 'Native')
}

Result

Loading...

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

複数のオプション

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

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

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

Live Editor

function learnJavaScript() { let free = '' let showName = (firstName, lastName, ...titles) => { free = firstName + ' ' + lastName // 名+名前 return titles[0] + ' ' + titles[1] } // 残りのパラメータはtitles配列に移動します = ["React", "Native"] // titles[0] // React // titles[1] // Native let result = showName('ジュリアス', 'シーザー', 'React', 'Native') return free + ' また ' + result }

function learnJavaScript() {
  let free = ''
  let showName = (firstName, lastName, ...titles) => {
    free = firstName + ' ' + lastName // 名+名前
    return titles[0] + ' ' + titles[1]
  }
  // 残りのパラメータはtitles配列に移動します = ["React", "Native"]
  // titles[0]  // React
  // titles[1]  // Native

  let result = showName('ジュリアス', 'シーザー', 'React', 'Native')

  return free + ' また ' + result
}

Result

Loading...

考えられる間違い

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

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

覚えて

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

拡張演算子 ...spread

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

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

Live Editor

function learnJavaScript() { return Math.max(3, 5, 1, 17, 14, 8, 2, 11) }

function learnJavaScript() {
  return Math.max(3, 5, 1, 17, 14, 8, 2, 11)
}

Result

Loading...

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

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

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

Live Editor

function learnJavaScript() { let arr = [3, 5, 1, 17, 14, 8, 2, 11] return Math.max(arr) // NaN - 値は未定義になります }

function learnJavaScript() {
  let arr = [3, 5, 1, 17, 14, 8, 2, 11]
  return Math.max(arr) // NaN - 値は未定義になります
}

Result

Loading...

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

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

パラメータ入力

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

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

Math.maxの場合：

Live Editor

function learnJavaScript() { let arr = [3, 5, 1, 17, 14, 8, 2, 11] return Math.max(...arr) // ... arr演算子は、配列`arr`を引数のリストに変換します }

function learnJavaScript() {
  let arr = [3, 5, 1, 17, 14, 8, 2, 11]

  return Math.max(...arr) // ... arr演算子は、配列`arr`を引数のリストに変換します
}

Result

Loading...

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

Live Editor

function learnJavaScript() { let arr1 = [1, 2, 34, 41] let arr2 = [8, 3, 18, 17] let arr3 = [2, 4, 16, 38] return 'Max = ' + Math.max(...arr1, ...arr2, ...arr3) }

function learnJavaScript() {
  let arr1 = [1, 2, 34, 41]
  let arr2 = [8, 3, 18, 17]
  let arr3 = [2, 4, 16, 38]

  return 'Max = ' + Math.max(...arr1, ...arr2, ...arr3)
}

Result

Loading...

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

配列のマージ

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

Live Editor

function learnJavaScript() { let arr1 = [3, 5, 7] let arr2 = [4, 2, 8] let merged = [100, ...arr1, 500, ...arr2] let str = '配列: ' + merged return <b>{str}</b> }

function learnJavaScript() {
  let arr1 = [3, 5, 7]
  let arr2 = [4, 2, 8]

  let merged = [100, ...arr1, 500, ...arr2]
  let str = '配列: ' + merged

  return <b>{str}</b>
}

Result

Loading...

文字列に変換

... 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はより一般的なメソッドです。

合計

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

それらを区別する方法：

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

覚えておいてください：

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

問題？

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

質問

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

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

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

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

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

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

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

リンク

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

Contributors ✨

Thanks goes to these wonderful people (emoji key):

Dmitriy K.

Dmitriy Vasilev 💵

Resoner2005 🐛 🎨 🖋

Navernoss 🖋 🐛 🎨