我們知道,JavaScript 這門語言正在高速發展中。伴隨著 ES2020,又有很多很棒的功能加入。老實說,您可以透過許多不同的方式編寫程式碼。實作同樣一個功能,有的程式碼很長而有的卻很短。你可以透過一些小技巧來讓你的程式碼更乾淨清晰。下面這些小技巧肯定對你接下來的開發工作有所用處。
JavaScript 允許你對函數參數設定預設值。透過這個特性,我們可以實作一個小技巧來驗證函數參數。
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.stringify
非常熟悉了,但是你知道嗎,你也可以透過stringify
方法格式化你的程式碼。其實這很簡單。
stringify
方法有三個參數,分別是 value
replacer
和 space
。後面兩個參數是可選的,所以我們通常也不會用到它們。想要縮排輸出的程式碼,我們可以使用2個空格 ,或4個空格。
console.log(JSON.stringify({ name:"John", Age:23 }, null, ' ')); >>> { "name": "John", "Age": 23}
以往對陣列去重我們會使用 filter
函數來過濾掉重複的值。但是現在我們可以使用新的 Set
特性來過濾。非常簡單:
let uniqueArray = [...new Set([1, 2, 3, 3, 3, "school", "school", 'ball', false, false, true, true])]; >>> [1, 2, 3, "school", "ball", false, true]
有時候你想刪除數組中Boolean(v)
為false
的值。在JavaScript 中只有以下6 個:
undefined
#null
array.filter(Boolean)如果你想先做一些更改然後再過濾,你可以用下面的方法。要記住,原始陣列
array 是一直沒變的,傳回的是一個新陣列。
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'}三個點也叫擴充運算子。
arr.sort。這個排序方法預設把陣列元素轉換成字串,並對其進行字典序排序。這個預設行為會在排序數字數組時出現問題,所以下面有一個方法來處理這個問題。
[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>這個簡單的程式碼片段就可以禁止使用者點擊右鍵了。
const object = { number: 10 };// Grabbing numberconst { number } = object;// Grabbing number and renaming it as otherNumberconst { number: otherNumber } = object;console.log(otherNumber); // 10
slice 函數,同時帶上一個負數作為參數。
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]
Promise.all 來並行執行這些 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 狀態時,其會立即停止執行並拋出例外。
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教學》
以上是JavaScript 開發者常用的 10 個技巧的詳細內容。更多資訊請關注PHP中文網其他相關文章!