記錄--JavaScript 中有趣的 9 個常用編碼套路

這里給大家分享我在網上總結出來的一些知識，希望對大家有所幫助

1?? set物件：陣列快速去重

常規情況下，我們想要篩選唯一值，一般會想到遍歷陣列然后逐個對比，或者使用成熟的庫比如lodash之類的，

不過，ES6帶來了一個新玩意兒！它引入了一個全新的物件型別：Set！而且，如果結合上...展開運算子，我們可以超級快速地創建一個已經去重的全新陣列！??

const arr = [10, 10, 10, 20, 20, 30, 40, 40, 50, 60, 60, 70];
const uniArr = [...new Set(array)];
console.log(uniArr);
// [10, 20, 30, 40, 50, 60, 70]

這個技巧只適用于包含基本型別的陣列，比如undefined、null、boolean、string和number，

但是要記住哦，如果陣列里面還有物件、函式或其他陣列的話，就不能用這個方法了！??

2?? include方法：簡化（ || 或）條件判斷

當我們使用邏輯運算子||進行條件判斷時，如果有很多可選值，代碼會變得冗長，

不過，我們可以使用includes方法來簡化對陣列的遍歷操作，方便地判斷陣列是否包含某個特定的元素，

這樣一來，我們就可以更簡潔地列出可選值，而不必寫一長串的條件判斷陳述句，includes方法可以幫助我們輕松判斷陣列中是否存在指定的元素????

const myNum = '3';
const numArr = ['1', '2', '3'];
?
// 使用 || 
if (myNum === '1' || myNum === '2' || myNum === '3') {
    //……
}
?
// 使用 include
if (numArr.includes(myNum)) {
    //……
}           

3?? 截斷陣列：改變length就可以

操作陣列時，我們通常會優先使用array物件中的高級函式，

不過，我這里要介紹一種更簡單的方法來改變陣列長度，我喜歡它的原因是它非常直觀且易讀，

只需使用length屬性并傳遞一個數字，就可以改變陣列的長度，這樣做非常方便！??

let array = ['1', '2', '3', '4'];
array.length = 2;
console.log(array); // ['1', '2']

當然 ，如果你更注重性能，還是請使用 array.slice()

4?? 數字分割符： 提高數字可讀性

若要提高數字的可讀性，你可以使用下劃線作為分隔符來更好地區分數字的各個部分，這樣做可以讓數字更易讀，讓人一目了然????

const num = 1_000_000_000;
?
console.log(num); // 1000000000

5?? 控制臺列印：用物件包裹更清晰

在使用console.log()時，你可以將引數括在大括號中，這樣可以在控制臺輸出時同時顯示變數的名稱和值，這種方式非常方便，讓你更清晰地了解每個變數的內容????

const name = "道長王jj";
console.log({ name });
?
// {
//     "name": "道長王jj"
// }

6?? 短路運算：簡化條件判斷

if...else條件判斷是代碼程序中最常用的，幾乎在任何情況下，我們都會快速地敲下它來控制邏輯流程，

不過，有時候我們也希望代碼更加簡潔、快速，不占那么多篇幅，我們想盡可能地簡潔且快速，于是就會用到三元運算子：

const num = 75;
const result1 = num > 100 ? '大于100' : '小于100';

但是我在這里并不是推薦使用“三元運算”，其實有時候三元運算子可能會讓代碼邏輯變得有點復雜哦！??比如這樣：

const result2 = num > 100 ? (num > 200 ? '大于200' : '介于100和200之間') : '小于100';

這個時候，使用 && 和 || 這類邏輯運算子反而能更簡潔的表達算式，

舉個例子：

// 假設，我們有三個已經打過分的相親物件必須選擇一個來當女朋友，使用 `&&` 可以很好的幫我們做出選擇，
const one = 8;
const two = 9;
const three = 10;
// 回傳10
console.log(one && two && three); 
// 回傳0
console.log(0 && null); 

