ES6基础以及babel的环境配置

我就是我 2021-12-03 13:04 266阅读 0赞

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

--------------------

### 文章目录 ###

*  1.ES6
 *  2.基础语法
 *   *  2.1 变量
     *   *  2.1.1 声明
         *  2.1.2 解构赋值
     *  2.2 函数
     *   *  2.2.1 箭头函数
         *  2.2.2 参数、数组、Json展开
         *  2.2.3 原生对象扩展
 *  3.环境配置：babel.js编译
 *  4.异步操作
 *   *  4.1 Promise

# 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

待续

--------------------

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