19个Javascript简写编码技术

文章转自 http://mp.weixin.qq.com/s/4FFjRB-YcerAnYP_qTDMfQ

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" : x;

2. 或求值简写

当把一个变量值赋给另一个变量的时候，你可能想要确保源变量不为null, undefined后者空。你可以写一个有多种情况的长的if声明, 或者使用或求值。

普通写法：

if (variable1 !== null || variable1 !== undefined || variable1 !== '') {

let variable2 = variable1;

}

简写：

const variable2 = variable1 || 'new';

不相信我？自己测试下

let variable1;

let variable2 = variable1 || '';

console.log(variable2 === ''); // prints true

variable1 = 'foo';

variable2 = variable1 || '';

console.log(variable2); // prints foo

3. 声明变量简写

在方法的前边声明变量、赋值是一个好的实践。当同时声明多个变量的时候，简写的办法可以为你节省大量的时间和空间。

普通写法：

let x;

let y;

let z = 3;

简写：

let x, y, z=3;

4. if存在简写

这也许是不重要的，但值得提及。当做if判断的时候，赋值操作符有时可以忽略。

普通写法：

if (likeJavaScript === true)

简写：

if (likeJavaScript)

附：两个例子不完全相等，只要likeJavaScript隐式转换后是真值，简写的判断就可以通过。

还有一个例子，如果a不等于true,然后do something。

普通写法：

let a;

if ( a !== true ) {

// do something...

}

简写：

let a;

if ( a !== true ) {

// do something...

}

5. JavaScript for 循环简写

如果你使用简单的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] = 9

6. 或运算

如果预期的参数是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. 十进制计数指数

你可能看过这个。本质上，它是一种奇特的写法没有后边的0。例如，1e7 意味着1后边跟了7个0。它代表了十进制计数等于10000000。

普通写法：

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.对象属性简写

定义一个字面量对象会变得更容易。ES6提供了一种更简单的方式声明属性给对象。如果属性名和键名一样，你可以利用这个简化符号。

普通写法：

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

10. 隐式返回简写

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: 24

12. 模板对象

用加号拼接多个变量为一个字符串，你是否感觉到疲惫? 有没有一种更容易的方式呢？如果你使用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框架，你将会使用数组和以对象字面量的形式的数据在组件和APIs间传递信息。一旦数据对象达到一个组件时,你需要将其展开。

普通写法：

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']？首先，这似乎不是你应当这样写的一个理由。然而，这个符号给你编写可重用代码的构建块。

考虑下这个简单的validate方法的例子：

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新手教程过程中的一个特性而且你从来不会是实现他们。此外，如果你不是处理二进制，谁想和1和0打交道呢？

然而,一个非常实用的用例双位操作符。你可以用它代替Math.floor()。双位操作符的优势是,它执行相同的操作要快得多。

普通写法：

Math.floor(4.9) === 4 //true

简写：

~~4.9 === 4 //true

19个Javascript简写编码技术

相关文章

HostDare VPS-$19/年KVM 1核756M内存-17G硬盘-1T流量-洛杉矶QN机房

CenTexHosting VPS-$7.5/年 OpenVZ 1核256MB内存-25G硬盘-500G流量-洛杉矶Psychz机房