閱讀本文約需要6分鐘

大家好，我是你們的導師，我每天都會在這里給大家分享一些干貨內容(當然了，周末也要允許老師休息一下哈)。上次老師跟大家分享了JS之 動畫庫的知識，今天跟大家分享下JS之 開發技巧的知識。

1 JS之 開發技巧眾所周知，JavaScript一直在迅速變化。借助新的ES2020，引入了許多很棒的功能，你可能想知道這些功能。老實說，你可以通過許多不同的方式編寫代碼。

他們可能會達到相同的目標，但其中一些會更短，更清晰，更友好，更易讀易維護。你可以使用一些小技巧來使代碼更清晰。這里列出了一些對JavaScript開發人員有用的技巧，這些技巧一定會對你有所幫助。

1、方法參數驗證

JavaScript允許你設置參數的默認值。使用此方法，我們可以實施一個巧妙的技巧來驗證你的方法參數。

const isRequired = () => { throw new Error('param is required'); };const print = (num = isRequired()) => { console.log(`printing ${num}`) };print(2);//printing 2print()// errorprint(null)//printing null

這樣是不是更整潔了？

2、格式化JSON代碼

現在你已經很熟悉了JSON.stringify。但是您知道可以使用來格式化輸出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};這三個點在JavaScript中也稱為散布運算符。

6、排序數字數組

JavaScript數組帶有內置的sort方法。默認情況下，此sort方法將數組元素轉換為字符串，并對其進行字典排序。在對數字數組進行排序時，這可能會導致問題。因此，這里是解決此問題的簡單解決方案。[0,10,4,9,123,54,1].sort((a,b) => a-b);>>> [0, 1, 4, 9, 10, 54, 123]你正在提供一個將number數組中的兩個元素與sort方法進行比較的函數。此功能可幫助我們接收正確的輸出。

7、禁用右鍵

你可能曾經想阻止用戶在你的網頁上單擊鼠標右鍵。盡管這種情況很少見，但是在某些情況下你可能需要此功能。< body oncontextmenu = “ return false” > < div > < / div>< / body>這個簡單的代碼段將為你的用戶禁用右鍵單擊。

8、使用別名進行銷毀

該解構賦值語法是JavaScript表達式，使得它可以從陣列解壓縮的值，或從屬性的對象，為不同的變量?？梢圆皇褂矛F有的對象變量，而可以將其重命名為自己的首選項。const object = {number：10};//抓取數字const {number} = object;//抓取數字并將其重命名為otherNumberconst {number：otherNumber} = object;console.log(otherNumber); // 10

9、獲取數組中的最后一項

如果要從數組的末尾獲取元素，則可以將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]

10、等到進程完成

在某些情況下，你將需要等待多個進程結束。我們可以用來Promise.all并行履行進程。注意：進程將在單核CPU中同時運行，并在多核CPU中并行運行。它的主要任務是等待傳遞給它的所有進程都得到解決。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.allSettled。此方法在ES2020的最終版本中。const PromiseArray = [ Promise.resolve(100)， Promise.reject(null)， Promise.resolve(“數據發布”)， Promise.reject(新的錯誤('出問題了')))];Promise.allSettled(PromiseArray).then(res => {console.log(res);})。catch(err => console.log(err));// [// {狀態：“已完成”，值：100}，// {狀態：“已拒絕”，原因：空}，// {狀態：“已完成”，值：“數據發布”}}，// {狀態：“已拒絕”，原因：錯誤：出了點問題……}//]即使某些進程被拒絕，Promise.allSettled也會從你所有的承諾中返回結果。參考文獻：https://blog.bitsrc.io/10-super-useful-tricks-for-javascript-developers-f1b76691199b

今天就分享這么多，關于JS之 開發技巧，你學會了多少？歡迎在留言區評論，對于有價值的留言，我們都會一一回復的。如果覺得文章對你有一丟丟幫助，請點右下角【在看】，讓更多人看到該文章。

???? 創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的js 数组过滤_JS之 开发技巧的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。