分享7 個實用 TypeScript 單行代碼
前言:
一般更少的代碼通常意味著是更好的代碼,因此,今天,我將跟大傢分享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 單行代碼內容請搜索LevelAH以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持LevelAH!
推薦閱讀:
- Manipulation-TypeScript DOM操作示例解析
- 關於對TypeScript泛型參數的默認值理解
- TypeScript語法詳解之類型操作的補充
- typescript快速上手的基礎知識篇
- 詳解Typescript裡的This的使用方法