溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
Web前端中的JavaScript開發小技巧是怎樣的，針對這個問題，這篇文章詳細介紹了相對應的分析和解答，希望可以幫助更多想解決這個問題的小伙伴找到更簡單易行的方法。
對于Web開發或跨平臺開發，JavaScript越來越流行。以前，它僅被認為是一種前端腳本語言，但現在它也越來越流行為后端腳本語言。甚至Facebook的React Native也基于JavaScript。因此，了解JavaScript中的一些技巧無疑將是有益的，這些技巧不僅不會阻止我們編寫額外的代碼行，而且還將使我們的代碼清晰高效。下面來和小編一起看一看吧！
1、數組索引考慮一個數組[10、9、8、7、6]，如果我們想將此數組的值分配給任何變量，則我們的定位方法將是const a = array [0]。如果我們想分配多個變量，那么繼續這樣做將很繁瑣。代碼1: 舊代碼做法
<script>
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：更聰明的方式
<script>
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
因此，像這樣分配多個變量可以節省時間和代碼。但是，應注意，其余部分是剩余部分的集合數組，而不是每個項目都單獨使用。
2、定義函數想法是將一些常見或重復的任務放在一起并創建一個函數，這樣我們就可以調用該函數，而不必為不同的輸入一次又一次地編寫相同的代碼。每個人都必須在JavaScript中使用過類似的功能。代碼1：以常規形式定義功能。
<!DOCTYPE html>
<html>
<body>
<p>Usual function in JavaScript</p>
<p id="demo"></p>
<script>
function myFunction(p1, p2) {
return p1 * p2;
}
document.getElementById("demo").innerHTML
= myFunction(4, 3);
</script>
</body>
</html>
輸出：
Usual function in JavaScript
12
代碼2：還有另一種方法將函數視為變量，而不是一個非常有用的技巧，但仍然是新事物。將函數保持在變量中，它利用像這樣的箭頭函數。
<!DOCTYPE html>
<html>
<body>
<p>
Function treated as
variable in JavaScript:
</p> <p id="demo"></p>
<script>
var myFunction = (p1, p2) => {
return p1 * p2;
}
document.getElementById("demo")
.innerHTML = myFunction(4, 3);
</script>
</body>
</html>
輸出：
Function treated as variable in JavaScript
12
3、在一行中定義功能
現在，這個技巧真的很酷。如果你了解Python，則可能知道lambda函數，該函數的行為與任意函數相同，并且用一行編寫。好吧，我們不在JavaScript中使用lambda函數，但是我們仍然可以編寫單行函數。
假設我們要計算兩個數字a和b的乘積，我們可以在一行腳本中完成。我們不必專門編寫return語句，因為這種定義方式已經意味著它將自行返回輸出。
<!DOCTYPE html>
<html>
<body>
<p>
Function treated as
variable in JavaScript
</p> <p id="demo"></p>
<script>
const productNum = (a, b) => a * b
document.getElementById("demo")
.innerHTML = myFunction(4, 3);
</script>
</body>
</html>
輸出：
Function treated as variable in JavaScript
12
4、布爾值
雖然每種編程語言都只有兩個布爾值True和False。JavaScript通過引入使用戶能夠創建bool的功能使它更進一步。
與True和False不同，它們通常分別稱為“ Truthy”和“ Falsy”。為避免混淆，除0，False，NaN，null，“”之外的所有值均默認為Truthy。布爾的這種廣泛使用有助于我們有效地檢查狀況。
<script>
const a = !1;
const b = !!!0;
console.log(a);
console.log(b);
</script>
輸出：
False
True
5、過濾布爾值
有時我們可能希望過濾掉所有布爾值，例如從數組中說“ Falsy” 布爾值(0，False，NaN，null，“”)，這可以通過結合使用map和filter函數來完成。在這里，它使用Boolean關鍵字過濾掉Falsy值。
<script>
arrayToFilter
.map(item => {
// Item values
})
.filter(Boolean);
</script>
Input: [1, 2, 3, 0, "Hi", False, True
]Output: [1, 2, 3, "Hi", True]
6、創建完全空的對象
如果要求在JavaScript中創建一個空的對象，我們的第一個轉到方法將在花括號中使用并將其分配給變量。但這不是空白對象，因為它仍然具有JavaScript的對象屬性，例如__proto__和其他方法。寧波男科醫院http://www.jzspfk.com/
可以通過一種方法來創建沒有任何對象屬性的對象。為此，我們使用字典并將其__proto__定義為空值。
<script>
/* Using .create() method to create
a completely empty object */
let dict = Object.create(null);
// dict.__proto__ === "undefined"
</script>
除非用戶另行定義，否則此對象將沒有默認的__proto__或其他屬性。7、截斷數組
<script>
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>
輸出：如所見，我們必須知道要以這種方式截斷的數組的長度，否則將導致錯誤。此處的運行時間為O(k)，其中k是將在數組中保留的元素數。
[10、5、7、8、3、4]
8、合并對象散布運算符(…)的引入使用戶可以輕松地合并到一個或多個對象，而先前通過創建一個單獨的函數來實現此操作可以實現合并。
代碼1：
·
<script>
function mergeObjects(obj1, obj2) {
for (var key in obj2) {
if (obj2.hasOwnProperty(key)) obj1[key] = obj2[key];
}
return obj1; }
</script>
代碼2：通過使用擴展運算符，可以輕松實現上述任務，并且代碼也很清楚。
<script>
const obj1 = {};
// Items inside the object
const obj2 = {};
// Items inside the object
const obj3 = {...obj1, ...obj2};
</script>
9、條件檢查檢查和遍歷條件是每種編程語言的重要組成部分。在JavaScript中，我們這樣做是：
代碼1：
<script>
if (codition) { doSomething(); }
</script>
代碼2：但是，按位運算符的使用使檢查條件更加容易，并且使代碼僅一行：
<script>
condition && doSomething();
</script>
10、使用正則表達式替換所有字符經常出現一種情況，每次出現一個字符或一個子字符串，但不幸的是.replace()方法僅替換一個出現的實例。我們可以通過將regex與.replace()方法配合使用來解決此問題。
<script>
var string = "GeeksforGeeks"; // Some string console.log(string.replace(/eek/, "ool"));
</script>
輸出：
“ GoolsforGools”
關于Web前端中的JavaScript開發小技巧是怎樣的問題的解答就分享到這里了，希望以上內容可以對大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關注億速云行業資訊頻道了解更多相關知識。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
