10 個超有用的 JavaScript 技巧

時間 2020-06-06

原文原文鏈接

做者：Mahdhi Rezvi
翻譯：瘋狂的技術宅javascript

原文：https://blog.bitsrc.io/10-sup...前端

未經容許嚴禁轉載java

衆所周知，JavaScript 一直在迅速變化。新的 ES2020 引入了許多很棒的功能。你能夠經過不少不一樣的方式去編寫代碼。他們會達到相同的目標，但其中一些會更短、更清晰。你能夠憑藉一些小技巧來使代碼更清晰。這裏列出的對 JavaScript 開發人員有用的技巧，必定會對你有所幫助。程序員

方法參數的驗證

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 代碼

你可能對 JSON.stringify 很是熟悉。可是你是否知道能夠用 stringify 進行格式化輸出？實際上這很簡單。segmentfault

stringify 方法須要三個輸入。 value，replacer 和 space。後兩個是可選參數。這就是爲何咱們之前沒有注意過它們。要對 json 進行縮進，必須使用 space 參數。數組

console.log(JSON.stringify({name:"John",Age:23},null,'\t'));
>>> 
{
 "name": "John",
 "Age": 23
}

從數組中獲取惟一值

要從數組中獲取惟一值，咱們須要使用 filter 方法來過濾出重複值。可是有了新的 Set 對象，事情就變得很是順利和容易了。promise

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 中返回結果。