你可能會錯過這些非常有用的技巧。
譯自 10 Super Useful Tricks for JavaScript Developers，作者 Mahdhi Rezvi。
我們知道，JavaScript 這門語言正在高速發展中。伴隨著 ES2020，又有很多很棒的功能加入。老實說，您可以透過許多不同的方式編寫程式碼。實作同樣一個功能，有的程式碼很長而有的卻很短。你可以透過一些小技巧來讓你的程式碼更乾淨清晰。下面這些小技巧肯定對你接下來的開發工作有所用處。
JavaScript 允許你對函數參數設定預設值。透過這個特性，我們可以實作一個小技巧來驗證函數參數。
const isRequired = () => { throw new Error('param is required'); };
const print = (num = isRequired()) => { console.log(`printing ${num}`) };
print(2); //printing 2
print(); // error
print(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"> <div></div> </body>
const object = { number: 10 };
// Grabbing number
const { number } = object;
// Grabbing number and renaming it as otherNumber
const { number: otherNumber } = object;
console.log(otherNumber); // 10slice 函數，同時帶著一個負數作為參數。
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中文網其他相關文章！
