2020-5-6 seo達(dá)人
方法參數(shù)的驗(yàn)證
JavaScript 允許你設(shè)置參數(shù)的默認(rèn)值。通過這種方法，可以通過一個(gè)巧妙的技巧來驗(yàn)證你的方法參數(shù)。
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 代碼
你可能對(duì) JSON.stringify 非常熟悉。但是你是否知道可以用 stringify 進(jìn)行格式化輸出？實(shí)際上這很簡單。
stringify 方法需要三個(gè)輸入。 value，replacer 和 space。后兩個(gè)是可選參數(shù)。這就是為什么我們以前沒有注意過它們。要對(duì) json 進(jìn)行縮進(jìn)，必須使用 space 參數(shù)。
console.log(JSON.stringify({name:"John",Age:23},null,'\t'));
>>>
{
"name": "John",
"Age": 23
}
從數(shù)組中獲取唯一值
要從數(shù)組中獲取唯一值，我們需要使用 filter 方法來過濾出重復(fù)值。但是有了新的 Set 對(duì)象，事情就變得非常順利和容易了。
let uniqueArray = [...new Set([1, 2, 3, 3, 3, "school", "school", 'ball', false, false, true, true])];
>>> [1, 2, 3, "school", "ball", false, true]
從數(shù)組中刪除虛值（Falsy Value）
在某些情況下，你可能想從數(shù)組中刪除虛值。虛值是 JavaScript 的 Boolean 上下文中被認(rèn)定為為 false 的值。 JavaScript 中只有六個(gè)虛值，它們是：
undefined
null
NaN
0
"" （空字符串）
false
濾除這些虛值的最簡單方法是使用以下函數(shù)。
myArray.filter(Boolean);
如果要對(duì)數(shù)組進(jìn)行一些修改，然后過濾新數(shù)組，可以嘗試這樣的操作。請(qǐng)記住，原始的 myArray 會(huì)保持不變。
myArray
.map(item => {
// Do your changes and return the new item
})
.filter(Boolean);
合并多個(gè)對(duì)象
假設(shè)我有幾個(gè)需要合并的對(duì)象，那么這是我的首選方法。
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};
這三個(gè)點(diǎn)在 JavaScript 中也稱為展開運(yùn)算符。你可以在這里學(xué)習(xí)更多用法。
對(duì)數(shù)字?jǐn)?shù)組進(jìn)行排序
JavaScript 數(shù)組有內(nèi)置的 sort 方法。默認(rèn)情況下 sort 方法把數(shù)組元素轉(zhuǎn)換為字符串，并對(duì)其進(jìn)行字典排序。在對(duì)數(shù)字?jǐn)?shù)組進(jìn)行排序時(shí)，這有可能會(huì)導(dǎo)致一些問題。所以下面是解決這類問題的簡單解決方案。
[0,10,4,9,123,54,1].sort((a,b) => a-b);
>>> [0, 1, 4, 9, 10, 54, 123]
這里提供了一個(gè)將數(shù)字?jǐn)?shù)組中的兩個(gè)元素與 sort 方法進(jìn)行比較的函數(shù)。這個(gè)函數(shù)可幫助我們接收正確的輸出。
Disable Right Click
禁用右鍵
你可能想要阻止用戶在你的網(wǎng)頁上單擊鼠標(biāo)右鍵。
<body oncontextmenu="return false">
<div></div>
</body>
這段簡單的代碼將為你的用戶禁用右鍵單擊。
使用別名進(jìn)行解構(gòu)
解構(gòu)賦值語法是一種 JavaScript 表達(dá)式，可以將數(shù)組中的值或?qū)ο蟮闹祷驅(qū)傩苑峙浣o變量。解構(gòu)賦值能讓我們用更簡短的語法進(jìn)行多個(gè)變量的賦值。
const object = { number: 10 };
// Grabbing number
const { number } = object;
// Grabbing number and renaming it as otherNumber
const { number: otherNumber } = object;
console.log(otherNumber); //10
獲取數(shù)組中的最后一項(xiàng)
可以通過對(duì) splice 方法的參數(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]
等待 Promise 完成
在某些情況下，你可能會(huì)需要等待多個(gè) promise 結(jié)束。可以用 Promise.all 來并行運(yùn)行我們的 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))
關(guān)于 Promise.all 的主要注意事項(xiàng)是，當(dāng)一個(gè) Promise 拒絕時(shí)，該方法將引發(fā)錯(cuò)誤。這意味著你的代碼不會(huì)等到你所有的 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 也會(huì)從你所有的 promise 中返回結(jié)果。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://m.shtzxx.cn