ES6

作者: 浮生若梦_5094 | 来源:发表于2019-05-09 09:30 被阅读0次
    let,const
    • let定义变量,const定义常量
    • 不能重复定义
    • 块级作用域
    • 不存在变量提升
    箭头函数
    • 参数 => 表达式/语句
    • 没有this指针,继承外层作用域
    • 不能用作构造函数
    • 没有prototype属性
    模板字符串
    • 反引号表示``
    • 支持多行字符串
    • 支持变量和表达式

    Promise

    • resolve(正确) reject(失败 ) then
    • Promise 结构
                     new Promise((resolve,reject) => {
        $.ajax({
            url:'xxx',
            type:post,
            success(res){
                resolve(res);
            },
            error(err){
                reject(err);
            }
        });
    }).then((res) => { //  resolve
        console.log('success',res);
    },(err) => { //  reject
        console.log('error',err);
    });
    
    • Promise (链式)
    var  promiseFn1 = new Promise((resolve,reject) => {
        $.ajax({
            url:'xxx',
            type:post,
            success(res){
                resolve(res);
            },
            error(err){
                reject(err);
            }
        });
    });
    var  promiseFn2 = new Promise((resolve,reject) => {
        $.ajax({
            url:'xxx',
            type:post,
            success(res){
                resolve(res);
            },
            error(err){
                reject(err);
            }
        });
    });
    promiseFn1.then(() => {
     console.log('promiseFn1 success')
     return promiseFn2;
    }).then(() => {
     console.log('promiseFn2 success')
    });
    
    面向对象-类
    • 关键词:class
    • 语法糖,对应function
    • 构造函数,constructor (初始化类的对象)
    // class constructor 类和构造函数的用法
    class Animal{
        constructor(){
            this.name = 'Animal';
        }
        getName(){
            return this.name
        }
    }
    let animal = new Animal();
    console.log(animal.getName());
    //  动态设置类里面的属性和方法
    class Animal1{
        constructor(name){
            this.name = name;
        }
        getName(){
            return this.name
        }
    }
    let animal1 = new Animal1('animal test');
    console.log(animal1.getName());
    
    面向对象-类的继承
    • extends:类的继承
    • soper: 调用父类的构造函数
    // 类的继承
    class Animal{
        constructor(){
            this.name = 'Animal';
        }
        getName(){
            return this.name
        }
    }
    let animal = new Animal();
    console.log(animal.getName());
    
    
    class Cat extends Animal{  // 如果用了extends关键字,子类里是没有this指针,只能调用super
        constructor(){
            super();  //  继承父类的方法,其实就是调用父类的constructor构造函数,共享一个指针
            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;
        }
    } 
    //ES6
    let name = 'Rosen',
        age = 18;
    let obj = {
        name,//  变量名 可以直接用作对象的属性名称
        age,
        getName() {//  对象里面的方法也可以简写
            return this.name;
        },
        //  表达式作为属性名或者方法名
        ['get' + 'Age'](){
            return this.age;
        }
    } 
    
    /* Object对象的扩展  */
    // keys() 会返回对象的所有属性,返回为数组,
    Object.keys(obj);
    //  合并对象,对重复的属性进行覆盖,后覆盖前
    Object.assign();
    

    ES6模块化

    • 解决一个复杂问题时自顶向下逐层把系统划分成若干模块的过程
    • CommonJs,AMD,CMD
    • 关键词:export(导出), import(引入)
    //  type="text/javascript"  必须为module  才可模块化引入
    <script type="module" src="xxx"></script>
    

    相关文章

      网友评论

          本文标题:ES6

          本文链接:https://www.haomeiwen.com/subject/kyxngqtx.html