使用現代速記技術，技巧和竅門最佳化您的JavaScript程式碼

開發人員的生活總是在學習新事物，並且跟上變化的難度不應該比現在已經難，我的動機是介紹所有JavaScript最佳實踐，例如速記和功能，我們作為前端開發人員必須知道這些使我們的生活在2021年變得更加輕鬆

您可能已經進行了很長時間的JavaScript開發，但是有時您可能沒有使用不需要解決或編寫一些額外程式碼即可解決問題的最新功能。這些技術可以幫助您編寫乾淨且最佳化的JavaScript程式碼。此外，這些主題可以幫助您為2021年的JavaScript採訪做好準備。

在這裡，我將提供一個新系列，介紹速記技術，這些速記技術可幫助您編寫更乾淨和最佳化的JavaScript程式碼。這是您在2021年必須知道的JavaScript編碼的備忘單。

1.如果有多個條件

我們可以在陣列中儲存多個值，並且可以使用陣列include方法。

//longhandif (x === 'abc' || x === 'def' || x === 'ghi' || x ==='jkl') {    //logic}//shorthandif (['abc', 'def', 'ghi', 'jkl'].includes(x)) {   //logic}

2.If true … else 簡寫

當我們具有不包含更大邏輯的if-else條件時，這是一個更大的捷徑。我們可以簡單地使用三元運算子來實現該速記。

// Longhandlet test: boolean;if (x > 100) {    test = true;} else {    test = false;}// Shorthandlet test = (x > 10) ? true : false;//or we can use directlylet test = x > 10;console.log(test);

當我們有巢狀條件時，我們可以採用這種方式。

let x = 300,test2 = (x > 100) ? 'greater 100' : (x < 50) ? 'less 50' : 'between 50 and 100';console.log(test2); // "greater than 100"

3.宣告變數

當我們要宣告兩個具有共同值或共同型別的變數時，可以使用此簡寫形式。

//Longhand let test1;let test2 = 1;//Shorthand let test1, test2 = 1;

4.空，未定義，空檢查

當我們確實建立新變數時，有時我們想檢查為其值引用的變數是否為null或未定義。JavaScript確實具有實現這些功能的非常好的捷徑。

// Longhandif (test1 !== null || test1 !== undefined || test1 !== '') {    let test2 = test1;}// Shorthandlet test2 = test1 || '';

5.空值檢查和分配預設值

let test1 = null,    test2 = test1 || '';console.log("null check", test2); // output will be ""

6.未定義值檢查和分配預設值

let test1 = undefined,    test2 = test1 || '';console.log("undefined check", test2); // output will be ""

正常值檢查

let test1 = 'test',    test2 = test1 || '';console.log(test2); // output: 'test'

（獎金：現在我們可以對主題4,5和6使用??運算子）

空位合併運算子

空合併運算子??如果左側為null或未定義，則返回右側的值。預設情況下，它將返回左側的值。

const test= null ?? 'default';console.log(test);// expected output: "default"const test1 = 0 ?? 2;console.log(test1);// expected output: 0

7.給多個變數賦值

當我們處理多個變數並希望將不同的值分配給不同的變數時，此速記技術非常有用。

//Longhand let test1, test2, test3;test1 = 1;test2 = 2;test3 = 3;//Shorthand let [test1, test2, test3] = [1, 2, 3];

8.賦值運算子的簡寫

我們在程式設計中處理很多算術運算子。這是將運算子分配給JavaScript變數的有用技術之一。

// Longhandtest1 = test1 + 1;test2 = test2 - 1;test3 = test3 * 20;// Shorthandtest1++;test2--;test3 *= 20;

9.如果存在速記

這是我們大家都在使用的常用速記之一，但仍然值得一提。

// Longhandif (test1 === true)// Shorthandif (test1)

注意：如果test1有任何值，它將在if迴圈後進入邏輯，該運算子通常用於null或未定義的檢查。

10.多個條件的AND（&&）運算子

如果僅在變數為true的情況下才呼叫函式，則可以使用&&運算子。

