JavaScript 开发人员需要知道的简写技巧

沙龙晃荡 | 去哪儿、陌陌、ThoughtWorks在主动化运维中的实践！10.28不见不散！

本文来源竽暌冠多年的 JavaScript 编码技巧经验，合适所有正在应用 JavaScript 编程的开辟人员浏览。

本文的目标在于赞助大年夜家加倍闇练的应用 JavaScript 说话来进行开辟工作。

文┞仿将分成初级篇和高等篇两部分，分别进话旧绍。

初级篇

1、三目运算符

下面是一个很好的例子，将一个完全的 if 语句，简写为一行代码。

const x = 20;let answer;if (x > 10) {    answer = 'greater than 10';} else {    answer = 'less than 10';}

简写为：

const variable2 = variable1  || 'new';

const answer = x > 10 ? 'greater than 10' : 'less than 10';

2、轮回语句

当应用纯 JavaScript（不依附外舶そ?如 jQuery 或 lodash）时，下面的简写会异常有效。

for (let i = 0; i < allImgs.length; i++)

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];    }  }}

简写为：

for (let index of allImgs)

function logArrayElements(element, index, array) {  console.log("a[" + index + "] = " + element);}[2, 5, 9].forEach(logArrayElements);// logs:// a[0] = 2// a[1] = 5// a[2] = 9

简写为：

3、声明变量

在函数开端之前，对变量进行赋值是一种很好的习惯。在申明多个变量时：

let x;let y;let z = 3;

可以简写为：

let x, y, z=3;

4、if 语句

在应用 if 进行根本断定时，可以省略赋值袈渌算符。

let dbHost;if (process.env.DB_HOST) {  dbHost = process.env.DB_HOST;} else {  dbHost = 'localhost';}

if (likeJavaScript === true)

简写为：

if (likeJavaScript)

5、十进制数

可以应用科学计数法来代替较大年夜的数据，如可以将 10000000 简写为 1e7。

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

简写为：

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

6、多行字符串

function validate(values) {  if(!values.first)    return false;  if(!values.last)    return false;  return true;}console.log(validate({first:'Bruce',last:'Wayne'})); // true

如不雅须要在代码中编写多行字符串，就像下面如许：

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.`

高等篇

1、变量赋值

可以经由过程编写一个包含多个前提的断定语句来实现：

if (variable1 !== null || variable1 !== undefined || variable1 !== '') {     let variable2 = variable1;}

或者简写为以下的情势：

可以将下面的代码粘贴到 es6console 中，本身测试：

let variable1;let variable2 = variable1  || '';console.log(variable2 === ''); // prints truevariable1 = 'foo';variable2 = variable1  || '';console.log(variable2); // prints foo

2、默认值赋值

如不雅预期参数是 null 或不决义，则不须要写六行代率攀来分派默认值。我们可以只应用一个简短的逻辑运算符，只用一行代码就能完成雷同的操作。

简写为：

下面是遍历数组 forEach 的简写示例：

const dbHost = process.env.DB_HOST || 'localhost';

3、对象属性

ES6 供给了一个很简单的办法，来分派属性的对象。如不雅属性名与 key 名雷同，则可以应用简写。

const obj = { x:x, y:y };

const obj = { x, y };

4、箭头函数

经典函数很轻易读写，然则如不雅把它们嵌套在其它函数中进行调用时，全部函数就会变得有些冗长和纷乱。这时刻可以应用箭头函数来简写：

function sayHello(name) {  console.log('Hello', name);} setTimeout(function() {  console.log('Loaded')}, 2000); list.forEach(function(item) {  console.log(item);});

简写为：

5、隐式返回值

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;

返回值是我们平日用来返回函数最终结不雅的关键字。只有一个语句的箭头函数，可以隐式返回结不雅（函数必隆盛略括号（{ }），以便省略返回关键字）。

1/3 1 2 3 下一页尾页

　　推荐阅读

　　从银行转账失败到分布式事务：总结与思考

沙龙晃荡 | 去哪儿、陌陌、ThoughtWorks在主动化运维中的实践！10.28不见不散！正文关系型数据库事务大年夜多半人可能和我一样，第一次据说事务是在进修关系型数据库(mysql、sql server、Oracle)的时刻>>>详细阅读

本文标题：JavaScript 开发人员需要知道的简写技巧

地址：http://www.17bianji.com/lsqh/38130.html

1/2 1