最新のJavaScript構文のクイックリファレンスガイド

多くの場合、コードサンプルは利用可能な最新のJavaScript機能を使用しています。これらの機能は、フレームワーク機能と区別するのが難しい場合があります。たとえば、Reactで頻繁に発生し、JavaScriptへの非常に最新のアプローチを奨励しています。

多くの場合、コードサンプルは利用可能な最新のJavaScript機能を使用しています。

これらの機能は、フレームワーク機能と区別するのが難しい場合があります。たとえば、Reactで頻繁に発生し、JavaScriptへの非常に「モダンな」アプローチを奨励します。

この投稿は、特にES6より前のJavaScriptのバックグラウンドを持っている場合、またはゼロから始めている場合に、つまずく可能性のあるすべての小さなことを説明することを目的としています。

目標は、少なくともどの構造が通常のJavaScriptであり、どの構造がフレームワークの一部であるかを認識させることです。これらがどのように機能するかについては詳しく説明しませんが、詳細を知りたい場合は、代わりにいくつかのヒントを示します。

矢印関数

矢印関数の構文は次のとおりです。

const myFunction = () => {
  //...
}

通常の関数とは少し異なります。

const myFunction = function() {
  //...
}

()は、通常の関数と同様に、パラメーターをホストできます。関数にステートメントが1つしかない場合、角かっこが完全に削除されることがあります。これは暗黙の戻り値です(returnキーワードは必要ありません)。

const myFunction = i => 3 * i

矢印関数の詳細

スプレッド演算子

あなたが見たら

const c = [...a]

このステートメントは配列をコピーします。

を使用して、配列にアイテムを追加することもできます

const c = [...a, 2, 'test']

ザ・...スプレッド演算子と呼ばれます。オブジェクトにも使用できます。

const newObj = { ...oldObj } //shallow clone an object

スプレッド演算子の詳細

割り当ての破壊

あなただけを抽出することができますいくつかこの構文を使用するオブジェクトのプロパティ:

const person = {
  firstName: 'Tom',
  lastName: 'Cruise',
  actor: true,
  age: 54 //made up
}

const { firstName: name, age } = person

これで、2つのconst値が得られますnameそしてage

構文は配列でも機能します。

const a = [1,2,3,4,5]
[first, second, , , fifth] = a

テンプレートリテラル

バッククォートで囲まれた文字列が表示されている場合、それはテンプレートリテラルです。

const str = `test`

この中に、変数を入れてjavascriptを実行できます。${...}切れ端:

const string = `something ${1 + 2 + 3}`
const string2 = `something ${doSomething() ? 'x' : 'y'}`

また、文字列を複数行にまたがることもできます。

const string3 = `Hey
this

string
is awesome!`

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


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