//Longhand if (test1) { callMethod(); } //Shorthand test1 && callMethod();

11. foreach迴圈速記

這是迭代的常用速記技術之一。

// Longhandfor (var i = 0; i < testData.length; i++)// Shorthandfor (let i in testData) or  for (let i of testData)

每個變數的陣列

function testData(element, index, array) {  console.log('test[' + index + '] = ' + element);}[11, 24, 32].forEach(testData);// logs: test[0] = 11, test[1] = 24, test[2] = 32

12.比較返回值

我們也可以在return語句中使用比較。它將避免我們的5行程式碼，並將它們減少到1行。

// Longhandlet test;function checkReturn() {    if (!(test === undefined)) {        return test;    } else {        return callMe('test');    }}var data = checkReturn();console.log(data); //output testfunction callMe(val) {    console.log(val);}// Shorthandfunction checkReturn() {    return test || callMe('test');}

13.箭頭函式

//Longhand function add(a, b) {    return a + b; } //Shorthand const add = (a, b) => a + b;

更多示例。

function callMe(name) {  console.log('Hello', name);}callMe = name => console.log('Hello', name);

14.短函式呼叫

我們可以使用三元運算子來實現這些功能。

// Longhandfunction test1() {  console.log('test1');};function test2() {  console.log('test2');};var test3 = 1;if (test3 == 1) {  test1();} else {  test2();}// Shorthand(test3 === 1? test1:test2)();

15.Switch速記

我們可以將條件儲存在鍵值物件中，並可以根據條件使用。

// Longhandswitch (data) {  case 1:    test1();  break;  case 2:    test2();  break;  case 3:    test();  break;  // And so on...}// Shorthandvar data = {  1: test1,  2: test2,  3: test};data[something] && data[something]();

16.隱式返回速記

使用箭頭功能，我們可以直接返回值，而不必編寫return語句。

//longhandfunction calculate(diameter) {  return Math.PI * diameter}//shorthandcalculate = diameter => (  Math.PI * diameter;)

17.小數基指數

// Longhandfor (var i = 0; i < 10000; i++) { ... }// Shorthandfor (var i = 0; i < 1e4; i++) {

18.預設引數值

//Longhandfunction add(test1, test2) {  if (test1 === undefined)    test1 = 1;  if (test2 === undefined)    test2 = 2;  return test1 + test2;}//shorthandadd = (test1 = 1, test2 = 2) => (test1 + test2);add() //output: 3

19.點差運算子速記

//longhand// joining arrays using concatconst data = [1, 2, 3];const test = [4 ,5 , 6].concat(data);//shorthand// joining arraysconst data = [1, 2, 3];const test = [4 ,5 , 6, ...data];console.log(test); // [ 4, 5, 6, 1, 2, 3]

對於克隆，我們也可以使用傳播運算子。

//longhand// cloning arraysconst test1 = [1, 2, 3];const test2 = test1.slice()//shorthand// cloning arraysconst test1 = [1, 2, 3];const test2 = [...test1];

20.模板文字

如果您厭倦了在單個字串中使用+來連線多個變數，那麼這種速記方式將消除您的頭痛。

//longhandconst welcome = 'Hi ' + test1 + ' ' + test2 + '.'//shorthandconst welcome = `Hi ${test1} ${test2}`;

21.多行字串速記

當我們在程式碼中處理多行字串時，可以使用以下功能：

//longhandconst data = 'abc abc abc abc abc abc\n\t'    + 'test test,test test test test\n\t'//shorthandconst data = `abc abc abc abc abc abc         test test,test test test test`

22.物件屬性分配

let test1 = 'a'; let test2 = 'b';//Longhand let obj = {test1: test1, test2: test2}; //Shorthand let obj = {test1, test2};

23.字串成數字

//Longhand let test1 = parseInt('123'); let test2 = parseFloat('12.3'); //Shorthand let test1 = +'123'; let test2 = +'12.3';

24.分配速記

