實用JavaScript?開發(fā)技巧有哪些

這篇文章將為大家詳細(xì)講解有關(guān)實用JavaScript 開發(fā)技巧有哪些，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

1. 初始化數(shù)組

如果想要初始化一個指定長度的一維數(shù)組，并指定默認(rèn)值，可以這樣：

const array = Array(6).fill(''); 
// ['', '', '', '', '', '']

如果想要初始化一個指定長度的二維數(shù)組，并指定默認(rèn)值，可以這樣：

const matrix = Array(6).fill(0).map(() => Array(5).fill(0)); 
// [[0, 0, 0, 0, 0],
//  [0, 0, 0, 0, 0],
//  [0, 0, 0, 0, 0],
//  [0, 0, 0, 0, 0],
//  [0, 0, 0, 0, 0],
//  [0, 0, 0, 0, 0]]

2. 數(shù)組求和、求最大值、最小值

const array  = [5,4,7,8,9,2];

數(shù)組求和：

array.reduce((a,b) => a+b);

數(shù)組最大值：

array.reduce((a,b) => a > b ? a : b);

Math.max(...array)

數(shù)組最小值：

array.reduce((a,b) => a < b ? a : b);

Math.min(...array)

使用數(shù)組的reduce方法可以解決很多數(shù)組的求值問題。

3. 過濾錯誤值

如果想過濾數(shù)組中的false、0、null、undefined等值，可以這樣：

const array = [1, 0, undefined, 6, 7, '', false];

array.filter(Boolean);
// [1, 6, 7]

4. 使用邏輯運(yùn)算符

如果有一段這樣的代碼：

if(a > 10) {
    doSomething(a)
}

可以使用邏輯運(yùn)算符來改寫：

a > 10 && doSomething(a)

這樣寫就會簡潔很多，如果邏輯與&&操作符前面的值為假，就會發(fā)生短路操作，直接結(jié)束這一句的執(zhí)行；如果為真，就會繼續(xù)執(zhí)行&&后面的代碼，并返回后面代碼的返回值。使用這種方式可以減少很多if...else判斷。

5. 判斷簡化

如果有下面的這樣的一個判斷：

if(a === undefined || a === 10 || a=== 15 || a === null) {
    //...
}

就可以使用數(shù)組來簡化這個判斷邏輯：

if([undefined, 10, 15, null].includes(a)) {
    //...
}

這樣代碼就會簡潔很多，并且便于擴(kuò)展，如果還有需要等于a的判斷，直接在數(shù)組中添加即可。

6. 清空數(shù)組

如果想要清空一個數(shù)組，可以將數(shù)組的length置于0:

let array = ["A", "B", "C", "D", "E", "F"]
array.length = 0 
console.log(array)  // []

7. 計算代碼性能

可以使用以下操作來計算代碼的性能：

const startTime = performance.now(); 
// 某些程序
for(let i = 0; i < 1000; i++) {
    console.log(i)
}
const endTime = performance.now();
const totaltime = endTime - startTime;
console.log(totaltime); // 30.299999952316284

8. 拼接數(shù)組

如果我們想要拼接幾個數(shù)組，可以使用擴(kuò)展運(yùn)算符：

const start = [1, 2] 
const end = [5, 6, 7] 
const numbers = [9, ...start, ...end, 8] // [9, 1, 2, 5, 6, 7 , 8]

或者使用數(shù)組的concat()方法：

const start = [1, 2, 3, 4] 
const end = [5, 6, 7] 
start.concat(end); // [1, 2, 3, 4, 5, 6, 7]

但是使用concat()方法時，如果需要合并的數(shù)組很大，那么concat() 函數(shù)會在創(chuàng)建單獨(dú)的新數(shù)組時消耗大量內(nèi)存。這時可以使用以下方法來實現(xiàn)數(shù)組的合并：

Array.push.apply(start, end)

