安利幾個(gè)JS開發(fā)小技巧

“ 關(guān)注 前端公蝦米?，回復(fù) '資料'，免費(fèi)領(lǐng)取Vue，小程序，Node Js，前端開發(fā)用的插件以及面試視頻等學(xué)習(xí)資料，讓我們一起學(xué)習(xí)，一起進(jìn)步

1 轉(zhuǎn)換布爾值

除了常規(guī)的布爾值true和false之外，JavaScript還將所有其他值視為 ‘truthy’ 或**‘falsy’**。

除非另有定義，否則 JavaScript 中的所有值都是'truthy'，除了0，“”，null，undefined，NaN，當(dāng)然還有false，這些都是**'falsy'**

我們可以通過使用負(fù)算運(yùn)算符輕松地在true和false之間切換。它也會(huì)將類型轉(zhuǎn)換為“boolean”。

const isTrue  = !0;const isFalse = !1;const alsoFalse = !!0;console.log(isTrue); // Result: trueconsole.log(typeof true); // Result: "boolean"

2 轉(zhuǎn)換數(shù)字

使用加法運(yùn)算符+可以快速實(shí)現(xiàn)相反的效果。

let int = "15";int = +int;console.log(int); // Result: 15console.log(typeof int); Result: "number"

這也可以用于將布爾值轉(zhuǎn)換為數(shù)字，如下所示

 console.log(+true);  // Return: 1 console.log(+false); // Return: 0

在某些上下文中，+將被解釋為連接操作符，而不是加法操作符。當(dāng)這種情況發(fā)生時(shí)(你希望返回一個(gè)整數(shù)，而不是浮點(diǎn)數(shù))，您可以使用兩個(gè)波浪號(hào):~~。

連續(xù)使用兩個(gè)波浪有效地否定了操作，因?yàn)?code style="font-size: 14px;overflow-wrap: break-word;padding: 2px 4px;border-radius: 4px;margin-right: 2px;margin-left: 2px;background-color: rgba(27, 31, 35, 0.05);font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;color: rgb(150, 84, 181);">—?(?—?n?—?1)?—?1 = n + 1?—?1 = n。換句話說，~—16 等于15。

const int = ~~"15"console.log(int); // Result: 15console.log(typeof int); Result: "number"

雖然我想不出很多用例，但是按位NOT運(yùn)算符也可以用在布爾值上：~true = \-2和~false = \-1。

3轉(zhuǎn)換字符串

要快速地將數(shù)字轉(zhuǎn)換為字符串，我們可以使用連接運(yùn)算符+后跟一組空引號(hào)""。

const val = 1 + "";console.log(val); // Result: "1"console.log(typeof val); // Result: "string"

4浮點(diǎn)數(shù)轉(zhuǎn)整數(shù)

如果希望將浮點(diǎn)數(shù)轉(zhuǎn)換為整數(shù)，可以使用Math.floor()、Math.ceil()或Math.round()。但是還有一種更快的方法可以使用|(位或運(yùn)算符)將浮點(diǎn)數(shù)截?cái)酁檎麛?shù)。

console.log(23.9 | 0);  // Result: 23console.log(-23.9 | 0); // Result: -23

|的行為取決于處理的是正數(shù)還是負(fù)數(shù)，所以最好只在確定的情況下使用這個(gè)快捷方式。

如果n為正，則n | 0有效地向下舍入。如果n為負(fù)數(shù)，則有效地向上舍入。更準(zhǔn)確地說，此操作將刪除小數(shù)點(diǎn)后面的任何內(nèi)容，將浮點(diǎn)數(shù)截?cái)酁檎麛?shù)。

你可以使用~~來獲得相同的舍入效果，如上所述，實(shí)際上任何位操作符都會(huì)強(qiáng)制浮點(diǎn)數(shù)為整數(shù)。這些特殊操作之所以有效，是因?yàn)橐坏?qiáng)制為整數(shù)，值就保持不變。

刪除最后一個(gè)數(shù)字

按位或運(yùn)算符還可以用于從整數(shù)的末尾刪除任意數(shù)量的數(shù)字。這意味著我們不需要使用這樣的代碼來在類型之間進(jìn)行轉(zhuǎn)換。

let str = "1553";Number(str.substring(0, str.length - 1));

相反，按位或運(yùn)算符可以這樣寫：

console.log(1553 / 10   | 0)  // Result: 155console.log(1553 / 100  | 0)  // Result: 15console.log(1553 / 1000 | 0)  // Result: 1

5格式化JSON

最后，你之前可能已經(jīng)使用過JSON.stringify，但是您是否意識(shí)到它還可以幫助你縮進(jìn)JSON？

stringify()方法有兩個(gè)可選參數(shù)：一個(gè)replacer函數(shù)，可用于過濾顯示的JSON和一個(gè)空格值。

console.log(JSON.stringify({ alpha: 'A', beta: 'B' }, null, '\t'));// Result:// '{//     "alpha": A,//     "beta": B// }'

6取數(shù)組最后一項(xiàng)

數(shù)組方法slice()可以接受負(fù)整數(shù)，如果提供它，它將接受數(shù)組末尾的值，而不是數(shù)組開頭的值。

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]

7es6數(shù)組去重

Set對(duì)象類型是在ES6中引入的，配合展開操作...一起，我們可以使用它來創(chuàng)建一個(gè)新數(shù)組，該數(shù)組只有唯一的值。

const array = [1, 1, 2, 3, 5, 5, 1]const uniqueArray = [...new Set(array)];console.log(uniqueArray); // Result: [1, 2, 3, 5]

在ES6之前，隔離惟一值將涉及比這多得多的代碼。

此技巧適用于包含基本類型的數(shù)組：undefined，null，boolean，string和number。（如果你有一個(gè)包含對(duì)象，函數(shù)或其他數(shù)組的數(shù)組，你需要一個(gè)不同的方法！）

8更優(yōu)雅的運(yùn)算

從ES7開始，可以使用指數(shù)運(yùn)算符**作為冪的簡(jiǎn)寫，這比編寫Math.pow(2, 3) 更快。這是很簡(jiǎn)單的東西，但它之所以出現(xiàn)在列表中，是因?yàn)闆]有多少教程更新過這個(gè)操作符。

console.log(2 ** 3); // Result: 8

這不應(yīng)該與通常用于表示指數(shù)的^符號(hào)相混淆，但在JavaScript中它是按位異或運(yùn)算符。

在ES7之前，只有以2為基數(shù)的冪才存在簡(jiǎn)寫，使用按位左移操作符<<

Math.pow(2, n);2 << (n - 1);2**n;

例如，2 << 3 = 16等于2 ** 4 = 16。

可以的話，希望各位大佬給個(gè)小心心。還可以關(guān)注我的公眾號(hào)，大家一起進(jìn)步，一起學(xué)習(xí)！支持一下帥編！