這裏給大家分享我在網上總結出來的一些知識，希望對大家有所幫助
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 = 12 + ''; console.log(value); // '12'
我們可以使用加法運算符 +，將類型轉換為 "number" 。
const value = '12'; value = 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
如果對您有所幫助，歡迎您點個關注，我會定時更新技術文檔，大家一起討論學習，一起進步。
