1. 類型檢查小工具
JavaScript 不是強類型語言，對此我推薦的最佳解決方案是 TypeScript。但有時你只是想要一個簡單的類型檢查，這種時候 JavaScript 允許你使用“typeof”關鍵字。
“typeof”的問題在于，將其用于某些原語和函數時效果很好，但對于數組和對象來說，由于它們都被視為“對象”，因此很難把握它們之間的區(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. 檢查是否為空
有時你需要知道某些內容是否為空，并根據結果決定要使用的方法，例如檢查長度、大小或是否包含任何子元素。下面這個工具打包了這些功能，你可以用它檢查 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. 獲取列表最后一項
其他語言里這個功能被做成了可以在數組上調用的方法或函數，但在 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. 帶有范圍的隨機數生成器
有時你需要生成隨機數，但希望這些數字在一定范圍內，那就可以用這個工具。
function randomNumber(max = 1, min = 0) {
if(min >= max) {
return max;
}
return Ma() * (max - min) + min);
}
5. 隨機 ID 生成器
有時你只是需要一些 ID？除非你要的是更復雜的 ID 生成器（例如 UUID），否則用不著為此安裝什么新庫，下面這個選項足夠了。你可以從當前時間（以毫秒為單位）或特定的整數和增量開始生成，也可以從字母生成 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)建一個范圍內的數字
Python 里我很喜歡的一個功能是 range 函數，而在 JavaScript 里我經常需要自己寫這個功能。下面是一個簡單的實現，非常適合 for…of 循環(huán)以及需要特定范圍內數字的情況。
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 方法需要第三個參數，該參數必須有多個空格以縮進行。第二個參數可以為 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
如果你有一堆異步或普通函數都返回 promise，要求你一個接一個地執(zhí)行，這個工具就會很有用。它會獲取函數或 promise 列表，并使用數組 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. 輪詢數據
如果你需要持續(xù)檢查數據更新，但系統(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”做了代碼實現，現在直接用 API 的就好了。
11. 交換數組值的位置
ES6 開始，從數組中的不同位置交換值變得容易多了。這個做起來不難，但是了解一下也不錯，
12. 條件對象鍵
我最喜歡這條技巧了，我在使用 React 更新狀態(tài)時經常用它。你可以將條件包裝在括號中來有條件地將一個鍵插入一個 spread 對象。
13. 使用變量作為對象鍵
當你有一個字符串變量，并想將其用作對象中的鍵以設置一個值時可以用它。
14. 檢查對象里的鍵
這是一個很好的技巧，可以幫助你檢查對象鍵。
15. 刪除數組重復項
數組中經常有重復的值，你可以使用 Set 數據結構來消除它。它適用于許多數據類型，并且 set 有多種檢查相等性的方法，很好用。對于不同實例或對象的情況，你還是可以使用 Set 來跟蹤特定事物并過濾出重復的對象。
16. 在 ArrayforEach 中執(zhí)行“break”和“continue”
我真的很喜歡使用數組“.forEach”方法，但有時我需要提早退出或繼續(xù)進行下一個循環(huán)，而不想用 for...loop。你可以復制“continue”語句行為來提前返回，但如果要復制“break”行為，則需要使用數組“.some”方法。
17. 使用別名和默認值來銷毀
Destructuring（銷毀）是 JavaScript 最好用的功能之一，而且你可以使用“冒號”設置別名，并使用“等號”設置屬性默認值。
18. 可選鏈和空值合并
深入檢查對象屬性并處理 null 和 undefined 值時，你可以使用幾個非常好用的 JavaScript 功能來解決常見的問題。
19. 用函數擴展類
我經常對別人講，JavaScript 類只是構造函數和底層的原型，不是像 Java 中那樣的真實概念。一個證據是，你可以只使用一個構造函數來擴展一個類。在私有內容里這個很好用，在類里“#”這些看著很奇怪，并且用于 babel 或 WebPack 時，編譯出來的代碼更少。
20. 擴展構造函數
類的一個問題是你只能擴展一個其他類。使用構造函數，你可以使用多個構造函數來構成一個函數，這樣就會靈活多了。你可以使用函數原型的.apply 或.call 方法來實現。你甚至可以只擴展函數的一部分，只要它是一個對象即可。
21. 循環(huán)任何內容
有時，你需要循環(huán)任何可迭代的內容（Set、Map、Object、Array、String 等）。這個非常簡單的 forEach 函數工具就可以做到這一點。如果回調返回 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. 使函數參數為 required
這是一種確保函數調用了完成工作所需內容的絕佳方法。你可以使用默認參數值的特性來調用函數，然后就會拋出一個錯誤。如果調用該函數時帶上了它需要的值，則該值將替換該函數，并且什么也不會發(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 函數來做到這一點，這個函數太好用了。這種模塊模式用來隔離事物非常好用，它可以只暴露需要交互的內容。
24. 深度克隆對象
開發(fā)人員通常會安裝一些類似“l(fā)odash”的庫來執(zhí)行這一操作，但使用純 JavaScript 來實現確實也很容易。這是一個簡單的遞歸函數：只要是一個對象，就使用函數的構造器將其重新初始化為一個克隆，然后對所有屬性重復該過程。
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技巧》援引自互聯網，旨在傳遞更多網絡信息知識，僅代表作者本人觀點，與本網站無關，侵刪請聯系頁腳下方聯系方式。
2.《0123456789叫什么鍵看這里!干貨 | 你應該了解的25個JS技巧》僅供讀者參考，本網站未對該內容進行證實，對其原創(chuàng)性、真實性、完整性、及時性不作任何保證。
3.文章轉載時請保留本站內容來源地址，http://f99ss.com/gl/2140100.html
![關于0123456789叫什么鍵，你需要知道這些[C4D干貨]遇到問題不用慌，10個新手問題匯總，快收藏起來吧！](/d/file/ap/00/f1/2129790.jpg)
