英文 |?https://medium.com/codeart-mk/10-js-shorthand-techniques-2763f0ef44b2

翻譯 | web前端開發(fā)（ID：web_qdkf)

如果你正在閱讀本文，則意味著你至少使用過或者對(duì)JavaScript有所了解。這篇文章也適用于初學(xué)者和有一定經(jīng)驗(yàn)的開發(fā)者，因?yàn)榧词刮乙呀?jīng)有了3年的開發(fā)經(jīng)驗(yàn)，我發(fā)現(xiàn)，我在撰寫本文時(shí)的一些技巧對(duì)我來說也是非常有用的。

因此，讓我們開始吧，希望其中的一些技術(shù)可以幫助你更好地組織代碼，因?yàn)槲覀兌枷矚g編程，不是嗎？

1、三元運(yùn)算符

這是我絕對(duì)的最愛。以前，如果變量取決于條件，則經(jīng)常寫成下面這樣的內(nèi)容：

const pet = 'dog';let sound;if ( pet === 'dog') { sound = 'woof';} else { sound = 'meow';}

后來，我就進(jìn)行簡(jiǎn)化，寫出下面的內(nèi)容：

const pet = 'dog';let sound = (pet === 'dog') ? 'woof' : 'meow';

它具有與上述相同的功能。在初始化時(shí)，它將檢查寵物是否是狗，并分配相應(yīng)的值。因此，從7行代碼中，我設(shè)法將其縮減為兩行。

2、if 存在/不存在

這也是我最常用的一種，但可能會(huì)很棘手。首先，讓我們看看如何檢查變量是否不存在。

let test = 'AA';if (typeof test !== 'undefined' && test !== '' && test !== null && test !== 0 && test !== false) { console.log('The variable test is defined and not empty and not null and not false');}

這些都是你必須檢查的所有條件，以了解變量是否已定義，不為空，不為null，不等于0且不為false。

簡(jiǎn)寫為：

let test = 'AA'if (test) { console.log('The variable test is defined and not empty and not null and not false');}

要檢查變量是否不存在：

let test;if (!test) { console.log('The variable test is undefined or empty or null or false');}

棘手的部分是知道你要檢查的是真實(shí)值還是變量是否需要等于布爾值true。

檢查以下示例：

let example = true;if (example === true) { console.log('It is true');} else { console.log('It is false');}if (example) { console.log('it is true');} else { console.log('It is false');}

這兩個(gè)都將輸出“這是真的”。

但是，如果我們更改示例的值：

let example = 'testing';if (example === true) { console.log('It is true');} else { console.log('It is false');}if (example) { console.log('It is true');} else { console.log('It is false'}}

第一個(gè)示例將為“ It is false”，第二個(gè)示例將為“ It true”。

發(fā)生這種情況的原因是，如果省略任何運(yùn)算符，則if條件具有真值（即為字符串或包含false的文本，空數(shù)組，空對(duì)象或空函數(shù)）時(shí)，if條件為true。

另一方面，如果使用第一個(gè)示例，則僅當(dāng)變量示例的值為布爾值true時(shí)，if條件才為true。

3、大量變數(shù)

如果你曾經(jīng)在JS中完成過更大的腳本，那么你就會(huì)知道需要聲明多少個(gè)變量以及它需要占用多少空間。

長(zhǎng)示例寫法：

let i = 0;let j = 0; let counter = 0;let message = 'Hello there';let isFound = false;let isOpen = true;let text;

現(xiàn)在，這些只是少數(shù)。想象一下，如果你至少還有十個(gè)。占用很多空間。幸運(yùn)的是，這有一個(gè)簡(jiǎn)寫：

let i = 0, j = 0, counter = 0, message = 'Hello there', isFound = false, isOpen = true, text;

你已從許多行代碼縮減為一行。現(xiàn)在，以我的經(jīng)驗(yàn)來看，如果你有很多變量，將它們寫成一行可能會(huì)變得比較煩人，因此我要做的就是將它們分成幾組。

let i = 0, j = 0, counter = 0; // counterslet message = 'Hello there', text; // strings let isFound = false, isOpen = true; // booleans

這樣，它可能比一條線更長(zhǎng)，但是對(duì)我來說，它更有條理。使用更適合你的方法。

4、小數(shù)

你知道嗎，寫長(zhǎng)數(shù)字有一種奇特而又簡(jiǎn)短的方法嗎？我沒有，但是我肯定會(huì)從現(xiàn)在開始使用它。例如，如果你有一個(gè)像這樣的for循環(huán)：

for (let i = 0; i < 1000000; i++) { }

你可以這樣寫：

for (let i = 0; i < 1e6; i++) {}

因此格式為x?e?y

x-表示第一個(gè)數(shù)字
e-表示零跟隨x
y-表示零數(shù)目

所以：

1e1 === 101e2 === 1001e3 === 1000...1e9 === 10000000002e1 === 202e2 === 200..2e8 === 20000000011e2 === 1100

