很多JavaScript開發(fā)人員都忽略了的十大超實用技巧
本文轉(zhuǎn)載自公眾號“讀芯術(shù)”(ID：AI_Discovery)
眾所周知，JavaScript更新?lián)Q代的速度特別快，總能給人新鮮感，也一直有能讓我們挖掘探索的東西，新版ES2020就有許多特別厲害的功能讓人迫不及待想試試。
寫代碼的方法有很多，總有一些方法寫出來的代碼要更加簡潔清楚，這就需要一些小技巧了。本文就列出了一些對JavaScript開發(fā)人員有用的技巧，希望會對你有所幫助。
方法參數(shù)校驗
JavaScript可以設(shè)置參數(shù)的默認(rèn)值，這提供了一個驗證方法參數(shù)的小竅門：
- const isRequired = () => { thrownew Error('param is required'); };
- const print = (num =isRequired()) => { console.log(`printing ${num}`) };
- print(2);//printing 2
- print()// error
- print(null)//printing null
格式化JSON編碼
你肯定對JSON.stringify 已經(jīng)很熟悉了，但你會用 stringify 將輸出格式化嗎?這個操作實際非常簡單。stringify 需要三個參數(shù)，value , replacer 和space，后兩個是可選參數(shù)，所以之前沒有用到過它，如果要縮進(jìn)JSON就必須設(shè)置space參數(shù)。
- console.log(JSON.stringify({name:"John",Age:23},null,'\t'));>>>
- {
- "name": "John",
- "Age": 23
- }
從數(shù)組中獲取唯一值
從數(shù)組中獲取唯一值要使用filter過濾出重復(fù)值，但有了新的set原生對象就變得順手多了。
- let uniqueArray = [...newSet([1, 2, 3, 3,3,"school","school",'ball',false,false,true,true])];
- >>> [1, 2, 3,"school", "ball", false, true]
篩選數(shù)字?jǐn)?shù)組
JavaScript數(shù)組帶有內(nèi)置的篩選方法。默認(rèn)情況下，該方法將數(shù)組元素轉(zhuǎn)換為字符串，并對其進(jìn)行字典排序。在對數(shù)字?jǐn)?shù)組進(jìn)行排序時可能會出現(xiàn)問題，這兒有一個簡單的解決方案：
- [0,10,4,9,123,54,1].sort((a,b)=> a-b);>>> [0, 1, 4, 9, 10, 54, 123]
這個函數(shù)通過比較數(shù)字?jǐn)?shù)組中的兩個元素實現(xiàn)篩選，可以得到正確的輸出。
刪除數(shù)組中的虛假值
有時我們可能需要刪掉數(shù)組中的虛假值，即那些在JavaScript中等同于FALSE的值，JavaScript有六種虛假值，包括：
- undefined
- null
- NaN
- 0
- “” (空字符串)
- false
過濾出虛假值比較簡單的方法是使用下面的函數(shù)：
- myArray
- .filter(Boolean);
如果要對數(shù)組進(jìn)行一些修改，然后過濾新數(shù)組，可以嘗試如下操作。記住，原始myArray保持不變。
- myArray
- .map(item => {
- // Do your changes and return thenew 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};
等所有promise完成后再行動
有時你需要等一些promise對象完成后才能進(jìn)行下一步操作，我們可以使用Promise.all 來同步完成。注意，所有Promise可以在單核CPU中同時運行，在多核CPU中并行運行。它的主要任務(wù)是等待傳遞給它的所有promise對象全部得到解析。
- const PromiseArray = [
- Promise.resolve(100),
- Promise.reject(null),
- Promise.resolve("Datarelease"),
- Promise.reject(new Error('Somethingwent wrong'))];Promise.all(PromiseArray)
- .then(data => console.log('allresolved! here are the resolve values:', data))
- .catch(err => console.log('gotrejected! reason:', err))
Promise.all必須注意的要點是，如果其中一個promise被拒，就會發(fā)出錯誤警告。這意味著你的代碼不用等所有promise對象全部解析完畢。
如果不管promise是否被拒都想讓它全部運行完，可以用Promise.allSettled，在ES2020的最終版本中使用這個方法：
- const PromiseArray = [
- Promise.resolve(100),
- Promise.reject(null),
- Promise.resolve("Datarelease"),
- Promise.reject(new Error('Somethingwent 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的結(jié)果。
禁用右鍵
盡管不多見，但有時你可能需要阻止用戶在網(wǎng)頁上使用鼠標(biāo)右鍵，這個簡單的代碼就能做到：
- <body oncontextmenu="returnfalse">
- <div></div>
- </body>
利用別名節(jié)點解構(gòu)
解構(gòu)賦值是JavaScript的一種表達(dá)式，可以將數(shù)組中的值或?qū)ο髮傩越鈮簽椴煌淖兞?，且不必堅持使用現(xiàn)有的對象變量，而可以按照個人喜好對其重新命名：
- 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ù)組中的最后幾項
如果要提取數(shù)組最后幾項，可以使用slice方法，參數(shù)設(shè)置為負(fù)參數(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]
這些可能會被忽視的小技巧可能會給你幫大忙，趕快學(xué)起來吧!
