週末學會了 10個超級實用 Javascript 技巧!

時間 2020-07-06

標籤週末學會超級實用 javascript 技巧欄目 JavaScript 简体版

原文原文鏈接

做者：Mahdhi Rezvi 譯者：前端小智來源：mediumjavascript

點贊再看，養成習慣前端

本文 GitHub github.com/qq449245884… 上已經收錄，更多往期高贊文章的分類，也整理了不少個人文檔，和教程資料。歡迎Star和完善，你們面試能夠參照考點複習，但願咱們一塊兒有點東西。java

衆所周知，JavaScript 一直在快速變化。在新的 ES2020 中，有不少很棒的特性，咱們大都已經火燒眉毛嘗試了。老實說，有時咱們能夠用不一樣角度來編寫代碼，一樣也能達到相同的效果，並且有的還會更簡短，更清晰。git

下面是列出一些 JavaScript 有用的技巧，相信總有一天會對你有所幫助。github

1.方法參數驗證

ES6 中能夠爲函數的參數設置默認值，有了這個，咱們能夠實現一個驗證方法參數不能爲空的巧妙技巧。面試

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

複製代碼

2.格式化JSON代碼

咱們都很是熟悉JSON.stringify，但比較少知道的是它還能夠進行格式化的輸出。數組

stringify 方法有三個參數：value，replacer和space。其中，後兩個是可選參數，這也是咱們不多知道它的緣由。要縮進JSON，必須使用space參數。bash

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

3.從數組中獲取唯一的值

要從數組中得到惟一的值，須要使用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]
複製代碼

4.從數組中刪除虛值

在某些狀況下，咱們想從數組中刪除虛值。虛值是 JavaScript 中的值爲FALSE的值。 JavaScript 中只有六個虛值，它們是：函數

undefined
null
NaN
0
'' (空字符)
false

過濾這些虛值的最簡單方法是使用下面的函數：

myArray.filter(Boolean)
複製代碼

若是要對數組進行一些修改，而後過濾新數組，則能夠嘗試這樣的操做。請記住，原始myArray保持不變。

myArray
    .map(item => {
        // Do your changes and return the new item
    })
    .filter(Boolean);
複製代碼

你們都說簡歷沒項目寫，我就幫你們找了一個項目，還附贈【搭建教程】。

5.合併多個對象

實際需求中，咱們常常須要合併多個對照，快速的作法能夠像下面這麼作：

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}
複製代碼

6.排序數字數組

JavaScript 數組帶有內置的sort方法。默認狀況下，此sort方法將數組元素轉換爲字符串，並對其進行字典排序。但這在對數字數組進行排序時，會有問題，解決方法就是手寫一個排序方法。

[0,10,4,9,123,54,1].sort((a,b) => a-b)

>>> [0, 1, 4, 9, 10, 54, 123]
複製代碼

7.禁用鼠標右鍵

有些狀況，咱們想在網頁上禁用鼠標的右鍵，可使用下面的方式來禁用：

<body oncontextmenu="return false">
  <div></div>
</body>
複製代碼

這個簡單的代碼就能夠禁用右鍵單擊。

8.在解構中使用別名

解構賦值是一個JavaScript表達式，它能夠將數組中的值或對象中的屬性解構縮不一樣的變量中。沒必要使用現有的對象變量，咱們能夠根據本身的偏好重命名它們。

const object = { number: 10 }

const { number } = object

// 使用別名
const { number: otherNumber } = object

console.log(otherNumber) //10
複製代碼

9.獲取數組中的最後一項

若是要獲取數組的末尾元素，可使用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]

複製代碼

10. 等待 Promises

在某些狀況下，咱們須要等待多個Promise結束，這裏，咱們使用Promise.all。

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 ...}
//]
複製代碼

代碼部署後可能存在的BUG無法實時知道，過後爲了解決這些BUG，花了大量的時間進行log 調試，這邊順便給你們推薦一個好用的BUG監控工具 Fundebug。

原文：blog.bitsrc.io/10-super-us…