//longhandconst test1 = this.data.test1;const test2 = this.data.test2;const test2 = this.data.test3;//shorthandconst { test1, test2, test3 } = this.data;

25. Array.find的簡寫

當我們確實有一個物件陣列並且我們想要根據物件屬性查詢特定物件時，find方法確實很有用。

const data = [{        type: 'test1',        name: 'abc'    },    {        type: 'test2',        name: 'cde'    },    {        type: 'test1',        name: 'fgh'    },]function findtest1(name) {    for (let i = 0; i < data.length; ++i) {        if (data[i].type === 'test1' && data[i].name === name) {            return data[i];        }    }}//ShorthandfilteredData = data.find(data => data.type === 'test1' && data.name === 'fgh');console.log(filteredData); // { type: 'test1', name: 'fgh' }

26.查詢條件速記

如果我們有程式碼來檢查型別，並且基於型別需要呼叫不同的方法，我們可以選擇使用多個else if或進行切換，但是如果我們的速記比這更好呢？

// Longhandif (type === 'test1') {  test1();}else if (type === 'test2') {  test2();}else if (type === 'test3') {  test3();}else if (type === 'test4') {  test4();} else {  throw new Error('Invalid value ' + type);}// Shorthandvar types = {  test1: test1,  test2: test2,  test3: test3,  test4: test4}; var func = types[type];(!func) && throw new Error('Invalid value ' + type); func();

27.速記按位索引

當我們迭代陣列以查詢特定值時，我們確實使用indexOf（）方法，如果我們找到更好的方法呢？讓我們看看這個例子。

//longhandif(arr.indexOf(item) > -1) { // item found }if(arr.indexOf(item) === -1) { // item not found}//shorthandif(~arr.indexOf(item)) { // item found}if(!~arr.indexOf(item)) { // item not found}

按位（〜）運算子將返回非-1的真實值。取反就像做！〜一樣簡單。另外，我們也可以使用include（）函式：

