ES6常用语法-蒲公英云

后天就要交大论文绪论的，现在居然还在这写博客，YNB！

聊正事！什么是ES，ES就是ECMA Script，Javascript的语言标准,我们今天具体说下

一. let，const

我们主要关注下面几点：

let定义变量，const定义常量
不能重复定义
块级作用域
不存在变量提升

//变量和常量
let r=2;
r=4;
console.log(r); //4

const pi = 3.1415926;
pi = 10; //报错

//不能重复定义（为了防止重复定义到时混乱）
var foo = 1;
var foo = 2;
console.log(foo); //2
let bar = 1;
let bar = 2;
console.log(bar); //报错
//块级作用域（块中的let在外部访问不到，var可以）
if(true){
    var test = 1;
}
console.log(test); //1
if(true){
    let test1 = 2;
}
console.log(test1); //报错
//块级作用域2
let arr = [1, 2, 3, 4];
for(var i = 0, iLength = arr.length; i<iLength; i++){
    //do nothing
}
console.log(i); //4
let arr = [1, 2, 3, 4];
for(let i = 0, iLength = arr.length; i<iLength; i++){
    //do nothing
}
console.log(i); //报错
//不存在变量提升（let）
console.log(foo);
var foo = 1; // undefined
//上面代码在编译时是一下顺序
//var foo;
//console.log(foo);
//foo = 1;
console.log(bar);
let bar = 1; //报错

二. 箭头函数

我们主要关注下面几点

参数 => 表达式 / 语句;
继承外层作用域
不能用作构造函数
没有prototype属性

//箭头函数
let value = 2;
let double = x => 2 * x;
let treble = x => {
```
return 3 * x;
```
}
console.log(double(value)); //4
console.log(treble(value)); //6

//没有独立作用域
var obj = {
    commonFn : funcion(){
        console.log(this);     //this指向的是它的调用者obj
    },
    arrowFn : () => {
        console.log(this);    //因为箭头函数没有作用域，所以它与obj共享一个作用域，因为obj是在window作用域下，所以此函数也在windows下
    }
}
obj.commonFn();  //{commonFn: f, arrowFn: f}
obj.arrowFn();   //Window {postMessage: f, blur: f, focus: f, close: f, frames: window,...}
//不能用作构造函数
let Animal = function(){
}
let animal = new Animal();
animal  //Animal{}
let Animal = () => {
}
let animal = new Animal(); //报错
//没有prototype
let commonFn = function(){};
let arrowFn = () => {};
console.log(commonFn.prototype);  //{constructor: f}
console.log(arrowFn.prototype);  //undefined

三. 模板字符串

反引号标识 “
支持多行字符串
支持变量和表达式

//基本用法
let str = ·
```
<h1 class="title">123</h1>
```
·;
document.querySelector(‘body’).innerHTML = str;

//嵌套变量的用法
let name = 'Rosen';
let str = `
<div>
    <h1 class="title">${name}</h1>
<div>
`
//嵌套函数的用法
let getName = () => {
    return 'Rosen Test';
};
let str = `
<div>
    <h1 class="title">${getName()}</h1>
<div>
`
//循环嵌套
let names = ['Rosen', 'Geely', 'Jimin'];
let str = `
    <ul>
        ${
             names.map(name => `<li>Hi, I am ${name}</li>`).join('') //其中name是每次循环遍历出来的元素；join('')使用空格分隔遍历的数组
        }
    </ul>
`
document.querySelector('body').innerHTML = str;

四. Promise

Promise对象

关键词：resolve,reject,then

new Promise((resolve, reject)=>{

$.ajax({
    url : 'http://baidu.com',
    type: 'post',
    success(res){
        resolve(res);
    },
    error(err){
        reject(err);
    }
})

}).then((res) => {

console.log('success:', res);

},(err) => {

console.log('error:', err);

});

五. 面向对象-类

关键字：class
语法糖，对应function
构造函数
extends：类的继承
super：调用父类的构造函数

//类的构造函数
class Animal{
```
constructor(){
    this.name = 'animal';
}
getName(){
    return this.name
}
```
}

let animal = new Animal();
console.log(animal.getName()); //animal

class Animal{
```
constructor(name){
    this.name = name;
}
getName(){
    return this.name
}
```
}

let animal = new Animal(‘animal test’);
console.log(animal.getName()); //animal test

//类的继承
class Animal{
    constructor(){
        this.name = 'animal';
    }
    getName(){
        return this.name
    }
}
class Cat extends Animal{
    constructor(){
        this.name = 'cat';
    }
}
new Cat()  // 报错（因为继承的子类里面是没有this的，所以要想this指针，则需要加一句super()）
class Animal{
    constructor(){
        this.name = 'animal';
    }
    getName(){
        return this.name
    }
}
class Cat extends Animal{
    constructor(){
        super();
        this.name = 'cat';
    }
}
let animal = new Animal();
let cat = new Cat();
console.log(animal.getName())  //animal
console.log(cat.getName())  //cat
//对象的用法
//老的用法
var name = 'Rosen',
    age  = 18;
var obj = {
        name: name,
        age: age,
        getName: function(){
            return this.name;
        }
        getAge: function(){
            return this.age;
        }
}
//新的用法
let name = 'Rosen',
    age  = 18;
let obj = {
        // 变量名可以直接用作对象的属性名称
        name,
        age,
        //对象里的方法可以简写
        getName(){
            return this.name;
        },
        //表达式作为属性名或方法名
        ['get' + 'Age'](){
            return this.age;
        }
}