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

翻译 | web前端开发（ID：web_qdkf)

如果你正在阅读本文，则意味着你至少使用过或者对JavaScript有所了解。这篇文章也适用于初学者和有一定经验的开发者，因为即使我已经有了3年的开发经验，我发现，我在撰写本文时的一些技巧对我来说也是非常有用的。

因此，让我们开始吧，希望其中的一些技术可以帮助你更好地组织代码，因为我们都喜欢编程，不是吗？

1、三元运算符

这是我绝对的最爱。以前，如果变量取决于条件，则经常写成下面这样的内容：

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

后来，我就进行简化，写出下面的内容：

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

它具有与上述相同的功能。在初始化时，它将检查宠物是否是狗，并分配相应的值。因此，从7行代码中，我设法将其缩减为两行。

2、if 存在/不存在

这也是我最常用的一种，但可能会很棘手。首先，让我们看看如何检查变量是否不存在。

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。

简写为：

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');}

棘手的部分是知道你要检查的是真实值还是变量是否需要等于布尔值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');}

这两个都将输出“这是真的”。

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

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'}}

第一个示例将为“ It is false”，第二个示例将为“ It true”。

发生这种情况的原因是，如果省略任何运算符，则if条件具有真值（即为字符串或包含false的文本，空数组，空对象或空函数）时，if条件为true。

另一方面，如果使用第一个示例，则仅当变量示例的值为布尔值true时，if条件才为true。

3、大量变数

如果你曾经在JS中完成过更大的脚本，那么你就会知道需要声明多少个变量以及它需要占用多少空间。

长示例写法：

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

现在，这些只是少数。想象一下，如果你至少还有十个。占用很多空间。幸运的是，这有一个简写：

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

你已从许多行代码缩减为一行。现在，以我的经验来看，如果你有很多变量，将它们写成一行可能会变得比较烦人，因此我要做的就是将它们分成几组。

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

这样，它可能比一条线更长，但是对我来说，它更有条理。使用更适合你的方法。

4、小数

你知道吗，写长数字有一种奇特而又简短的方法吗？我没有，但是我肯定会从现在开始使用它。例如，如果你有一个像这样的for循环：

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

你可以这样写：

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

因此格式为x e y

x-表示第一个数字
e-表示零跟随x
y-表示零数目

所以：

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

等等，我想，你已经明白了。

5、模板文字 *

对我来说最烦人的事情之一是，如果我需要一些包含更多变量的文本，例如：

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

特别是当文本变成多行时。

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

这看起来不是很舒服。它看起来令人困惑。但是，仅在使用backtick（`）和$ {}的情况下，才可以使用模板文字进行救援。

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

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

这样，看起来是不是更舒服？

6、对象属性 *

这是在JS中声明对象的旧方法。

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

简写为：

let contestant = { name, surname, home }

这只有在关键的名称是一样的时候，分配给它的变量名。

7、对于循环速记

还有另一个有用的js速记。让我们看看如何编写一个遍历对象项的for循环。

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*/

现在，将其简写如下：

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

它将打印相同的内容。如果你需要索引，则它将如下所示：

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

它将输出

/**0123456*/

8、字符串到数字

如果要将字符串转换为数字，则可以执行以下操作：

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

其简写为：

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

num1将转换为整数，num2将转换为float。

9、解构分配 *

这是一个非常有用的代码，它使代码更整洁。解构意味着能够将数组中的值或对象中的属性解压缩为不同的变量。

我们通常会这样做：

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;

如果我们使用解构分配，则上面的内容可以写成：

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

同样可以应用于数组：

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运算符和Rest参数（…）*

Spread运算符使用数组更容易。看例子：

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

使用Spread运算符，它将变为：

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

在其余的参数具有相同的语法普及运算符（...）。它允许我们将不定数表示为参数作为数组。

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']

注意：只有最后一个参数可以是“剩余参数”。

这些只是JavaScript速记技术中的一些。还有更多，但是对于初学者来说，这些是我使用最多的。

随时告诉我你使用最多的是哪个。并继续编写干净，可读和有组织的代码。

注意： Internet Explorer不支持带有*的标记。如果你需要Internet Explorer的支持，则可以使用编译器（例如Babel），该编译器将帮助你进行转换你的代码。

本文完〜

10种JS速记技巧