寫代碼的時候總有重復的東西。次數(shù)多了，你就會想找捷徑。(代號伯納德肖)。
這類問題中有很大一部分解決起來甚至連庫都不用裝。下面就是我多年來收集的前 25 個捷徑和小技巧。1. 類型檢查小工具
JavaScript 不是強類型語言，對此我推薦的最佳解決方案是 TypeScript。但有時你只是想要一個簡單的類型檢查，這種時候 JavaScript 允許你使用“typeof”關鍵字。
“typeof”的問題在于，將其用于某些原語和函數(shù)時效果很好，但對于數(shù)組和對象來說，由于它們都被視為“對象”，因此很難把握它們之間的區(qū)別。
const isOfType = (() => {
// create a plain object with no prototype
const type = Object.create(null);
// check for null type
= x => x === null;
// check for undefined type
= x => x === undefined;
// check for nil type. Either null or undefined
= x => (x) || (x);
// check for strings and string literal type. e.g: 's', "s", `str`, new String()
= x => !(x) && (typeof x === 'string' || x instanceof String);
// check for number or number literal type. e.g: 12, 30.5, new Number()
= x => !(x)
&& (// NaN & Infinity have typeof "number" and this excludes that
(!isNaN(x) && isFinite(x)
&& typeof x === 'number'
) || x instanceof Number);
// check for boolean or boolean literal type. e.g: true, false, new Boolean()
= x => !(x) && (typeof x === 'boolean' || x instanceof Boolean);
// check for array type
= x => !(x) && Array.isArray(x);
// check for object or object literal type. e.g: {}, new Object(), Object.create(null)
= x => ({}).(x) === '[object Object]';
// check for provided type instance
= (x, X) => !(x) && x instanceof X;
// check for set type
= x => (x, Set);
// check for map type
= x => (x, Map);
// check for date type
= x => (x, Date);
return type;
})();
2. 檢查是否為空
有時你需要知道某些內容是否為空，并根據(jù)結果決定要使用的方法，例如檢查長度、大小或是否包含任何子元素。下面這個工具打包了這些功能，你可以用它檢查 String、Object、Array、Map 和 Set 的大小。
function isEmpty(x) {
i(x)
|| typeof x === 'string'
|| x instanceof String
) {
return x.length === 0;
}
if(x instanceof Map || x instanceof Set) {
return x.size === 0;
}
if(({}).(x) === '[object Object]') {
return Object.keys(x).length === 0;
}
return false;
}
3. 獲取列表最后一項
其他語言里這個功能被做成了可以在數(shù)組上調用的方法或函數(shù)，但在 JavaScript 里面，你得自己做點工作。
function lastItem(list) {
i(list)) {
return li(-1)[0];
}
if(list instanceof Set) {
return Array.from(list).slice(-1)[0];
}
if(list instanceof Map) {
return Array.from()).slice(-1)[0];
}
}
4. 帶有范圍的隨機數(shù)生成器
有時你需要生成隨機數(shù)，但希望這些數(shù)字在一定范圍內，那就可以用這個工具。
function randomNumber(max = 1, min = 0) {
if(min >= max) {
return max;
}
return Ma() * (max - min) + min);
}
5. 隨機 ID 生成器
有時你只是需要一些 ID？除非你要的是更復雜的 ID 生成器（例如 UUID），否則用不著為此安裝什么新庫，下面這個選項足夠了。你可以從當前時間（以毫秒為單位）或特定的整數(shù)和增量開始生成，也可以從字母生成 ID。
// create unique id starting from current time in milliseconds
// incrementing it by 1 everytime requested
const uniqueId = (() => {
const id = (function*() {
let mil = new Date().getTime();
while (true)
yield mil += 1;
})();
return () => id.next().value;
})();
// create unique incrementing id starting from provided value or zero
// good for temporary things or things that id resets
const uniqueIncrementingId = ((lastId = 0) => {
const id = (function*() {
let numb = lastId;
while (true)
yield numb += 1;
})()
return (length = 12) => `${id.next().value}`.padStart(length, '0');
})();
// create unique id from letters and numbers
const uniqueAlphaNumericId = (() => {
const heyStack = '0123456789abcdefghijklmnopqrstuvwxyz';
const randomInt = () => Ma() * Ma))
return (length = 24) => Array.from({length}, () => heyStack[randomInt()]).join('');
})();
6. 創(chuàng)建一個范圍內的數(shù)字
Python 里我很喜歡的一個功能是 range 函數(shù)，而在 JavaScript 里我經常需要自己寫這個功能。下面是一個簡單的實現(xiàn)，非常適合 for…of 循環(huán)以及需要特定范圍內數(shù)字的情況。
function range(maxOrStart, end = null, step = null) {
if(!end) {
return Array.from({length: maxOrStart}, (_, i) => i)
}
if(end <= maxOrStart) {
return [];
}
if(step !== null) {
return Array.from(
{length: Ma(((end - maxOrStart) / step))},
(_, i) => (i * step) + maxOrStart
);
}
return Array.from(
{length: Ma((end - maxOrStart))},
(_, i) => i + maxOrStart
);
}
7. 格式化 JSON 字符串，stringify 任何內容
我在使用 NodeJs 將對象記錄到控制臺時經常使用這種方法。JSON.stringify 方法需要第三個參數(shù)，該參數(shù)必須有多個空格以縮進行。第二個參數(shù)可以為 null，但你可以用它來處理 function、Set、Map、Symbol 之類 JSON.stringify 方法無法處理或完全忽略的內容。
const stringify = (() => {
const replacer = (key, val) => {
if(typeof val === 'symbol') {
return val.toString();
}
if(val instanceof Set) {
return Array.from(val);
}
if(val instanceof Map) {
return Array.from());
}
if(typeof val === 'function') {
return val.toString();
}
return val;
}
return (obj, spaces = 0) => JSON.stringify(obj, replacer, spaces)
})();
8. 順序執(zhí)行 promise
如果你有一堆異步或普通函數(shù)都返回 promise，要求你一個接一個地執(zhí)行，這個工具就會很有用。它會獲取函數(shù)或 promise 列表，并使用數(shù)組 reduce 方法按順序解析它們。
const asyncSequentializer = (() => {
const toPromise = (x) => {
if(x instanceof Promise) { // if promise just return it
return x;
}
if(typeof x === 'function') {
// if function is not async this will turn its result into a promise
// if it is async this will await for the result
return (async () => await x())();
}
return Promi(x)
}
return (list) => {
const results = [];
return list
.reduce((lastPromise, currentPromise) => {
return la(res => {
re(res); // collect the results
return toPromise(currentPromise);
});
}, toPromise()))
// collect the final result and return the array of results as resolved promise
.then(res => Promi([...results, res]));
}
})();
9. 輪詢數(shù)據(jù)
如果你需要持續(xù)檢查數(shù)據(jù)更新，但系統(tǒng)中沒有 WebSocket，則可以使用這個工具來執(zhí)行操作。它非常適合上傳文件時，想要持續(xù)檢查文件是否已完成處理的情況，或者使用第三方 API（例如 dropbox 或 uber）并且想要持續(xù)檢查過程是否完成或騎手是否到達目的地的情況。
async function poll(fn, validate, interval = 2500) {
const resolver = async (resolve, reject) => {
try { // catch any error thrown by the "fn" function
const result = await fn(); // fn does not need to be asynchronous or return promise
// call validator to see if the data is at the state to stop the polling
const valid = validate(result);
if (valid === true) {
resolve(result);
} else if (valid === false) {
setTimeout(resolver, interval, resolve, reject);
} // if validator returns anything other than "true" or "false" it stops polling
} catch (e) {
reject(e);
}
};
return new Promise(resolver);
}
10. 等待所有 promise 完成
這個算不上是代碼解決方案，更多是對 Promise API 的強化。這個 API 在不斷進化，以前我還為“allSettled”“race”和“any”做了代碼實現(xiàn)，現(xiàn)在直接用 API 的就好了。
11. 交換數(shù)組值的位置
ES6 開始，從數(shù)組中的不同位置交換值變得容易多了。這個做起來不難，但是了解一下也不錯，
12. 條件對象鍵
我最喜歡這條技巧了，我在使用 React 更新狀態(tài)時經常用它。你可以將條件包裝在括號中來有條件地將一個鍵插入一個 spread 對象。
13. 使用變量作為對象鍵
當你有一個字符串變量，并想將其用作對象中的鍵以設置一個值時可以用它。
14. 檢查對象里的鍵
這是一個很好的技巧，可以幫助你檢查對象鍵。
15. 刪除數(shù)組重復項
數(shù)組中經常有重復的值，你可以使用 Set 數(shù)據(jù)結構來消除它。它適用于許多數(shù)據(jù)類型，并且 set 有多種檢查相等性的方法，很好用。對于不同實例或對象的情況，你還是可以使用 Set 來跟蹤特定事物并過濾出重復的對象。
16. 在 ArrayforEach 中執(zhí)行“break”和“continue”
我真的很喜歡使用數(shù)組“.forEach”方法，但有時我需要提早退出或繼續(xù)進行下一個循環(huán)，而不想用 for...loop。你可以復制“continue”語句行為來提前返回，但如果要復制“break”行為，則需要使用數(shù)組“.some”方法。
17. 使用別名和默認值來銷毀
Destructuring（銷毀）是 JavaScript 最好用的功能之一，而且你可以使用“冒號”設置別名，并使用“等號”設置屬性默認值。
18. 可選鏈和空值合并
深入檢查對象屬性并處理 null 和 undefined 值時，你可以使用幾個非常好用的 JavaScript 功能來解決常見的問題。
19. 用函數(shù)擴展類
我經常對別人講，JavaScript 類只是構造函數(shù)和底層的原型，不是像 Java 中那樣的真實概念。一個證據(jù)是，你可以只使用一個構造函數(shù)來擴展一個類。在私有內容里這個很好用，在類里“#”這些看著很奇怪，并且用于 babel 或 WebPack 時，編譯出來的代碼更少。
20. 擴展構造函數(shù)
類的一個問題是你只能擴展一個其他類。使用構造函數(shù)，你可以使用多個構造函數(shù)來構成一個函數(shù)，這樣就會靈活多了。你可以使用函數(shù)原型的.apply 或.call 方法來實現(xiàn)。你甚至可以只擴展函數(shù)的一部分，只要它是一個對象即可。
21. 循環(huán)任何內容
有時，你需要循環(huán)任何可迭代的內容（Set、Map、Object、Array、String 等）。這個非常簡單的 forEach 函數(shù)工具就可以做到這一點。如果回調返回 true，它將退出循環(huán)。
function forEach(list, callback) {
const entries = Object.entries(list);
let i = 0;
const len = en;
for(;i < len; i++) {
const res = callback(entries[i][1], entries[i][0], list);
if(res === true) break;
}
}
22. 使函數(shù)參數(shù)為 required
這是一種確保函數(shù)調用了完成工作所需內容的絕佳方法。你可以使用默認參數(shù)值的特性來調用函數(shù)，然后就會拋出一個錯誤。如果調用該函數(shù)時帶上了它需要的值，則該值將替換該函數(shù)，并且什么也不會發(fā)生。使用 undefined 調用也有相同的效果。
function required(argName = 'param') {
throw new Error(`"${argName}" is required`)
}
function iHaveRequiredOptions(arg1 = required('arg1'), arg2 = 10) {
con(arg1, arg2)
}
iHaveRequiredOptions(); // throws "arg1" is required
iHaveRequiredOptions(12); // prints 12, 10
iHaveRequiredOptions(12, 24); // prints 12, 24
iHaveRequiredOptions(undefined, 24); // throws "arg1" is required
23. 創(chuàng)建模塊或單例
很多時候，你需要在加載時初始化某些內容，設置它需要的各種事物，然后就可以在應用程序中到處使用它，而無需再做什么補充工作。你可以使用 IIFE 函數(shù)來做到這一點，這個函數(shù)太好用了。這種模塊模式用來隔離事物非常好用，它可以只暴露需要交互的內容。
24. 深度克隆對象
開發(fā)人員通常會安裝一些類似“l(fā)odash”的庫來執(zhí)行這一操作，但使用純 JavaScript 來實現(xiàn)確實也很容易。這是一個簡單的遞歸函數(shù)：只要是一個對象，就使用函數(shù)的構造器將其重新初始化為一個克隆，然后對所有屬性重復該過程。
const deepClone = obj => {
let clone = obj;
if (obj && typeof obj === "object") {
clone = new obj.constructor();
Object.getOwnpropertyNames(obj).forEach(
prop => (clone[prop] = deepClone(obj[prop]))
);
}
return clone;
};
25. 深度凍結對象
如果你喜歡不變性，那么這個工具你一定要常備。
const deepClone = obj => {
let clone = obj;
if (obj && typeof obj === "object") {
clone = new obj.constructor();
Object.getOwnPropertyNames(obj).forEach(
prop => (clone[prop] = deepClone(obj[prop]))
);
}
return clone;
};
原文鏈接：
25 Javascript Code Solutions Utility Tricks You Need to Know About
延伸閱讀：
2021 年，這8種編程語言最流行-InfoQ
關注我并轉發(fā)此篇文章，即可獲得學習資料~若想了解更多，也可移步InfoQ官網，獲取InfoQ最新資訊～
1.《關于0123456789叫什么鍵，你需要知道這些干貨 | 你應該了解的25個JS技巧》援引自互聯(lián)網，旨在傳遞更多網絡信息知識，僅代表作者本人觀點，與本網站無關，侵刪請聯(lián)系頁腳下方聯(lián)系方式。
2.《關于0123456789叫什么鍵，你需要知道這些干貨 | 你應該了解的25個JS技巧》僅供讀者參考，本網站未對該內容進行證實，對其原創(chuàng)性、真實性、完整性、及時性不作任何保證。
3.文章轉載時請保留本站內容來源地址，http://f99ss.com/gl/2144648.html
![關于0123456789叫什么鍵，你需要知道這些[C4D干貨]遇到問題不用慌，10個新手問題匯總，快收藏起來吧！](/d/file/ap/00/f1/2129790.jpg)
