ES6基础以及babel的环境配置

it2022-05-05  136

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


文章目录

1.ES62.基础语法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

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); });

待续


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


最新回复(0)