Web前端中的JavaScript開發(fā)小技巧是怎樣的

Web前端中的JavaScript開發(fā)小技巧是怎樣的，針對(duì)這個(gè)問題，這篇文章詳細(xì)介紹了相對(duì)應(yīng)的分析和解答，希望可以幫助更多想解決這個(gè)問題的小伙伴找到更簡(jiǎn)單易行的方法。

創(chuàng)新互聯(lián)是一家專注于網(wǎng)站制作、成都做網(wǎng)站與策劃設(shè)計(jì),中站網(wǎng)站建設(shè)哪家好?創(chuàng)新互聯(lián)做網(wǎng)站,專注于網(wǎng)站建設(shè)十余年,網(wǎng)設(shè)計(jì)領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:中站等地區(qū)。中站做網(wǎng)站價(jià)格咨詢:18982081108

對(duì)于Web開發(fā)或跨平臺(tái)開發(fā)，JavaScript越來越流行。以前，它僅被認(rèn)為是一種前端腳本語言，但現(xiàn)在它也越來越流行為后端腳本語言。甚至Facebook的React Native也基于JavaScript。因此，了解JavaScript中的一些技巧無疑將是有益的，這些技巧不僅不會(huì)阻止我們編寫額外的代碼行，而且還將使我們的代碼清晰高效。下面來和小編一起看一看吧！

1、數(shù)組索引考慮一個(gè)數(shù)組[10、9、8、7、6]，如果我們想將此數(shù)組的值分配給任何變量，則我們的定位方法將是const a = array [0]。如果我們想分配多個(gè)變量，那么繼續(xù)這樣做將很繁瑣。代碼1: 舊代碼做法

var array1 = [10, 9, 8, 7, 6];

var x = array1[0];

var y = array1[1];

var z = array1[2];

document.write("x = " + x + "<br>");

document.write("y = " + y + "<br>");

document.write("z = " + z + "<br>");

</script>

輸出：

x = 10

y = 9

z = 8

代碼2：更聰明的方式

var array2 = [10, 9, 8, 7, 6];

var [x, y, z, ...rest] = array2;

document.write("x = " + x + "<br>");

document.write("y = " + y + "<br>");

document.write("z = " + z + "<br>");

document.write("rest = " + rest + "<br>");

</script>

輸出：

x = 10

y = 9

z = 8

rest = 7, 6

因此，像這樣分配多個(gè)變量可以節(jié)省時(shí)間和代碼。但是，應(yīng)注意，其余部分是剩余部分的集合數(shù)組，而不是每個(gè)項(xiàng)目都單獨(dú)使用。

2、定義函數(shù)想法是將一些常見或重復(fù)的任務(wù)放在一起并創(chuàng)建一個(gè)函數(shù)，這樣我們就可以調(diào)用該函數(shù)，而不必為不同的輸入一次又一次地編寫相同的代碼。每個(gè)人都必須在JavaScript中使用過類似的功能。代碼1：以常規(guī)形式定義功能。

<!DOCTYPE html>

<html>

<body>

<p>Usual function in JavaScript</p>

function myFunction(p1, p2) {

return p1 * p2;

}

document.getElementById("demo").innerHTML

= myFunction(4, 3);

</script>

</body>

</html>

輸出：

Usual function in JavaScript

代碼2：還有另一種方法將函數(shù)視為變量，而不是一個(gè)非常有用的技巧，但仍然是新事物。將函數(shù)保持在變量中，它利用像這樣的箭頭函數(shù)。

<!DOCTYPE html>

<html>

<body>

<p>

Function treated as

variable in JavaScript:

</p> <p id="demo"></p>

var myFunction = (p1, p2) => {

return p1 * p2;

}

document.getElementById("demo")

.innerHTML = myFunction(4, 3);

</script>

</body>

</html>

輸出：

Function treated as variable in JavaScript

3、在一行中定義功能

現(xiàn)在，這個(gè)技巧真的很酷。如果你了解Python，則可能知道lambda函數(shù)，該函數(shù)的行為與任意函數(shù)相同，并且用一行編寫。好吧，我們不在JavaScript中使用lambda函數(shù)，但是我們?nèi)匀豢梢跃帉憜涡泻瘮?shù)。

假設(shè)我們要計(jì)算兩個(gè)數(shù)字a和b的乘積，我們可以在一行腳本中完成。我們不必專門編寫return語句，因?yàn)檫@種定義方式已經(jīng)意味著它將自行返回輸出。

<!DOCTYPE html>

<html>

<body>

<p>

Function treated as

variable in JavaScript

</p> <p id="demo"></p>

const productNum = (a, b) => a * b

document.getElementById("demo")

.innerHTML = myFunction(4, 3);

</script>

</body>

</html>

輸出：

Function treated as variable in JavaScript