if (arr.includes(item)) { // true if the item found}

28. Object.entries（）

此功能有助於將物件轉換為物件陣列。

const data = { test1: 'abc', test2: 'cde', test3: 'efg' };const arr = Object.entries(data);console.log(arr);/** Output:[ [ 'test1', 'abc' ],  [ 'test2', 'cde' ],  [ 'test3', 'efg' ]]**/

29. Object.values（）

這也是ES8中引入的一項新功能，它執行與Object.entries（）類似的功能，但沒有關鍵部分：

const data = { test1: 'abc', test2: 'cde' };const arr = Object.values(data);console.log(arr);/** Output:[ 'abc', 'cde']**/

30. Double Bitwise簡寫

（雙重NOT按位運算子方法僅適用於32位整數）

// LonghandMath.floor(1.9) === 1 // true// Shorthand~~1.9 === 1 // true

31.重複一個字串多次

要一次又一次地重複相同的字元，我們可以使用for迴圈並將它們新增到同一迴圈中，但是如果我們有一個簡寫方法呢？

//longhand let test = ''; for(let i = 0; i < 5; i ++) {   test += 'test '; } console.log(str); // test test test test test //shorthand 'test '.repeat(5);

32.在陣列中查詢最大值和最小值

const arr = [1, 2, 3]; Math.max(…arr); // 3Math.min(…arr); // 1

33.從字串中獲取字元

let str = 'abc';//Longhand str.charAt(2); // c//Shorthand Note: If we know the index of the array then we can directly use index insted of character.If we are not sure about index it can throw undefinedstr[2]; // c

34.功率速記

數學指數冪函式的簡寫：

//longhandMath.pow(2,3); // 8//shorthand2**3 // 8

如果您想了解JavaScript版本的最新功能，請檢查以下內容：

ES2021 / ES12

· replaceAll（）：返回一個新字串，該字串的所有模式匹配均被新的替換詞替換。

· Promise.any（）：它需要Promise物件的可迭代物件，並且當一個Promise履行時，返回帶有值的單個Promise。

· 弱引用：此物件持有對另一個物件的弱引用，而不會阻止該物件被垃圾回收。

· FinalizationRegistry：讓您在垃圾回收物件時請求回撥。

· 方法和訪問器的私有可見性修飾符：私有方法可以用＃宣告。

· 邏輯運算子：&&和||操作員。

· 數字分隔符：啟用下劃線作為數字文字中的分隔符，以提高可讀性。

· Intl.ListFormat：此物件啟用語言敏感列表格式。

· Intl.DateTimeFormat：此物件啟用對語言敏感的日期和時間格式。

ES2020 / ES11

1. BigInt：提供了一種表示（整個）大於253–1的數字的方法

11.動態匯入：動態匯入提供了將JS檔案作為模組動態匯入的選項。這將幫助您按需獲得模組。

12.空合併運算子：如果左側為null或未定義，則返回右側的值。預設情況下，它將返回左側的值。

1. globalThis：包含全域性this值，該值基本上用作全域性物件。

1. Promise.allSettled（）：返回一個承諾，該承諾基本上包含具有每個承諾結果的物件陣列。

15.可選連結：使用任何連線的物件或檢查方法讀取值，並檢查屬性是否存在。

1. String.prototype.matchAll（）：返回所有與正則表示式匹配字串的結果的迭代器。

17.命名匯出：使用此功能，每個檔案可以有多個命名匯出。

18.定義明確的順序：

1. import.meta：物件將特定於上下文的元資料公開給JS模組

ES2019 / ES10

1. Array.flat（）：透過組合主陣列中的其他陣列來建立一個新陣列。注意：我們可以設定合併陣列的深度。

1. Array.flatmap：透過將回調函式應用於陣列的每個元素來建立一個新陣列。

1. Object.fromEntries（）：將鍵值對列表轉換為物件。

1. try…catch：語句標記要嘗試的語句塊，如果發生任何錯誤，catch將對其進行處理。

1. Function.toString（）：將任何方法/程式碼轉換為字串。

1. Symbol.prototype.description：返回Symbol物件的可選描述。

ES2018 / ES9

27.非同步迭代：藉助async和await，我們現在可以在for迴圈中執行一系列非同步迭代。

1. Promise.finally（）：在結算或拒絕時返回承諾。這將有助於避免重複和捕獲處理程式。

1. Rest / Spread屬性：用於物件分解和陣列。

30.正則表示式命名捕獲組：可以在方括號後使用符號？進行命名。

31.正則表示式s（dotAll）標誌：匹配除回車符以外的任何單個字元。s標誌更改了此行為，因此允許使用行終止符

32.正則表示式Unicode屬性轉義符：可以透過設定Unicode u標誌以及 p {…}和 p {…}來設定Unicode屬性轉義符。

ES2017 / ES8

1. Object.entries（）：返回給定物件鍵和值對的陣列。

1. Object.values（）：返回給定物件的屬性值的陣列。

1. padStart（）：用另一個字串填充當前字串，直到結果字串達到長度為止。

1. padEnd（）：從當前字串的末尾開始，使用給定的字串填充當前字串。

1. Object.getOwnPropertyDescriptors（）：返回給定物件的所有自己的屬性描述符。

38.非同步功能：在Promises上擴充套件以進行非同步呼叫。

ES2016 / ES7

1. Array.prototype.includes（）：確定陣列在給定值中是否包括某個值。它返回true或false。

40.求冪：返回將第一個運算元提升為第二個運算元的冪的結果。

ES2015 / ES6

41.箭頭函式表示式：在某些情況下可替代傳統函式表示式

42.增強的物件文字：擴充套件為支援設定物件構造。

43.類：使用class關鍵字建立類。

44.模板文字：可以使用$ {param}在字串中直接新增引數

45.解構分配：幫助從陣列解壓縮值或從物件解壓縮屬性。

46. Default + Rest + Spread：支援預設值，spread引數或陣列作為引數。

47. Let + Const：

48. Promises：用於非同步操作。

49.模組：

50. Map + Set + WeakMap + WeakSet：

51.數學+數字+字串+陣列+物件API：

... ...