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