JavaScript的編程技巧

JavaScript的編程技巧？這個問題可能是我們?nèi)粘W習或工作經(jīng)常見到的。希望通過這個問題能讓你收獲頗深。下面是小編給大家?guī)淼膮⒖純?nèi)容，讓我們一起來看看吧！

大多數(shù)編程語言都足夠開放，以允許程序員以多種方式得到類似的結(jié)果。JavaScript 也是如此，使用 JavaScript，我們通?？梢酝ㄟ^多種方法來達到相似的結(jié)果，雖然有時會造成混淆。

其中一些用法比其他方法要好，而這些就是我要分享的。我將在本文中一一列舉，我敢肯定，您在閱讀本文時會發(fā)現(xiàn)，在很多地方您和我的做法是相同的。

1. 使用模板字符串

使用+運算符拼接字符串來構(gòu)建有意義的字符串，這是過時的做法。此外，將字符串與動態(tài)值（或表達式）連接可能會導致計算或表達錯誤。

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.'復制代碼

模板字面量（或模板字符串）允許嵌入表達式。它具有獨特的語法，該字符串必須用反引號（``）括起來。模板字符串提供了可以包含動態(tài)值的占位符，以美元符號和大括號標記（${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

有一種更簡潔的方法可以知道值是否為整數(shù)。JavaScript 的 Number API 提供了名為 isInteger() 的方法來實現(xiàn)此目的。這是非常有用的，最好了解一下。

let mynum = 123;let mynumStr = "123";console.log(`${mynum} is a number?`, Number.isInteger(mynum));console.log(`${mynumStr} is a number?`, Number.isInteger(mynumStr));復制代碼

輸出結(jié)果：

3. 值為數(shù)字

您是否曾經(jīng)注意到，即使輸入框的類型為數(shù)字，event.target.value仍始終返回字符串類型的值？

請參見下面的示例。我們有一個簡單的數(shù)字類型的文本框。這意味著它僅接受數(shù)字作為輸入，它具有事件處理程序來處理按鍵事件。

<input type='number' onkeyup="trackChange(event)" />復制代碼

在事件處理程序中，我們使用event.target.value取出值，但是它返回一個字符串類型值?，F(xiàn)在，我將不得不將其解析為整數(shù)。如果輸入框接受浮點數(shù)（例如 16.56）怎么辦？使用 parseFloat() 然后呢？啊，我不得不面對各種各樣的困惑和額外的工作！

function trackChange(event) {   let value = event.target.value;   console.log(`is ${value} a number?`, Number.isInteger(value));
}復制代碼

請改用event.target.valueAsNumber，它以數(shù)字形式返回值。

let valueAsNumber = event.target.valueAsNumber;console.log(`is ${value} a number?`, Number.isInteger(valueAsNumber));復制代碼

4. 使用 && 運算符化簡表達式

讓我們考慮一個具有布爾值和函數(shù)的情況。

let isPrime = true;const startWatching = () => {    console.log('Started Watching!');
}復制代碼

像下面這樣，通過檢查布爾值來確定是否調(diào)用函數(shù)，代碼太多了。

if (isPrime) {
    startWatching();
}復制代碼

能否通過 AND（&&）運算符使用簡寫形式？是的，完全可以避免使用 if 語句。酷吧！

isPrime && startWatching();復制代碼

5. 使用 || 運算符處理默認值

如果您想為變量設置默認值，可以使用 OR（||）運算符輕松實現(xiàn)。

let person = {name: 'Jack'};let age = person.age || 35; // 如果 age 未定義，則將值設置為 35console.log(`Age of ${person.name} is ${age}`);復制代碼

6. 獲取隨機項

生成隨機數(shù)或從數(shù)組中獲取隨機項是非常有用且方便的方法。我已經(jīng)在我的許多項目中多次看到它們了。

從數(shù)組中獲取隨機項，

let planets = ['Mercury ', 'Mars', 'Venus', 'Earth', 'Neptune', 'Uranus', 'Saturn', 'Jupiter'];let randomPlanet = planets[Math.floor(Math.random() * planets.length)];console.log('Random Planet', randomPlanet);復制代碼

通過指定最小值和最大值，在一個范圍內(nèi)生成一個隨機數(shù)，

let getRandom = (min, max) => {    return Math.round(Math.random() * (max - min) + min);
}console.log('Get random', getRandom(0, 10));復制代碼

7. 函數(shù)默認參數(shù)

在JavaScript中，函數(shù)實參（或形參）就像該函數(shù)的局部變量一樣。調(diào)用函數(shù)時，您可以傳遞也可以不傳遞值。如果您不為參數(shù)傳遞值，則該值將是undefined，并且可能會導致一些多余的副作用。

有一種在定義參數(shù)時將默認值傳遞給函數(shù)參數(shù)的簡單方法。在以下示例中，我們將默認值Hello傳遞給greetings函數(shù)的參數(shù)message。

let greetings = (name, message='Hello,') => {    return `${message} ${name}`;
}console.log(greetings('Jack'));console.log(greetings('Jack', 'Hola!'));復制代碼

8. 必需的函數(shù)參數(shù)

基于默認參數(shù)的特性，我們可以將參數(shù)作為必需參數(shù)。首先定義一個函數(shù)以使用錯誤消息拋出錯誤，

let isRequired = () => {    throw new Error('This is a mandatory parameter.');
}復制代碼

然后將函數(shù)作為必需參數(shù)的默認值。請記住，在調(diào)用函數(shù)時如果為參數(shù)傳遞值，那么默認值會被忽略。但是，如果參數(shù)值為“undefined”，則默認值會被使用。

let greetings = (name=isRequired(), message='Hello,') => {    return `${message} ${name}`;
}console.log(greetings());復制代碼

在上面的代碼中，name將是未定義的，因此將會嘗試使用默認值，即 isRequired() 函數(shù)。 它將引發(fā)如下所示的錯誤：

9. 逗號運算符

當我意識到逗號(,) 是一個單獨的運算符，并且我此前從未注意到時，我感到很驚訝。我已經(jīng)在代碼中使用了大量逗號，但是從未意識到它的其它用途。

運算符用于從左到右計算其每個操作數(shù)，并返回最后一個操作數(shù)的值。

let count = 1;let ret = (count++, count);console.log(ret);復制代碼

在上面的示例中，變量ret的值將為 2。同理，下面的代碼將在控制臺中輸出值 32 記錄到控制臺中。

let val = (12, 32);console.log(val);復制代碼

我們在哪里使用它？有什么想法嗎？逗號 (,)運算符最常見的用法是在 for 循環(huán)中提供多個參數(shù)。

for (var i = 0, j = 50; i <= 50; i++, j--)復制代碼

10. 合并多個對象

您可能需要將兩個對象合并在一起，并創(chuàng)建一個更好的、內(nèi)容更豐富的對象來使用。為此，您可以使用擴展運算符...（對的，就是三個點?。?。

分別考慮 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);復制代碼

還有另一種實現(xiàn)合并的方法。你可以像下面這樣使用 Object.assign()：

console.log('Object assign', Object.assign({}, emp, job));復制代碼

輸出結(jié)果：

注意，擴展運算符和 Object.assign 都執(zhí)行淺合并。在淺合并中，第一個對象的屬性將被第二個對象的相同屬性值覆蓋。

要進行深度合并，可以考慮使用 lodash 中的 _merge。

感謝各位的閱讀！看完上述內(nèi)容，你們對JavaScript的編程技巧大概了解了嗎？希望文章內(nèi)容對大家有所幫助。如果想了解更多相關(guān)文章內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道。