es6常用语法

什么是es6?

• es ECMA Script ,javascript的语言标准，第6个大版本（2015年发布，也成为es2015）
• 提升JS编写大型的复杂应用程序的能力
• babel: es6 --> es5的转换器

let,const

• let 定义变量，const定义常量
• 不能重复定义
• 块级作用域内生效（var是在函数作用域）
• 不存在变量提升

箭头函数

• 参数 => 表达式 / 语句

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

• 没有自己的this 指针，继承外层作用域

var obj = {
    commonFn: function () {
        console.log(this);
    },
    arrowFn: () => {
        console.log(this);
    }
}
console.log(obj.commonFn()); // this 指向是他的调用者 obj
console.log(obj.arrowFn()); //  arrowFn 和 obj 共享一个作用域 ,this 指向了obj所在的作用域window

• 不能用作构造函数 （ 不能用new）

let Animal = function (){

}
let anmial = new Animal()

let Animal = function (){

}
let anmial = new Animal()

• 没有prototype属性

模板字符串

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

// 
let name = "hello";
let getName = ()=>{
    return 'dsfderek';
}
let nums = [1,2,3,4,5];
let str = `

    
${name} - ${getName()}


    ${
        nums.map(n=>`
数字 ${n}
`).join('')
    }

`;
document.querySelector('body').innerHTML = str;

Promise

• promise 对象
• resolve,reject,then

new Promise((resolve,reject)=>{
    // 异步函数
    $.ajax({
        url:'',
        type:'post',
        succes(res){
            resolve(res);
        },
        error(err){
            reject(err);
        }
    })
}).then((res)=>{
    console.log(res);
},(err)=>{
    console.log(err);
});

// 链式操作
let promiseFn1 = new Promise((resolve,reject)=>{
    // 异步函数
    $.ajax({
        url:'',
        type:'post',
        succes(res){
            resolve(res);
        },
        error(err){
            reject(err);
        }
    })
})
let promiseFn2 = new Promise(()=>{
    // 异步函数
    $.ajax({
        url:'',
        type:'post',
        succes(res){
            resolve(res);
        },
        error(err){
            reject(err);
        }
    })
})

promiseFn1.then(()=>{ // promiseFn1的then
    return promiseFn2;
}).then(()=>{  // promiseFn2的then
    // promiseFn2的返回
})

面向对象- 类

• class
• 语法糖，对应 function
• 构造函数，constructor 初始化该类的对象

class Animal{
    constructor(name){
        this.name = name

    }
    getName(){
        return this.name;
    }
}
// 实例
let animal = new Animal("dsfderek");
console.log(animal.getName());

面向对象-类的继承

• extends 类的继承
• super 调用父类的构造函数 ，子类是没有this的，想在子类里调用父类的方法，调用super方法，把父类的this对象继承过来，在子类通过this操作父类的属性和方法

// 类的继承
class Animal{
    constructor(){
        this.name = "dsfderek"

    }
    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());
console.log(cat.getName());

面向对象-对象

• 对象里属性的简写
• 对象里方法的简写
• 属性名可以为表达式

let name = "dsfderek",
    age = 18;

let obj = {
    // 变量名可以直接用作对象的属性名
    name,
    age,
    // 对象里的方法可以简写
    getName(){
        return this.name;
    },
    // 表达式作为属性名或方法名
    ['get' + 'Age'](){
        return this.age;
    }
}

Object 扩展

Object.keys(obj) // 一个对象里所有的属性名，结果是一个数组
Object.assign({a:1},{b:2}); //合并对象，后面的覆盖前面的

ES6 模块化

• 解决一个复杂问题时自顶向下逐层把系统划分成若干模块的过程
• CommonJs,AMD,CMD
• export,import

let str = 'string';
let obj = {
    name : 'dsfderek'
}
let fn = ()=>{
    console.log('module test');
}

export {
    str,
    obj,
    fn
}

export default {a:1};

import {str as string,obj,fn} from './module.js'
import foo from './module.js'
console.log('name:',obj.name);
// console.log('str:',str);
console.log('string:',string);
console.log('fn:',fn);


console.log(foo);

·