Ten minutes to take you read through the ES6 new features

let, const keyword

where

Look accustomed java, js look really wanted to laugh, say this var, it is too much freedom, freedom to {} could not simply limit its life cycle

js the var keyword, regardless of where the statement will be seen as a statement at the very top of the function, not the function of which is considered at the top of most global, which is called the variable lift

function aa(bool) {
    if (bool) {
        var test = "hello";
    } else {
        console.log(test);
    }
}
aa(false);

For example, the above code, he does not complain, but that undifined, because var variable lift, as equivalent to the following:

function aa(bool) {
    var test;
    if (bool) {
        test = "hello";
    } else {
        console.log(test);
    }
}
aa(false);

let

Replaced by the let keyword, will ordinary variable, its lifetime is limited to {}

function aa(bool) {

    if (bool) {
        let test = "hello";
    } else {
        console.log(test);
    }
}

const

const declare a constant, the value can not be modified, and must be initialized

function aa() {
    let a = 'abc';
    const test = a;
    a = "world";
    alert('a=='+a);
    alert('test=='+test);
}
aa();

The result is abc world

If you try to directly test the assignment, the compiler will complain of

Template string splicing

This value was no problem, but the designers thought he js + too much, low burst

console.log(name1 + "喜欢" + name2); 

Thus: $ {}, note ah, the following keys esc

console.log(`${name1}喜欢${name2}`); 

Default parameters of the method

If we do not pass a value to the parameter, the default is empty, one with the error, so the default value of the parameter required is necessary

At this time, the user passed in value, that is, the value of the user passed in use in java wanted to do this thing, have to add a long note in the old location parameters

function sayName(name = "张三") {
    alert(name);
}

Arrow function

es6 arrows java8 lambda expression and function exactly the same, because the learned java8, so es6 arrow second function is started up, including streaming operations are exactly the same

Object shorthand and deconstruction

It turned out that if you want to return an object method, you need to write

function people(name, age) {
return {
    name: name,
    age: age
}
}

In ES6, if the same attributes and values, this becomes

function people(name, age) {
    return {
        name,
        age
    }
}

Dynamically add properties in java Do not even think,

let p = {name: '张三', age: 680};
alert(p.name);
alert(p.age);

• Add property

p.address = '山东';

• Add Function

p.add = () => {};

In fact, so free js not necessarily a good thing, at least not mess up, it does not give an error, an inattentive more attributes

Assembly of objects or an array SpreadOperator ...

const color = ['red', 'blue'];
const colorful = [...color, 'green']
// 现在 colorful数组就是 三个颜色的数组 , 同样换成{}  也一样

Import and export

This feature vue most used, modular feel very strongly

let fun = function () {
    console.log("fun")
}
export {fun}


// 在第二个文件 导入
import fun from "./fun";
// 然后使用
fun()

Object-oriented programming model - based

class person {
    // 构造函数
    constructor(name) {
        this.name = name; // 不提前定义变量? 不存在的,直接点就行了老铁
    }

    // 方法
    sayHello() {
        console.log("hello");
    }
}

// 类的继承
class Student extends person {
    constructor(name) {
        super(name);
    }

    sayHaha() {
        console.log("haha");
    }
}

use:

It does not write the parent class references to subclass objects

//person stu = new Student('zhangsan');  
var stu = new Student('zhangsan');
stu.sayHaha();