ES6 簡寫方式

三目運算符

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

循環

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

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

變量聲明

函數開始前變量賦值，寫成一行：let x,y,z=3;

if判斷

if (likeJavaScript === true) 等於 if (likeJavaScript)

科學計數法代替大數

1e7 = 10000000

多行字符串

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`

變量賦值（確保原值不是 null、未定義的或空值）

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

屬性名與 key 名相同

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

箭頭函數

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));//匿名函數，有參數

隱式返回值

單行省略括號：calcCircumference = diameter => Math.PI * diameter;
多行（對象文本）用（）：calcCircumference = diameter => (Math.PI * diameter;)

默認參數值

函數聲明定義默認值：volume = (l, w = 3, h = 4 ) => (l * w * h);
（沒有傳參則使用3,4，不然用參數的）

//強制參數，沒有參數賦值則拋出錯誤
mandatory = ( ) => {
  throw new Error('Missing parameter!');
}
foo = (bar = mandatory( )) => {
  return bar;
}

模板字符串

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

解構賦值

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;

展開運算符[...]

//數組拼接
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' }

編寫驗證函數

foo.bar 等於 foo ['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

雙位操做符

Math.floor(4.9) === 4 //true 等於 ~~4.9 === 4 //true
用~~代替體Math.floor,執行速度更快