HACKSION

  • 99%のエンジニアが知らないJavaScriptテクニック10選

    この記事では、実務でも役立つ JavaScriptの隠れたテクニック10選 を紹介します。

    1、 配列を一瞬で空にする

    配列をクリアする方法はいくつかありますが、一番スマートなのがこれです。

    arr.length = 0

    例

    let numbers = [1,2,3,4]

numbers.length = 0

console.log(numbers)

    結果

    []

    配列の参照を維持したまま削除できるので実務ではかなり使われます。

    2、 数値を一瞬で整数化

    小数を整数に変換するテクニックです。

    const num = 12.9 | 0

    結果

    12

    これはビット演算を利用しています。

    ただし可読性のため最近は次の方がよく使われます。

    Math.trunc(num)

    3、 配列の最後の要素を取得

    昔はこうでした。

    arr[arr.length - 1]

    しかし今は

    arr.at(-1)

    例

    const numbers = [1,2,3,4]

console.log(numbers.at(-1))

    結果

    4

    4、 配列をシャッフルする

    Fisher-Yatesアルゴリズムを使う方法です。

    const shuffle = arr => {
  return arr.sort(() => Math.random() - 0.5)
}

    使用例

    const numbers = [1,2,3,4,5]

console.log(shuffle(numbers))

    5、 オブジェクトをディープコピー

    JSONを使う方法です。

    const copy = JSON.parse(JSON.stringify(obj))

    例

    const user = {name:"Taro"}

const copy = JSON.parse(JSON.stringify(user))

    ※ただし Dateや関数はコピーできないので注意。

    6、 文字列を数値に変換

    一番短い方法はこれです。

    const num = +"123"

    結果

    123

    もちろん通常の方法もあります。

    Number("123")
parseInt("123")

    7、 オブジェクトが空か判定

    Object.keys(obj).length === 0

    例

    const obj = {}

if(Object.keys(obj).length === 0){
  console.log("empty")
}

    8、 配列をフラット化

    ネストした配列を1つにまとめます。

    const arr = [1,[2,3],[4,5]]

const flat = arr.flat()

    結果

    [1,2,3,4,5]

    深いネストも可能です。

    arr.flat(Infinity)

    9、 オブジェクトを配列に変換

    Object.entries(obj)

    例

    const user = {
 name:"Taro",
 age:30
}

console.log(Object.entries(user))

    結果

    [["name","Taro"],["age",30]]

    10、 配列の重複削除

    モダンJSではこの方法が一番スマートです。

    const unique = [...new Set(arr)]

    例

    const numbers = [1,2,3,3,4]

const unique = [...new Set(numbers)]

console.log(unique)

    結果

    [1,2,3,4]

    まとめ

    今回紹介したテクニックはこちらです。

    • 配列を一瞬で空にする
    • ビット演算で整数化
    • arr.at(-1)で最後の要素取得
    • 配列シャッフル
    • JSONでディープコピー
    • +で数値変換
    • オブジェクト空チェック
    • flatで配列フラット化
    • Object.entries
    • Setで重複削除

    これらは 知っているとコードがかなりスマートになるテクニックです。

    ぜひ日々のJavaScript開発で活用してみてください。