ES6技巧

Let and const

  • 块级作用域
for (let i = 1; i < 5; i++) {
  setTimeout(function () {
    console.log(i)
  }, 1000)
};
  • 块级作用域好处
    • 不在需要立即执行的函数表达式(IIFE)
    • 循环体中的闭包不再有问题
    • 防止重复声明变量

箭头函数和lexical this

  • 一行代码
// Find max value
const max = (arr) => Math.max(...arr);

// Sum array
const sum = (arr) => arr.reduce((a, b) => (a + b), 0)

默认参数

  • 设置必须的函数参数
const required = () => {thrownewError('Missing parameter')};
//The below function will trow an error if either "a" or "b" is missing.
const add = (a = required(), b = required()) => a + b;
add(1, 2) //3
add(1) // Error: Missing parameter.
  • 表达式
function bar( x = 2, y = x + 4, z = foo(x)) {
    console.log([ x, y, z ]);
}
bar();  // [ 2, 6, 8 ]
bar( 1, 2, 3 ); //[ 1, 2, 3 ] 
bar( 10, undefined, 3 );  // [ 10, 14, 3 ]

解构

  • 交换数组
[a, b] = [b, a]
  • 函数传参
// ES6
function initialize({controls = {}, models = {}, reducers = {}, actors = []}) {
    // ...
}
// ES5
function initialize(options) {
    var controls = options.controls || {};
    var models = options.models || {};
    var reducers = options.reducers || {};
    var actors = options.actors || {};
}

剩余参数语法和扩展运算符

  • 数组合并
const one = ['a', 'b', 'c']
const two = ['d', 'e', 'f']
const three = ['g', 'h', 'i']
// Old way #1
const result = one.concat(two, three)
// Old way #2
const result = [].concat(one, two, three)
// New
const result = [...one, ...two, ...three]
  • 数组复制
const arr = [ ...oldArr ]
  • 函数参数
// 当你不知道函数参数个数时。
function foo(...args) {
    console.log(args)
    // 继续传递的话 func(...args)
} 
foo( 'car', 54, 'tree')
  • compose
export default function compose(...funcs) {
  if (funcs.length === 0) {
    return arg => arg
  }

  if (funcs.length === 1) {
    return funcs[0]
  }

  return funcs.reduce((a, b) => (...args) => a(b(...args)))
}

对象的扩展运算符(ES2018)

  • 移除不想要的属性
let {_internal, tooBig, ...cleanObject} = {el1: '1', _internal:"secret", tooBig:{}, el2: '2', el3: '3'};
console.log(cleanObject);
  • 合并对象
let object1 = { a:1, b:2,c:3 }
let object2 = { b:30, c:40, d:50}
let merged = {…object1, …object2} 

对象字面量扩展语法

  • 属性名简写
const foo = 1
const bar = {a: 2}
const obj = {foo, bar}
  • 方法简写
const obj = {
    //Before
    foo: function(){
        return 'foo';
    },

    //After
    bar () {
        return 'bar';
    }
}
  • 动态属性名
const prefix = "pre-"
const obj2= {
 [prefix + "test"]: "dynamic"   
}

模板字符串

  • 定义多行字符串
  • 在字符串中嵌入变量
var fName = 'Peter', sName = 'Smith', age = 43, job= 'photographer';
var a = 'Hi, I\'m ' + fName + ' ' + sName + ', I\'m ' + age + ' and work as a ' + job + '.';
var b = `Hi, I'm ${ fName } ${ sName }, I'm ${ age } and work as a ${ job }.`;

Set

  • 去重
const arr1 = [1, 2, 3]
const arr2 = [2, 3, 4]
Array.from(new Set([...arr1, ...arr2]]))

Promise

  • 原理:初始pending状态,resolve()后状态成fulfilledreject()后状态成rejected

Async/Await (ES8)

const [user, account] = await Promise.all([
  fetch('/user'),
  fetch('/account')
])

Class

  • Class在语法上更加贴合面向对象的写法
  • Class实现继承更加易读,易理解,对初学者更加友好
  • 本质还是语法糖,使用prototype

新方法

  • Object.assign
// merge
Object.assign(o1, o2)

//copy
let copy = Object.assign({}, o1, o2)
  • String.repeat()

  • String. startsWith(), endsWith() and includes()

  • Number.isNaN() and Number.isFinite()

  • Math.sign()

  • Array.fill()