JavaScriptのTipsをひたすら集める

JavaScript

役に立ちそうな実装や面白い実装などをまとめていきます。

Spread syntax (...)

const numbers = [1, 2, 3];
console.log(...numbers); // 1 2 3
let numberStore = [0, 1, 2]
let newNumber = 12
numberStore = [...numberStore, newNumber] // [0, 1, 2, 12]

Spread syntax (...)

Classを作る

class Pokemon {
  constructor(name, skill) {
    this.name = name;
    this.skill = skill;
  };

  // メソッド
  execSkill () {
    return `${this.name}${this.skill}を繰り出した!`;
  };

  // 静的メソッド
  static eat () {
    return 'ポケモンは食事をしている'
  }
}

const pika = new Pokemon('ピカチュウ', '充満ぼると');
pika.execSkill()
// => "ピカチュウは充満ぼるとを繰り出した!"

Pokemon.eat()
// => "ポケモンは食事をしている"

静的メソッドは、アプリケーションのユーティリティ関数を作成するためによく使用されますが、静的プロパティは、キャッシュ、固定構成、またはインスタンス間で複製する必要のないその他のデータに役立ちます。

静的メソッドは、インスタンス化しなくても呼び出しすることができる。

クラス

また、普段業務でClassを使わないが、お気に入りのNuxtJSも、 nuxt.js/packages/core/src/nuxt.jsコアの部分はClassだったのでゆっくり勉強していきたい。

Object Constructorを作る

function Soldier(name, age) {
    this.name = name
    this.age = age;       
}  

const soldier = new Soldier("冒頓単于", 22);
soldier.name
// => 冒頓単于

ユニークな配列を作る

const fruits = ['🍎', '🍎', '🍊', '🍊']
const uniqueFruits = [...new Set(fruits)];
uniqueFruits
// => ["🍎", "🍊"]

defalut valuesの代入

function getUserConfig(config) {
  config.name = config.name || 'user'
  config.age = config.age || 18
  config.gender = config.gender || 'male'
  return config
}
const config = { name: '曹操', age: 29 }
getUserConfig(config)
// => {name: "曹操", age: 29, gender: "male"}

リファクタリング後

function getUserConfig(config) {
  const defaults = {
    name: 'user',
    age: 18,
    gender: 'male'
  }
  return Object.assign(defaults, config)
}
const config = { name: '曹操', age: 29 }
getUserConfig(config)
// => {name: "曹操", age: 29, gender: "male"}

Numberの最小値/最大値

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

console.log(Math.max(...numbers)) // 8
console.log(Math.min(...numbers)) // 2

Sum an array

const myArray = [10, 20, 30, 40];
const reducer = (total, currentValue) => total + currentValue;

console.log(myArray.reduce(reducer)); // 100  

Objectを個別の変数に代入する

const obj = { name: "name", age: 17 }
const { name, age } = obj
name
// => "name"
age
// => 17

Replace All

let fruits = "🍎 🍎 🍊 🍊";
console.log(fruits.replace(/🍎/, "🍊")); // 🍊 🍎 🍊 🍊
console.log(fruits.replace(/🍎/g, "🍊")); // 🍊 🍊 🍊 🍊

Short Circuit Conditionals

if (isShow) {
  show();
}
isShow && show()

Dynamic Property Names

const dynamicKey = 'father';
let saiyan = {
    name: '孫悟空',
    [dynamicKey]: 'バーダック'
}
console.log(saiyan);
// { name: "孫悟空", father: "バーダック" }

Use length to resize/empty an array

var entries = [1, 2, 3, 4, 5, 6, 7];  
console.log(entries.length); 
// 7  
entries.length = 4;  
console.log(entries.length); 
// 4  
console.log(entries); 
// [1, 2, 3, 4]
var entries = [1, 2, 3, 4, 5, 6, 7]; 
console.log(entries.length); 
// 7  
entries.length = 0;   
console.log(entries.length); 
// 0 
console.log(entries); 
// []

より高速に

var fruits = ['🍎', '🍎', '🍊', '🍈'];
console.log(fruits.slice(0, 2)); // 最初の2つ ["🍎", "🍎"]
console.log(fruits.slice(-1)); // 最後 ["🍈"]

多次元配列を平坦化する(Flatten multidimensional array)

var fruits = ['🍎', ['🍊', '🍊'], ['🥝', '🥝', ['🍌', '🍌'] ], '🍈'];

var flatFruits = fruits.flat(); // 1階層
console.log(flatFruits)
// ["🍎", "🍊", "🍊", "🥝", "🥝", Array(2), "🍈"]

var flatFruits = fruits.flat(2); // 2階層
console.log(flatFruits)
// ["🍎", "🍊", "🍊", "🥝", "🥝", "🍌", "🍌", "🍈"]

var flatFruits = fruits.flat(Infinity); // 全ての階層
console.log(flatFruits)
// ["🍎", "🍊", "🍊", "🥝", "🥝", "🍌", "🍌", "🍈"]

ObjectのKeyの有無

const obj = {}
Object.keys(obj).length // 0

const fruits = { orenge: '🍊', apple: '🍎' }
Object.keys(fruits).length // 2

False Filter

const fruits = ['🍊', null, undefined, 0, '0', '🍎', true, false];
fruits.filter(Boolean); // ["🍊", "0", "🍎", true]

条件式のショートカット

// instead of
if (fruit.shape) {
  return fruit.shape;
} else {
  return '🍎';
}

// use
return (fruit.shape || '🍎');

参考