// 當然，如果你足夠獨特~~（變態）~~，就是不要女朋友，如果選只選最差的，你可以使用 `||` 來幫你做吹選擇，
const one = 8;
const two = 9;
const three = 10;
// 回傳8
console.log(one || two || three); 
// 回傳null
console.log(0 || null); 

哦，這個情況在作業場景中確實很常見，

假設我們想回傳變數的 length ，但我們不確定介面會不會給我們需要的型別，

這個時候我們就可以使用 if/else 陳述句來檢查是可接受的型別，但它會讓我們的代碼非常臃腫，

這時候，我們可以使用短路運算來簡化代碼，而且有極高的健壯性：

// 使用if
let temp = getArray();
?
if (!temp) {
    tempLength = 0;
} else {
    tempLength = temp.length
}
?
// 使用 ||
// 如果變數 tempArray 為真，則將回傳該變數，否則，將回傳 []
const temp = (tempArray || []).length;

7?? 可選鏈：更加安全地訪問物件屬性

你有沒有遇到過訪問嵌套物件屬性的困擾？

就是有時候你根本不確定這個物件或者它的子屬性到底存不存在，結果就報錯了！??以至于程式崩潰無法運行

console.log(abc.ss)
// ceError: abc is not defined
//     at <anonymous>:1:1
// (匿名) @ VM190795

為了不讓報錯阻止我們的程式運行，我們通常會將它包裝在一個if……else代碼塊中：

if (abc.ss) {
  console.log(abc.ss);
} else {
  console.log('沒有abc這個變數喏~');
}
?
// 還可以用短路運算
console.log(abc && abc.ss)

8?? 巧用運算子：快速型別轉換

在這之前需要科普一些小知識：

除了常規的true和false之外，其他變數也可以被當成true 或者 false，

除了0、""(空字串)、null、undefined、NaN、false 之外呢，JavaScript中的所有其他值都是"真的"哦！

所以呢，基于這個認知，

我們可以使用負運算子 ! ，將型別轉換為 "boolean" ，

const x = Boolean(expression);     // 推薦
const x = !!(expression);          // 推薦
const x = new Boolean(expression); // 不太好

我們可以使用連接運算子 + 后跟一組空引號 ''，將型別轉換為 "string" ，

const value = https://www.cnblogs.com/smileZAZ/archive/2023/06/05/12 +'';
console.log(value); // '12'

我們可以使用加法運算子 +，將型別轉換為 "number" ，

const value = 'https://www.cnblogs.com/smileZAZ/archive/2023/06/05/12';
value = https://www.cnblogs.com/smileZAZ/archive/2023/06/05/value + 1;
console.log(value); // 13
?
// 當然也可以轉換 Boolean 變成 Number 
// 作業中不推薦這樣用！！！！
console.log(+true); // 1
console.log(+false); // 0

9?? 快速運算：更快更簡潔的數學運算運算子

以前我們在使用JavaScript進行數學運算時，總是要借助Math庫進行運算，

很奇怪的是，但是很多教程并沒有提醒我們，ES7其實帶來的全新運算子?

如果想示乘方操作，通常我們會呼叫Math.pow(5, 7)這個方法，但是現在我們可以使用冪運算子**了，而且性能更快更好，

console.log(5 ** 7); // 78125

如果想將浮點數轉換為整數，通常我們會使用Math.floor()、Math.ceil()或Math.round()這些方法，不過，其實可以使用 | 將浮點數直接截斷為整數，這個技巧可以讓你的代碼更簡潔高效哦！??

// 正數，則向下舍入
console.log(34.9 | 0);  // Result: 34
// 負數，則向上舍入
console.log(-12.9 | 0); // Result: -12

以前我們只取千分位需要進行型別轉換后才能進行取數

let str = "33545"; 
Number(str.substring(0, str.length - 3)); // 33

但是我們可以更優雅地這樣做：

console.log(33545 / 1000 | 0)  // Result: 33

本文轉載于:

https://juejin.cn/post/7239895900297740344

如果對您有所幫助，歡迎您點個關注，我會定時更新技術檔案，大家一起討論學習，一起進步，

標籤：其他

上一篇：幫你梳理了一份前端知識架構圖

下一篇：返回列表