ES6 shorthand

Ternary operator

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

cycle

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

//数组遍历
[2, 5, 9].forEach(function (ele,index,array) {
    console.log("a[" + index + "] = " + ele);
});

variable declaration

The variable assignment before the function starts, write it as one line:let x,y,z=3;

if judgment

if (likeJavaScript === true)equalif (likeJavaScript)

Scientific notation instead of large numbers

1e7 = 10000000

multiline string

const lorem = 'Lorem ipsum dolor sit amet, consectetur\n\t'
    + 'adipisicing elit, sed do eiusmod tempor incididunt\n\t'
//只用引号``
const lorem = `Lorem ipsum dolor sit amet, consectetur
    adipisicing elit, sed do eiusmod tempor incididunt`

variable assignment (make sure the original value is not null, undefined or empty)

if (variable1 !== null || variable1 !== undefined || variable1 !== '') {
     let variable2 = variable1;
}
//上面等同于下面
const variable2 = variable1  || 'new';

The attribute name is the same as the key name

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

arrow function

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 value

Omit parentheses on a single line: calcCircumference = diameter => Math.PI * diameter;
use () for multiple lines (object literals):calcCircumference = diameter => (Math.PI * diameter;)

Default parameter value

The function declaration defines the default value: volume = (l, w = 3, h = 4 ) => (l * w * h);
(use 3,4 if there is no parameter, otherwise use the parameter)

//强制参数，没有参数赋值则抛出错误
mandatory = ( ) => {
  throw new Error('Missing parameter!');
}
foo = (bar = mandatory( )) => {
  return bar;
}

template string

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');
//导入包的简写
import { observable, action } from 'mobx';
*******分割线*******
const store = this.props.store;
const form = this.props.form;
//导入常量简写,重命名
const { store, form:form_0 } = this.props;

Spread operator [...]

//数组拼接
const arr = [1,2,3]
const arr_1 = [5,6].concat(arr)
const arr_2 = [11,...arr,12];//任意位置进行扩展都可以
//复制数组
const arr_3 = [...arr];
//解构运算符和展开运算符连用
const { a, b, ...z } = { a: 1, b: 2, c: 3, d: 4 };
console.log(z) // { c: 3, d: 4 }

Array.find

pet = pets.find(pet => pet.type ==='Dog' && pet.name === 'Tommy');
console.log(pet); // { type: 'Dog', name: 'Tommy' }

Write a validation function

foo.barequalfoo ['bar']

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

double bit operator

Math.floor(4.9) === 4 //trueEqual to ~~4.9 === 4 //true
use ~~ instead of the body Math.floor, the execution speed is faster