web前端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

今天愛創小編的分享就到這里了，有學習前端，獲取前端更多的是只是的同學的，歡迎大家點贊，關注，私信我！！！