資訊專欄INFORMATION COLUMN
摘要：否則，將返回空數(shù)組的長(zhǎng)度。該提案目前處于第階段，作為一項(xiàng)實(shí)驗(yàn)性功能。轉(zhuǎn)換為布爾值除了常規(guī)的布爾值和之外，還將所有其他值視為或。這也可以用于將布爾值轉(zhuǎn)換為數(shù)字，如下所示在某些上下文中，將被解釋為連接操作符，而不是加法操作符。
譯者：前端小智
原文：medium.com/@bretcamero…
當(dāng)我開始學(xué)習(xí)JavaScript時(shí)，我把我在別人的代碼、code challenge網(wǎng)站以及我使用的教程之外的任何地方發(fā)現(xiàn)的每一個(gè)節(jié)省時(shí)間的技巧都列了一個(gè)清單。
在這篇文章中，我將分享11條我認(rèn)為特別有用的技巧。這篇文章是為初學(xué)者準(zhǔn)備的，但我希望即使是中級(jí)JavaScript開發(fā)人員也能在這個(gè)列表中找到一些新的東西。
想閱讀更多優(yōu)質(zhì)文章請(qǐng)猛戳GitHub博客,一年百來篇優(yōu)質(zhì)文章等著你！
1..過濾唯一值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è)不同的方法?。?/p>
##2. 與或運(yùn)算
三元運(yùn)算符是編寫簡(jiǎn)單（有時(shí)不那么簡(jiǎn)單）條件語句的快速方法，如下所示：
x > 100 ");
但有時(shí)使用三元運(yùn)算符處理也會(huì)很復(fù)雜。 相反，我們可以使用"與"&&和"或"|| 邏輯運(yùn)算符以更簡(jiǎn)潔的方式書寫表達(dá)式。 這通常被稱為“短路”或“短路運(yùn)算”。
假設(shè)我們只想返回兩個(gè)或多個(gè)選項(xiàng)中的一個(gè)。
使用&&將返回第一個(gè)條件為假的值。如果每個(gè)操作數(shù)的計(jì)算值都為true，則返回最后一個(gè)計(jì)算過的表達(dá)式。
let one = 1, two = 2, three = 3; console.log(one && two && three); // Result: 3 console.log(0 && null); // Result: 0
使用||將返回第一個(gè)條件為真的值。如果每個(gè)操作數(shù)的計(jì)算結(jié)果都為false，則返回最后一個(gè)計(jì)算過的表達(dá)式。
let one = 1, two = 2, three = 3; console.log(one || two || three); // Result: 1 console.log(0 || null); // Result: null
假設(shè)我們想返回一個(gè)變量的長(zhǎng)度，但是我們不知道變量的類型。
我們可以使用if/else語句來檢查foo是可接受的類型，但是這可能會(huì)變得非常冗長(zhǎng)。或運(yùn)行可以幫助我們簡(jiǎn)化操作：
return (foo || []).length
如果變量foo是true，它將被返回。否則，將返回空數(shù)組的長(zhǎng)度:0。
你是否遇到過訪問嵌套對(duì)象屬性的問題？ 你可能不知道對(duì)象或其中一個(gè)子屬性是否存在，這可能會(huì)導(dǎo)致令人沮喪的錯(cuò)誤。
假設(shè)我們想在this.state中訪問一個(gè)名為data的屬性，但是在我們的程序成功返回一個(gè)獲取請(qǐng)求之前，data 是未定義的。
根據(jù)我們使用它的位置，調(diào)用this.state.data可能會(huì)阻止我們的應(yīng)用程序運(yùn)行。 為了解決這個(gè)問題，我們可以將其做進(jìn)一步的判斷：
if (this.state.data) {
return this.state.data;
} else {
return "Fetching Data";
}
但這似乎很重復(fù)。 "或" 運(yùn)算符提供了更簡(jiǎn)潔的解決方案：
return (this.state.data || "Fetching Data");
過去在 Object 屬性鏈的調(diào)用中，很容易因?yàn)槟硞€(gè)屬性不存在而導(dǎo)致之后出現(xiàn)Cannot read property xxx of undefined的錯(cuò)誤。
那 optional chaining 就是添加了");這么個(gè)操作符，它會(huì)先判斷前面的值，如果是 null 或 undefined，就結(jié)束調(diào)用、返回 undefined。
例如，我們可以將上面的示例重構(gòu)為 this.state.data");?；蛘撸绻覀冎饕P(guān)注state 是否已定義，我們可以返回this.state？.data。
該提案目前處于第1階段，作為一項(xiàng)實(shí)驗(yàn)性功能。 你可以在這里閱讀它，你現(xiàn)在可以通過Babel使用你的JavaScript，將 @babel/plugin-proposal-optional-chaining添加到你的.babelrc文件中。
3.轉(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: true console.log(typeof true); // Result: "boolean"4. 轉(zhuǎn)換為字符串
要快速地將數(shù)字轉(zhuǎn)換為字符串，我們可以使用連接運(yùn)算符+后跟一組空引號(hào)""。
const val = 1 + ""; console.log(val); // Result: "1" console.log(typeof val); // Result: "string"5. 轉(zhuǎn)換為數(shù)字
使用加法運(yùn)算符+可以快速實(shí)現(xiàn)相反的效果。
let int = "15"; int = +int; console.log(int); // Result: 15 console.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)?b>—?(?—?n?—?1)?—?1 = n + 1?—?1 = n。 換句話說，~—16 等于15。
const int = ~~"15" console.log(int); // Result: 15 console.log(typeof int); Result: "number"
雖然我想不出很多用例，但是按位NOT運(yùn)算符也可以用在布爾值上：~true = -2和~false = -1。
6.性能更好的運(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。
7. 快速浮點(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: 23 console.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ù)，值就保持不變。
按位或運(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: 155 console.log(1553 / 100 | 0) // Result: 15 console.log(1553 / 1000 | 0) // Result: 18. 類中的自動(dòng)綁定
我們可以在類方法中使用ES6箭頭表示法，并且通過這樣做可以隱含綁定。 這通常會(huì)在我們的類構(gòu)造函數(shù)中保存幾行代碼，我們可以愉快地告別重復(fù)的表達(dá)式，例如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 (
<>
{this.myMethod()}
)
}
};
9. 數(shù)組截?cái)?/b>
如果要從數(shù)組的末尾刪除值，有比使用splice()更快的方法。
例如，如果你知道原始數(shù)組的大小，您可以重新定義它的length屬性，就像這樣
let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]; array.length = 4; console.log(array); // Result: [0, 1, 2, 3]
這是一個(gè)特別簡(jiǎn)潔的解決方案。但是，我發(fā)現(xiàn)slice()方法的運(yùn)行時(shí)更快。如果速度是你的主要目標(biāo)，考慮使用：
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. 獲取數(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]11.格式化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, " "));
// Result:
// "{
// "alpha": A,
// "beta": B
// }"
你的點(diǎn)贊是我持續(xù)分享好東西的動(dòng)力，歡迎點(diǎn)贊！
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/7863.html
摘要：否則，將返回空數(shù)組的長(zhǎng)度。該提案目前處于第階段，作為一項(xiàng)實(shí)驗(yàn)性功能。轉(zhuǎn)換為布爾值除了常規(guī)的布爾值和之外，還將所有其他值視為或。這也可以用于將布爾值轉(zhuǎn)換為數(shù)字，如下所示在某些上下文中，將被解釋為連接操作符，而不是加法操作符。 當(dāng)我開始學(xué)習(xí)JavaScript時(shí)，我把我在別人的代碼、code challenge網(wǎng)站以及我使用的教程之外的任何地方發(fā)現(xiàn)的每一個(gè)節(jié)省時(shí)間的技巧都列了一個(gè)清單。 在...
摘要：否則，將返回空數(shù)組的長(zhǎng)度。該提案目前處于第階段，作為一項(xiàng)實(shí)驗(yàn)性功能。轉(zhuǎn)換為布爾值除了常規(guī)的布爾值和之外，還將所有其他值視為或。這也可以用于將布爾值轉(zhuǎn)換為數(shù)字，如下所示在某些上下文中，將被解釋為連接操作符，而不是加法操作符。 當(dāng)我開始學(xué)習(xí)JavaScript時(shí)，我把我在別人的代碼、code challenge網(wǎng)站以及我使用的教程之外的任何地方發(fā)現(xiàn)的每一個(gè)節(jié)省時(shí)間的技巧都列了一個(gè)清單。 在...
摘要：對(duì)進(jìn)行序列化和反序列化避免使用和構(gòu)造函數(shù)使用和構(gòu)造函數(shù)是非常昂貴的操作，因?yàn)槊看嗡麄兌紩?huì)調(diào)用腳本引擎將源代碼轉(zhuǎn)換成可執(zhí)行代碼。 原文：45 Useful JavaScript Tips, Tricks and Best Practices 譯文：45個(gè)有用的JavaScript技巧，竅門和最佳實(shí)踐 譯者：dwqs 在這篇文章中，我將分享一些JavaScript常用的技巧，竅門和最...
摘要：函數(shù)式編程前端掘金引言面向?qū)ο缶幊桃恢币詠矶际侵械闹鲗?dǎo)范式。函數(shù)式編程是一種強(qiáng)調(diào)減少對(duì)程序外部狀態(tài)產(chǎn)生改變的方式。 JavaScript 函數(shù)式編程 - 前端 - 掘金引言 面向?qū)ο缶幊桃恢币詠矶际荍avaScript中的主導(dǎo)范式。JavaScript作為一門多范式編程語言，然而，近幾年，函數(shù)式編程越來越多得受到開發(fā)者的青睞。函數(shù)式編程是一種強(qiáng)調(diào)減少對(duì)程序外部狀態(tài)產(chǎn)生改變的方式。因此，...
摘要：官網(wǎng)地址聊天機(jī)器人插件開發(fā)實(shí)例教程一創(chuàng)建插件在系統(tǒng)技巧使你的更加專業(yè)前端掘金一個(gè)幫你提升技巧的收藏集。我會(huì)簡(jiǎn)單基于的簡(jiǎn)潔視頻播放器組件前端掘金使用和實(shí)現(xiàn)購物車場(chǎng)景前端掘金本文是上篇文章的序章，一直想有機(jī)會(huì)再次實(shí)踐下。 2道面試題：輸入U(xiǎn)RL按回車&HTTP2 - 掘金通過幾輪面試，我發(fā)現(xiàn)真正那種問答的技術(shù)面，寫一堆項(xiàng)目真不如去刷技術(shù)文章作用大，因此刷了一段時(shí)間的博客和掘金，整理下曾經(jīng)被...
閱讀 3659·2021-10-09 09:58
閱讀 1202·2021-09-22 15:20
閱讀 2503·2019-08-30 15:54
閱讀 3520·2019-08-30 14:08
閱讀 897·2019-08-30 13:06
閱讀 1827·2019-08-26 12:16
閱讀 2687·2019-08-26 12:11
閱讀 2517·2019-08-26 10:38