通過這種方式就能在很大程度上較少內(nèi)存的使用。

9. 對象驗證方式

如果我們有一個這樣的對象：

const parent = {
    child: {
      child1: {
        child2: {
          key: 10
      }
    }
  }
}

很多時候我們會這樣去寫，避免某一層級不存在導(dǎo)致報錯：

parent && parent.child && parent.child.child1 && parent.child.child1.child2

這樣代碼看起來就會很臃腫，可以使用JavaScript的可選鏈運(yùn)算符：

parent?.child?.child1?.child2

這樣實現(xiàn)和效果和上面的一大長串是一樣的。

可選鏈運(yùn)算符同樣適用于數(shù)組：

const array = [1, 2, 3];
array?.[5]

可選鏈運(yùn)算符允許我們讀取位于連接對象鏈深處的屬性的值，而不必明確驗證鏈中的每個引用是否有效。在引用為空(null 或者 undefined) 的情況下不會引起錯誤，該表達(dá)式短路返回值是 undefined。與函數(shù)調(diào)用一起使用時，如果給定的函數(shù)不存在，則返回 undefined。

10. 驗證undefined和null

如果有這樣一段代碼：

if(a === null || a === undefined) {
    doSomething()
}

也就是如果需要驗證一個值如果等于null或者undefined時，需要執(zhí)行一個操作時，可以使用空值合并運(yùn)算符來簡化上面的代碼：

a ?? doSomething()

這樣，只有a是undefined或者null時，才會執(zhí)行控制合并運(yùn)算符后面的代碼?？罩岛喜⒉僮鞣??）是一個邏輯操作符，當(dāng)左側(cè)的操作數(shù)為 null 或者 undefined 時，返回其右側(cè)操作數(shù)，否則返回左側(cè)操作數(shù)。

11. 數(shù)組元素轉(zhuǎn)化為數(shù)字

如果有一個數(shù)組，想要把數(shù)組中的元素轉(zhuǎn)化為數(shù)字，可以使用map方法來實現(xiàn)：

const array = ['12', '1', '3.1415', '-10.01'];
array.map(Number);  // [12, 1, 3.1415, -10.01]

通過這種方式，map會在遍歷數(shù)組時，對數(shù)組的每個元素執(zhí)行Number構(gòu)造函數(shù)并返回結(jié)果。

12. 類數(shù)組轉(zhuǎn)為數(shù)組

可以使用以下方法將類數(shù)組arguments轉(zhuǎn)化為數(shù)組：

Array.prototype.slice.call(arguments);

除此之外，還可以使用擴(kuò)展運(yùn)算符來實現(xiàn)：

[...arguments]

13. 對象動態(tài)聲明屬性

如果想要給對象動態(tài)聲明屬性，可以這樣：

const dynamic = 'color';
var item = {
    brand: 'Ford',
    [dynamic]: 'Blue'
}
console.log(item); 
// { brand: "Ford", color: "Blue" }

14. 縮短console.log()

每次進(jìn)行調(diào)試時書寫很多console.log()就會比較麻煩，可以使用以下形式來簡化這個代碼：

const c = console.log.bind(document) 
c(996) 
c("hello world")

這樣每次執(zhí)行c方法就行了。

15. 獲取查詢參數(shù)

如果我們想要獲取URL中的參數(shù)，可以使用window對象的屬性：

window.location.search

如果一個URL為www.baidu.com?project=js&type=1 那么通過上面操作就會獲取到?project=js&type=1。如果在想獲取到其中某一個參數(shù)，可以這樣：

let type = new URLSearchParams(location.search).get('type');

16. 數(shù)字取整

如果有一個數(shù)字包含小數(shù)，我們想要去除小數(shù)，通過會使用math.floor、math.ceil或math.round方法來消除小數(shù)。其實可以使用~~運(yùn)算符來消除數(shù)字的小數(shù)部分，它相對于數(shù)字的那些方法會快很多。

