英文 | https://javascript.plainenglish.io/33-javascript-useful-shorthands-cheat-list-2021-e08b46a1a688

翻譯 | 楊小二

作為開(kāi)發(fā)人員，我體驗(yàn)到學(xué)習(xí)是一個(gè)持續(xù)的過(guò)程。隨著每年都有新技術(shù)的出現(xiàn)與技術(shù)升級(jí)，我們都需要相應(yīng)地進(jìn)行技術(shù)更新，并且在工作和項(xiàng)目中進(jìn)行充分利用它。

今天，我想與你分享一些我自己常用的JavaScript的技巧，它對(duì)我的工作提供了很大的幫助，同時(shí)，這些技巧會(huì)讓代碼更具有可讀性。

那么，就讓我們開(kāi)始今天的內(nèi)容吧。

1、if

你是否對(duì)使用大量 if 語(yǔ)句感到厭煩？讓我們檢查一些可以在這里提供幫助的選項(xiàng)。

//longhandif (fruit === 'apple' || fruit === 'banana' || fruit === 'orange' || fruit ==='mango') {    //logic}//shorthandif (['apple', 'banana', 'orange', 'mango'].includes(fruit)) {   //logic}

2、 If... else 簡(jiǎn)寫(xiě)

當(dāng)我們想使用 if-else 語(yǔ)句時(shí)，這個(gè)會(huì)對(duì)你有所幫助。當(dāng)你使用 2-3 個(gè) if.. else 時(shí)，它會(huì)降低你代碼的可讀性。

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

嵌套條件如下所示：

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

3、變量聲明

當(dāng)我們有相同類(lèi)型的變量時(shí)，我們可以避免寫(xiě)入兩次。

//Longhand let data1;let data2= 1;//Shorthand let data1, data2= 1;

4、檢查非空值

如果我們想檢查變量不為空怎么辦？我們現(xiàn)在可以擺脫再次寫(xiě)入所有條件。

// Longhandif (data1 !== null || data1!== undefined || data1 !== '') {    let data2 = data1;}// Shorthandlet data2 = data1 || '';

5、分配默認(rèn)值

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

6、未定義值檢查

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

正常值檢查

let data1 = 'data',    data2 = data1 || '';console.log(data); // output: 'data'

（注意：我們也可以對(duì)主題 4,5 和 6使用運(yùn)算符??）

7、空運(yùn)算符

如果左側(cè)為空或未定義，則此運(yùn)算符返回右側(cè)值。

const data= null ?? 'data';console.log(data);// expected output: "data"const data1 = 1 ?? 4;console.log(data1);// expected output: 1

8、賦值

//Longhand let data1, data2, data3;data1 = 1;data2 = 2;data3 = 3;//Shorthand let [data1, data2, data3] = [1, 2, 3];

9、賦值運(yùn)算符

它主要在我們處理算術(shù)運(yùn)算符時(shí)使用，就個(gè)人而言，我喜歡這里的簡(jiǎn)寫(xiě)，因?yàn)樗呖勺x性。

// Longhanddata1 = data1 + 1;data2 = data2 - 1;data3 = data3 * 30;// Shorthanddata1++;data2--;data3 *= 30;

10、空檢查

最常用的操作數(shù)之一，但請(qǐng)確保你的值為真、非空字符串、定義的值和非空值。

// Longhandif (data1 === true) or if (data1 !== "") or if (data1 !== null)// Shorthand //if (test1)

注意：如果 test1 有任何值，它將落入 if 循環(huán)之后的邏輯中，該運(yùn)算符主要用于 null 或 undefined 檢查。

11、 AND(&&) 運(yùn)算符

如果我們想避免少使用一個(gè) if 語(yǔ)句，那么這個(gè)技巧會(huì)很有幫助。

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

12、返回簡(jiǎn)寫(xiě)

這將有助于避免使用大量代碼，專(zhuān)門(mén)返回到基于返回語(yǔ)句的調(diào)用方法。

// Longhandlet value;function returnMe() {    if (!(value === undefined)) {        return value;    } else {        return callFunction('value');    }}var data = returnMe();console.log(data); //output valuefunction callFunction(val) {    console.log(val);}
// Shorthandfunction returnMe() {    return value || callFunction('value');}

13、箭頭函數(shù)

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

讓我們?cè)倏匆粋€(gè)例子。

function function(value) {  console.log('value', value);}function= value => console.log('value', value);

