lodashを自作で代替していく

from lodash

代替品

you-dont-need/You-Dont-Need-Lodash-Underscore

https://qiita.com/ossan-engineer/items/ad5313d84da82c6ac421

range

引数1個のときはこれで

code:ts

export const range = (n1: number, n2?: number) => {

if (n2 == null) {

return ...new Array(n1).keys();

}

const start = n1;

const end = n2;

return ...Array(end - start + 1).map((_, i) => start + i);

};

stackoverfolowにあったが、元のLodashとは引数の順番が入れ替わってて非直感的だな

code:ts

export const range = (size: number, startAt = 0) =>

...Array(size).keys().map(i => i + startAt);

こういうインターフェースにしたいんだよな〜

code:ts

type F = (start:number, end:number, step:number) => number[]

uniqBy()

sortBy()

flatten

code:ts

export function flatten1<T>(xs: (T | T[])[]): T[];

export function flatten1<T>(xs: T[][]): T[] {

return xs.reduce(

(acc: T[], e: T[]) => (Array.isArray(e) ? ...acc, ...e : ...acc, e),

[]

);

}

取り急ぎ、level1のflatのみをする関数

debounce

code:ts

// debounce

export const debounce = (fn: (...args: any[]) => void, time: number) => {

let timeoutId: number | null;

return wrapper;

function wrapper(...args: any[]) {

if (timeoutId != null) {

clearTimeout(timeoutId);

}

timeoutId = setTimeout(() => {

timeoutId = null;

fn(...args);

}, time);

}

};

これ気をつけないといけない

例えば1000を指定すると、連打している間は、大丈夫だが、１回クリックしてそのちょうど1s後ぐらいにクリックすると行けてしまう

keyBy

正規化する

code:ts

const keyBy = <T, K extends string | number, R extends { key in keyof T: T }>(

arr: T[],

key: (e: T) => K

) => arr.reduce((acc, cur) => ({ ...acc, key(cur): cur }), {} as R);

code:使用例.ts

const obj = id: 1, value: 'hoge' }, { id: 2, value: 'piyo' }, { id: 3, value: 'pien' };

keyBy(obj, a => a.id);

// {

// '1': { id: 1, value: 'hoge' },

// '2': { id: 2, value: 'piyo' },

/// '3': { id: 3, value: 'pien' }

// }