~~3.1415926  // 3

其實這個運(yùn)算符的作用有很多，通常是用來將變量轉(zhuǎn)化為數(shù)字類型的，不同類型的轉(zhuǎn)化結(jié)果不一樣：

• 如果是數(shù)字類型的字符串，就會轉(zhuǎn)化為純數(shù)字；

• 如果字符串包含數(shù)字之外的值，就會轉(zhuǎn)化為0；

• 如果是布爾類型，true會返回1，false會返回0；
  

除了這種方式之外，我們還可以使用按位與來實現(xiàn)數(shù)字的取整操作，只需要在數(shù)字后面加上|0即可：

23.9 | 0   // 23
-23.9 | 0   // -23

這個操作也是直接去除數(shù)字后面的小數(shù)。這個方法和上面方法類似，使用起來性能都會比JavaScript的的API好很多。

17. 刪除數(shù)組元素

如果我們想刪除數(shù)組中的一個元素，我們可以使用delete來實現(xiàn)，但是刪除完之后的元素會變?yōu)?code>undefined，并不會消失，并且執(zhí)行時會消耗大量的時間，這樣多數(shù)情況下都不能滿足我們的需求。所以可以使用數(shù)組的splice()方法來刪除數(shù)組元素：

const array = ["a", "b", "c", "d"] 
array.splice(0, 2) // ["a", "b"]

18. 檢查對象是否為空

如果我們想要檢查對象是否為空，可以使用以下方式：

Object.keys({}).length  // 0
Object.keys({key: 1}).length  // 1

Object.keys()方法用于獲取對象的 key，會返回一個包含這些key值的數(shù)組。如果返回的數(shù)組長度為0，那對象肯定為空了。

19. 使用 switch case 替換 if/else

switch case 相對于 if/else 執(zhí)行性能更高，代碼看起來會更加清晰。

if (1 == month) {days = 31;}
else if (2 == month) {days = IsLeapYear(year) ? 29 : 28;}
else if (3 == month) {days = 31;}
else if (4 == month) {days = 30;} 
else if (5 == month) {days = 31;} 
else if (6 == month) {days = 30;} 
else if (7 == month) {days = 31;} 
else if (8 == month) {days = 31;} 
else if (9 == month) {days = 30;} 
else if (10 == month) {days = 31;} 
else if (11 == month) {days = 30;} 
else if (12 == month) {days = 31;}

使用switch...case來改寫：

switch(month) {
        case 1: days = 31; break;
        case 2: days = IsLeapYear(year) ? 29 : 28; break;
        case 3: days = 31; break;
        case 4: days = 30; break;
        case 5: days = 31; break;
        case 6: days = 30; break;
        case 7: days = 31; break;
        case 8: days = 31; break;
        case 9: days = 30; break;
        case 10: days = 31; break;
        case 11: days = 30; break;
        case 12: days = 31; break;
        default: break;
}

看起來相對來說簡潔了一點(diǎn)?？梢愿鶕?jù)情況，使用數(shù)組或?qū)ο髞砀膶慽f...else。

20. 獲取數(shù)組中的最后一項

如果想獲取數(shù)組中的最后一項，很多時候會這樣來寫：

const arr = [1, 2, 3, 4, 5];
arr[arr.length - 1]  // 5

其實我們還可以使用數(shù)組的slice方法來獲取數(shù)組的最后一個元素：

arr.slice(-1)

當(dāng)我們將slice方法的參數(shù)設(shè)置為負(fù)值時，就會從數(shù)組后面開始截取數(shù)組值，如果我們想截取后兩個值，參數(shù)傳入-2即可。

21. 值轉(zhuǎn)為布爾值

在JavaScript中，以下值都會在布爾值轉(zhuǎn)化時轉(zhuǎn)化為false，其他值會轉(zhuǎn)化為true：

• undefined

• null

• 0

• -0

• NaN

