5拡大演算子の用途

スプレッド演算子はJavaScript開発者の好みです.多くのアプリケーションを持つ強力な構文です.
多くの、実際には、それは多くの場合、それらのすべてを追跡するのは難しいです.このポストでは、我々はスプレッド演算子のために最も一般的な用途のうちの5つをチェックするつもりです.

配列のコピー
これは、スプレッド演算子の最も一般的な用途の一つです.配列の内容を取り、別の配列を埋めるために「それを広げます」.

let arr = [1,2,3,4]
let copy = [...arr]
// copy is [ 1, 2, 3, 4 ]

別の方法で見て、拡散演算子はarr 配列を配置し、それぞれの要素を新しい配列構造に配置します.
配列を別の配列に置くのとは違います.

let arr = [1,2,3,4]
let copy = [arr]
// copy is [ [1, 2, 3, 4] ]

このオプションを指定すると、多次元配列が得られます.

配列を連結する
前の例では、複数の配列を取り、新しい配列に展開することができます.次々に

let arr1 = [1,2,3,4]
let arr2 = [5,6,7,8]
let concat = [...arr1, ...arr2]
// concat is [ 1, 2, 3, 4, 5, 6, 7, 8 ]

前の例で行ったようにブレークダウンすると、スプレッド演算子は初期配列の各要素を抽出し、新しい配列に配置します.

引数を配列として渡す
これは、広げられたオペレーターがその融通性を示し始めるところです.この例では、関数に3つの引数を渡します.スプレッド演算子は、その中に3つの要素を持つ配列の前で使用されます.

function dev(x, y, z) { }

var args = [0, 1, 2]

dev(...args) // call function

これを理解する良い方法は、我々の前の例を見ることです.スプレッド演算子を配列に使用し、新しい配列の中に配置しないとどうなるでしょうか?
配列内の各要素は独自に立ちます.これが中間変換です.各々の要素はそれ自身の上に立って、新しいデータ構造に置かれませんでした.したがって、すべての3つの要素を個別に関数に引数として渡すことができます.

オブジェクトをコピーする
スプレッド演算子を配列に使用できるだけでなく、オブジェクトにも使用できます.前に配列をコピーするように、オブジェクトをコピーできます.

let obj = {a: 1, b: 2, c: 3}
let copy = {...obj}
// copy is {a: 1, b: 2, c: 3}

この例では、スプレッド演算子はobj を使って新しいオブジェクトを配置します.copy .
そして、配列の例と同じように、別のオブジェクトの中にオブジェクトを置くこととは異なることに注意してください.

let obj = {a: 1, b: 2, c: 3}
let copy = {obj}
// copy is { {a: 1, b: 2, c: 3} }

マージオブジェクト
また、スプレッド演算子を使用して2つのオブジェクトを結合することもできます.

let obj1 = {a: 1, b: 2, c: 3}
let obj2 = {d: 4, e: 5, f: 6}

let merge = {...obj1, ...obj2}
// merge is {a: 1, b: 2, c: 3, d: 4, e: 5, f: 6}

再び、我々は初期のオブジェクトからすべての重要な価値ペアを抽出して、新しいオブジェクトデータ構造にそれらを置いています.

ボーナス-エラー!
スプレッド演算子が配列とオブジェクトの両方に作用するという事実にもかかわらず、これらのデータ型をミックスして一致できません.

let obj = {a:1, b:2, c:3}
let copy = [...obj] // this won't work!

これは、スプレッド演算子が要素を処理している場合、およびオブジェクトの場合は、キー値のペアであることを考えると、それについて考えた場合、意味があります.

そして、あなたはそれを持っている!
これは、スプレッド演算子のための使用の全体の多くであり、それらはすべてではない.あなたが完全なセットを探しているならば、見てくださいmozilla docs .
そして、あなたがきれいなコードを書くのを助けることができる他のJavascript構文に興味があるならば、これらの記事をチェックしてください!

3 Powerful Examples of Destructuring Assignment

Laurie ・ Jun 11 '19 ・ 2 min read

#javascript #webdev #productivity #beginners

Exports and Imports and Defaults, Oh My!

Laurie ・ Apr 29 '19 ・ 3 min read

#javascript #react #webdev #beginners

Introducing Object.fromEntries

Laurie ・ Jul 2 '19 ・ 3 min read

#javascript #webdev #learning #productivity