ES6速学（一）

1、var、let、const

• var可声明前置
• let不可声明前置
• let不可重复声明
• let存在块级作用域
• const声明的常量不可改变

2、解构赋值

1）数组的解构

let [a,b,c] = [1,2,3]
let [a,[b],c] = [2,[3],4]//a=2,b=3,c=4
let [a] = 1//报错

2）默认值

let [a,b=2] = [3]  //a=3 b=2
let [a,b=2] = [3,4]  //a=3 b=4
let [a=2,b=3] = [undefined,null]  //a=2 b=null
let [a=1,b=a] = [2] //a=2 b=2

3）对象的解构赋值

//前置知识
let [name,age] = ['hunger',3]
let p1 = {name,age}
//等同于
let p2 = {name:name,age:age}
//解构范例
let {name,age} = {name:'jirengu',age:4}  //name='jirengu' age=4
//以上代码等同于
let name
let age
({name:name,age:age} = {name:'jirengu',age:4})

4）默认值

let {x,y=5} = {x:1}  //x=1 y=5

5）函数解构

function add([x=1,y=2]){
    return x+y
}
add() //3
add([2]) //4
add([3,4]) //7

function sum({x,y}={x:0,y:0},{a=1,b=1}){
    return [x+a,y+b]
}
sum({x:1,y:2},{a:2})  //[3,3]

6）作用

let [x,y] = [1,2];
[x,y] = [y,x]
//x=2 y=1

function ajax({url,type='GET'}){
}
ajax({url:'http://localhost:3000/getData'})

3、字符串

1）多行字符串

2）字符串模板

4、数组

...arr 相当于脱去arr数组的[ ]

5、函数

1）两种写法的区别

//ex1
function m1({x=0,y=0} = {}){
    return [x,y];
}

//ex2
function m2({x,y}={x:0,y:0}){
    return [x,y];
}

//函数没有参数的情况
m1() //[0,0]
m2() //[0,0]

//x和y都有值的情况
m1({x:3,y:8}) //[3,8]
m2({x:3,y:8}) //[3,8]

//x有值,y无值的情况
m1({x:3}) //[3,0]
m2({x:3}) //[3,undefined]

//x和y都无值的情况
m1({}) //[0,0]
m2({}) //[undefined,undefined]

m1({z:3}) //[0,0]
m2({z:3}) //[undefined,undefined]

ex1：调用函数需要你传递一个对象，如果你没有传对象就用默认值对象{ }，默认值对象里面都是undefined，所以属性使用初始值

ex2：参数需要是一个对象，如果没传对象，就用默认值对象{x:0,y:0}。如果传了对象，就使用你传递的对象

2）箭头函数

var f = v => v+1
//等价于
var f = function(v){return v+1}

//箭头函数里面的this
//ES6
function foo(){
    setTimeout(()=>{
        consoloe.log('id:',this.id);    
    },100)
}
//如果没有用箭头函数，这个this相当于是window。执行setTimeout()相当于进入全局的环境下。
//箭头函数中this相当于是创建函数时的this

//等同于如下ES5
function foo(){
    var _this = this;
    setTimeout(function(){
        console.log('id:',_this.id)    
    },100)
}

6、对象

7、类和继承

1）构造函数

//ES6
class Person{
    constructor(name,age){
        this.name = name;
        this.age = age;    
    }
    sayHello(){
        consoloe.log(`hello,${this.name},i am ${this.age} years old`);  
    }
}

//等价于
function Person(name,age){
    this.name = name;
    this.age = age;
}
Persion.prototype.sayHello = function(){
    console.log(`hello,${this.name},i am ${this.age} years old`)
}
var p = new Person('hunger',2)

2）静态方法

class EventCenter{
    static fire(){
        return 'fire';    
    }
    static on(){
        return 'on';    
    }
}

//等价于
function EventCenter(){
}
EventCenter.fire = function(){}
EventCenter.on = function(){}

继承 extends

8、模块化

//写法1
//profile.js
export var firstName = 'Michael';
export var lastName = 'Jackson';
export var year = 1958;
//useage.js
import{firstName,lastName,year} from './profile';
console.log(firstName)

//写法2
//profile.js
var firstName = 'Michael';
var lastName = 'Jackson';
var year = 1958;
export {firstName,lastName,year};
//useage.js
import{firstName,lastName,year} from './profile';
console.log(firstName)

//写法3
//helper.js
export function getName(){}
export function getYear(){}
//main.js
import{gerName,getYear} from './helper';
getName()

//写法4
//helper.js
function getName(){}
function getYear(){}
export {getName,getYear}
//main.js
import{gerName,getYear} from './helper';
getName()

//写法5
//export-default.js
export default function(){
    console.log('foo');
}
//import-default.js
import getName from 'export-default'
getName()