英文 | ?https://blog.bitsrc.io/11-javascript-and-typescript-shorthands-you-should-know-690a002674e0

在編寫簡潔高效的代碼與編寫僅可讀的代碼之間有一條很好的界限。最糟糕的是，這條線不是通用的，有些人會比其他人畫得更遠，因此，在確定一段代碼是否對每個人都足夠清晰時，我們傾向于避免使用許多速記(如三元運算符) ，在線箭頭功能等。

但是，丑陋的事實是：有時，這些速記法非常方便并且非常容易，以至于對閱讀我們的代碼有足夠興趣的任何人都可以并且將會理解它們。

因此，在本文中，我想介紹一些非常有用的(有時是晦澀的)速記，您可以在JavaScript和TypeScript中找到它們，以便您可以自己使用它們，或者至少可以使用它們，以防萬一您編寫代碼的人重新閱讀已使用它們。

1.空位合并運算符

有了這樣的名字，很難相信它不是該語言中最受歡迎的運算符之一，對嗎？

此運算符的要點是，如果所計算的表達式為null或undefined?，返回的值不完全是該名稱所隱含的含義，但是很好。這是您的使用方式：

function myFn(variable1, variable2) {let var2 = variable2 ?? "default value"return variable1 + var2}myFn("this has", " no default value") //returns "this has no default value"myFn("this has no") //returns "this has no default value"myFn("this has no", 0) //returns "this has no 0"

幾乎像||?運算符，其背后的邏輯是相同的：如果表達式的左側計算為null或undefined它將返回右側，否則將返回左側。因此，對于通用默認值，可以在其中分配任何類型的值，并希望確保不必處理undefined或null那么這就是方法。

2.邏輯無效分配?

這是前一個的擴展，可以同時使用??=運算符同時執(zhí)行這兩個操作：檢查空合并值并將其分配為1。

讓我們在相同的代碼示例中進行另外的破解：

function myFn(variable1, variable2) {  variable2 ??= "default value"  return variable1 + var2}

myFn("this has", " no default value") //returns "this has no default value"myFn("this has no") //returns "this has no default value"myFn("this?has?no",?0)?//returns?"this?has?no?0"

賦值運算符允許我們檢查variable2的值，如果它的值為null或undefined則賦值將通過，否則將永遠不會發(fā)生。

警告：此語法可能會使其他對該運算符不熟悉的人感到困惑，因此，如果您使用它，則最好在一行注釋中說明正在發(fā)生的事情。

3. TypeScript的構造函數速記

這是TypeScript特有的，如果您是JavaScript的純粹主義者，那您就錯了！(不，只是在開玩笑，但是您不能使用普通JS來做到這一點)。

您知道在定義類時通常如何列出所有屬性及其相應的可見性，然后在構造函數中分配它們的值嗎？好吧，對于那些您的構造函數非常簡單并且您只是將接收到的值分配為參數的情況，這是一個簡寫。

讓我給你演示：


//Old way...class Person {
  private first_name: string;  private last_name: string;  private age: number;  private is_married: boolean;
  constructor(fname:string, lname:string, age:number, married:boolean) {    this.first_name = fname;    this.last_name = lname;    this.age = age;    this.is_married = married;  }}

//New, shorter way...class Person {

  constructor( private first_name: string,               private last_name: string,               private age: number,               private is_married: boolean){}}

這絕對是一個節(jié)省時間的程序，特別是如果您有一個具有很多屬性的類。

本質上，您要確保的是，不要忘了在構造函數之后添加{}?，因為這是函數的主體。就是這樣，其余的工作由編譯器完成，了解了我們要實現的目標，它將把兩個版本的代碼轉換為相同JavaScript代碼段。

提示：使用Bit?(?Github?)在項目之間共享可重復使用的模塊/?組件?。Bit使共享，記錄和組織來自任何項目的獨立組件變得簡單。

使用它可以最大程度地重復使用代碼，在獨立組件上進行協作并構建可擴展的應用程序。

4.三元運算符

該代碼相對易于閱讀，并且傾向于代替單行的IF..ELSE語句使用，因為它刪除了許多不需要的字符并將四行變?yōu)橐弧?/span>

// Original IF..ELSE statementlet isOdd = ""if(variable % 2 == 0) {  isOdd = "yes"} else {  isOdd = "no"}

//The ternary approachlet isOdd = (variable % 2 == 0) ? "yes" : "no"

您可以看到三元運算符的結構首先具有布爾表達式，然后是在表達式為true的情況下的“ return”語句和表達式為false的情況的“ return”語句。盡管最好在賦值的右側使用(如示例中所示)，但也可以將其單獨用作執(zhí)行函數調用的方式，具體取決于布爾表達式的值。

