7801人阅读 评论(18)

# 正文

### 1. 三元运算符

const x = 20;
if (x > 10) {
} else {
}

const answer = x > 10 ? 'is greater' : 'is lesser';

const big = x > 10 ? " greater 10" : x

### 2. 简写短路求值

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

const variable2 = variable1  || 'new';

### 3. 简写变量声明

let x;
let y;
let z = 3;

let x, y, z=3;

### 4. 简写 if 执行条件

if (likeJavaScript === true)

if (likeJavaScript)

let a;
if ( a !== true ) {
// do something...
}

let a;
if ( !a ) {
// do something...
}

### 5. 简写 JavaScript 循环方法

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

for (let index in 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

### 6. 短路求值

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

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

### 7. 十进制指数

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

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

// 下面都是返回 true
1e0 === 1;
1e1 === 10;
1e2 === 100;
1e3 === 1000;
1e4 === 10000;
1e5 === 100000;

### 8. 简写对象属性

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

const obj = { x, y };

### 9. 简写箭头函数

function sayHello(name) {
console.log('Hello', name);
}

setTimeout(function() {
}, 2000);

list.forEach(function(item) {
console.log(item);
});

sayHello = name => console.log('Hello', name);

list.forEach(item => console.log(item));

### 10. 简写隐式返回值

function calcCircumference(diameter) {
return Math.PI * diameter
}

var func = function func() {
return { foo: 1 };
};

calcCircumference = diameter => (
Math.PI * diameter;
)

var func = () => ({ foo: 1 });

### 11. 默认参数值

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

### 13. 简写赋值方法

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 errors = this.props.errors;
const entity = this.props.entity;

import { observable, action, runInAction } from 'mobx';

const { store, form, loading, errors, entity } = this.props;

// 最后一个变量名为 contact


### 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中，包括扩展运算符，它可以使你的操作更简单，例如：

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

const odd = [1, 3, 5 ];
const nums = [2, ...odd, 4, 6];

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. 强制参数

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 简写

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]

function validate(values) {
if(!values.first)
return false;
if(!values.last)
return false;
return true;
}

console.log(validate({first:'Bruce',last:'Wayne'})); // true

// 对象验证规则
const schema = {
first: {
required:true
},
last: {
required:true
}
}

// 通用验证函数
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. 简写双重按位非运算符

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

~~4.9 === 4  //true

### 20. Suggest One of U?

19
8

个人资料
• 访问：964465次
• 积分：12945
• 等级：
• 排名：第1261名
• 原创：258篇
• 转载：86篇
• 译文：11篇
• 评论：954条
博主的 GitHub 账号
GitHub : Charies Gavin

鉴于 CSDN 糟糕的用户体验，博主会将一些优质的文章迁移到 Charies Gavin's Blog  欢迎大家在 GitHub 上 Follow 博主，以及 Fork、Star、Watch 博主的项目。

### 青春不老 奋斗不止

好学若饥虚心若愚
博客专栏
 史上最简单的 MySQL 教程 文章：48篇 阅读：133269
 史上最简单的 GitHub 教程 文章：16篇 阅读：23695
 史上最简单的 IntelliJ IDEA 教程 文章：32篇 阅读：259658
 Java 那些事儿 文章：14篇 阅读：24002
 奔跑的程序猿 文章：25篇 阅读：44594