等等，我想，你已經(jīng)明白了。

5、模板文字 *

對(duì)我來說最煩人的事情之一是，如果我需要一些包含更多變量的文本，例如：

let text = 'Hello '+ name + 'from '+ country +'.'

特別是當(dāng)文本變成多行時(shí)。

let multilineText = 'Hello '+ name + 'from '+ country +'.\n\t' + 'You have selected '+ number + '' + item + 'at the price of '+ price + '.'

這看起來不是很舒服。它看起來令人困惑。但是，僅在使用backtick（`）和$ {}的情況下，才可以使用模板文字進(jìn)行救援。

因此，這些令人困惑的字符串可以寫成：

let text = `Hello ${name} from ${country}.`;let multilineText = `Hello ${name} from ${country}. You have selected ${number} ${item} at the price of ${price}`;

這樣，看起來是不是更舒服？

6、對(duì)象屬性 *

這是在JS中聲明對(duì)象的舊方法。

let name = 'Katniss';let surname = 'Everdeen';let home = 'District 12';let contestant = { name: name, surname: surname, home: home}

簡(jiǎn)寫為：

let contestant = { name, surname, home }

這只有在關(guān)鍵的名稱是一樣的時(shí)候，分配給它的變量名。

7、對(duì)于循環(huán)速記

還有另一個(gè)有用的js速記。讓我們看看如何編寫一個(gè)遍歷對(duì)象項(xiàng)的for循環(huán)。

const heroes= ['Iron Man','Thor','Hulk','Black Widow','Scarlet Witch','Dr Strange','Spiderman'];for(let i = 0; i < heroes.length; i++) { console.log(heroes[i]);}

這將輸出：

/**Iron ManThorHulkBlack WidowScarlet WitchDr StrangeSpiderman*/

現(xiàn)在，將其簡(jiǎn)寫如下：

for(let hero of heroes) { console.log(hero);}

它將打印相同的內(nèi)容。如果你需要索引，則它將如下所示：

for(let index in heroes) { console.log(index);}

它將輸出

/**0123456*/

8、字符串到數(shù)字

如果要將字符串轉(zhuǎn)換為數(shù)字，則可以執(zhí)行以下操作：

const num1 = parseInt('10');const num2 = parseFloat('10.01')

其簡(jiǎn)寫為：

const num1 = +"10";const num2 = +"10.01";

num1將轉(zhuǎn)換為整數(shù)，num2將轉(zhuǎn)換為float。

9、解構(gòu)分配 *

這是一個(gè)非常有用的代碼，它使代碼更整潔。解構(gòu)意味著能夠?qū)?shù)組中的值或?qū)ο笾械膶傩越鈮嚎s為不同的變量。

我們通常會(huì)這樣做：

const student = { name: 'Harry', surname: 'Potter', school: 'Hogwarts', house: 'Gryffindor'}const name = student.name;const surname = student.surname;const school = student.school;const house = student.house;

如果我們使用解構(gòu)分配，則上面的內(nèi)容可以寫成：

const {name, surname, school, house} = student;console.log(name) // Harryconsole.log(surname) // Potterconsole.log(school) // Hogwartsconsole.log(house) // Gryffindor

同樣可以應(yīng)用于數(shù)組：

let a,b,c;[a,b,…c]= [1,2,3,4,5,6,7,8,9]console.log(a) // 1console.log(b) // 2console.log(c) // [3,4,5,6,7,8,9]

10、Spread運(yùn)算符和Rest參數(shù)（…）*

Spread運(yùn)算符使用數(shù)組更容易。看例子：

let num1 = [1,2,3]let num2 = [4,5,6]let final;final = num1.concat(num2);

使用Spread運(yùn)算符，它將變?yōu)椋?/span>

final = […num1,…num2] //1,2,3,4,5,6

其他例子：

final2 = […num2, …num1] // 4,5,6,1,2,3final3 = [1, 2, …num2, 7,8 ] // 1,2,4,5,6,7,8

在其余的參數(shù)具有相同的語法普及運(yùn)算符（...）。它允許我們將不定數(shù)表示為參數(shù)作為數(shù)組。

function restExample(a, b, ...more) { console.log('a = ', a); console.log('b = ', b); console.log('more = ', more);}restExample('Testing','for','rest','parameter','here');// Output:// a = Testing// b = for// more = ['rest','parameter','here']

注意：只有最后一個(gè)參數(shù)可以是“剩余參數(shù)”。

這些只是JavaScript速記技術(shù)中的一些。還有更多，但是對(duì)于初學(xué)者來說，這些是我使用最多的。

隨時(shí)告訴我你使用最多的是哪個(gè)。并繼續(xù)編寫干凈，可讀和有組織的代碼。

注意：?Internet Explorer不支持帶有*的標(biāo)記。如果你需要Internet Explorer的支持，則可以使用編譯器（例如Babel），該編譯器將幫助你進(jìn)行轉(zhuǎn)換你的代碼。

本文完?

10種JS速記技巧