接上次

箭头函数 Arrow Functions

传统写法

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

隐式返回 Implicit Return

传统写法

function calcCircumference(diameter) {

return Math.PI * diameter

}

快捷语法

calcCircumference = diameter => (

Math.PI * diameter;

)

默认参数值 Default Parameter Values

传统写法

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

字符串模板 Template Literals

传统写法

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

赋值解构 Destructuring Assignment

传统写法

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;

多行字符串 Multi-line String

传统写法

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

快捷语法

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

操作符传播 Spread Operator

传统写法

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

强制参数 Mandatory Parameter

传统写法

function foo(bar) {

if(bar === undefined) {

throw new Error('Missing parameter!');

}

return bar;

}

快捷语法

mandatory = () => {

throw new Error('Missing parameter!');

}

foo = (bar = mandatory()) => {

return bar;

}

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

}

}

}