LoginSignup
2
3

More than 3 years have passed since last update.

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

Posted at

前提

  • ※記載の共通関数は、各環境によって動作しない場合がある。
    →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処理で、再度オブジェクトへの変換処理を行う。

参考

2
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
3