十五條 JavaScript 程式設計技巧
欄目放送十五條JavaScript程式設計技巧。
本文目的
大多數程式語言都足夠開放，以允許程式設計師以多種方式得到類似的結果。JavaScript 也是如此，使用 JavaScript，我們通常可以通過多種方法來達到相似的結果，雖然有時會造成混淆。
其中一些用法比其他方法要好，而這些就是我要分享的。我將在本文中一一列舉，我敢肯定，您在閱讀本文時會發現，在很多地方您和我的做法是相同的。
1. 使用模板字串
使用+運運算元拼接字串來構建有意義的字串，這是過時的做法。此外，將字串與動態值（或表示式）連線可能會導致計算或表達錯誤。
let name = 'Charlse';let place = 'India';let isPrime = bit => { return (bit === 'P' ? 'Prime' : 'Nom-Prime');
}// 使用`+`運運算元的字串連線let messageConcat = 'Mr. ' + name + ' is from ' + place + '. He is a' + ' ' + isPrime('P') + ' member.'複製程式碼模板字面量（或模板字串）允許嵌入表示式。它具有獨特的語法，該字串必須用反引號（``）括起來。模板字串提供了可以包含動態值的預留位置，以美元符號和大括號標記（${expression}）。
以下是一個演示它的例子，
let name = 'Charlse';let place = 'India';let isPrime = bit => { return (bit === 'P' ? 'Prime' : 'Nom-Prime');
}// 使用模板字串let messageTemplateStr = `Mr. ${name} is from ${place}. He is a ${isPrime('P')} member.`console.log(messageTemplateStr);複製程式碼2. isInteger
有一種更簡潔的方法可以知道值是否為整數。JavaScript 的 Number API 提供了名為 isInteger() 的方法來實現此目的。這是非常有用的，最好了解一下。
let mynum = 123;let mynumStr = "123";console.log(`${mynum} is a number?`, Number.isInteger(mynum));console.log(`${mynumStr} is a number?`, Number.isInteger(mynumStr));複製程式碼輸出結果：
3. 值為數位
您是否曾經注意到，即使輸入框的型別為數位，event.target.value仍始終返回字串型別的值？
請參見下面的範例。我們有一個簡單的數位型別的文字方塊。這意味著它僅接受數位作為輸入，它具有事件處理程式來處理按鍵事件。
<input type='number' onkeyup="trackChange(event)" />複製程式碼
在事件處理程式中，我們使用event.target.value取出值，但是它返回一個字串型別值。現在，我將不得不將其解析為整數。如果輸入框接受浮點數（例如 16.56）怎麼辦？使用 parseFloat() 然後呢？啊，我不得不面對各種各樣的困惑和額外的工作！
function trackChange(event) { let value = event.target.value; console.log(`is ${value} a number?`, Number.isInteger(value));
}複製程式碼請改用event.target.valueAsNumber，它以數位形式返回值。
let valueAsNumber = event.target.valueAsNumber;console.log(`is ${value} a number?`, Number.isInteger(valueAsNumber));複製程式碼
4. 使用 && 運運算元化簡表示式
讓我們考慮一個具有布林值和函數的情況。
let isPrime = true;const startWatching = () => { console.log('Started Watching!');
}複製程式碼像下面這樣，通過檢查布林值來確定是否呼叫函數，程式碼太多了。
if (isPrime) {
startWatching();
}複製程式碼能否通過 AND（&&）運運算元使用簡寫形式？是的，完全可以避免使用 if 語句。酷吧！
isPrime && startWatching();複製程式碼
5. 使用 || 運運算元處理預設值
如果您想為變數設定預設值，可以使用 OR（||）運運算元輕鬆實現。
let person = {name: 'Jack'};let age = person.age || 35; // 如果 age 未定義，則將值設定為 35console.log(`Age of ${person.name} is ${age}`);複製程式碼6. 獲取隨機項
生成亂數或從陣列中獲取隨機項是非常有用且方便的方法。我已經在我的許多專案中多次看到它們了。
從陣列中獲取隨機項，
let planets = ['Mercury ', 'Mars', 'Venus', 'Earth', 'Neptune', 'Uranus', 'Saturn', 'Jupiter'];let randomPlanet = planets[Math.floor(Math.random() * planets.length)];console.log('Random Planet', randomPlanet);複製程式碼通過指定最小值和最大值，在一個範圍內生成一個亂數，
let getRandom = (min, max) => { return Math.round(Math.random() * (max - min) + min);
}console.log('Get random', getRandom(0, 10));複製程式碼7. 函數預設引數
在JavaScript中，函數實參（或形參）就像該函數的區域性變數一樣。呼叫函數時，您可以傳遞也可以不傳遞值。如果您不為引數傳遞值，則該值將是undefined，並且可能會導致一些多餘的副作用。
有一種在定義引數時將預設值傳遞給函數引數的簡單方法。在以下範例中，我們將預設值Hello傳遞給greetings函數的引數message。
let greetings = (name, message='Hello,') => { return `${message} ${name}`;
}console.log(greetings('Jack'));console.log(greetings('Jack', 'Hola!'));複製程式碼8. 必需的函數引數
基於預設引數的特性，我們可以將引數作為必需引數。首先定義一個函數以使用錯誤訊息丟擲錯誤，
let isRequired = () => { throw new Error('This is a mandatory parameter.');
}複製程式碼然後將函數作為必需引數的預設值。請記住，在呼叫函數時如果為引數傳遞值，那麼預設值會被忽略。但是，如果引數值為「undefined」，則預設值會被使用。
let greetings = (name=isRequired(), message='Hello,') => { return `${message} ${name}`;
}console.log(greetings());複製程式碼在上面的程式碼中，name將是未定義的，因此將會嘗試使用預設值，即 isRequired() 函數。 它將引發如下所示的錯誤：
9. 逗號運運算元
當我意識到逗號(,) 是一個單獨的運運算元，並且我此前從未注意到時，我感到很驚訝。我已經在程式碼中使用了大量逗號，但是從未意識到它的其它用途。
運運算元用於從左到右計算其每個運算元，並返回最後一個運算元的值。
let count = 1;let ret = (count++, count);console.log(ret);複製程式碼
在上面的範例中，變數ret的值將為 2。同理，下面的程式碼將在控制檯中輸出值 32 記錄到控制檯中。
let val = (12, 32);console.log(val);複製程式碼
我們在哪裡使用它？有什麼想法嗎？逗號 (,)運運算元最常見的用法是在 for 迴圈中提供多個引數。
for (var i = 0, j = 50; i <= 50; i++, j--)複製程式碼
10. 合併多個物件
您可能需要將兩個物件合併在一起，並建立一個更好的、內容更豐富的物件來使用。為此，您可以使用擴充套件運運算元...（對的，就是三個點！）。
分別考慮 emp 和 job 這兩個物件，
let emp = { 'id': 'E_01', 'name': 'Jack', 'age': 32, 'addr': 'India'};let job = { 'title': 'Software Dev', 'location': 'Paris'};複製程式碼使用擴充套件運運算元將它們合併為
// spread operatorlet merged = {...emp, ...job};console.log('Spread merged', merged);複製程式碼還有另一種實現合併的方法。你可以像下面這樣使用 Object.assign()：
console.log('Object assign', Object.assign({}, emp, job));複製程式碼輸出結果：
注意，擴充套件運運算元和 Object.assign 都執行淺合併。在淺合併中，第一個物件的屬性將被第二個物件的相同屬性值覆蓋。
要進行深度合併，可以考慮使用 lodash 中的 _merge。
11. 解構
將陣列元素和物件屬性分解為變數的技術稱為「解構」。讓我們看幾個例子，
陣列
在這裡，我們有一系列的表情符號，
let emojis = ['', '⏲️', '', ''];複製程式碼
為了解構，我們將使用以下語法，
let [fire, clock, , watermelon] = emojis;複製程式碼
這與let fire = emojis [0];相同，但具有更大的靈活性。您是否注意到，我只是在獎盃表情符號的位置上使用了空格而忽略了它？那麼，這將輸出什麼呢？
console.log(fire, clock, watermelon);複製程式碼
輸出結果：
讓我在這裡再介紹一個叫做「rest」運運算元的東西。如果您想對陣列進行解構，從而將一個或多個專案分配給變數並將其餘部分暫放在另一個陣列中，就可以使用...rest來完成，如下所示。
let [fruit, ...rest] = emojis;console.log(rest);複製程式碼
輸出結果:
物件
像陣列一樣，我們也可以解構物件。
let shape = { name: 'rect', sides: 4, height: 300, width: 500};複製程式碼像下面這樣進行解構，我們可以把物件的 name 屬性和 sides 屬性賦值給兩個變數，而其餘的屬性則存放在另一個物件中。
let {name, sides, ...restObj} = shape;console.log(name, sides);console.log(restObj);複製程式碼輸出結果：
閱讀有關此主題的更多資訊 from here.
12. 交換變數
現在，使用我們剛剛學習的解構，變數交換將會變得非常容易。
let fire = '';let fruit = ''; [fruit, fire] = [fire, fruit];console.log(fire, fruit);複製程式碼
13. isArray
確定輸入是否為陣列的另一種有用方法。
let emojis = ['', '⏲️', '', ''];console.log(Array.isArray(emojis));let obj = {};console.log(Array.isArray(obj));複製程式碼14. undefined 和 null
undefined指的是還沒有給變數定義值，但已經宣告了該變數。
null本身是一個空且不存在的值，必須將其顯式賦值給變數。
undefined和null並不嚴格相等，
undefined === null // false複製程式碼
閱讀有關此主題的更多資訊 from here.
15. 獲取查詢引數
window.location物件具有許多實用方法和屬性。使用這些屬性和方法，我們可以從瀏覽器 URL 中獲取有關協定、主機、埠、域等的資訊。
下面是我發現的一個非常有用的屬性：
window.location.search複製程式碼
search屬性從位置 url 返回查詢字串。以這個 url 為例：https：//tapasadhiary.com？project = js。 location.search將返回？project = js
我們可以使用另一個名為URLSearchParams的有用介面以及location.search來獲取查詢引數的值。
let project = new URLSearchParams(location.search).get('project');複製程式碼輸出結果：js
閱讀有關此主題的更多資訊 from here.
相關免費學習推薦：（視訊）
以上就是十五條 JavaScript 程式設計技巧的詳細內容，更多請關注TW511.COM其它相關文章！