ES6常用的简写技巧

ES6简写技巧
初级篇
1、三目运算符
const x = 20;

let answer;

if(x > 10) {

answer = ‘greater than 10’;

}else {

answer = ‘less than 10’;

}

简写为: const answer = x > 10 ? ‘greater than 10’ : ‘less than 10’;

2、循环语句
当使用纯JavaScript(不依赖外部库，如JQuery或lodash)时

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

}

简写为

for(let index of array)

下面是遍历forEach的简写例子：

[2, 8, 9].forEach(function(element, index, array) {

console.log(‘a[’ + index + '] = ’ + element);

});

3、声明变量
在函数开始之前，对变量初始化赋值是一个很好的习惯，如果存在多个变量

let x;

lex y;

lex z = 3;

可以简写为 let x,y,z = 3;

4、在使用If进行基本判断时可以省略赋值运算符
if(a === true) 可以写成if(a)

5、多行字符串拼接可以用``代替’’+
let a = ‘adsa’

• ‘dasd’;

可以写为 let a = `adsa

dasd`;

高级篇
1、变量赋值及默认值复制
当一个变量的值赋给另一变量时,首先需要确保原值不是null、未定义的或空值。

if(a != null || a != undefined || a != ‘’) {

let b = a;

}

可以简写为以下的形式

const b = a || ‘new’

2、 对象属性
ES6提供了一个很简单的办法，来分配属性的对象。如果属性名和key名相同，则可以使用简写。

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

可以简写为

const obj = {x, y};

3、箭头函数
经典函数很容易读写，但如果把它们嵌套在其他函数中进行调用时，整个函数就会变得有些冗余和混乱。 这时候可以使用箭头函数来简写：

function sayHello() {

console.log(‘hello’);

}

setTimeout(function() {

console.log(‘setTimeout’)

}, 2000);

上述可以简写为

sayHello = () => console.log(‘hello’);

setTimeout(() => console.log(‘loaded’), 2000);

4、隐式返回值
返回值是我们通常用来返回函数的最终结果的关键字。只有一个语句的箭头函数，可以隐式返回结果（函数必须省略括号{}）

要返回多行语句（例如对象文本），需要使用（）而不是{}来包裹函数体，这样可以保证单个语句的形式进行求值。

function calcCircumference(diameter) {

return Math.PI * diameter;

}

简写为：

calcCircumference = dameter => (Math.Pi * diameter);

5、默认参数值
可以使用if语句来定义函数参数的默认值。es6中规定了可以在函数声明中定义默认值。

function volume(l, w, h) {

if(w === undefined) {

w =3;

}

if(h === undefined) {

h =3;

}

return h * w * l;

}

可以简写为

function volume(l, w = 3, h = 4) => l * w * h;

6、 模板字符串
在反引号和${*}这种写法可以将变量的值合成一个字符串。

const a = ’ you have get’ + first + ‘.’;

可以简写为

const a = you have get ${first}.

7、解构赋值
const o = {a : 1, b :2};

const a = o.a;

const b = o.b;

可以简写成

const {a,b} = o;

8、展开运算符
// join arrays

const odd = [1, 3, 5];

const nums = [2, 4, 6].concat(odd);

可以简写为

nums = [2, 4, 6, …odd];

也可以将展开运 算符合ES6解构符号结合使用 例如

const {a, b, …z} = {a: 1, b: 2, c: 3, d: 4};

console.log(z); // {c:3, d: 4}

9、强制参数
默认情况下，如果不向函数参数传值，那么JavaScript将函数参数设置为未定义。其他一些语言会发出警告或错误。要执行参数分配，可以使用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;

}

10、双位操作符
位操作符是JavaScript初级教程的基本知识点，但是我们却不尝试用为操作符。因为在不处理二进制的情况是，没人愿意使用1或0

但是双位操作符却有一个很实用的案例。 你可以使用双位操作符来替代Math.floor()。双否定位操作符的优势在于它执行相同的操作运行速度更快。

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

简写为：

~~4.9 === 4；// true