// Import entire file
import 'test'

// Overall loading
import * as test from 'test'

// Import on demand
import { deDuplication, fix } from 'test'

// Exit encountered is export { foo as default, foo1, foo2 }
import foo, { foo1, foo2 } from 'foos'

6. Parameters

Before parameters, we need to do a lot of processing whether it is default parameters, indefinite parameters or renamed parameters. With ES6, it is much simpler:

Default parameters:

// ES5
function add(x, y) {
    x = x || 0
    y = y || 0
    return x + y
}

// ES6
function add(x=0, y=0) {
    return x + y
}

add(3, 6) // 9
add(3) // 3
add() // 0

Indefinite parameters:

// ES5
function logArgs() {
    for(var i = 0; i < arguments.length; i++) {
        console.log(arguments[i])
    }
}

// ES6
function logArgs(...args) {
    for(let arg of args) {
        console.log(arg)
    }
}

Parameter naming:

// ES5
function Phone(options) {
    var type = options.type || 'ios'
    var height = options.height || 667
    var width = options.width || 375
}

// ES6
function Phone(
    {type='ios', height=667, width=375}) {
    console.log(height)
}

Expand operation:

Find the maximum value of an array:

// ES5
Math.max.apply(null, [-1, 100, 9001, -32])

// ES6
Math.max(...[-1, 100, 9001, -32])

Of course, this feature can also be used to merge arrays:

const player = ['Bryant', 'Durant']
const team = ['Wade', ...player, 'Paul']
console.log(team)
// ['Wade', 'Bryant', 'Durant', 'Paul']

7. class

We are familiar with the word object-oriented. Before that, the realization of object-oriented programming in JS was based on prototype chain. ES6 provides many kinds of syntax sugars. Through these syntax sugars, we can simplify many operations on prototype in Code:

// ES5
// Create a class
function Animal(name, age) {
    this.name = name
    this.age = age
}
Animal.prototype.incrementAge = function() {
    this.age += 1
}

// Class inheritance
function Human(name, age, hobby, occupation) {
    Animal.call(this, name, age)
    this. hobby = hobby
    this.occupation = occupation
}
Human.prototype = Object.create(Animal.prototype)
Human.prototype.constructor = Human
Human.prototype.incrementAge = function() {
    Animal.prototype.incrementAge.call(this)
    console.log(this.age)
}

Using syntax sugar simplification in ES6

// ES6
// Create a class
class Animal {
    constructor(name, age) {
        this.name = name
        this.age = age
    }
    incrementAge() {
        this.age += 1
    }
}

// Class inheritance
class Human extends Animal {
    constructor(name, age, hobby, occupation) {
        super(name, age)
        this.hobby = hobby
        this.occupation = occupation
    }
    incrementAge() {
        super.incrementAge()
        console.log(this.age)
    }
}