14、短函數(shù)調(diào)用

我們可以使用三元運(yùn)算符來(lái)實(shí)現(xiàn)這些功能。

// Longhandfunction data1() {    console.log('data1');};function data2() {    console.log('data2');};var data3 = 1;if (data3 == 1) {    data1();} else {    data2();} //data1// Shorthand(data3 === 1 ? data1 : data2)(); //data1

15、Switch語(yǔ)句優(yōu)化

如果你想優(yōu)化你的 switch 語(yǔ)句，那么這個(gè)可以提供幫助。

// Longhandswitch (data) {    case 1:        data1();        break;    case 2:        data2();        break;    case 3:        data();        break;        // And so on...}// Shorthandvar data = {    1: data1,    2: data2,    3: data};const val = 1data[val]();function data1() {    console.log("data1");}function data2() {    console.log("data2");}function data() {    console.log("data");}

16、隱式回報(bào)

即使不編寫(xiě) return 語(yǔ)句，箭頭函數(shù)也可以幫助返回值，酷吧？

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

17、十進(jìn)制指數(shù)

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

18、默認(rèn)參數(shù)值

//Longhandfunction add(data1, data2) {    if (data1 === undefined) data1 = 1;    if (data2 === undefined) data2 = 2;    return data1 + data2;}//shorthandadd = (data1 = 1, data2 = 2) => data1 + data2;console.log(add()); //output: 3

19、傳播運(yùn)算符

在另一個(gè)地方創(chuàng)建數(shù)組引用和淺拷貝也很有用。

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

對(duì)于克隆，我們也可以使用擴(kuò)展運(yùn)算符。

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

20、模板文字

如果你正在尋找以在字符串中附加多個(gè)值的技巧的話(huà)，那么此技巧適合你。

//longhandconst literal = 'Hi ' + data1 + ' ' + data2 + '.'//shorthandconst literal= `Hi ${data1} ${data2}`;

21、多行字符串

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

22、對(duì)象屬性賦值

let data1 = 'abcd'; let data2 = 'efgh';//Longhand let data = {data1: data1, data2: data2}; //Shorthand let data = {data1, data2};

23、數(shù)字轉(zhuǎn)換

//Longhand let test1 = parseInt('12'); let test2 = parseFloat('2.33');//Shorthand let test1 = +'12'; let test2 = +'2.33';

24、解構(gòu)賦值

//longhandconst data1 = this.data.data1;const data2 = this.data.data2;const data2 = this.data.data3;//shorthandconst { data1, data2, data3 } = this.data;

25、 Array.find 方法

從數(shù)組中找到第一個(gè)匹配值的方法之一。

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

26、按位索引

如果我們可以將 indexof 方法與速記結(jié)合起來(lái)會(huì)怎樣？按位 indexof 方法為我們做同樣的工作。

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

我們也可以使用包含功能。

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

27、 Object.entries()

此功能有助于將對(duì)象轉(zhuǎn)換為對(duì)象數(shù)組。

const data = {    data1: 'abc',    data2: 'cde',    data3: 'efg'};const arr = Object.entries(data);console.log(arr);//[    ['data1', 'abc'],    ['data2', 'cde'],    ['data3', 'efg']]

28、Object.values() 和 Object.keys()

迭代對(duì)象值會(huì)很有幫助。

const data = {    data1: 'abc',    data2: 'cde'};const arr = Object.values(data);console.log(arr);//[ 'abc', 'cde']

Object.keys() 有助于迭代對(duì)象中的鍵。

const data = {    data1: 'abc',    data2: 'cde'};const arr = Object.keys(data);console.log(arr);//[ 'data1', 'data2']

29、雙位速記

（雙非按位運(yùn)算符方法僅適用于 32 位整數(shù)）

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

30、多次重復(fù)一個(gè)字符串

此字符串方法有助于一次又一次地重復(fù)相同的字符串值。

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

31、查找數(shù)組中的最大值和最小值

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

32、從字符串中獲取字符

let str = 'test';//Longhand str.charAt(2); // s//Shorthand Note: this is only works if we know the index of matched characterstr[2]; // c

33、Power 簡(jiǎn)寫(xiě)

//longhandMath.pow(2,2); // 4//shorthand2**2 // 4

本文完~

學(xué)習(xí)更多技能
請(qǐng)點(diǎn)擊下方公眾號(hào)

33個(gè)有用的JavaScript 秘籍