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

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

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

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

let a = 'test';
let obj = {a};
console.log(obj);

view raw
gistfile1.txt
hosted with ❤ by GitHub

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

変数の初期化

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

const x = undefined
const height = x || 180 // 初期値を||の後に書く
console.log(height) // 180
const y = null
const weight = y || 60 // 初期値を||の後に書く
console.log(weight) // 60

view raw
gistfile1.txt
hosted with ❤ by GitHub

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

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

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

関数に配列で引数を渡す

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

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

関数の引数を初期化する

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

function test(name="takahashi", age=22){ // 引数初期化
console.log(name); // takahashi
console.log(age); // 22
}
test(); // 引数を指定しない

view raw
gistfile1.txt
hosted with ❤ by GitHub

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

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

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

let n = '100.6'|0;
console.log(n); // 100となる

view raw
gistfile1.txt
hosted with ❤ by GitHub

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

let n = '100';
console.log(typeof +n); // number

view raw
gistfile1.txt
hosted with ❤ by GitHub

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

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

let n = 100;
console.log(typeof (n+'')); // string

view raw
gistfile1.txt
hosted with ❤ by GitHub

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

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

const params = {
'id': '1',
'name': 'taro'
};
let {id, name} = params;
console.log(id); // 1
console.log(name); // taro

view raw
gistfile1.txt
hosted with ❤ by GitHub

配列を降順にソートする

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

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

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

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

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

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

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

let obj = {a:1,b:2};
let ret = {…obj}; // シャローコピー
console.log(ret); // {a:1,b:2}

view raw
gistfile1.txt
hosted with ❤ by GitHub

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

const obj = {
a: {
b: 1
}
};
const ret = {…obj};
obj.a.b = 1000;
console.log(ret);// {a: {b:1000}} 同じ参照先の為、1000になる

view raw
gistfile1.txt
hosted with ❤ by GitHub

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

const obj = {a:1,b:2}
console.log({…obj}.a); // 1と表示される

view raw
gistfile1.txt
hosted with ❤ by GitHub

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

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

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

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

const obj = {name: 'takahashi', age: 22};
console.log('name' in obj); // true
const bool = 'name' in obj;
if(bool) {
console.log('name is exist.'); // 通る
}

view raw
gistfile1.txt
hosted with ❤ by GitHub

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

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

const arr = [, 2, undefined, , 5]
console.log(3 in arr) // false
console.log(2 in arr) // true
console.log(1 in arr) // true
console.log(0 in arr) // false

view raw
gistfile1.txt
hosted with ❤ by GitHub

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

Object.keysと~(チルダ)を使ってプロパティが存在すればtrueを返すことが出来ます。

objがオブジェクト、indexOfメソッドの引数にチェックしたいプロパティ名を指定します。

const obj = {'name': 'takahashi'}
if(~Object.keys(obj).indexOf('name')) {
console.log('true')
}

view raw
gistfile1.txt
hosted with ❤ by GitHub

文字列を含む判定にも~(チルダ)は使えます。以下参照ください。

JavaScriptで文字列を含む判定するindexOf

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

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

let obj = { name: 'takahshi', age: 20 }
let keys = []
for (let key in obj) {
keys.push(key)
}
console.log(keys) // ['name', 'age']

view raw
gistfile1.txt
hosted with ❤ by GitHub

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

let obj = { name: 'takahshi', age: 20 }
let arr = Object.keys(obj)
console.log(arr) // [ 'name', 'age' ]

view raw
gistfile1.txt
hosted with ❤ by GitHub

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

let arr = Object.keys(obj).map(e => {
if (obj.hasOwnProperty(e)) {
return e
}
})
console.log(arr) // [ 'name', 'age' ]

view raw
gistfile1.txt
hosted with ❤ by GitHub

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

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

let obj = { name: 'takahshi', age: 20 }
let arr = []
for (let key in obj) {
arr.push(obj[key])
}
console.log(arr) // [ 'takahshi', 20 ]

view raw
gistfile1.txt
hosted with ❤ by GitHub

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

let obj = { name: 'takahshi', age: 20 }
let val = Object.values(obj)
console.log(val) // [ 'takahshi', 20 ]

view raw
gistfile1.txt
hosted with ❤ by GitHub

配列をユニークにする

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

配列を空にする

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

const arr = [1, 2, 3, 4, 5]
arr.length = 0
console.log(arr) // 配列が[]になる

view raw
gistfile1.txt
hosted with ❤ by GitHub

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

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

const arr = [true,false]
console.log(arr.map((item)=>!item) // [false,true]となる

view raw
gistfile1.txt
hosted with ❤ by GitHub

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

const arr = [0, 1, 0]
console.log(arr.map((item)=> item^1)) // [ 1, 0, 1 ]となる

view raw
gistfile1.txt
hosted with ❤ by GitHub

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行で入れ替わります。

let x = 10
let y = 20
[x, y] = [y, x] // 入れ替え
console.log(x) // 20
console.log(y) // 10

view raw
gistfile1.txt
hosted with ❤ by GitHub

Promise.allの結果を受け取る

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

(async function main() {
const [a, b] = await Promise.all([
new Promise(resolve => resolve('promise1')),
new Promise(resolve => resolve('promise2'))
])
console.log(a, b) // promise1 promise2
})()

view raw
gistfile1.txt
hosted with ❤ by GitHub

Promise.allと配列のmapメソッドで並列処理を行う

同期をとって処理するとnode.jsのメリットが薄れてしまうので、重たい処理は並列で行った方が良いです。

その際、Promise.allと配列のmapメソッド、async-awaitを使用します。以下例では配列にAWS S3のオブジェクトキーが入っている前提です。

await Promise.all(
deleteTargets.map(async fullPathFile => {
await s3.deleteObject('S3バケット名', fullPathFile)
})
)

view raw
gistfile1.txt
hosted with ❤ by GitHub

文字列の中の特定文字列の前後を取得する

文字列を分割するときに、その文字列内の特定文字列の前後を取得したい場合があります。

substring,split,正規表現などで実現できます。

let str = 'hoge/fuga'
str.substring(0, str.indexOf('/')) // hoge
str.substring(str.indexOf('/') + 1) // fuga
str = 'hoge/fuga'
str.split('/')[0] // hoge
str.split('/')[1] // fuga
str = 'hoge/fuga'
regexp = /(.*)\/(.*)/g
let match
if(match = regexp.exec(str)) {
match[1] // hoge
match[2] // fuga
}

view raw
gistfile1.txt
hosted with ❤ by GitHub

Mapクラスを2次元配列で初期化する

JSのMapクラスを使います。重複するキーは許されません。new Map()の引数に2次元配列を指定することによって初期化することができます。重複するキーが存在する場合は後勝ちになります。

const a = [
[1, 'kieru'],
[1, 'hoge'],
[2, 'fuga']
]
const map = new Map(a) // Map { 1 => 'hoge', 2 => 'fuga' }

view raw
gistfile1.txt
hosted with ❤ by GitHub

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

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

コメントをどうぞ

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

CAPTCHA