站長資訊網(wǎng)
我們知道，JavaScript 這門語言正在高速發(fā)展中。伴隨著 ES2020，又有很多很棒的功能加入。老實說，您可以通過許多不同的方式編寫代碼。實現(xiàn)同樣一個功能，有的代碼很長而有的卻很短。你可以通過一些小技巧來讓你的代碼更干凈清晰。下面這些小技巧肯定對你接下來的開發(fā)工作有所用處。
函數(shù)參數(shù)驗證器
JavaScript 允許你對函數(shù)參數(shù)設(shè)置默認(rèn)值。通過這個特性，我們可以實現(xiàn)一個小技巧來驗證函數(shù)參數(shù)。
const isRequired = () => { throw new Error('param is required'); }; const print = (num = isRequired()) => { console.log(`printing ${num}`) }; print(2); //printing 2print(); // errorprint(null); //printing null
格式化 JSON 代碼
你肯定對 JSON.stringify 非常熟悉了，但是你知道嗎，你也可以通過 stringify 方法格式化你的代碼。其實這很簡單。
stringify 方法有三個參數(shù)，分別是 value replacer 和 space。后面兩個參數(shù)是可選的，所以我們平常也不會用到它們。想要縮進(jìn)輸出的代碼，我們可以使用2個空格 ，或者4個空格。
console.log(JSON.stringify({ name:"John", Age:23 }, null, ' ')); >>> { "name": "John", "Age": 23}
對數(shù)組去重
以往對數(shù)組去重我們會使用 filter 函數(shù)來過濾掉重復(fù)的值。但是現(xiàn)在我們可以使用新的 Set 特性來過濾。非常簡單：
let uniqueArray = [...new Set([1, 2, 3, 3, 3, "school", "school", 'ball', false, false, true, true])]; >>> [1, 2, 3, "school", "ball", false, true]
去除數(shù)組中的 Boolean(v) 為 false 的值
有時候你想刪除數(shù)組中 Boolean(v) 為 false 的值。在 JavaScript 中只有以下 6 種：
undefinednullNaN0- 空字符串
false
去除這些值最簡單的辦法是使用下面的方法：
array.filter(Boolean)
如果你想先做一些更改然后再過濾，你可以用下面的方法。要記住，原始數(shù)組 array 是一直沒變的，返回的是一個新數(shù)組。
array .map(item => { // Do your changes and return the new item }) .filter(Boolean);
同時合并多個對象
如果需要同時合并多個對象或者類，可以用下面這種方法。
const user = { name: "John Ludwig", gender: "Male", };const college = { primary: "Mani Primary School", secondary: "Lass Secondary School", };const skills = { programming: "Extreme", swimming: "Average", sleeping: "Pro", };const summary = { ...user, ...college, ...skills }; >>> { name: 'John Ludwig', gender: 'Male', primary: 'Mani Primary School', secondary: 'Lass Secondary School', programming: 'Extreme', swimming: 'Average', sleeping: 'Pro'}
三個點也叫擴展操作符。
對數(shù)字?jǐn)?shù)組排序
JavaScript 數(shù)組有一個原生的排序方法 arr.sort。 這個排序方法默認(rèn)把數(shù)組元素轉(zhuǎn)換成字符串，并對其進(jìn)行字典序排序。這個默認(rèn)行為會在排序數(shù)字?jǐn)?shù)組時出現(xiàn)問題，所以下面有一個辦法來處理這個問題。
[0, 10, 4, 9, 123, 54, 1].sort() >>> [0, 1, 10, 123, 4, 54, 9] [0, 10, 4, 9, 123, 54, 1].sort((a,b) => a-b); >>> [0, 1, 4, 9, 10, 54, 123]
禁用右鍵
有時候你可能想要禁止用戶點擊右鍵。雖然這個需求很少見，但是可能派的上用場。
<body oncontextmenu="return false"> <p></p> </body>
這個簡單的代碼片段就可以禁止用戶點擊右鍵了。
解構(gòu)時重命名
解構(gòu)賦值是 JavaScript 的一個特性，它允許直接從數(shù)組或者對象中獲取值，而不需要繁瑣的聲明變量再賦值。對對象來講，我們可以通過下面這種方式來給屬性名重新定義一個名字。
const object = { number: 10 };// Grabbing numberconst { number } = object;// Grabbing number and renaming it as otherNumberconst { number: otherNumber } = object;console.log(otherNumber); // 10
獲取數(shù)組中的最后一項
如果你想獲取數(shù)組中的最后一項，你可以使用 slice 函數(shù)，同時帶上一個負(fù)數(shù)作為參數(shù)。
let array = [0, 1, 2, 3, 4, 5, 6, 7] console.log(array.slice(-1)); >>>[7]console.log(array.slice(-2)); >>>[6, 7]console.log(array.slice(-3)); >>>[5, 6, 7]
等待 Promises 全部執(zhí)行完成
有時候你可能需要等待幾個 promise 都執(zhí)行完然后進(jìn)行后面的操作。你可以使用 Promise.all 來并行執(zhí)行這些 promise。
const PromiseArray = [ Promise.resolve(100), Promise.reject(null), Promise.resolve("Data release"), Promise.reject(new Error('Something went wrong'))];Promise.all(PromiseArray) .then(data => console.log('all resolved! here are the resolve values:', data)) .catch(err => console.log('got rejected! reason:', err))
要注意，只要 Promise.all 中有一個是 rejected 狀態(tài)時，其會立即停止執(zhí)行并拋出異常。
如果你想忽略 resolved 或者 rejected 狀態(tài)，你可以使用 Promise.allSettled。這個是 ES2020 的一個新特性。
const PromiseArray = [ Promise.resolve(100), Promise.reject(null), Promise.resolve("Data release"), Promise.reject(new Error("Something went wrong")), ];Promise.allSettled(PromiseArray) .then((res) => { console.log("here", res); }) .catch((err) => console.log(err)); >>> here [ { status: 'fulfilled', value: 100 }, { status: 'rejected', reason: null }, { status: 'fulfilled', value: 'Data release' }, { status: 'rejected', reason: Error: Something went wrong at Object.<anonymous> at Module._compile (internal/modules/cjs/loader.js:1200:30) at Object.Module._extensions..js (internal/modules/cjs/loader.js:1220:10) at Module.load (internal/modules/cjs/loader.js:1049:32) at Function.Module._load (internal/modules/cjs/loader.js:937:14) at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:71:12) at internal/main/run_main_module.js:17:47 } ]
推薦教程：《JS教程》
