JavaScriptスプレッド演算子

JavaScript SpreadOperatorの基本を学ぶ

スプレッド演算子を使用して、配列、オブジェクト、または文字列を展開できます...

配列の例から始めましょう。与えられた

const a = [1, 2, 3]

を使用して新しいアレイを作成できます

const b = [...a, 4, 5, 6]

を使用して配列のコピーを作成することもできます

const c = [...a]

これはオブジェクトに対しても機能します。オブジェクトのクローンを作成します。

const newObj = { ...oldObj }

スプレッド演算子は、文字列を使用して、文字列内の各文字を含む配列を作成します。

const hey = 'hey'
const arrayized = [...hey] // ['h', 'e', 'y']

この演算子には、非常に便利なアプリケーションがいくつかあります。最も重要なのは、非常に簡単な方法で配列を関数の引数として使用できることです。

const f = (foo, bar) => {}
const a = [1, 2]
f(...a)

ザ・残りの要素で作業するときに便利です配列の破壊

const numbers = [1, 2, 3, 4, 5]
const [first, second, ...others] = numbers

そしてスプレッド要素

const numbers = [1, 2, 3, 4, 5]
const sum = (a, b, c, d, e) => a + b + c + d + e
const result = sum(...numbers)

ES2018では、残りのプロパティが導入されています。これらは同じですが、オブジェクト用です。

残りのプロパティ

const { first, second, ...others } = {
  first: 1,
  second: 2,
  third: 3,
  fourth: 4,
  fifth: 5
}

first // 1 second // 2 others // { third: 3, fourth: 4, fifth: 5 }

スプレッドプロパティスプレッド演算子の後に渡されたオブジェクトのプロパティを組み合わせて、新しいオブジェクトを作成できるようにします。

const items = { first, second, ...others }
items //{ first: 1, second: 2, third: 3, fourth: 4, fifth: 5 }

また、2つの単純なオブジェクトを1つにマージするのに最適な方法です。

const object1 = {
  name: 'Flavio'
}

const object2 = { age: 35 }

const object3 = {…object1, …object2 }

私の無料ダウンロードJavaScriptビギナーズハンドブック


その他のjsチュートリアル: