ES6语法

js的语言标准

1、let定义变量,const定义常量

不能重复定义

1
2
3
let a=1;
let a=2;
//报错

块级作用域

1
2
3
4
if(true){
let test=1
}
console.log(test)//外部访问不到,而var可以

let arr=[1,2,3,4]
for(let i=0;ilength=arr.length;i<ilength;i++){}

此处的 i 外部也访问不到

不存在变量提升

1
2
3
4
5
6
7
console.log(foo)
var foo=1;
//不会报错

console.log(foo)
let foo=1;
//foo is not defined!

2、箭头函数

( ) => { }//参数=》表达式/语句

1
2
3
4
5
6
7
8
9
let double = x => x * 2
//等同于
let double = x => {
return x * 2
}
//等同于
let double=function(x) {
return x * 2
}

继承外层作用域

1
2
3
4
5
6
7
8
9
10
11
12
13
14
//一般情况下
var obj = {
commonFn:function(){
console.log(this)
//这里的this指向的是其调用对象的本身,即obj
},
arrowFn: ()=>{
console.log(this)
//这里的this指向obj所在的作用域,即window
}

}
obj.commonFn()
obj.arrowFn()

不能用作构造函数

1
2
3
4
5
6
7
//没有用箭头函数可以做构造函数
let Animal = function(){}
let animal= new Animal();

//用了箭头函数,报错
let Animal = () => {}
let animal= new Animal();

没有prototype属性

1
2
3
4
5
6
let commonFn =function(){}
let arrowFn= ()=>{}

console.log(commonFn.prototype)
console.log(arrowFn.prototype)
//arrow的结果为undefined!

3、模板字符串

反引号标识 ` `

支持多行字符串

1
let  str = `
<div>
    <h1 class="title">123</h1>
</div>
`
document.quertSelector('body').innerTHML= str

支持变量和表达式

  • 嵌套变量的用法

    1
    2
    let name='baiqi'
    let str = `

    <h1 class="title"> ${name} </h1>
    


    `
    document.quertSelector(‘body’).innerTHML= str

  • 嵌套函数的用法

    1
    2
    3
    4
    let getName=()=>{
    return 'baiqi yuan'
    }
    let str = `

    <h1 class="title"> ${getName()} </h1>
    


    `
    document.quertSelector(‘body’).innerTHML= str

4、Promise

Promise对象

1
2
3
4
5
6
7
8
9
10
11
12
Promise结构
new Promise((resolve,reject)=>{
//异步操作
$.ajax({
//成功,resolve(res)
//失败, reject(err)
})
}).then((res)=>{

},(err)=>{

})

链式Promise

1
2
3
4
5
6
7
8
9
10
11
12
13
var promise1=new Promise((resolve,reject)=>{
$.ajax({...})
})
var promise2=new Promise((resolve,reject)=>{
$.ajax({...})
})

promise1.then(()=>{
console.log('promise1 success')
return promise2
}).then(()=>{
console.log('promise2 success')
})

关键字 resolve , reject , then

面向对象-类

  • 关键词:class
  • 构造函数,constructor

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    class Animal{
    constructor(name){
    this.name = name
    }
    getName(){
    return this.name
    }
    }
    let animal=new Animal("yuan")
    animal.getName()
  • 语法糖,对应function

面向对象-类的继承

  • entends:类的继承

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    class Animal{
    constructor(){
    this.name = 'yuan'
    }
    getName(){
    return this.name
    }
    }
    class Cat extends Animal{
    constructor(){
    super()//指的是父类的构造函数
    this.name = 'cat'
    }
    }

    let animal=new Animal()
    let cat=new Cat()
    cat.getName()//结果为cat
  • super:调用父类的构造函数

面向对象-对象

  • 对象里的属性的简写

  • 对象里的方法的简写

  • 属性名可以为表达式

  • 其他扩展

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
var obj={
name:name,
age:age,
getNmae:function() {return this.name},
getAge:function() {return this.name}
}

let obj={
//对象里的属性的简写
name,
age,
//对象里的方法的简写
getNmae() {return this.name},
//属性名可以为表达式
['get'+'Age']() {return this.name}
}
//其他扩展
Object.keys[obj]//返回一个元素为属性名的数组
Object.assign({a:1},{b:2})//返回{a:1,b:2}
Object.assign({a:1},{a:2,b:2})//返回{a:2,b:2}

ES6模块化

  • 解决一个复杂问题时自上而下逐层吧系统划分成若干个模块的过程

  • CommonJs,AMD,CMD

  • 关键词:export, import