???????分享7?個(gè)實(shí)用?TypeScript?單行代碼
前言:
一般更少的代碼通常意味著是更好的代碼,因此,今天,我將跟大家分享7個(gè)TypeScript的單行代碼,其中不乏泛型、斷言等高級(jí)用法,希望對(duì)大家有所幫助。
1、底部可見
確定頁(yè)面底部是否可見。
const bottomVisible = (): boolean => document.documentElement.clientHeight + window.scrollY >= (document.documentElement.clientHeight || document.documentElement.scrollHeight);
2、塊數(shù)組
基于傳入大小的塊數(shù)組。
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
加密字符,可以選擇末尾保留字符的個(gè)數(shù),也可以自定義加密字符。
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 元素或事件委托對(duì)象添加/刪除事件偵聽器,無需 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
執(zhí)行一次函數(shù)。
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、數(shù)據(jù)庫(kù)
將輸入字符串散列成一個(gè)整數(shù)。
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
到此這篇關(guān)于分享7 個(gè)實(shí)用 TypeScript 單行代碼的文章就介紹到這了,更多相關(guān)TypeScript 單行代碼內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
javascript設(shè)計(jì)模式 – 工廠模式原理與應(yīng)用實(shí)例分析
這篇文章主要介紹了javascript設(shè)計(jì)模式 – 工廠模式,結(jié)合實(shí)例形式分析了javascript工廠模式基本概念、原理、定義、應(yīng)用場(chǎng)景及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下2020-04-04Javascript學(xué)習(xí)筆記-詳解in運(yùn)算符
in運(yùn)算符是javascript語(yǔ)言中比較特殊的一個(gè),可以單獨(dú)使用作為判斷運(yùn)算符,也常被用于for...in循環(huán)中遍歷對(duì)象屬性2011-09-09JavaScript創(chuàng)建一個(gè)歡迎cookie彈出窗實(shí)現(xiàn)代碼
歡迎cookie想必大家早有耳聞,利用cookie記錄用戶狀態(tài)信息,當(dāng)用戶再次訪問的時(shí)候彈出歡迎框,個(gè)人感覺還不錯(cuò)吧,希望對(duì)你學(xué)習(xí)cookie有所幫助2013-03-03layui(1.0.9)文件上傳upload,前后端的實(shí)例代碼
今天小編就為大家分享一篇layui(1.0.9)文件上傳upload,前后端的實(shí)例代碼,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-09-09javascript實(shí)現(xiàn)了照片拖拽點(diǎn)擊置頂?shù)恼掌瑝Υa
這篇文章主要介紹了javascript實(shí)現(xiàn)了照片拖拽點(diǎn)擊置頂?shù)恼掌瑝Υa,效果非常不錯(cuò),這里推薦給大家,有需要的小伙伴可以參考下。2015-04-04淺談javascript中的prototype和__proto__的理解
這篇文章主要介紹了淺談javascript中的prototype和__proto__的理解,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04