溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這期內容當中小編將會給大家帶來有關10個超級實用的Javascript 技巧是怎么樣的，文章內容豐富且以專業的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。
眾所周知，JavaScript 一直在快速變化。在新的 ES2020 中，有很多很棒的特性，我們大都已經迫不及待嘗試了。老實說，有時我們可以用不同角度來編寫代碼，同樣也能達到相同的效果，而且有的還會更簡短，更清晰。
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 null2.格式化JSON代碼
我們都非常熟悉JSON.stringify，但比較少知道的是它還可以進行格式化的輸出。
stringify 方法有三個參數：value，replacer和space。其中，后兩個是可選參數，這也是我們很少知道它的原因。要縮進JSON，必須使用space參數。
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) //109.獲取數組中的最后一項
如果要獲取數組的末尾元素，可以使用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 ...} //]上述就是小編為大家分享的10個超級實用的Javascript 技巧是怎么樣的了，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關知識，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
