ES6语法使用、箭头函数、模板字符串、Promise、类的继承、ES6模块化（学习笔记）

最新推荐文章于 2022-11-15 16:26:12 发布

小兑小兑

最新推荐文章于 2022-11-15 16:26:12 发布

阅读量212

点赞数

本文链接：https://blog.csdn.net/qq_39206806/article/details/94605580

版权

欢迎大家指出错误，共同进步。(●'◡'●)。

ECMA Script的第6个版本，由于再2015年发布，又称为ES2015。它是JavaScript的语言标准。

这个版本主要是提升js编写大型的复杂的应用的能力。比如这次升级加入了模块化的概念，同时再一些语法上进行了细化和优化，丰富了一些对象的方法。

现在有些浏览器还不支持ES6。所以我们需要借助工具Bable，将ES6转化为ES5 。

语法上 使用

let代替原来的var，定义变量。const定义常量。
不能重复定义
块级作用域
不存在变量提升

箭头函数：

参数=>表达式/语句
它没有自己的this指针，需要继承外层作用域。
不能用作构造函数，也就是不能用new来生成一个对象
没有prototype属性

模板字符串

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

基本用法

let str=`
<div>
    <h1 class="title">123</h1>
</div>
`;
document.querySelector('body').innerHTML=str;

嵌套变量的用法

let name='zhaoyue';
let str=`
    <div>
        <h1 class="title">${name}</h1>
    </div>
`;
document.querySelector('body').innerHTML=str;

嵌套函数的用法

let getName=()=>{
    return 'zy';
};
let str=`
    <div>
        <h1 class="title">${getName()}</h1>
    </div>
`;
document.querySelector('body').innerHTML=str;

循环嵌套

let names=['zy','zhaoyue','zyue','zhaoy'];
let str=`
    <ul>
       ${
            names.map(name=>`<li>hello,${name}</li>`).join(``)
        } 
    </ul>
`;
document.querySelector('body').innerHTML=str;

Promise

它是为了解决异步回调函数层层嵌套的问题。之前在写一些串行的异步调用的时候，一般是在前一个异步方法的回调里调用另一个函数。如果是多个异步互相调用的话，就会一层嵌一层，这样层级很深，不利于阅读。promise就是为了解决这个问题。它支持了异步的链式操作，使我们写出的代码清晰易读。

它有几个常用的关键词。resolve ,reject, then .

分别是创建promise的参数resolve,reject。还有promise里面预期的结果用then表示。

new Promise((resolve,reject)=>{
    $.ajax({
        url : 'http://xxx.com/user/get_user_info.do',
        type: post,
        success(res){
            resolve(res);
        },
        error(err){
            reject(err);
        }
    });
}).then((res)=>{
    console.log('success',res);
},(err)=>{
    console.log('error',err);
});

相当于promise预期一个函数的结果。resolve，reject为这两个函数的参数，分别表示函数的成功和失败，相对应then（）中也有两个函数体，代表成功和失败。以上以$.ajax为例展示promise结构。

链式promise：

//这是原来嵌套两层的结果看起来就有些乱了
$.ajax({
    url: 'http://xxx.com/user/get_user_info.do',
    type: post,
    success(res) {

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


//使用promise
var promiseFn1 = new Promise((resolve, reject) => {
    $.ajax({
        url: 'http://xxx.com/user/get_user_info.do',
        type: post,
        success(res) {
            resolve(res);
        },
        error(err) {
            reject(err);
        }
    });
});
var promiseFn2 = new Promise((resolve, reject) => {
    $.ajax({
        url: 'http://xxx.com/cart/get_cart_info.do',
        type: post,
        success(res) {
            resolve(res);
        },
        error(err) {
            reject(err);
        }
    });
});

promiseFn1.then(()=>{
    console.log('promiseFn1 success');
    return promiseFn2;
}).then(()=>{
    console.log('promiseFn2 success');
});

支持面向对象，使用class关键字表示一个类。在ES6中官方单独封装了一个“语法糖”，而底层实现仍然是function。在类里面还有个构造函数constructor,用它来初始化该类的对象。

类的一个重要的特性，类的继承。通过关键字extend表达。

在继承中另一个常用的关键字是super。子类是没有this对象的。如果想在子类中调用父类的方法，那么就需要在子类的方法里调用super方法。这样就可以把父类的子对象继承过来，也就是可以在子类里使用this来操作父类的属性和方法。

对象：

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

其他扩展

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

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

 //类的继承
 class Animal {
     constructor() {
         this.name = 'animal';
     }
     getName() {
         return this.name;
     }
 }
 class Cat extends Animal {
     constructor() {
         // 需要在子类的构造方法里调用super()，super()指父类的构造函数，其实就是调用了Animal的 constructor，这样才能共享一个this指针
         super();
         this.name = 'cat';
     }
 }

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


 //对象的用法
 var name = 'zhaoyue';
 var age = 18;
 var obj = {
     name: name,
     age: age,
     getName: function() {
         return this.name;
     },
     getAge: function() {
         return this.age;
     }
 }

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

 //object对象的扩展
 Object.keys(obj);  //表示一个对象中的而所有属性名
 Object.assign();   //类似jQuery中的extend，把几个对象做一个整合。假设Object.assign({a:1},{c:2},{c:2})，则{a: 1, c: 2}，不同的整合到一起，重复的会进行覆盖。

ES6模块化

模块化是为了解决复杂问题自顶向下逐层把系统划分成若干模块的过程。

关键词：

export 模块输出

import 模块引入

//首先新建一个文件夹，创建index.html;index.js;module.js。
//index.html

//type类型为module
<script type='module' src='./index.js'></script>


//module.js
let str ='string';
let obj={
    name:'zhaoyue',

};
let fn=()=>{
    console.log('module test')
}

export{
    str,
    obj,
    fn
}
export default{a:1}


//index.js
import{str as string,obj,fn} from './module.js'  
import foo from './module.js'

console.log('name',obj.name);
console.log('string ',str);          //输出string  string
console.log('fn ',fn);

console.log(foo)