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

10多年的安陸網(wǎng)站建設(shè)經(jīng)驗(yàn)，針對設(shè)計(jì)、前端、開發(fā)、售后、文案、推廣等六對一服務(wù)，響應(yīng)快，48小時(shí)及時(shí)工作處理。成都營銷網(wǎng)站建設(shè)的優(yōu)勢是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動(dòng)調(diào)整安陸建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計(jì)，從而大程度地提升瀏覽體驗(yàn)。成都創(chuàng)新互聯(lián)公司從事“安陸網(wǎng)站設(shè)計(jì)”,“安陸網(wǎng)站推廣”以來，每個(gè)客戶項(xiàng)目都認(rèn)真落實(shí)執(zhí)行。

大多數(shù)編程語言都足夠開放，以允許程序員以多種方式得到類似的結(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ú)特的語法，該字符串必須用反引號（``）括起來。模板字符串提供了可以包含動(dòng)態(tài)值的占位符，以美元符號和大括號標(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

有一種更簡潔的方法可以知道值是否為整數(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仍始終返回字符串類型的值？

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

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

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

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

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

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

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

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

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

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

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

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

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ù)的簡單方法。在以下示例中，我們將默認(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)值。請記住，在調(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. 逗號運(yùn)算符

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

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

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

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

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

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

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

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

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

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

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è)對象的屬性將被第二個(gè)對象的相同屬性值覆蓋。

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

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

新聞標(biāo)題：JavaScript的編程技巧
文章網(wǎng)址：http://www.rwnh.cn/article24/ihjjce.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站建設(shè)、動(dòng)態(tài)網(wǎng)站、ChatGPT、企業(yè)網(wǎng)站制作、網(wǎng)站排名、用戶體驗(yàn)

廣告

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