4、布爾值

雖然每種編程語言都只有兩個(gè)布爾值True和False。JavaScript通過引入使用戶能夠創(chuàng)建bool的功能使它更進(jìn)一步。

與True和False不同，它們通常分別稱為“ Truthy”和“ Falsy”。為避免混淆，除0，F(xiàn)alse，NaN，null，“”之外的所有值均默認(rèn)為Truthy。布爾的這種廣泛使用有助于我們有效地檢查狀況。

const a = !1;

const b = !!!0;

console.log(a);

console.log(b);

</script>

輸出：

False

True

5、過濾布爾值

有時(shí)我們可能希望過濾掉所有布爾值，例如從數(shù)組中說“ Falsy” 布爾值(0，F(xiàn)alse，NaN，null，“”)，這可以通過結(jié)合使用map和filter函數(shù)來完成。在這里，它使用Boolean關(guān)鍵字過濾掉Falsy值。

arrayToFilter

.map(item => {

// Item values

})

.filter(Boolean);

</script>

Input: [1, 2, 3, 0, "Hi", False, True

]Output: [1, 2, 3, "Hi", True]

6、創(chuàng)建完全空的對(duì)象

如果要求在JavaScript中創(chuàng)建一個(gè)空的對(duì)象，我們的第一個(gè)轉(zhuǎn)到方法將在花括號(hào)中使用并將其分配給變量。但這不是空白對(duì)象，因?yàn)樗匀痪哂蠮avaScript的對(duì)象屬性，例如__proto__和其他方法。寧波男科醫(yī)院http://www.jzspfk.com/

可以通過一種方法來創(chuàng)建沒有任何對(duì)象屬性的對(duì)象。為此，我們使用字典并將其__proto__定義為空值。

/* Using .create() method to create

a completely empty object */

let dict = Object.create(null);

// dict.__proto__ === "undefined"

</script>

除非用戶另行定義，否則此對(duì)象將沒有默認(rèn)的__proto__或其他屬性。7、截?cái)鄶?shù)組

let arrayToTruncate = [10, 5, 7, 8, 3, 4, 6, 1, 0];

/* Specifying the length till where the

array should be truncated */

arrayToTruncate.length = 6;

console.log(arrayToTruncate)

</script>

輸出：如所見，我們必須知道要以這種方式截?cái)嗟臄?shù)組的長(zhǎng)度，否則將導(dǎo)致錯(cuò)誤。此處的運(yùn)行時(shí)間為O(k)，其中k是將在數(shù)組中保留的元素?cái)?shù)。

[10、5、7、8、3、4]

8、合并對(duì)象散布運(yùn)算符(…)的引入使用戶可以輕松地合并到一個(gè)或多個(gè)對(duì)象，而先前通過創(chuàng)建一個(gè)單獨(dú)的函數(shù)來實(shí)現(xiàn)此操作可以實(shí)現(xiàn)合并。

代碼1：

function mergeObjects(obj1, obj2) {

for (var key in obj2) {

if (obj2.hasOwnProperty(key)) obj1[key] = obj2[key];

}

return obj1; }

</script>

代碼2：通過使用擴(kuò)展運(yùn)算符，可以輕松實(shí)現(xiàn)上述任務(wù)，并且代碼也很清楚。

const obj1 = {};

// Items inside the object

const obj2 = {};

// Items inside the object

const obj3 = {...obj1, ...obj2};

</script>

9、條件檢查檢查和遍歷條件是每種編程語言的重要組成部分。在JavaScript中，我們這樣做是：

代碼1：

if (codition) { doSomething(); }

</script>

代碼2：但是，按位運(yùn)算符的使用使檢查條件更加容易，并且使代碼僅一行：

condition && doSomething();

</script>

10、使用正則表達(dá)式替換所有字符經(jīng)常出現(xiàn)一種情況，每次出現(xiàn)一個(gè)字符或一個(gè)子字符串，但不幸的是.replace()方法僅替換一個(gè)出現(xiàn)的實(shí)例。我們可以通過將regex與.replace()方法配合使用來解決此問題。

var string = "GeeksforGeeks"; // Some string console.log(string.replace(/eek/, "ool"));

</script>

輸出：

“ GoolsforGools”

關(guān)于Web前端中的JavaScript開發(fā)小技巧是怎樣的問題的解答就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道了解更多相關(guān)知識(shí)。

網(wǎng)站欄目：Web前端中的JavaScript開發(fā)小技巧是怎樣的
轉(zhuǎn)載源于：http://muchs.cn/article8/jojiip.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供移動(dòng)網(wǎng)站建設(shè)、網(wǎng)站維護(hù)、Google、微信公眾號(hào)、網(wǎng)站制作、App設(shè)計(jì)

聲明：本網(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)

猜你還喜歡下面的內(nèi)容