1、底部可见
2、块数组
3、mask
4、on / off
5、getUUID
6、once
7、数据库
前言：
一般更少的代码通常意味着是更好的代码，因此，今天，我将跟大家分享7个TypeScript的单行代码，其中不乏泛型、断言等高级用法，希望对大家有所帮助。
1、底部可见确定页面底部是否可见。
const bottomVisible = (): boolean =>
document.documentElement.clientHeight + window.scrollY >=
(document.documentElement.clientHeight ||
document.documentElement.scrollHeight);
2、块数组
基于传入大小的块数组。
const chunkArray = <T>(arr: T[], size: number) =>
[...new Array(Math.ceil(arr.length / size))].map((_, i) =>
arr.slice(i * size, (i + 1) * size),
);
// [ [ 0, 1 ], [ 2, 3 ], [ 4 ] ]
console.log(chunkArray([0, 1, 2, 3, 4], 2));
// [ [ 0, 1, 2, 3, 4 ] ]
console.log(chunkArray([0, 1, 2, 3, 4], 100));
3、mask
加密字符，可以选择末尾保留字符的个数，也可以自定义加密字符。
const mask = (char: number | string, num = 0, mask = '*') =>
String(char).slice(-num).padStart(String(char).length, mask);
console.log(mask('123')); // 123
console.log(mask('123456789', 4)); // *****6789
console.log(mask('123456789', 3, '#')); // ######789
4、on / off
为 DOM 元素或事件委托对象添加/删除事件侦听器，无需 addEventListener/removeEventListener 的麻烦。
const on = <T extends Window | Document | HTMLElement | EventTarget>(
obj: T | null,
...args: Parameters<T['addEventListener']> | [string, Function | null, ...any]
): void => {
obj?.addEventListener?.(
...(args as Parameters<HTMLElement['addEventListener']>),
);
};
const off = <T extends Window | Document | HTMLElement | EventTarget>(
obj: T | null,
...args:
| Parameters<T['removeEventListener']>
| [string, Function | null, ...any]
): void => {
obj?.removeEventListener?.(
...(args as Parameters<HTMLElement['removeEventListener']>),
);
};
5、getUUID
使用浏览器中可用的加密 API 生成符合 RFC4122 版本 4 的 UUID。
const getUUID = () =>
(String(1e7) + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, (c) =>
(
Number(c) ^
(crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (Number(c) / 4)))
).toString(16),
);
console.log(getUUID());
6、once
执行一次函数。
const once = <T extends (...args: any) => any>(fn: T) =>
(
(ran = false) =>
(): ReturnType<T> =>
ran ? fn : ((ran = !ran), (fn = fn()))
)();
let n = 1;
const incOnce = once(() => ++n);
console.log(incOnce()); // 2
console.log(incOnce()); // 2
console.log(incOnce()); // 2
console.log('n: ', n); // n: 2
7、数据库
将输入字符串散列成一个整数。
const sdbm = (str: string) =>
str
.split('')
.reduce(
(acc, cur) => (acc = cur.charCodeAt(0) + (acc << 6) + (acc << 16) - acc),
0,
);
console.log(sdbm('Hello')); // -1421493998
console.log(sdbm('Hello')); // -1421493998
console.log(sdbm('World')); // -2242392430
到此这篇关于分享7 个实用 TypeScript 单行代码的文章就介绍到这了,更多相关TypeScript 单行代码内容请搜索易知道(ezd.cc)以前的文章或继续浏览下面的相关文章希望大家以后多多支持易知道(ezd.cc)！
