19+ 个 JavaScript 疾速编程技能 — SitePoint
这确切是一篇针对于基于 JavaScript 言语编程的开发者必读的文章。在过去几年我进修 JavaScript 的时刻，我写下了这篇文章，并将其作为 JavaScript 疾速编程技能的一个主要参考。为了有助于明白，针对通例写法我也给出了相干的编程看法。
2017 年 6 月 14 日：这篇文章更新了一些基于 ES6 的速记写法。假如你想进一步相识 ES6 中有哪些新增的变化，可以注册 SitePoint Premium 并检察我们录制的视频 A Look into ES6.
1. 三元操纵符
假如你想只用一行代码写出一个 if..else 表达式，那末这是一个很好的节约代码的体式格局。
通例写法：
const x = 20;
let answer;
if (x > 10) {
answer = 'is greater';
} else {
answer = 'is lesser';
}速记法：
const answer = x > 10 ? 'is greater' : 'is lesser';你也可以像如许嵌套 if 表达式：
const big = x > 10 ? " greater 10" : x2. 短路求值速记法
当须要给另一个变量分派一个变量时，你可以须要确保变量不是 null、undefined 或许不为空。你可以写一个有多个 if 表达式的语句，你也可以运用短路求值。
通例写法：
if (variable1 !== null || variable1 !== undefined || variable1 !== '') {
let variable2 = variable1;
}速记法：
const variable2 = variable1 || 'new';你不相信如许可以 work？那就本身测试下吧（把下面的代码复制粘贴到 es6console：
let variable1;
let variable2 = variable1 || '';
console.log(variable2 === ''); // prints true
variable1 = 'foo';
variable2 = variable1 || '';
console.log(variable2); // prints foo3. 变量声明速记法
在函数里声明变量时，假如须要同时声明多个变量，这类速记法可以给你节约大批的时候和空间。
通例写法：
let x;
let y;
let z = 3;速记法：
let x, y, z=3;4. If 推断变量是不是存在速记法
这可以会有些噜苏，然则值得一提。当须要用 if 推断一个变量是不是为真时，赋值运算符有时刻可以省略。
通例写法：
if (likeJavaScript === true)速记法：
if (likeJavaScript)注重：这两个例子并非完整相称，只需 likeJavaScript 变量是一个 真值，该表达式就是建立的。
再给出一个例子。假如 “a” 不等于 true，以下：
通例写法：
let a;
if ( a !== true ) {
// do something...
}速记法：
let a;
if ( !a ) {
// do something...
}5. JavaScript 轮回速记法
假如你只想跑原生 JavaScript，不想依靠如 JQuery 或 lodash 如许的外部库，那这个小技能会异常有效。
通例写法：
for (let i = 0; i < allImgs.length; i++)速记法：
for (let index in allImgs)Array.forEach 速记法：
function logArrayElements(element, index, array) {
console.log("a[" + index + "] = " + element);
}
[2, 5, 9].forEach(logArrayElements);
// logs:
// a[0] = 2
// a[1] = 5
// a[2] = 96. 短路求值
假如我们不想为了只是推断一个变量是 null 或 undefined 就分派一个默许值而写六行代码，那末可以运用短路逻辑操纵符完成一样的功用，而且只要一行代码。
通例写法：
let dbHost;
if (process.env.DB_HOST) {
dbHost = process.env.DB_HOST;
} else {
dbHost = 'localhost';
}速记法：
const dbHost = process.env.DB_HOST || 'localhost';7. 十进制基数指数
你可以随处可见这类写法。这是一种比较 fancy 的写法，省去了背面的一堆零。举个栗子，1e7 就意味着 1 背面随着 7 个零。这是十进制基数指数的一种写法（JavaScript 会根据浮点范例去诠释），和 10,000,000 是相称的。
通例写法：
for (let i = 0; i < 10000; i++) {}速记法：
for (let i = 0; i < 1e7; i++) {}
// All the below will evaluate to true
1e0 === 1;
1e1 === 10;
1e2 === 100;
1e3 === 1000;
1e4 === 10000;
1e5 === 100000;8. 对象属性速记法
在 JavaScript 中定义对象字面量异常简朴。ES6 供应了一个更简朴的定义对象属性的要领。假如 name 和 key 名字雷同，那末就可以直接运用以下速记法。
通例写法：
const obj = { x:x, y:y };速记法：
const obj = { x, y };9. 箭头函数速记法
典范的函数写法易于浏览，然则一旦将如许的函数放进回调中就会略显冗杂，而且会形成一些疑心。
通例写法：
function sayHello(name) {
console.log('Hello', name);
}
setTimeout(function() {
console.log('Loaded')
}, 2000);
list.forEach(function(item) {
console.log(item);
});速记法：
sayHello = name => console.log('Hello', name);
setTimeout(() => console.log('Loaded'), 2000);
list.forEach(item => console.log(item));这里须要注重的是：this 值在箭头函数和通例写法的函数里是完整差别的，所以那两个例子并非严厉等价的。检察 this article on arrow function syntax猎取更多细节。
10. 隐性返回速记法
我们常常运用 return 关键字来返回一个函数的效果。唯一一个表达式的箭头函数会隐性返回函数效果（函数必需省略大括号({})才省略 return 关键字）。
假如要返回多行表达式（比方一个对象字面量），那末须要用 () 而不是 {} 来包裹函数体。如许可以确保代码作为一个零丁的表达式被盘算返回。
通例写法：
function calcCircumference(diameter) {
return Math.PI * diameter
}速记法：
calcCircumference = diameter => (
Math.PI * diameter;
)11. 默许参数值
你可以运用 if 表达式为函数参数定义默许值。在 ES6 中，你可以在函数声明的时刻直接定义默许值。
通例写法：
function volume(l, w, h) {
if (w === undefined)
w = 3;
if (h === undefined)
h = 4;
return l * w * h;
}速记法：
volume = (l, w = 3, h = 4 ) => (l * w * h);
volume(2) //output: 2412. 模板字面量
你是不是是已厌倦了运用 ‘ + ‘ 来将多个变量拼接成一个字符串？岂非就没有更简朴的体式格局来完成吗？假如你可以运用 ES6 的话，那末祝贺你，你要做的只是运用反引号和 ${} 来包裹你的变量。
通例写法：
const welcome = 'You have logged in as ' + first + ' ' + last + '.'
const db = 'http://' + host + ':' + port + '/' + database;速记法：
const welcome = You have logged in as ${first} ${last};
const db = http://${host}:${port}/${database};13. 解构赋值速记法
假如你正在运用恣意一种盛行的 web 框架，那末你很有可以会运用数组或许对象字面量情势的数据在组件和 API 之间传递信息。一旦组件接收到数据对象，你就须要将其睁开。
通例写法：
const observable = require('mobx/observable');
const action = require('mobx/action');
const runInAction = require('mobx/runInAction');
const store = this.props.store;
const form = this.props.form;
const loading = this.props.loading;
const errors = this.props.errors;
const entity = this.props.entity;速记法：
import { observable, action, runInAction } from 'mobx';
const { store, form, loading, errors, entity } = this.props;你以至可以给变量重新分派变量名：
const { store, form, loading, errors, entity:contact } = this.props;14. 多行字符串速记法
假如你须要在代码中写多行字符串，那末你可以会如许写：
通例写法：
const lorem = 'Lorem ipsum dolor sit amet, consectetur\n\t'
+ 'adipisicing elit, sed do eiusmod tempor incididunt\n\t'
+ 'ut labore et dolore magna aliqua. Ut enim ad minim\n\t'
+ 'veniam, quis nostrud exercitation ullamco laboris\n\t'
+ 'nisi ut aliquip ex ea commodo consequat. Duis aute\n\t'
+ 'irure dolor in reprehenderit in voluptate velit esse.\n\t'然则有一种更简朴的要领：运用反引号。
速记法：
const lorem = Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse.15. 睁开运算符速记
睁开运算符是在 ES6 中引入的，它的多种运用场景使得 JavaScript 代码运用起来更高效、更风趣。它可以用来替代某些数组函数。睁开运算符写起来很简朴，就是三个点。
通例写法：
// joining arrays
const odd = [1, 3, 5];
const nums = [2 ,4 , 6].concat(odd);
// cloning arrays
const arr = [1, 2, 3, 4];
const arr2 = arr.slice()速记法：
// joining arrays
const odd = [1, 3, 5 ];
const nums = [2 ,4 , 6, ...odd];
console.log(nums); // [ 2, 4, 6, 1, 3, 5 ]
// cloning arrays
const arr = [1, 2, 3, 4];
const arr2 = [...arr];和 concat() 函数差别，你可以在另一个数组里的恣意位置插进去一个数组。
const odd = [1, 3, 5 ];
const nums = [2, ...odd, 4 , 6];你也可以将睁开运算符和 ES6 剖析赋值结合起来运用：
const { a, b, ...z } = { a: 1, b: 2, c: 3, d: 4 };
console.log(a) // 1
console.log(b) // 2
console.log(z) // { c: 3, d: 4 }16. 强迫参数速记法
假如没有传值的话，JavaScript 默许会将函数参数设置为 undefined。一些其他的编程言语会抛出正告或毛病。为了强迫给参数赋值，假如参数没有定义的话，你可以运用 if 表达式抛出毛病，或许可以运用“强迫参数速记法”。
通例写法：
function foo(bar) {
if(bar === undefined) {
throw new Error('Missing parameter!');
}
return bar;
}速记法：
mandatory = () => {
throw new Error('Missing parameter!');
}
foo = (bar = mandatory()) => {
return bar;
}17. Array.find 速记法
假如你曾运用原生 JavaScript 写一个查找函数，你可以会运用 for 轮回。在 ES6 中，你可以运用数组的一个新要领 find()。
通例写法：
const pets = [
{ type: 'Dog', name: 'Max'},
{ type: 'Cat', name: 'Karl'},
{ type: 'Dog', name: 'Tommy'},
]
function findDog(name) {
for(let i = 0; i<pets.length; ++i) {
if(pets[i].type === 'Dog' && pets[i].name === name) {
return pets[i];
}
}
}速记法：
pet = pets.find(pet => pet.type ==='Dog' && pet.name === 'Tommy');
console.log(pet); // { type: 'Dog', name: 'Tommy' }18. Object [key] 速记法
你晓得 Foo.bar 可以写成 Foo['bar'] 吧。一开始，好像并没有缘由诠释说为何应当像如许写。然则这类写法可以让你编写可重用代码。
斟酌下一个考证函数的简朴例子：
function validate(values) {
if(!values.first)
return false;
if(!values.last)
return false;
return true;
}
console.log(validate({first:'Bruce',last:'Wayne'})); // true这个函数圆满的完成了所需的功用。然则，请斟酌一个场景：你有很多表单须要考证，而且差别的域有差别的考证划定规矩。那建立一个在运行时被设置的通用考证函数岂不是更好？
速记法：
// object validation rules
const schema = {
first: {
required:true
},
last: {
required:true
}
}
// universal validation function
const validate = (schema, values) => {
for(field in schema) {
if(schema[field].required) {
if(!values[field]) {
return false;
}
}
}
return true;
}
console.log(validate(schema, {first:'Bruce'})); // false
console.log(validate(schema, {first:'Bruce',last:'Wayne'})); // true如今建立了一个可以在所有的表单里重用的考证函数，而没必要为每一个表单零丁写一个特定的考证函数。
19. 双位取反运算符速记法
逐位运算符是你在刚进修 JavaScript 时会学到的一个特征，然则假如你不处置惩罚二进制的话，基本上是历来都不会用上的。
然则，双位运算符有一个异常有用的运用场景：可以用来替代 Math.floor。双位取反运算符的上风在于它实行雷同操纵的速率更快。你可以在这里检察更多关于位运算符的学问。
通例写法：
Math.floor(4.9) === 4 //true速记法：
~~4.9 === 4 //true20. 另有其他的小技能？
我确切喜好这些小技能，也乐于发明更多的小技能。假如你有什么想说的话，就直接留言吧！
译者：myvin
链接：http://www.zcfy.cc/article/3519
原文：https://www.sitepoint.com/shorthand-javascript-techniques/
