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 = ·
<div>
    <h1 class="title">123</h1>
<div>
·;
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;
        }
}