ES6核心
@ 姜波 | 星期四,七月 11 日,2019 年 | 5 分钟阅读 | 更新于 星期四,七月 11 日,2019 年

模板字符串

  • 模板字符串的基本用法
    var s1 = `abc`
  • 模板字符串的优势:
    var obj={ name:"",age:5 };
    var s1 ="我叫:"+obj.name+",今年:"+obj.age+"岁。"

解构赋值

  • 对象的解构赋值
    var obj={name:"张三",age:18}

    var {name,age}=obj; 
    //生成2个变量,
    //  name值来自于obj.name、
    //  age值来自于obj.age

    var {name:title}=obj;
    //生成一个变量:title,值来自于obj.name
  • 函数参数的解构赋值
    function f1(obj){
        console.log(obj.age);
        console.log(obj.height)
    }
    //等价于
    function f1({ age,height }){
        console.log(age);
        console.log(height)
    }

    f1({age:5,height:180})
  • 补充:属性的简写
    var a = 3 ; 
    var c = 10;
    var b = { a,c } ;   
    //b对象有一个a属性,a属性的值,来自于a变量  ,
    //还有一个c属性,c属性的值来自于c变量
    console.log(b)

函数的扩展

rest参数

  • 使用背景:es6的
  • 优点:arguments是伪数组,而rest参数是真数组
    function fn(...args){
        console.log(args);  //数组:[1,2,3,4,5]
    }
    fn(1,2,3,4,5)

箭头函数

  • 场景:用于替换匿名函数
  • 基本用法:
    //匿名函数
    div.onclick=function(){
        console.log("你好")
    }
    //箭头函数
    div.onclick=()=>{
        console.log("你好")
    }
  • 有一个参数的箭头函数
    var fn=(a)=>{
        console.log("abc");
    }
    //等价于:
    var fn=a=>{
        console.log("abc");
    }
  • 有2个及更多参数的箭头函数
    var f=(a,b,c)=>{
        console.log("abc")
    }
  • 箭头函数和普通匿名函数有哪些不同?
    • 函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象。
    • 不可以当作构造函数,也就是说,不可以使用new命令,否则会抛出一个错误。
    • 不可以使用arguments对象,该对象在函数体内不存在。如果要用,可以用 rest 参数代替。
    • (不常用)不可以使用yield命令,因此箭头函数不能用作 Generator 函数。
      • generator函数现在经常用async替代

对象的扩展

  • Object.assign:实现拷贝继承
  • 对象扩展运算符
    var obj1={ age:5,gender:"男" }
    var obj2={ ...obj1 }
    var obj3={ ...obj1 , age:10 }

Promise

为什么要有promise:解决(回调地狱)的问题

回调地狱:

    //跟以前的if条件地狱很像
    // if(){
    //     if(){
    //         if(){
    //         }
    //     }
    // }

    $.get("/getUser",function(res){
        $.get("/getUserDetail",function(){
            $.get("/getCart",function(){
                $.get("/getBooks",function(){
                    //...
                })
            })
        })
    })

    //node开发:读取文件;开个服务器、接收一个请求、请求路径、访问数据库

Promise函数基本用法

    var promise=new Promise((resolve,reject)=>{
        //b 把需要执行的异步操作放在这里
        $.get("/getUser",res=>{
            //获取数据的异步操作已经执行完毕了,等待下一步的执行,通过执行resolve函数,告诉外界你可以执行下一步操作了
            //c、
            resolve(res)
            //而执行的下一步操作,其实就是写在then的回调函数中的
        })
    })
    //a、
    promise.then(res=>{
        //d、执行后续的操作
        console.log(res);
    })

Promise函数实现多层回调

    new Promise((resolve,reject)=>{
        $.get("/getUser",res=>{
            resolve(res)
        })
    }).then(res=>{
        //用户基本信息
        return new Promise(resolve=>{
            $.get("/getUserDetail",res=>{
                resolve(res)
            })
        })
    }).then(res=>{
        //用户详情
        return new Promise(resolve=>{
            $.get("/getCart",res=>{
                resolve(res)
            })
        })
    }).then(res=>{
        //购物车信息
    })

Promise函数错误处理

  • 第一种方式
    new Promise((resolve,reject)=>{
        $.ajax({
            url:"/getUser",
            type:"GET",
            success:res=>{
                resolve(res);
            },
            error:res=>{
                reject(res)
            }
        })
    }).then(resSuccess=>{
        //成功的返回值
    },resError=>{
        //失败的返回值
    })
  • 第二种方式
    new Promise((resolve,reject)=>{
        $.ajax({
            url:"/getUser",
            type:"GET",
            success:res=>{
                resolve(res);
            },
            error:res=>{
                reject(res)
            }
        })
    }).then(resSuccess=>{
        //成功的返回值
    }).catch(resError=>{
        //失败的返回值
    })

多个promise处理

