11個沒人告訴過你的JavaScript知識

英文 | https://niemvuilaptrinh.medium.com/11-social-buttons-for-website-design-a62cf3e143ad

翻譯 | 楊小愛

在我大學期間，我的大部分時間裡，我都在使用 Java 和 Kotlin 等 JVM 語言。具有諷刺意味的是，我大學畢業後的第一份工作居然是 ReactJS 開發人員。

在過去4年裡，我害怕和逃避的語言現在就在我面前。我害怕 JavaScript 的原因，主要是因為很難了解為什麼它會以這種方式工作。

将近一年半之後，我才有了信心了，慢慢了解JavaScript的工作方式，希望您在閱讀本文後也會更加了解JavaCript。

在這裡，我分享一些JavaScript謎團，我敢肯定您從未想過 JavaScript 中存在這些謎團。

現在，我們就開始吧。

01、假值

undefined、null、0、false、NaN、‘’都是假值。您可能已經知道這一點，但您是否知道空字元串也是假的？

見下文：

console.log('' == false); // true
console.log('' === false); // false      

02、Filter 函數

您一定在數組上經常使用 filter 函數。如果您想過濾數組中的虛假值，這裡有一個提示。隻需在過濾器函數中提供布爾值即可。

const arr = [1,4,undefined,null,9,NaN,10,''];
console.log(arr.filter(Boolean)); // [1,4,9,10]      

03、Sort 函數

你對 JavaScript 中的 sort 函數了解多少？它對數組進行排序，對嗎？嗯，不完全是。

const arr = [1,2,20,10,8];
arr.sort(); // [1, 10, 2, 20, 8]
arr.sort((a,b) => a-b); //[1,2,8,10,20]      

上面第 2 行的輸出看起來不像一個排序數組。為什麼？這是因為，當我們調用不帶參數的 sort 方法時，JavaScript 會将數組的元素轉換為字元串，然後按字母順序排序，瘋狂吧？

04、交換

很多時候，我會用一個例子來交換數組中的兩個元素或兩個變量。我曾經為此編寫了一個實用程式函數，但這是一種 JavaScript 式的方法。

Inside arrays
let arr = [1,2,3,4,5];
[arr[4],arr[0]] = [arr[0],arr[4]];
console.log(arr); //[5,2,3,4,1]
Just two variables
let a = 10, b = 20;
[a,b] = [b,a];
console.log(a,b); // 20 10      

這就是 JavaScript 解構的力量。雖然我用了很長時間來學習解構，但從來沒有這樣想過。

05、Trim 函數

在許多程式設計語言中，我們在字元串上有一個修剪方法，可以删除字元串中的任何空格。但是使用 JavaScript 修剪不會删除字元串中的所有空格。見下文。

" shivam bhasin  ".trim(); // "shivam bhasin"
"shivam bhasin".trim(); // "shivam bhasin"      

它從您的字元串中删除所有前導和尾随空格，但不是全部。由于我在 Java 中使用字元串的經驗，這讓我感到困惑。

06、Push 函數

我在我的代碼中經常使用 push 方法。雖然我最近知道我們也可以使用 push 來合并數組。

const a = [1,2];
const b = [3,4];
a.push(b); // [1,2,[3,4]] not merged
Array.prototype.push.apply(a,b); // [1,2,3,4] merged      

在上面的第 4 行中，合并後的數組将在變量 a 中。

07、isNaN 函數

isNaN 再次成為 JavaScript 中最常用的方法之一。它檢查給定的參數是否是數字。但它對于空字元串和填充字元串的行為不同。見下文。

isNaN(1); // false
isNaN(""); // false
isNaN("a"); // true
isNaN("1"); // false      

第 1 行對您來說可能很清楚，1 是一個數字，是以它傳回 false。

但是，在第 2 行，JavaScript 将空字元串視為 0，這是一個數字，是以無法通過 NaN 測試。

第 3 行也應該清楚，因為“a”是一個字元串，是以不是數字。

同樣，在第 4 行中，“1”是一個字元串，但 JavaScript 在内部将其解析為數字 1，是以未能通過 NaN 測試。很奇怪吧？知道這一點後，我開始在參數上使用 parseInt()，然後，再将它們傳遞給 isNaN 函數。

08、對象的動态鍵

有時我不得不根據 API 響應或某些計算為我的對象配置設定動态鍵。這時，我們如何做到這一點。

const a = "age";
const b = {
     name: 'shivam',
     [a]: 22, // this will become age: 22 at runtime
};      

09、Splice和Slice

将近 3 個月後，我意識到 slice 和 splice 在 JavaScript 中是不同的方法。大聲笑，我知道。以下是他們的行為方式不同。

slice(s,e);
Here s is the starting index and end is the end index of the new array which will be a sub-array of the original array. Note that the original array will not be changed when using slice.


splice(i,n);
Here i denotes the starting index and n denotes the number of items to be removed starting from index i. Note that splice will alter the original array.      

10、浮點數

這幾乎令人難以置信，但請留在我身邊。在 JavaScript 中添加浮點數的行為非常奇怪。見下文。

console.log(0.1+0.2 === 0.3); // false      

這是因為 0.1+0.2 給出了的結果是 0.30000000000000004，它不等于 0.3。

console.log(9007199254740992 + 1); // 9007199254740992  
console.log(9007199254740992 + 2); // 9007199254740994      

這看起來很奇怪，直到我知道所有 JavaScript 數字都是根據 IEEE 754 标準以 64 位二進制内部來表示浮點數後，我才了解了這一點。

11、typeOf 運算符

typeOf 是一個一進制運算符，它傳回一個字元串，表示變量的原始類型。我們知道 JavaScript 主要的對象，是以在大多數情況下，這會傳回 object 。這裡有一些奇怪的例外。

typeOf NaN; // 'number'      

typeOf NaN 是一個看起來很奇怪的數字，但 NaN 從技術上講是一種數字資料類型。但是，它是一種數值資料類型，其值不能用實際數字表示。見下文。

const nan1 = 2*'a'; // NaN
const nan2 = 4*'b'; // NaN
nan1 === nan2; // false      

在上面的例子中， nan1 和 nan2 都不相等，這意味着它們有一些值。隻是值不能用數字表示，是以它們是 NaN。看到另一個例外，

typeOf null; // 'object'      

如果您在這裡做到了，那就太好了。大多數人在此之前就結束了。但是您對它了解得越多，您就越了解世界第一程式設計語言的工作原理。

這是我與你分享的秘訣。

基本操作 > 方法

如果您想讓您的代碼更快，那麼，嘗試使用原始操作而不是進行方法調用。盡可能使用 VanillaJS，它會使您的代碼在運作時運作得更快。見下文。

const min = Math.min(a,b); // slow
const min = a<b? a: b; // fast
arr.push(x); // slow
arr[arr.length] = x; // fast      

最後，希望您通過我今天與您分享的内容有所收獲，如果您覺得它有用，也請您分享給您身邊做開發的朋友。

今天内容就到這裡了，感謝您的閱讀，同時，歡迎您給我點贊，評論加關注。