ES6基础以及babel的环境配置

本文笔记基于B站视频资源：【智能社】ES6精讲—主讲老师：石川（Blue）—高清版本 https://www.bilibili.com/video/av41783773/
非商业用途自由转载，保持署名，注明出处！

---

1.ES6

• ECMAScript约等于ES6（ES2015）
• ECMA是一个组织，也是一个标准
• 1996.11: ES 1.0; 2015.06:ES6
• 最新版本是2019，还是草案
• 2016-2018版本没有特别多的东西
• 所有语言都在更新换代，要了解
• 增强工程性

2.基础语法

• 主要是变量和函数

2.1 变量

2.1.1 声明

• 原生js问题：
  1.var重复声明：如var a=5;var a=10;并不会报错。而改用let则会报错。
  2.不能限制修改：var无法确定是否是常量。针对常量，若用const则明确是常量。
  3.不是块级作用域：闭包其实是js的变量在没有块级作用域时临时解决方案，即在一个函数里再设置一个函数！另一种方案是把var改成let。原因：es5的作用域是函数级，所用的相同名称的变量在一个函数里均表示是同一个；let是块级作用域。
• 改进：（防止重复声明和定义常量）
  let：取代var，定义变量
  const：定义常量

2.1.2 解构赋值

json={a:12,b:5};
let {a,b}=json;

• 等式两边的结构必须一样
• 右边必须是个东西
• 赋值和解构必须同时完成，放在同一句话里

let {a,b}={a:5,b:6,c:6};//对,分2步写是不行的
let{a,b}=[12,5];//cuo

• 总结：两边一样

2.2 函数

• 箭头函数和this，参数扩展，数组展开；原生对象扩展

2.2.1 箭头函数

• （）=>{}
• 去掉了function，简写
• 如果只有1个参数，（）可以不写
• 如果只有1个语句并且是return，{}也可以不写，return也可以省
• 修正this：this=>当前的环境，取决于在哪声明了函数，是固定的，不会变来变去！

2.2.2 参数、数组、Json展开

• …:收集参数

function show(a,b,..c){
	console.log(a,b,f,c);

}

let arr1=[12,5,8];
            let arr2=[4,5,6];
            let arr=[...arr1,...arr2];

let json2={
                ...json,
                d:999
            };

2.2.3 原生对象扩展

• map:映射，一一对应；
• reduce ：输入多个输出1个，如求平均分 ；
• filter：过滤，进去几个，出来不一定 ；
• forEach：遍历，主要突出所有循环1遍，没有返回值 ；
• 三目：return item>=60?j及格：不及格；
• 字符串连接，不用加号

`第${index}个`

• JSON.stringify（{a:12，b:5，“name”:“blue”}）,作用：输出字符串形式
• json.parse（str），str为字符串，其中a要加双引号，作用：字符串变回json

3.环境配置：babel.js编译

-目的：兼容低级浏览器

• babeljs.io 地址
• 在线编译，离线编译
• 方法1：第1个script 引入js文件browser.min.js，第2个script中type=“text/babel”；缺点：带来一定延迟，本身不兼容
• 方法2：node：npm包管理器

步骤1：进入工程目录（最外的文件夹）：npm init -y
步骤2：安装几个包，npm i @babel/core @babel/cli @babel/preset-env -D
(几个包分别是：核心库 命令行接口（提供必要的命令） 预先设置好的配置) npm安装很慢，用cnpm ？
步骤3：在package.json中的“script”中添加“build”（名字自定义）：“babel src -d dist” 若需要编译的js文件在文件夹src，让输出的文件存放在文件夹dist
步骤4：工程目录下加文件.babelrc,内容

{
"presets":["@babel/preset-env"]
}

步骤5：在工程目录下dom命令 npm run build
步骤6：使用,可以引入dist内编译好的js文件

• 注意：只能兼容至ie7，若还想往下兼容。安装 npm i @babel/prolyfill

4.异步操作

• 如ajax，好处：用户体验；代码不会卡在那，可以同时进行多个操作。缺点：代码比较乱
• 同步操作：一次只能进行一个操作，用户体验不好
• 融合两者优势：promise(1.封装)，核心：async/await

4.1 Promise

导入jq

let p=new Promise(function(resolve,reject){
	//解决与失败，两个参数
	$.ajax({
                url:'data/1.txt',
                daraType:'json',
                success(arr){
                    resolve(arr);
                },
                error(res){
                    reject(res);
                }
            })
});
 p.then(function(arr){
                alert('成功');
                console.log(arr);
            },function(res){
                alert('失败');
                console.log(res);
            });

待续

---

如有不当之处，欢迎指正!
谢谢！