let p1 = new Promise((resolve, reject) => {
    setTimeout(function() {
        resolve(1);
    }, Math.random() * 1000);
});
let p2 = new Promise((resolve, reject) => {
    setTimeout(function() {
        resolve(2);
    }, Math.random() * 1000);
});

// Array.every
Promise.all( [p1, p2] ).then( data => {
    console.log(data);
}, err => {
    console.log(err);
} );

// Array.some
Promise.race( [p1, p2] ).then( data => {
    console.log(data);
}, err => {
    console.log(err);
} );

async

  • async其实是一个promise的语法糖
    async function get(){
        console.log('开始执行');
        var res = await timer()
        console.log('执行结束:',res);
    }
    function timer(){
        return new Promise((resolve,reject)=>{
            setTimeout(()=>{
                resolve("你好");
            },1000)
        })
    }
    get();
  • await可以执行异步操作,但是await必须在async函数内执行

  • await操作可以有返回值,这个返回值表示promise操作成功的返回值

  • 如果await里面执行的异步操作发生了reject,或者发生了错误,那么只能使用try…catch语法来进行错误处理

class

定义一个类

    class Person {
        constructor(name) {
            this.name=name;
        }
    }
    //相当于:
    function Person(name){
        this.name=name;
    }

添加实例方法

    class Person {
        constructor(name,age) {
            this.name=name;
            this.age=age;
        }
        //定义方法
        say() {
            console.log("大家好,我叫:"+this.name+",今年:"+this.age+"岁");
        }
        travel(){
            console.log("坐着飞机去巴厘岛");
        }
    }

添加静态方法

  • 静态成员:静态属性、静态方法
  • 静态属性:通过类本身来访问:Person.maxAge
  • 静态方法:通过类本身来访问的一个方法:Person.born();
    class Animal {
        constructor(){

        }
        //这就是一个静态方法了
        static born(){
            console.log("小呆萌出生了")
        }
    }
    //访问静态方法
    Animal.born();

类的继承

    //父类
    class Person {
        constructor(name){
            this.name=name;
        }
    }
    //Student类继承自Person类
    class Student extends Person {
        //构造方法
        constructor(name,grade){
            //规定:必须调用父类构造方法,如果不调用就会报错
            super(name);    
            //调用父类构造方法,从而给子类的实例添加了name属性

            this.grade=grade;
        }
    }
[1,3,5].map(function(value,index){

})

[1,3,5].map((value,index)=>{

})

//以前变量和字符串拼接,现在用模板字符串

module

基本用法

  • 导出模块:
    //common.js
    export default { name:"abc" }
  • 导入模块:
    //b.js
    import common from "common.js"

    console.log( common.name ) //"abc"

模块有多个导出

    //person.js
    export const jim = { country :"France" }
    export const tony = { color:"gray" }
    //默认的导出
    export default { name:"abc" }
    //index.js
    import person , { jim , tony } from "person.js"

    //person:{ name:"abc" }
    //jim:{ country :"France" }
    //tony:{ color:"gray" }

模块导入导出取别名

    //person.js
    export const tony = { color:"gray" }
    export { tony as Tony }

    //index.js
    import { Tony } from "person.js"
    import { Tony as man} from "person.js"

    console.log(man)    //{ color:"gray" }

Symbol

  • 属性私有化 - 数据保护
var Person = (function() {

    let _gender = Symbol('gender');

    function P(name, gender) {
        this.name = name;
        this[_gender] = gender;
    }

    P.prototype.say = function() {
        return this[_gender];
    }

    return P;

})();

var p1 = new Person('Wilber', '男');
  • Map实现类私有化
const Person = (function(){

// 把对象与某个性别关联起来
let _gender = new WeakMap();

    function P(name, gender) {
        this.name = name;

        _gender.set(this, gender);
    }

    P.prototype.getGender = function() {
        return _gender.get(this);
    }

    P.prototype.setGender = function(newGender) {
        _gender.set(this, newGender);
    }

    P.getGenders = function() {
        return _gender;
    }

    return P;

})();


let p1 = new Person('莫涛', '男');
let p2 = new Person('童斌', '男');

p1.setGender('女');
console.log( p1.getGender() );
console.log( p2.getGender() );

setInterval(function() {
    console.log( Person.getGenders() );
}, 1000);

迭代

迭代对象

  • 实现了迭代器的对象
  • 迭代器:方法 [Symbol.iterator]
var obj = {
    left: 100,
    top: 200
};

// 迭代协议
obj[Symbol.iterator] = function() {
    let keys = Object.keys(obj);    //['left','top']
    let len = keys.length;
    let n = 0;

    return {
        next: function() {
            if (n < len) {
                return {
                    value: {k: keys[n], v: obj[keys[n++]]},
                    done: false
                }
            } else {
                return {
                    done: true
                }
            }
        }
    }
}

// obj[Symbol.iterator]().next() => {done: true}
for (var {k, v} of obj) { //of 是一个可迭代的对象
    console.log(k, v);
}
js
保存为图片

公众号

Image text

QQ

Image text

微信

Image text

微信打赏

Image text

社交链接