JavaScript的編程技巧-創(chuàng)新互聯(lián)

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

成都創(chuàng)新互聯(lián)公司堅(jiān)持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：成都網(wǎng)站制作、網(wǎng)站建設(shè)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時(shí)代的新野網(wǎng)站設(shè)計(jì)、移動(dòng)媒體設(shè)計(jì)的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！

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

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

1. 使用模板字符串

使用+運(yùn)算符拼接字符串來構(gòu)建有意義的字符串，這是過時(shí)的做法。此外，將字符串與動(dòng)態(tài)值（或表達(dá)式）連接可能會(huì)導(dǎo)致計(jì)算或表達(dá)錯(cuò)誤。

let name = 'Charlse';let place = 'India';let isPrime = bit => {  return (bit === 'P' ? 'Prime' : 'Nom-Prime');
}// 使用`+`運(yùn)算符的字符串連接let messageConcat = 'Mr. ' + name + ' is from ' + place + '. He is a' + ' ' + isPrime('P') + ' member.'復(fù)制代碼

模板字面量（或模板字符串）允許嵌入表達(dá)式。它具有獨(dú)特的語(yǔ)法，該字符串必須用反引號(hào)（``）括起來。模板字符串提供了可以包含動(dòng)態(tài)值的占位符，以美元符號(hào)和大括號(hào)標(biāo)記（${expression}）。

以下是一個(gè)演示它的例子，

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);復(fù)制代碼

2. isInteger

有一種更簡(jiǎn)潔的方法可以知道值是否為整數(shù)。JavaScript 的 Number API 提供了名為 isInteger() 的方法來實(shí)現(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));復(fù)制代碼

輸出結(jié)果：

3. 值為數(shù)字

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

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

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

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

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

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

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

4. 使用 && 運(yùn)算符化簡(jiǎn)表達(dá)式

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

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

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

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

能否通過 AND（&&）運(yùn)算符使用簡(jiǎn)寫形式？是的，完全可以避免使用 if 語(yǔ)句?？岚?！

isPrime && startWatching();復(fù)制代碼

5. 使用 || 運(yùn)算符處理默認(rèn)值

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

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

6. 獲取隨機(jī)項(xiàng)

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

從數(shù)組中獲取隨機(jī)項(xiàng)，

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

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

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

7. 函數(shù)默認(rèn)參數(shù)

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

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

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

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

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

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

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

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

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

9. 逗號(hào)運(yùn)算符

當(dāng)我意識(shí)到逗號(hào)(,) 是一個(gè)單獨(dú)的運(yùn)算符，并且我此前從未注意到時(shí)，我感到很驚訝。我已經(jīng)在代碼中使用了大量逗號(hào)，但是從未意識(shí)到它的其它用途。

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

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

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

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

我們?cè)谀睦锸褂盟坑惺裁聪敕▎?？逗?hào) (,)運(yùn)算符最常見的用法是在 for 循環(huán)中提供多個(gè)參數(shù)。

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

10. 合并多個(gè)對(duì)象

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

分別考慮 emp 和 job 這兩個(gè)對(duì)象，

let emp = { 'id': 'E_01', 'name': 'Jack', 'age': 32, 'addr': 'India'};let job = { 'title': 'Software Dev',  'location': 'Paris'};復(fù)制代碼

使用擴(kuò)展運(yùn)算符將它們合并為

// spread operatorlet merged = {...emp, ...job};console.log('Spread merged', merged);復(fù)制代碼

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

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

輸出結(jié)果：

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

要進(jìn)行深度合并，可以考慮使用 lodash 中的 _merge。

感謝各位的閱讀！看完上述內(nèi)容，你們對(duì)JavaScript的編程技巧大概了解了嗎？希望文章內(nèi)容對(duì)大家有所幫助。如果想了解更多相關(guān)文章內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)-成都網(wǎng)站建設(shè)公司行業(yè)資訊頻道。

本文題目：JavaScript的編程技巧-創(chuàng)新互聯(lián)
文章URL：http://muchs.cn/article36/csjhpg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供搜索引擎優(yōu)化、建站公司、定制網(wǎng)站、App開發(fā)、服務(wù)器托管、網(wǎng)站內(nèi)鏈

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)