学习ES6

es6

1. 闭包是js的变量，它里面是没有块作用域的情况下，它的一个临时的解决方案。 一旦有了块级作用域，就不需要闭包了；

2. js中的var -----函数块（函数内）----重复声明、不能控制修改

   es6中的let-------块级（代码块）-----不重复声明、能控制修改

3. 解构赋值：适合从一个大的结构去取数据

   例子：用在json中：json={a:12,b=5};

   let {a,b}=json;

   数组： arr=[12,5,8];

   let [a,b,c]=arr

4. 箭头函数:function不要，中间加箭头。简写（作用一）

   • 有且仅有一个参数，()也可以不写。

   • 有且仅有一个语句并且是return,{}也可以不写。

   • 可以修正this.固定this(作用二)

5. ...(三个点)--------作用：参数收集与展开、数组展开、json展开

   1. 原生对象扩展：

      map------映射，--对应。[34,67]=>[不及格，及格]

      reduce----m=>1------购物车的总金额

      filter

      forEach

   7. json对象：

      JSON.stringify{{a:5,b:68}} => "{"a":5,"b":68}" json变为字符串

      JSON.parse(与上面相反)

   8. babel的作用：使得ES6转为ES5，兼容IE6以下的浏览器。

   9. babel引入方法：1.在线：引入babelser文件，改text/babel------会有延迟，受限

      2.无限编译

      步骤：1. 创建一个新项目

      2. 进入项目地址打开终端

      3. npm init -y

      4. cnpm i @babel/core @babel/cli @babel/preset-env -D

         @babel/core(bebal的核心库) @babel/cli(命令库) @babel/preset-env (环境预设)

      5. 在package.json里“scripts”下添加自己的命令 其中 -d 就是输出的目标地址

         创建一个配置文件.bebalrc是为了声明我用的是哪个预设。然后直接npm run build

   7. src和dest目录都可以自己创建。

    

   bebal使用成功！

   在更老一些的浏览器不支持es6的话，可以添加一条语句：npm i @bebal/polyfill(一种行为：填充)；

   它会检测你浏览器的版本，如果特别低，它会把自己的库给浏览器，使得编译成功。

   写es6代码，引入es6编译后的js文件。

   10. 异步操作-ajax

       • ajax("地址"，回调函数（）{});-------异步操作

       • 异步操作---用户体验好，同时进行多个操作。（用户输入完之后可以立刻检查用户名是否已占用，直接反馈。用户可以在系统检查的时候填写下方的信息），但是由于写回调函数的原因，使得代码太混乱。

       • 为了有异步的功能，同步的简单，防止回调地狱，融合异同步-------Promise、async/await

       • Promise---只是对异步做一个封装（它不能算是异步操作的处理）

       • Promise.all([

         p1,

         p2,

         p3,

         ...

         ]).then

         (同时读取多个文件，需要三个文件同时成功才行，是与的关系)

       • Promise.race------竞速（是或的关系）

       使用Promise.all来避免很深的嵌套。

       11. 面向对象

       • es5构造函数和类分不清

       • es5的继承

       • es6的继承

       es6中多了：class ----类声明、constructor----构造函数、entends----继承、super----超类

       有子类，有专门声明关系的entends，也有super，通过这个可以把参数传进去，自动的把数继承过来；

       有关方法继承，原来的需要prototype，然后new一个父类的实例仍在身上，并且要顺带constructor的属性给修正过来。

   11. 模块系统

   • es6的模块浏览器不支持，需要经过编译---webpack

     步骤：1，导出export（一个变量，一堆变量）

     export let a=3;

     let a,b,c=....;

     export(a,b,c,...);

     export function show(){};

     export class Person{}

     export default 99;

     2,导入import（函数，class）

     import * as mod1 form "xxx";-----------引入所有成员

     import mod1 form "xxx";---------------------引入默认成员

     import (a,b) from "xxx";

     只引入------import "xxx";

     异步引入------let p=import("./mod1");-----简化代码，推荐

     3,webpack编译---在终端

   12. 幂操作(ES7)----**代替pow

   13. (ES7) arr.includes( )---检测是否存在

   14. (ES8) async/await

   15. (ES9) rest/spread(也是用来消除异步操作的，目前未成熟)、异步迭代、Promise.all/race/finally

   16.