2020-5-6 seo達人
方法參數的驗證
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 代碼
你可能對 JSON.stringify 非常熟悉。但是你是否知道可以用 stringify 進行格式化輸出？實際上這很簡單。
stringify 方法需要三個輸入。 value，replacer 和 space。后兩個是可選參數。這就是為什么我們以前沒有注意過它們。要對 json 進行縮進，必須使用 space 參數。
console.log(JSON.stringify({name:"John",Age:23},null,'\t'));
>>>
{
"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]
從數組中刪除虛值（Falsy Value）
在某些情況下，你可能想從數組中刪除虛值。虛值是 JavaScript 的 Boolean 上下文中被認定為為 false 的值。 JavaScript 中只有六個虛值，它們是：
undefined
null
NaN
0
"" （空字符串）
false
濾除這些虛值的最簡單方法是使用以下函數。
myArray.filter(Boolean);
如果要對數組進行一些修改，然后過濾新數組，可以嘗試這樣的操作。請記住，原始的 myArray 會保持不變。
myArray
.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};
這三個點在 JavaScript 中也稱為展開運算符。你可以在這里學習更多用法。
對數字數組進行排序
JavaScript 數組有內置的 sort 方法。默認情況下 sort 方法把數組元素轉換為字符串，并對其進行字典排序。在對數字數組進行排序時，這有可能會導致一些問題。所以下面是解決這類問題的簡單解決方案。
[0,10,4,9,123,54,1].sort((a,b) => a-b);
>>> [0, 1, 4, 9, 10, 54, 123]
這里提供了一個將數字數組中的兩個元素與 sort 方法進行比較的函數。這個函數可幫助我們接收正確的輸出。
Disable Right Click
禁用右鍵
你可能想要阻止用戶在你的網頁上單擊鼠標右鍵。
<body oncontextmenu="return false">
<div></div>
</body>
這段簡單的代碼將為你的用戶禁用右鍵單擊。
使用別名進行解構
解構賦值語法是一種 JavaScript 表達式，可以將數組中的值或對象的值或屬性分配給變量。解構賦值能讓我們用更簡短的語法進行多個變量的賦值。
const object = { number: 10 };
// Grabbing number
const { number } = object;
// Grabbing number and renaming it as otherNumber
const { number: otherNumber } = object;
console.log(otherNumber); //10
獲取數組中的最后一項
可以通過對 splice 方法的參數傳入負整數，來數獲取組末尾的元素。
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 完成
在某些情況下，你可能會需要等待多個 promise 結束?？梢杂?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 的主要注意事項是，當一個 Promise 拒絕時，該方法將引發錯誤。這意味著你的代碼不會等到你所有的 promise 都完成。
如果你想等到所有 promise 都完成后，無論它們被拒絕還是被解決，都可以使用 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(res);
}).catch(err => console.log(err));
//[
//{status: "fulfilled", value: 100},
//{status: "rejected", reason: null},
//{status: "fulfilled", value: "Data release"},
//{status: "rejected", reason: Error: Something went wrong ...}
//]
即使某些 promise 被拒絕，Promise.allSettled 也會從你所有的 promise 中返回結果。