let variable = true;?(variable)???console.log("It's?TRUE")?:?console.log("It's?FALSE")

請注意，格式是相同的，這里的問題是，如果將來您需要在此處擴展其中一個部分(對于表達式為true或false的情況)，則必須將其變成完整的IF..ELSE語句。

5.利用OR的惰性評估

在JavaScript(以及TypeScript)中， OR邏輯運算符遵循一個惰性評估模型，這意味著它將返回第一個返回true的表達式，而不會繼續(xù)檢查其余表達式。

這意味著，如果您具有以下IF語句，則僅對前兩個表達式進行求值：

if( expression1 || expression2 || expression3 || expression4)

假設expression1是falsy (即它返回一個評估為false的值)，而expression2是truthy (即它返回一個評估為true的值)，則評估將在那里停止。

我們可以利用這種惰性計算，而不是在IF語句中使用它，而可以將其用作分配的一部分，以便在表達式失敗或undefined情況下提供默認值：

function myFn(variable1, variable2) {  let var2 = variable2 || "default value"  return variable1 + var2}

myFn("this has", " no default value") //returns "this has no default value"myFn("this has no") //returns "this has no default value"

上面的示例顯示了如何使用OR運算符為函數的第二個參數設置默認值。現在，如果您仔細觀察，將會發(fā)現這種方法存在一個小問題：如果variable2的值為0或一個空字符串，則將在var2上設置默認值，因為它們的值都為false 。

因此，如果您的用例也允許將falsy值設為有效值，那么您可能希望查看一個鮮為人知的操作數，稱為“空值合并運算符”。

6.雙按位NOT運算符?

逐位運算符是我們傾向于遠離的運算符，因為老實說，如今誰需要考慮位呢？事實是，由于它們直接在數字的位上工作的方式，因此它們執(zhí)行操作的速度比正常方法調用快得多。

在這種情況下，按位NOT運算符(即?)將獲取您的數字，將其轉換為32位整數(丟棄任何多余的位)，然后將其所有位求反，實際上將值x任何整數轉換為-(x+1)?。為什么我們關心此運算符？因為如果在相同的值上使用兩次，則得到的結果與Math.floor方法相同。


let x = 3.8let y = ~x //this turns x into -(3 + 1), remember, the number gets turned into an integerlet z = ~y //this turns y (which is -4) into -(-4 + 1) which is 3

//So you can do:

let flooredX = ~~x //and this performs both steps from above at the same time

請注意最后一行上的double?，雖然看起來很奇怪，但是如果您不得不處理將多個浮點數轉換為整數的情況，那么這對您來說可能是一個很好的速記。

7.對象屬性分配?

在為屬性分配值時，ES6簡化了對象創(chuàng)建的過程。如果將值分配給與對象屬性完全一樣命名的變量，則不再需要像以前一樣重復名稱：

let name:string = "Fernando";let age:number = 36;let id:number = 1;

type User = {  name: string,  age: number,  id: number}

//Old waylet myUser: User = {  name: name,  age: age,  id: id}

//new waylet myNewUser: User = {  name,  age,  id}

如您所見，新方法肯定更短，更容易編寫，同時又不難閱讀(不同于本文中顯示的其他速記技巧)。

8.箭頭函數的隱式返回?

您是否知道只有一行長的箭頭函數也會返回該行代碼的結果？

本質上，此技巧使您可以保存冗余的return語句。查找正在使用的這些速記類型的一個非常普遍的情況是在數組方法上，例如filter或map ，如下所示：

let myArr:number[] = [1,2,3,4,5,6,7,8,9,10]

//Long way of doing it:let oddNumbers:number[] = myArr.filter( (n:number) => {  return n % 2 == 0})

let double:number[] = myArr.map( (n:number) => {  return n * 2;})



//Shorter way:let oddNumbers2:number[] = myArr.filter( (n:number) => n % 2 == 0 )

let double2:number[] = myArr.map( (n:number) =>  n * 2 )

這一代碼不必增加代碼的復雜性，它是清理語法的一種好方法，可以消除不必要的空格和行。當然，這里的缺點是，如果您需要在這些行中添加額外的邏輯，則必須重新添加大括號。

這里唯一需要注意的是，無論您試圖在單行函數上執(zhí)行什么，都必須是一個表達式(即可以返回的內容)，否則它將不起作用。例如，您不能擁有像這樣的單線：

const m = _ => if(2) console.log("true")  else console.log("false")

在下一個示例中，您將看到另一個需要大括號的單線示例，讓我們繼續(xù)。

9.默認功能參數?

感謝ES6，您現在可以在函數參數上指定默認值。在以前JavaScript版本中，這是不可能的，因此您必須訴諸于使用OR的惰性評估之類的方法。

但是現在它就像編寫代碼一樣簡單：


