🦚

2021/09/22に公開

# Switch文を使わずに書く

``````let colorCode = ''
const colorName = 'blue'

switch (colorName) {
case 'red':
colorCode = '#FF0000'
break;
case 'blue':
colorCode = '#0000FF'
break;
case 'green':
colorCode = '#008000'
break;
}

console.log(colorCode) // #0000FF
``````

``````const COLOR_NAME = {
RED: 'red',
BLUE: 'blue',
GREEN: 'green'
}

const color = {
[COLOR_NAME.RED]: '#FF0000',
[COLOR_NAME.BLUE]: '#0000FF',
[COLOR_NAME.GREEN]: '#008000'
}

console.log(color[COLOR_NAME.BLUE]) // #0000FF
``````

# 配列内の最大値と最小値を取得

``````const arr = [1, 2, 3]
Math.max(...arr) // 3
Math.min(...arr) // 1
``````

# 配列の結合

``````const arr = [4, 5, 6]
const result = [1, 2, 3].concat(arr)
console.log(result) // [1, 2, 3, 4, 5, 6]
``````

スプレッド構文で短く書けます

``````const arr = [4, 5, 6]
const result = [1, 2, 3, ...arr]
console.log(result) // [1, 2, 3, 4, 5, 6]
``````

# 複数条件の比較

``````const num = 3
const reslut = 1 === num || 2 === num || 3 === num
console.log(reslut) // true
``````

includes()メソッドで短く書けます

``````const num = 3
const reslut = [1, 2, 3].includes(num)
console.log(reslut) // true
``````

# 配列の重複削除

``````const arr = [1, 2, 3, 4, 1, 3]
const result = new Set(arr)
console.log(Array.from(result)) // [1, 2, 3, 4]
``````

# 配列からの代入

``````const arr = [1, 2, 3]
const second = arr[1]
const third = arr[2]

console.log(second) // 2
console.log(third) // 3
``````

``````const arr = [1, 2, 3]
const [, second, third] = arr

console.log(second) // 2
console.log(third) // 3
``````

# 配列内の値の合計値を出す

``````const total = [1, 2, 3].reduce((previous, current) => previous + current, 0)
console.log(total) // 6
``````

# undefinedとnullの判定

``````let target = undefined

if (target === undefined || target === null) {
target = 'undefinedまたはnullです'
}

console.log(target) // undefinedまたはnullです
``````

Null合体演算子を使うことで短く書けます

``````const target = undefined

const reslut = target ?? 'undefinedまたはnullです'

console.log(reslut) // undefinedまたはnullです
``````

# 文字の改行

``````const str = 'Zennはエンジニアのための新しい情報共有コミュニテ\n'
+ 'ィです。 誰かのために、自分のために知見を共有しましょう。'
``````

`\n``+` を使わなくても改行できます

``````const str = `Zennはエンジニアのための新しい情報共有コミュニテ
ィです。 誰かのために、自分のために知見を共有しましょう。`
``````

# for文

``````const arr = [1, 2, 3, 4];
for (let i = 0; i < arr.length; i++) {
console.log(arr[i])
}
``````

for...in文で短く書けます

``````const arr = [1, 2, 3, 4];
for (let val in arr) {
console.log(val)
}
``````

# 連番の配列を生成

``````const array = []
for (let index = 1; index <= 30; index++) {
array.push(index)
}
console.log(array)
``````

``````const array = [...Array(30).keys()].map((i) => ++i)
console.log(array)
``````

# 様々な型変換

``````const num = 1

console.log('' + num)
console.log(num.toString())
console.log(String(num))
``````

``````const str = '1'

console.log(+str)
console.log(parseInt(str, 10))
console.log(Number(str))
``````

``````const num = 1

console.log(!!num)
console.log(Boolean(num))
``````

# 文字列の置換

1月1日を2月2日に置換したい場合（条件にヒットする全ての文字列の置換）

``````const str = '1月1日'
console.log(str.replace(/1/g, '2')) // 2月2日
``````

これまで条件に一致する全ての文字列を置換するには正規表現の利用が必要でした。正規表現を利用しないと最初の箇所のみ置換されます。

しかし、ES2021の仕様でreplaceAll()メソッドを利用出来るようになり、簡単に書くことが出来るようになります。

``````const str = '1月1日'
console.log(str.replaceAll('1', '2')) // 2月2日
``````

# 論理和代入（||=）

falsyである場合にのみ代入を行います。常に代入が行われる`x = X || y`と同義ではありません。

``````let a = true
let b = false

a ||= 1
b ||= 2

console.log(a) // true
console.log(b) // 2
``````

# 配列の最後の要素を取得

``````const arr = [1, 2, 3, 4]
console.log(arr[arr.length - 1])
``````

at()メソッドを使うと短く書けます。

``````const arr = [1, 2, 3, 4]
console.log(arr.at(-1))
``````

しかし、数値以外を入れると最初の要素を返してしまうため、扱いに注意が必要です。

``````const arr = [1, 2, 3, 4]
console.log(arr.at('foo')) // 1
console.log(arr.at(NaN)) // 1
``````

# プロパティの存在をチェック

``````const foo = { first: 1, second: 2,  third: 3 };

console.log(Object.keys(foo).indexOf('third') !== -1) // true
console.log(foo.hasOwnProperty('third')) // true
console.log('third' in foo) // true

console.log(Object.keys(foo).indexOf('zero') !== -1) // false
console.log(foo.hasOwnProperty('zero')) // false
console.log('zero' in foo) // false
``````