ES6常用特性总结

1.const、let关键字

let用来声明一个局部变量，用法类似于var，但是它所声明的变量，只在let声明所在的块级作用域内有效。

{
    let a = 1;
    var b = 2;
}
console.log(b);      //2
console.log(a);      //ReferenceError: a is not defined

const用来声明一个只读的常量，作用域与let相同（声明所在的块级作用域），一旦定义之后不可以修改，不过如果声明的变量如果是引用类型的，可以修改它的属性。

const PI = 3.14;
PI = 3.1415926;          //TypeError: invalid assignment to const `PI'

const PERSON = {name: 'Tom'};
PERSON.name = 'Jack';
console.log(PERSON.name);        //'Jack'

2.函数

• 箭头函数

let sum = (num1,num2) => {return num1 + num2};
//或
let sum = (num1,num2) => num1+num2;

• this在箭头函数中的使用

箭头函数体内的this对象，是定义时所在的对象，不是使用时所在的对象。

var user = "Mike";
let person = {
    user: "Tom",
    sayHello:function(){
        setTimeout(function(){
            console.log("hello",this.user);   //this指向运行时所在的作用域
        },1000);
        setTimeout(()=>{
            console.log("hello",this.user)    //this指向定义时的对象
        },2000)
    }
};
person.sayHello();        
//先后输出“hello,Mike”和“hello,Tom”

• 函数参数的默认值

function log(x,y = 'world'){
    console.log(x,y);
}
log('hello');   //hello,world

• rest参数

rest参数（形式为：...变量名）用于获取函数的多余参数，rest参数是一个数组对象，可以用于替代arguments对象

//普通排序写法，使用arguments
function sortNumbers(){
    return Array.prototype.slice.call(arguments).sort();
}
//使用rest参数
const sortNumbers = (...numbers) => numbers.sort();

3.展开操作符

• 用于函数调用

function sum(x,y,z){
    return x+y+z;
}
let args = [1,2,3];
//ES6之前的用法
sum.apply(null,args);  
//使用展开操作符：
sum(...args);

• 用于数组字面量

let arr1 = [1,2,3];
let arr2 = [4,5,6];
//es6之前的用法
let arr3 = arr1.concat(arr2);        //[1,2,3,4,5,6]
//展开操作符用法
let arr3 = [...arr1,...arr2];

• 对象的展开运算符

let student = {name:'Tom',age:14};
student = {...student,sex:'male'};

4.模板字符串

let name = 'Mike';
let str = `My name is ${name}`;
console.log(str);          //‘My name is Mike’

5.解构语法

• 解构数组

let arr = ['blue','green','red'];
let [a,b,c] = arr;        //按照数组序号，一一对应 a='blue',b='green',c='red'

• 解构对象

let person = {name:'Jack',age: 20};
let {name,age} = person;  //与属性名一一对应 name='Jack',age=20

6.类

class Animal {
    constructor(name,age){
        this.name = name;
        this.age = age;
    }
    shout(){
        return `My name is ${this.name}, age is ${this.age}`;
    }
    //静态方法
    static foo(){
        console.log('Here is a static method');
    }
}
const cow = new Animal('betty', 2);
cow.shout();        //My name is betty, age is 2
Animal.foo();     //Here is a static method

//派生类
class Dog extends Animal{
    constructor(name, age=3,color='black'){
        //继承父类属性
        super(name,age);
        this.color = color;
    }
    //重写shout方法
    shout(){
        //使用super调用父类方法
        return super.shout() + `,color is ${this.color}`;
    }
}
const dog = new Dog('Bagong');
dog.shout(); //My name is Bagong, age is 3, color is black

7.模块

• 一个模块的导入/导出

//func1.js文件
//定义一个func1函数
function func1(){
    console.log("this is func1");
}

//使用export导出这个模块
export func1;

//func2.js文件
//使用import导入这个模块
import {func1} from './func1';       //假设两个文件在同级目录下
func1();          //"this is func1"

• 一个模块的多个导出

//func1.js文件
export const PI = 3.14;
export function func1(){
    console.log("this is func1");
}
export let person = {name: "Nike"};

//func2.js文件
//使用import导入模块
//导入方式1，使用对象解构加载
import {PI,func1,person} from './func1';
console.log(PI);             //3.14

//导入方式2，作为一个整体导入
import * as util from './func1';
console.log(util.PI);          //3.14

• 模块的默认导出

//func1.js文件
//定义一个func1函数
export default function(){
    console.log("this is func1");
}

//func2.js文件
//使用import导入这个模块
import func1 from './func1';       //假设两个文件在同级目录下
func1();          //"this is func1"