//We can function without the last 2 parameter because a default value//can be assigned to themfunction myFunc(a, b, c = 2, d = "") {  //your logic goes here...}

很簡單，不是嗎？好吧，它實際上會更有趣，因為該值可以是任何值，包括一個函數調用，如果您不使用自己的值覆蓋它，該調用將被執(zhí)行，從而使您也可以輕松實現強制性的函數參數模式?？纯催@個：


const mandatory = _ => {  throw new Error("This parameter is mandatory, don't ignore it!")}



function myFunc(a, b, c = 2, d = mandatory()) {  //your logic goes here...}

//Works great!myFunc(1,2,3,4)

//Throws an errormyFunc(1,2,3)

就像我說的那樣，單行mandatory需要使用大括號，因為它使用的是throw ，它是語句而不是表達式。但是，您仍然可以很輕松地獲得很酷的強制參數行為。

10.用!!將任何值轉換為布爾值！

在類似于雙按位NOT運算符的注釋中，可以使用雙邏輯NOT運算符將任何值轉換為布爾值。

!!23 // TRUE!!"" // FALSE!!0 // FALSE!!{} // TRUE

單個邏輯非將已經為您完成此操作，它將強制將值轉換為布爾值，然后將其取反，因此第二個邏輯非將負責再次對其求反，從而將其返回給它。原義，同時將其保留為布爾型。

這是速記在那些情況下，你要么必須確保你分配一個實際的布爾有用(如類型的打字稿變量boolean )，或在做對了嚴格的比較，無論是true或false (與===?)。

11.解構和傳播運營商

關于這兩個主題，有很多要說的地方，只要正確使用它們，它們都可以產生非常有趣的結果。但是對于本文，讓我快速向您展示如何利用兩者來簡化某些任務。

將對象分解為多個變量

您是否曾經將一堆不同的對象屬性分配給各個變量？例如，如果您需要在不影響原始對象的情況下單獨處理這些值(例如，通過修改它們)，這實際上很常見。

解構可以幫助您在一行代碼中做到這一點：


const myObj = {  name: "Fernando",  age: 37,  country: "Spain"}

//Old way of doing this:const name = myObj.name;const age = myObj.age;const country = myObj.country;

//Using destructuringconst?{name,?age,?country}?=?myObj;

如果您以前使用過TypeScript，那么此語法也可以視為import語句的一部分，因為它使您可以單獨導入某些導出的方法庫，而不必將名稱空間與許多不需要的功能相提并論。

const { get } from 'lodash'

例如，上面的那一行僅允許您將lodash庫中的get方法添加到您的命名空間中，而無需添加該庫的其余部分，該庫中還有很多其他方法。

傳播合并

使用spread運算符，您可以簡化將數組和對象合并為一行代碼的任務，而無需調用任何其他方法：

const arr1 = [1,2,3,4]const arr2 = [5,6,7]

const finalArr = [...arr1, ...arr2] // [1,2,3,4,5,6,7]

const partialObj1 = {  name: "fernando"}const partialObj2 = {  age:37}

const fullObj = { ...partialObj1, ...partialObj2 } // {name: "fernando", age: 37}

請注意，如果對象名稱相同，則合并此類對象將導致屬性被覆蓋。但是，數組不會發(fā)生相同的情況，將添加重復的值，如果您也想避免這種情況，則必須使用Set 。

兩者結合

您甚至可以結合使用解構和散布運算符來獲得有趣的結果，例如刪除數組的第一個元素，而其余元素保持不變(即常見的頭尾示例以及可以在Python和其他語言中找到的列表)。甚至從對象中提取一些屬性，其余部分保持不變，如下所示：

const myList = [1,2,3,4,5,6,7]const myObj = {  name: "Fernando",  age: 37,  country: "Spain",  gender: "M"}

const [head, ...tail] = myList

const {name, age, ...others} = myObj

console.log(head) //1console.log(tail) //[2,3,4,5,6,7]console.log(name) //Fernandoconsole.log(age) //37console.log(others) //{country: "Spain", gender: "M"}

請注意，分配左側的擴展運算符必須用作最后一項。您不能先使用價差然后添加如下所示的單個變量：

const [...values, lastItem] = [1,2,3,4]

上面的示例將失敗。

結論?

速記有很多，但是請記住，保存的代碼越多，對于不習慣這些速記的其他人來說，可讀性就越差。這并不是要壓縮代碼，也不是隱式地假設更少的代碼行將導致性能更高的代碼。這只是為了從語法中刪除多余或不必要的構造，以簡化閱讀任務。

因此，請嘗試在速記和可讀代碼之間保持健康的平衡，以使每個人都滿意(請記住，您不是唯一閱讀代碼的人！)。

您應該知道的11個JavaScript和TypeScript速記