• ""
  

通常我們?nèi)绻腼@式的值轉(zhuǎn)化為布爾值，會使用Boolean()方法進(jìn)行轉(zhuǎn)化。其實我們可以使用!!運(yùn)算符來將一個值轉(zhuǎn)化我布爾值。我們知道，一個！是將對象轉(zhuǎn)為布爾型并取反，兩個！是將取反后的布爾值再取反，相當(dāng)于直接將非布爾類型值轉(zhuǎn)為布爾類型值。這種操作相對于Boolean()方法性能會快很多，因為它是計算機(jī)的原生操作：

!!undefined // false
!!"996"     // true
!!null      // false
!!NaN       // false

22. 格式化 JSON 代碼

相信大家都使用過JSON.stringify方法，該方法可以將一個 JavaScript 對象或值轉(zhuǎn)換為 JSON 字符串。他的語法如下：

JSON.stringify(value, replacer, space)

它有三個參數(shù):

• value：將要序列化成 一個 JSON 字符串的值。

• replacer 可選：如果該參數(shù)是一個函數(shù)，則在序列化過程中，被序列化的值的每個屬性都會經(jīng)過該函數(shù)的轉(zhuǎn)換和處理；如果該參數(shù)是一個數(shù)組，則只有包含在這個數(shù)組中的屬性名才會被序列化到最終的 JSON 字符串中；如果該參數(shù)為 null 或者未提供，則對象所有的屬性都會被序列化。

• space 可選：指定縮進(jìn)用的空白字符串，用于美化輸出（pretty-print）；如果參數(shù)是個數(shù)字，它代表有多少的空格；上限為10。該值若小于1，則意味著沒有空格；如果該參數(shù)為字符串（當(dāng)字符串長度超過10個字母，取其前10個字母），該字符串將被作為空格；如果該參數(shù)沒有提供（或者為 null），將沒有空格。
  

通常情況下，我們都寫一個參數(shù)來將一個 JavaScript 對象或值轉(zhuǎn)換為 JSON 字符串?？梢钥吹剿€有兩個可選的參數(shù)，所以我們可以用這倆參數(shù)來格式化JSON代碼：

console.log(JSON.stringify({ alpha: 'A', beta: 'B' }, null, '\t'));

輸出結(jié)果如下：

23. 避免使用eval()和with()

• with() 會在全局范圍內(nèi)插入一個變量。因此，如果另一個變量具有相同的名稱，則可能會導(dǎo)致混淆并覆蓋該值。

• eval() 是比較昂貴的操作，每次調(diào)用它時，腳本引擎都必須將源代碼轉(zhuǎn)換為可執(zhí)行代碼。
  

24. 函數(shù)參數(shù)使用對象而不是參數(shù)列表

當(dāng)我們使用參數(shù)列表給函數(shù)傳遞參數(shù)時，如果參數(shù)較少還好，如果參數(shù)較多時，就會比較麻煩，因為我們必須按照參數(shù)列表的順序來傳遞參數(shù)。如果使用TypeScript來寫，那么寫的時候還需要讓可選參數(shù)排在必選參數(shù)的后面。

如果我們的函數(shù)參數(shù)較多，就可以考慮使用對象的形式來傳遞參數(shù)，對象的形式傳遞參數(shù)時，傳遞可選參數(shù)并不需要放在最后，并且參數(shù)的順序不在重要。與參數(shù)列表相比，通過對象傳遞的內(nèi)容也更容易閱讀和理解。

下面來看一個例子：

function getItem(price, quantity, name, description) {}

getItem(15, undefined, 'bananas', 'fruit')

下面來使用對象傳參：

function getItem(args) {
    const {price, quantity, name, description} = args
}

getItem({
    name: 'bananas',
    price: 10,
    quantity: 1, 
    description: 'fruit'
})

關(guān)于“實用JavaScript 開發(fā)技巧有哪些”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。