新聞中心
廢話不多說(shuō),直接安排上。

1.使用數(shù)字分隔符
當(dāng)我需要處理大的數(shù)字時(shí),這是最常用的運(yùn)算符之一。當(dāng)在數(shù)字中使用分隔符(只有一個(gè)_)時(shí),它看起來(lái)比沒(méi)有分隔的數(shù)字要好。例如:
- let number = 98234567
可以這么寫(xiě)
- let number = 98_234_567
而且它也適用于任何其他進(jìn)制數(shù)。
- const binary = 0b1000_0101;
- const hex = 0x12_34_56_78;
幾個(gè)注意事項(xiàng):
在前導(dǎo)0后不能使用。
- let num= 0_12
不允許出現(xiàn)在數(shù)字的末尾。
- let num= 500_
2.始終使用分號(hào)
使用分號(hào)終止行是一種很好的做法。如果忘記了,不會(huì)被警告,因?yàn)樵诖蠖鄶?shù)情況下,它將被JavaScript解析器插入,但依賴于自動(dòng)分號(hào)插入(ASI)是不鼓勵(lì)的。
谷歌,Airbnb和jQuery的JS風(fēng)格指南,也推薦使用分號(hào)終止行。
3.不要忘記var
當(dāng)你第一次為一個(gè)變量賦值時(shí),一定要確保你沒(méi)有對(duì)一個(gè)未聲明的變量進(jìn)行賦值。
對(duì)未聲明的變量的賦值會(huì)自動(dòng)導(dǎo)致一個(gè)全局變量的創(chuàng)建。避免全局變量?
全局變量很容易被其他腳本覆蓋。例如,如果應(yīng)用程序的兩個(gè)獨(dú)立部分定義了具有相同名稱但用途不同的全局變量,那么可能會(huì)導(dǎo)致不可預(yù)測(cè)的錯(cuò)誤,調(diào)試此類問(wèn)題將是一個(gè)可怕的經(jīng)歷。
通常函數(shù)中的變量應(yīng)該是局部的,這樣當(dāng)你執(zhí)行完函數(shù)時(shí)它們就會(huì)釋放。
4. Delete vs Splice
使用splice而不是使用delete從一個(gè)數(shù)組中刪除一個(gè)項(xiàng)。使用delete會(huì)刪除對(duì)象的屬性,但不會(huì)重置索引數(shù)組或更新其長(zhǎng)度。
Delete
- > myArray = ['a', 'b', 'c', 'd']
- ["a", "b", "c", "d"]
- > delete myArray[0]
- true
- > myArray[0]
- undefined
請(qǐng)注意,事實(shí)上它并沒(méi)有被設(shè)置為undefined的值,而是將該屬性從數(shù)組中移除,使其看起來(lái)undefined。這個(gè)大家可以在控制把 myArray 打印就出看就知道 了。
Splice
Splice() 實(shí)際上刪除了元素,重置了索引,并改變了數(shù)組的長(zhǎng)度。
- > myArray = ['a', 'b', 'c', 'd']
- ["a", "b", "c", "d"]
- > myArray.splice(0, 2)
- ["a", "b"]
- > myArray
- ["c", "d"]
delete方法應(yīng)該用于刪除對(duì)象屬性。
5. map vs for loop
使用map()函數(shù)遍歷數(shù)組的項(xiàng)
- var squares = [1,2,3,4].map(function (val) {
- return val * val;
- });
- // [1, 4, 9, 16]
**Immutability ** - 原來(lái)的數(shù)組將不受影響。在其他地方仍然需要原始數(shù)組的情況下,這是有好處的。for 循環(huán)當(dāng)然也可以實(shí)現(xiàn),但是這需要更多的代碼,并且需要更新我們的新數(shù)組作為循環(huán)操作的一部分。另一方面,map()可以保持這種清潔,因?yàn)槟阒恍枰谝粋€(gè)作用哉內(nèi)工作,仍然可以保持不變性。
Cleaner code - 當(dāng)做相同的事情時(shí),map幾乎總是可以用比f(wàn)or更少的代碼來(lái)寫(xiě)。它有時(shí)可以清楚地寫(xiě)在一行上,而for至少需要兩行或一般需要三行,并包括括號(hào)。另外,作用域隔離和減少你所需要的變量數(shù)量以及減少的大小都使代碼客觀上更干凈。
6. 四舍五入的數(shù)字
toFixed() 方法使用定點(diǎn)表示法來(lái)格式化一個(gè)數(shù)值。
- var pi =3.1415;
- pi = pi.toFixed(2); // pi will be equal to 3.14
注意:toFixed()返回的是字符串而不是數(shù)字。
7.使用 console.table
- table=[{state: "Texas"},{state: "New York"},{state: "Chicago"}]
- console.table(table)
可以使用console.table來(lái)以表格的形式顯示對(duì)象。
8. 避免在循環(huán)中使用 try-catch
每次執(zhí)行catch子句時(shí),try-catch結(jié)構(gòu)都會(huì)在當(dāng)前作用域內(nèi)創(chuàng)建一個(gè)新的變量,其中捕獲的異常對(duì)象被分配給一個(gè)變量。
- var object = ['foo', 'bar'], i;
- for (i = 0, len = object.length; i
- try {
- // do something that throws an exception
- }
- catch (e) {
- // handle exception
- }
- }
第二種寫(xiě)法
- var object = ['foo', 'bar'], i;
- try {
- for (i = 0, len = object.length; i
- // do something that throws an exception
- }
- }
- catch (e) {
- // handle exception
- }
當(dāng)一個(gè)錯(cuò)誤發(fā)生時(shí),第一個(gè)讓你繼續(xù)循環(huán),而第二個(gè)則退出循環(huán)。如果你的代碼拋出的異常沒(méi)有嚴(yán)重到足以停止整個(gè)程序,那么第一個(gè)適合。
9. 多個(gè)條件檢查
對(duì)于多值匹配,我們可以把所有的值放在一個(gè)數(shù)組中,并使用indexOf()或includes()方法。
- if (value === 1 || value === 'one' || value === 2 || value === 'two') {
- }
indexOf():
- if ([1, 'one', 2, 'two'].indexOf(value) >= 0) {
- }
includes():
- if ([1, 'one', 2, 'two'].includes(value)) {
- }
10. 雙非位運(yùn)算符(~~)
雙非位運(yùn)算符是可以看作是Math.floor()方法的替代品。
- const floor = Math.floor(6.8); // 6
也可以這樣寫(xiě):
- const floor = ~~6.8; // 6
雙非位操作符方法只適用于32位整數(shù)。因此,對(duì)于任何比這更高的數(shù)字,建議使用Math.floor()
總結(jié)
最后的建議 - 不要使用隨意的編碼風(fēng)格。要有一個(gè)執(zhí)行標(biāo)準(zhǔn)。
~完,我是小智,整理完,準(zhǔn)備來(lái)盤(pán) LoL ,記得點(diǎn)贊關(guān)注,發(fā)財(cái)致富哦~
作者:Apoorv Tyagi 譯者:前端小智 來(lái)源:dev
原文:https://dev.to/apoorvtyagi/javacript-tips-and-best-practices-48ma
網(wǎng)頁(yè)題目:10個(gè)自己遵循的 JavaScript 技巧和實(shí)踐,趕緊收藏吧!
標(biāo)題鏈接:http://fisionsoft.com.cn/article/dpehgdp.html


咨詢
建站咨詢
