【JavaScript】ライブラリ化しておく便利な3つの自作共通関数を記録

12085 ワード
JavaScript es6 ECMAScript Node.js 初心者 JavaScript テキストリンク

前提

  • ※記載の共通関数は、各環境によって動作しない場合がある。
    →ES2015からES2019で利用できるメソッドも利用しているため

1. chunk

  • 指定の数に応じて、対象配列を分割する関数

コード

lib.js
const chunk = (arr = [], size = 3) => {
    return Array.from({
        length: Math.ceil(arr.length / size)
    }, (v, k) => arr.slice(k * size, k * size + size))
}

使い方

index.js
import { chunk } from './lib.js'

// 対象配列定義
const target = [1,2,3,4,5,6];

// 利用 : chunk(対象配列, 分割サイズ)
console.log(chunk(target,2));
console.log(chunk(target,4));

/*
出力結果: 
[ [ 1, 2 ], [ 3, 4 ], [ 5, 6 ] ]
[ [ 1, 2, 3, 4 ], [ 5, 6 ] ]
*/

内容

  • 処理内容としては下記。
    • 1. 引数から受け取る値から、対象配列の分割数を求める。
    • 2. 求めた分割数からlengthプロパティを持つ配列風オブジェクトを作成
    • 3. 作成した配列風オブジェクトの各値に対して、from処理で反復slice処理と変換を行う。

1. diff

  • 指定の各配列の差分を求める関数
  • つまり、重複していない一意の値を求める。

コード

lib.js
const diff = (...manyArgs) => {
  const targetArr = manyArgs.flat();
  const map = new Map();
  targetArr.forEach(a => map.set(a, (map.get(a) || 0) + 1));
  return targetArr.filter(a => map.get(a) === 1);
}

使い方

index.js
import { diff } from './lib.js'

// 対象配列定義
const first = [1,2,3,4,5];
const second = [1,2,3];
const third = [5,6,7];

// 利用 : diff(対象配列1, 対象配列2, ...)
console.log(diff(first,second));
console.log(diff(first,second,third));

/*
出力結果: 
[4,5]
[4,6,7]
*/

内容

  • 処理内容としては下記。
    • 1. 可変引数で受け取った二次元配列をflat処理で一次元に変換
    • 2. map定義して、反復処理で各値に存在確認処理を行った値を格納していく。
    • 3. 格納したmapの値によって、一次元化した配列に対してfilter処理を行う。

1. filterObj

  • 指定の条件で対象のオブジェクトを選別(フィルタリング)する関数

コード

lib.js
const filterObj = (target,condition) => {
  return Object.fromEntries(Object.entries(target).filter(condition))
}

使い方

index.js
import { filterObj } from './lib.js'

// 対象オブジェクト定義
const obj = {
  id: 11,
  name: '',
  score: 89,
  hasSkill: false
}

// 利用 : filterObj(対象オブジェクト, 条件)
console.log(filterObj(obj, ([key,value]) => value === 11));
console.log(filterObj(obj, ([key,value]) => !!value)); // 値が正のものを抽出

/*
出力結果: 
{ id: 11 }
{ name: 't-o-d', score: 80 }
*/

内容

  • 記載している処理内容としては下記。
    • 1. 第一引数で受け取ったオブジェクトをentries処理で配列へ変換。
    • 2. 変換した配列に対して、第二引数で受け取った条件式でfilter処理を行う。
    • 3. fromEntries処理で、再度オブジェクトへの変換処理を行う。

参考

Vueプロジェクトの環境別パッケージ
(一)elasticsearch 5 xインデックス作成、修正及びテンプレート使用