13 種 JavaScript 代碼技巧

1. 多表達(dá)式多 if 判斷

我們可以在數(shù)組中存儲(chǔ)多個(gè)值，并且可以使用數(shù)組include方法。

// 長(zhǎng) if (x === 'abc' || x === 'def' || x === 'ghi' || x ==='jkl') {//logic } // 短 if (['abc', 'def', 'ghi', 'jkl'].includes(x)) {//logic }

2. 簡(jiǎn)寫(xiě) if else

如果 if-else 的邏輯比較降低，可以使用下面這種方式鏡像簡(jiǎn)寫(xiě)，當(dāng)然也可以使用三元運(yùn)算符來(lái)實(shí)現(xiàn)。

// 長(zhǎng) let test: boolean; if (x > 100) {test = true; } else {test = false; } // 短 let test = (x > 10) ? true : false; // 也可以直接這樣 let test = x > 10;

3. 合并變量聲明

當(dāng)我們聲明多個(gè)同類(lèi)型的變量時(shí)，可以像下面這樣簡(jiǎn)寫(xiě)。

// 長(zhǎng) let test1; let test2 = 1; // 短 let test1, test2 = 1;

4. 合并變量賦值

當(dāng)我們處理多個(gè)變量并將不同的值分配給不同的變量時(shí)，這種方式非常有用。

// 長(zhǎng) let test1, test2, test3; test1 = 1; test2 = 2; test3 = 3; // 短 let [test1, test2, test3] = [1, 2, 3];

5. && 運(yùn)算符

如果僅在變量值為 true 的情況下才調(diào)用函數(shù)，則可以使用 && 運(yùn)算符。

// 長(zhǎng) if (test1) {callMethod(); } // 短 test1 && callMethod();

6. 箭頭函數(shù)

// 長(zhǎng) function add(a, b) { return a + b; } // 短 const add = (a, b) => a + b;

7. 短函數(shù)調(diào)用

可以使用三元運(yùn)算符來(lái)實(shí)現(xiàn)這些功能。

const fun1 = () => console.log('fun1'); const fun2 = () => console.log('fun2'); // 長(zhǎng) let test = 1; if (test == 1) {fun1(); } else{fun2(); } // 短 (test === 1? fun1:fun2)();

8. Switch 簡(jiǎn)記法

我們可以將條件保存在鍵值對(duì)象中，并可以根據(jù)條件使用。

// 長(zhǎng) switch (data) {case 1:test1();break;case 2:test2();break;case 3:test();break;// And so on... }// 短 const data = {1: test1,2: test2,3: test };data[something] && data[something]();

9. 默認(rèn)參數(shù)值

// 長(zhǎng) function add(test1, test2) {if (test1 === undefined)test1 = 1;if (test2 === undefined)test2 = 2;return test1 + test2; } // 短 const add = (test1 = 1, test2 = 2) => (test1 + test2);

10. 擴(kuò)展運(yùn)算符

// 長(zhǎng)-合并數(shù)組 const data = [1, 2, 3]; const test = [4 ,5 , 6].concat(data); // 短-合并數(shù)組 const data = [1, 2, 3]; const test = [4 ,5 , 6, ...data];// 長(zhǎng)-拷貝數(shù)組 const test1 = [1, 2, 3]; const test2 = test1.slice() // 短-拷貝數(shù)組 const test1 = [1, 2, 3]; const test2 = [...test1];

11. 模版字符串

// 長(zhǎng) const welcome = 'Hi ' + test1 + ' ' + test2 + '.' // 短 const welcome = `Hi ${test1} ${test2}`;

12. 簡(jiǎn)寫(xiě)對(duì)象

let test1 = 'a'; let test2 = 'b'; // 長(zhǎng) let obj = {test1: test1, test2: test2}; // 短 let obj = {test1, test2};

13. 在數(shù)組中查找最大值和最小值

const arr = [1, 2, 3]; Math.max(…arr); // 3 Math.min(…arr); //

總結(jié)

以上是生活随笔為你收集整理的13 种 JavaScript 代码技巧的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。