ECMA Script6(JavaScript)のモダンなコーディング

ECMA Script6(JavaScript)のモダンなコーディング

ECMA Script6(JavaScript)のモダンな記述方法です。

{}を付けてオブジェクトを作成する

結果は以下のように変数名をキーとして、値が変数の値となります。

変数の初期化

変数初期化するのには、||を使います。

関数にオブジェクトで引数を渡す

関数の引数をオブジェクトで渡します。

受け取る関数の引数もオブジェクトにします。この記述のメリットはキー名が同じであれば引数の順序は関係ないという点です。

関数に配列で引数を渡す

関数に配列で引数を渡すことができます。スプレッド演算子を使用します。

配列で渡す場合は、順序が同じである必要があります。

関数の引数を初期化する

関数の引数が指定されなかった場合にデフォルト値を初期化することができます。

文字列型を数値型に変換する

JavaScriptで数値に変換するには、Number(変数)としますが、を末尾に|0付けることで数値に変換することができます。

但し、小数点がある場合は意図したとおりに動作しませんので+を付けて変換する方が良いかもしれません。

文字列型の変数に+を付けるだけでnumber型に変更することも可能です。

数値型を文字列に変換する

ぱっとモダンなコーディングが思いつかないのですが、ベタに”という文字列を連結すれば数値は文字列型になります。

オブジェクトを分割代入する

オブジェクトをデストラクチャリングして分割代入することができます。

配列を降順にソートする

一旦ソートしてから、リバースすれば降順ソートになります。

配列でソートするときに数値のソートは文字列としてソートされるため、辞書順になります。

その為、数値の場合は比較関数を引数に渡す必要があります。

JavaScriptで配列をソートする」参照

オブジェクトのスプレッド演算子

スプレッド演算子とはピリオド三つのことを指します。続けて変数名を指定します。

このスプレッド演算子を指定してオブジェクトのコピーができます。

シャローコピーなのでオブジェクトがネストされる場合は同じ参照となりますので注意です。

オブジェクト変数であれば、{…obj}.aという記述方法も可能です。

ディープコピーする場合は「ECMA Script6(JavaScript)でObjectをコピーするObject.assignメソッド」を参照ください。

※Object.assignメソッドもシャローコピーです。

オブジェクトのプロパティ存在チェック

in文を使えばオブジェクトのプロパティ存在チェックができます。

inプロパティは実は配列の添え字に対して存在チェックすることも可能です。

これは、配列の添え字も単なるプロパティだからです。

オブジェクトのkeyを取得する

Objectのkey – valueのうち、keyのみを取得したい場合、以下のようにコーディングしていました。

Object.keysメソッドを使用すれば簡単にkeyのみ取得することができます。

但し、継承しているクラスのプロパティも取得されてしまいますので、Object.hasOwnPropertyメソッドを使用すると継承しているクラスのプロパティは省かれます。

オブジェクトのvalueを取得する

オブジェクトからkey – valueのvalueを取得するには以下のように記述していました。

ES8からObject.valuesメソッドで簡単にvalueを取得することが可能になりました。

配列をユニークにする

ECMA Script6(JavaScript)で配列をユニークにする方法」を参照ください。

配列を空にする

配列を空にするには、lengthプロパティに0を代入するだけで空配列にすることができます。

^(キャレット)で反転する

true,faseを逆にします。変換なのでmapを使用します。

0,1の配列を1,0にする方法です。変換なのでmapを使用します。

truthy and falsy

ECMA Script6(JavaScript)のtruthy and falsy」を参照ください。

日付はmoment.jsを使う

Dateオブジェクトはなにかとイケてないので、moment.jsを使った方が良いです。

日時を扱うmoment.js 」を参照ください。

util.inspectを使ってログ表示する

console.log()でオブジェクトの階層が深い場合に[Object]となる場合の対処法」を参照ください。

配列のforEachは使わない方向でコーディングする

find,filter,map,reduceなどで代用できないか検討したほうが良いです。forEach内でPromiseオブジェクトを返す関数は使えない為です。(Promise.allを使用すべきです)

2つの変数の値の入れ替え

xとyの値を入れ替えるにはよくtmpという一時変数を使っていたと思います。

が、以下のようにコーディングするだけでxとyの値は1行で入れ替わります。

Promise.allの結果を受け取る

Promise.allの結果を[ret1,ret2]みたいな感じで受け取ることができます。受け取る配列の要素数はPromise.allの要素数と同じです。

ECMA Script6(JavaScript)のモダンなコーディング

スポンサーリンク
  • このエントリーをはてなブックマークに追加
  • Evernoteに保存Evernoteに保存
スポンサーリンク

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA