JavaScript

モダン CODE TIPS

2019.7.25

Cheatsheet

async / await

Sleep / Wait

async関数の中
await new Promise(r => setTimeout(r, 5000));
即時関数
(async () => {
  console.log('start');
  await new Promise(r => setTimeout(r, 5000));
  console.log('end');
})();
Top-level async function
;(async () => {
  const result = await main();
  console.log(result);
})().catch(e => {
  // Deal with the fact the chain failed
  console.warn(e);
});

非同期処理の For Loop 繰り返し

直列実行
async function printFiles () {
  const files = await getFilePaths();

  for (let file of files) {
    const contents = await fs.readFile(file, 'utf8');
    console.log(contents);
  }
}
並列実行
async function printFiles () {
  const files = await getFilePaths();

  await Promise.all(files.map(async (file) => {
    const contents = await fs.readFile(file, 'utf8')
    console.log(contents)
  }));
}

Promise.all is all or nothing.

— javascript - Handling errors in Promise.all - Stack Overflow

Class / クラス

class Player {
  name = 'Anonymous'
  points = 0

  constructor(name) {
    this.name = name || this.name
  }

  addPoints(amount) {
    Player.shout(`got ${amount} points!`)
    this.points += amount
  }

  static shout(str) {
    console.log(str.toUpperCase())
  }
}

var p = new Player()
p.addPoints(5)
//=> GOT 5 PT!

n回ループ

[...Array(5)].map((_, i) => console.log(i))
//=> 0
//=> 1
//=> 2
//=> 3
//=> 4

[...Array(20)].map(() => '★').join('')
//=> ★★★★★★★★★★★★★★★★★★★★

Objectの複製・マージ

オブジェクトを複製する
const obj = { a: 1 };
const copy = Object.assign({}, obj);
console.log(copy); // { a: 1 }
オブジェクトをマージする
const o1 = { a: 1 };
const o2 = { b: 2 };
const o3 = { c: 3 };

const obj = Object.assign(o1, o2, o3);
console.log(obj); // { a: 1, b: 2, c: 3 }
console.log(o1);  // { a: 1, b: 2, c: 3 }, targetオブジェクト自身が変化する

Array

ソート (sort)

Warning
 ソートは対象配列上で直接行われることに注意して下さい。コピーされた別の配列が準備されることはありません。 
const items = [
  { name: 'apple', price: 100 },
  { name: 'orange', price: 98 },
  { name: 'banana', price: 50 },
  { name: 'melon', price: 500 },
  { name: 'mango', price: 398 }
]
items.sort((a, b) => {
  return a.price - b.price
})
//=>
// { name: 'banana', price: 50 }
// { name: 'orange', price: 98 }
// { name: 'apple', price: 100 }
// { name: 'mango', price: 398 }
// { name: 'melon', price: 500 }

オブジェクトから配列に変換

Object.entries() ※ES2017

[key, value] からなる配列を返す。mapに渡せば、返す配列の中でkeyの扱いを自由にできる。 スプレッド構文 …​value を使えばvalueオブジェクトにマージした配列を作れる。

const items = {
  apple: { price: 100, color: 'red' },
  melon: { price: 500, color: 'green' },
  lemon: { price: 248, color: 'yellow' }
}

Object.entries(items).map(([k, v]) => v.price)
//=> [100, 500, 398]

Object.entries(items).map(([k, v]) => ({ name: k, ...v }))
//=> [
//  { name: 'apple', price: 100, color: 'red' }
//  { name: 'melon', price: 500, color: 'green' }
//  { name: 'lemon', price: 248, color: 'yellow' }
// ]

オブジェクト配列の reduce

アキュムレーター (acc) が直前の反復処理の返値なので、合計値を計算するのであれば型は数値。 配列そのままを reduce すると、初回の acc が先頭オブジェクトとなってしまい、 acc.price と書くと反復2回目以降で数値が返ってくるため不整合となる。 そこで第2引数の initialValue に 0 を渡すことで初回から acc を 0 にしている。

const items = [
  { name: 'apple', price: 100, color: 'red' },
  { name: 'melon', price: 500, color: 'green' },
  { name: 'lemon', price: 248, color: 'yellow' },
  { name: 'peach', price: 378, color: 'pink' }
]

/*
 * acc: 前処理の返値(price)
 * cur: 現在値(object)
 */
items.reduce((acc, cur) => {
  return acc + cur.price
}, 0)
//=> 1226

重複の除去 (unique / distinct)

const animals = ["cat", "cat", "dog", "mouse", "dog"];
const distinctAnimals = [...new Set(animals)];
//=> ["cat", "dog", "mouse"]

指定した範囲の整数配列

Array.from(Array(100).keys())
// => [0, 1, 2, ..., 99]
console.table([...Array.from(Array(100).keys())].map((n)=>{
  return { '16': n.toString(16), '36': n.toString(36) }
}))

import

別名をつける

import { member as alias } from "module-name";