📖摘要
今天分享下 —— JavaScript小技巧 的一些基本知識，歡迎關注！
🌂分享
😘1.過濾唯一值
Set 對象類型是在 ES6 中引入的，配合展開操作…一起，我們可以使用它來創建一個新數組，該數組只有唯一的值。
const array = [1, 1, 2, 3, 5, 5, 1]
const uniqueArray = [...new Set(array)];
console.log(uniqueArray); // Result: [1, 2, 3, 5]
在 ES6 之前，隔離惟一值將涉及比這多得多的代碼。
此技巧適用於包含基本類型的數組：undefined，null，boolean，string和 number。（如果你有一個包含對象，函數或其他數組的數組，你需要一個不同的方法！）
😘2. 與或運算
三元運算符是編寫簡單（有時不那麼簡單）條件語句的快速方法，如下所示：
x > 100 ? 'Above 100' : 'Below 100';
x > 100 ? (x > 200 ? 'Above 200' : 'Between 100-200') : 'Below 100';
但有時使用三元運算符處理也會很複雜。相反，我們可以使用’與’&&和’或’|| 邏輯運算符以更簡潔的方式書寫表達式。這通常被稱爲“短路”或“短路運算”。
它是怎麼工作的
假設我們只想返回兩個或多個選項中的一個。
使用 && 將返回第一個條件爲 假 的值。如果每個操作數的計算值都爲 true，則返回最後一個計算過的表達式。
let one = 1, two = 2, three = 3;
console.log(one && two && three); // Result: 3
console.log(0 && null); // Result: 0
使用 || 將返回第一個條件爲 真 的值。如果每個操作數的計算結果都爲 false，則返回最後一個計算過的表達式。
let one = 1, two = 2, three = 3;
console.log(one || two || three); // Result: 1
console.log(0 || null); // Result: null
例一
假設我們想返回一個變量的長度，但是我們不知道變量的類型。
我們可以使用 if/else 語句來檢查 foo 是可接受的類型，但是這可能會變得非常冗長。或運行可以幫助我們簡化操作：
return (foo || []).length
如果變量 foo 是true，它將被返回。否則，將返回空數組的長度:0。
例二
你是否遇到過訪問嵌套對象屬性的問題？你可能不知道對象或其中一個子屬性是否存在，這可能會導致令人沮喪的錯誤。
假設我們想在 this.state 中訪問一個名爲 data 的屬性，但是在我們的程序成功返回一個獲取請求之前，data 是未定義的。
根據我們使用它的位置，調用 this.state.data 可能會阻止我們的應用程序運行。爲了解決這個問題，我們可以將其做進一步的判斷：
if (this.state.data) {
return this.state.data;
} else {
return 'Fetching Data';
}
但這似乎很重複。’或’ 運算符提供了更簡潔的解決方案：
return (this.state.data || 'Fetching Data');
一個新特性: Optional Chaining
過去在 Object 屬性鏈的調用中，很容易因爲某個屬性不存在而導致之後出現 Cannot read property xxx of undefined 的錯誤。
那 optional chaining 就是添加了?.這麼個操作符，它會先判斷前面的值，如果是 null 或 undefined，就結束調用、返回 undefined。
例如，我們可以將上面的示例重構爲 this.state.data?.()。或者，如果我們主要關注 state 是否已定義，我們可以返回 this.state？.data。
該提案目前處於第1階段，作爲一項實驗性功能。你可以在這裏閱讀它，你現在可以通過 Babel 使用你的 JavaScript ，將 @babel/plugin-proposal-optional-chaining 添加到你的 .babelrc 文件中。
😘3.轉換爲布爾值
除了常規的布爾值 true 和 false 之外，JavaScript 還將所有其他值視爲 ‘truthy’ 或**‘falsy’**。
除非另有定義，否則 JavaScript 中的所有值都是’truthy’，除了 0，“”，null，undefined，NaN，當然還有 false ，這些都是**‘falsy’**
我們可以通過使用負算運算符輕鬆地在 true 和 false 之間切換。它也會將類型轉換爲“boolean”。
const isTrue = !0;
const isFalse = !1;
const alsoFalse = !!0;
console.log(isTrue); // Result: true
console.log(typeof true); // Result: "boolean"
😘4. 轉換爲字符串
要快速地將數字轉換爲字符串，我們可以使用連接運算符 + 後跟一組空引號 ""。
const val = 1 + "";
console.log(val); // Result: "1"
console.log(typeof val); // Result: "string"
😘5. 轉換爲數字
使用加法運算符 + 可以快速實現相反的效果。
let int = "15";
int = +int;
console.log(int); // Result: 15
console.log(typeof int); Result: "number"
這也可以用於將布爾值轉換爲數字，如下所示
console.log(+true); // Return: 1
console.log(+false); // Return: 0
在某些上下文中，+ 將被解釋爲連接操作符，而不是加法操作符。當這種情況發生時(你希望返回一個整數，而不是浮點數)，您可以使用兩個波浪號:~~。
連續使用兩個波浪有效地否定了操作，因爲 — ( — n — 1) — 1 = n + 1 — 1 = n。換句話說，~—16 等於15。
const int = ~~"15"
console.log(int); // Result: 15
console.log(typeof int); Result: "number"
雖然我想不出很多用例，但是按位NOT運算符也可以用在布爾值上：~true = \-2 和 ~false = \-1。
😘6.性能更好的運算
從ES7開始，可以使用指數運算符 ** 作爲冪的簡寫，這比編寫 Math.pow(2, 3) 更快。這是很簡單的東西，但它之所以出現在列表中，是因爲沒有多少教程更新過這個操作符。
console.log(2 ** 3); // Result: 8
這不應該與通常用於表示指數的^符號相混淆，但在JavaScript中它是按位 異或 運算符。
在ES7之前，只有以 2 爲基數的冪才存在簡寫，使用按位左移操作符 <<
Math.pow(2, n);
2 << (n - 1);
2**n;
例如，2 << 3 = 16 等於 2 ** 4 = 16。
😘7. 快速浮點數轉整數
如果希望將浮點數轉換爲整數，可以使用 Math.floor()、Math.ceil() 或 Math.round()。但是還有一種更快的方法可以使用 |(位或運算符) 將浮點數截斷爲整數。
console.log(23.9 | 0); // Result: 23
console.log(-23.9 | 0); // Result: -23
| 的行爲取決於處理的是正數還是負數，所以最好只在確定的情況下使用這個快捷方式。
如果 n 爲正，則 n | 0 有效地向下舍入。如果 n 爲負數，則有效地向上舍入。更準確地說，此操作將刪除小數點後面的任何內容，將浮點數截斷爲整數。
你可以使用 ~~ 來獲得相同的舍入效果，如上所述，實際上任何位操作符都會強制浮點數爲整數。這些特殊操作之所以有效，是因爲一旦強制爲整數，值就保持不變。
刪除最後一個數字
按位或 運算符還可以用於從整數的末尾刪除任意數量的數字。這意味着我們不需要使用這樣的代碼來在類型之間進行轉換。
let str = "1553";
Number(str.substring(0, str.length - 1));
相反，按位或運算符可以這樣寫：
console.log(1553 / 10 | 0) // Result: 155
console.log(1553 / 100 | 0) // Result: 15
console.log(1553 / 1000 | 0) // Result: 1
😘8. 類中的自動綁定
我們可以在類方法中使用ES6箭頭表示法，並且通過這樣做可以隱含綁定。這通常會在我們的類構造函數中保存幾行代碼，我們可以愉快地告別重複的表達式，例如 this.myMethod = this.myMethod.bind(this)
import React, { Component } from React;
export default class App extends Compononent {
constructor(props) {
super(props);
this.state = {};
}
myMethod = () => {
// This method is bound implicitly!
}
render() {
return (
<>
<div>
{this.myMethod()}
</div>
</>
)
}
};
😘9. 數組截斷
如果要從數組的末尾刪除值，有比使用 splice() 更快的方法。
例如，如果你知道原始數組的大小，您可以重新定義它的 length 屬性，就像這樣
let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
array.length = 4;
console.log(array); // Result: [0, 1, 2, 3]
這是一個特別簡潔的解決方案。但是，我發現 slice() 方法的運行時更快。如果速度是你的主要目標，考慮使用：
let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
array = array.slice(0, 4);
console.log(array); // Result: [0, 1, 2, 3]
😘10. 獲取數組中的最後一項
數組方法 slice() 可以接受負整數，如果提供它，它將接受數組末尾的值，而不是數組開頭的值。
let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
console.log(array.slice(-1)); // Result: [9]
console.log(array.slice(-2)); // Result: [8, 9]
console.log(array.slice(-3)); // Result: [7, 8, 9]
😘11.格式化JSON代碼
最後，你之前可能已經使用過 JSON.stringify ，但是您是否意識到它還可以幫助你縮進JSON？
stringify() 方法有兩個可選參數：一個 replacer 函數，可用於過濾顯示的JSON和一個空格值。
console.log(JSON.stringify({ alpha: 'A', beta: 'B' }, null, '\t'));
// Result:
// '{
// "alpha": A,
// "beta": B
// }'
🎉最後
-
更多參考精彩博文請看這裏：《陳永佳的博客》
-
喜歡博主的小夥伴可以加個關注、點個贊哦，持續更新嘿嘿！