甘孜网站建设,衡阳网站优化公司,织梦网站必须下载,互联网之光博览会预约项目开发中一些常用的es6知识#xff0c;主要是为以后分享小程序开发、nodekoa项目开发以及vueSSR(vue服务端渲染)做个前置铺垫。项目开发常用es6介绍1、块级作用域 let const2、箭头函数及this指向3、promise、asnyc await语法4、模块化 module export和import5、解构赋值、字…项目开发中一些常用的es6知识主要是为以后分享小程序开发、nodekoa项目开发以及vueSSR(vue服务端渲染)做个前置铺垫。项目开发常用es6介绍1、块级作用域 let const2、箭头函数及this指向3、promise、asnyc await语法4、模块化 module export和import5、解构赋值、字符串模板……ModuleModule即模块的意思在一些小项目中可能用不到这个概念。但是对于一些大型的、复杂的项目尤其在多人协作的情况下几乎是必须的。在 ES6 之前最主要的有 CommonJS 和 AMD 两种模块化解决方案。前者用于服务器后者用于浏览器。ES6 的出现实现了模块功能而且实现得相当简单完全可以取代 CommonJS 和 AMD 规范成为浏览器和服务器通用的模块解决方案。简单的说ES6 模块是通过export命令指定输出的代码再通过import命令导入下面我们直接通过代码来演示DOCTYPE htmlhtmlhead langenmeta charsetUTF-8titletitleheadbodyscript typemodule//index.htmlimport*as util from./js/scrpit.js;//用星号(*)指定一个对象所有输出值都加载在这个对象上面util.func1()//1util.func2()//2console.log(util.a3)//truescriptbodyhtml//script.jsexportfunctionfunc1(){console.log(1)}exportfunctionfunc2(){console.log(2)}exportvara3;可以看到body里面的script标签与我们平常写的稍有不同加入了typemodule属性这样浏览器才会知道这是一个 ES6 模块。当然模块的导入导出还可以有别的方式比如常用的导出模块的两种方式//script.js 方式1exportfunctionfunc1(){console.log(1)}exportfunctionfunc2(){console.log(2)}exportvara3;//script.js 方式2functionfunc1(){console.log(1)}functionfunc2(){console.log(2)}vara3;export{func1,func2,a}常用的导入模块的两种方式///方式1import{func1,func2,a}from./js/scrpit.js;func1()//1func2()//2console.log(a3)//true///方式2import*as util from./js/scrpit.js;util.func1()//1util.func2()//2console.log(util.a3)//true解构赋值其实在模块的导入中就已经用到了解构赋值。即按照一定模式从数组和对象中提取值并对变量进行赋值。下面列举一些简单的示例如需深入学习建议大家去学习阮一峰写的es6入门哈//情景1let[foo,[[bar],baz]][1,[[2],3]];foo// 1bar// 2baz// 3//情景2let[,,third][foo,bar,baz];third// baz//情景3let[x,,y][1,2,3];x// 1y// 3//情景4let[head,...tail][1,2,3,4];head// 1tail// [2, 3, 4]//情景5let[x,y,...z][a];x// ay// undefinedz// []如果解构不成功变量的值就等于undefined。let[foo][];let[bar,foo][1];以上两种情况都属于解构不成功foo的值都会等于undefined。另一种情况是不完全解构即等号左边的模式只匹配一部分的等号右边的数组。这种情况下解构依然可以成功。let[x,y][1,2,3];x// 1y// 2let[a,[b],d][1,[2,3],4];a// 1b// 2d// 4上面两个例子都属于不完全解构但是可以成功。如果等号的右边不是数组(或者严格地说不是可遍历的结构)那么将会报错。// 报错let[foo]1;let[foo]false;let[foo]NaN;let[foo]undefined;let[foo]null;let[foo]{};解构赋值允许指定默认值。注意ES6 内部使用严格相等运算符()判断一个位置是否有值。所以只有当一个数组成员严格等于undefined默认值才会生效。let[footrue][];foo// truelet[x,yb][a];// xa, yblet[x,yb][a,undefined];// xa, yblet[x1][undefined];x// 1let[x1][null];x// null//上面代码中如果一个数组成员是null默认值就不会生效因为null不严格等于undefined。解构不仅可以用于数组还可以用于对象。let{foo,bar}{foo:aaa,bar:bbb};foo// aaabar// bbb对象的解构与数组有一个重要的不同。数组的元素是按次序排列的变量的取值由它的位置决定而对象的属性没有次序变量必须与属性同名才能取到正确的值。let{bar,foo}{foo:aaa,bar:bbb};foo// aaabar// bbblet{baz}{foo:aaa,bar:bbb};baz// undefined如果变量名与属性名不一致必须写成下面这样。let{foo:baz}{foo:aaa,bar:bbb};baz// aaalet obj{first:hello,last:world};let{first:f,last:l}obj;f// hellol// world对象的解构也可以指定默认值。默认值生效的条件是对象的属性值严格等于undefined。var{x3}{x:undefined};x// 3var{x3}{x:null};x// null模板字符串传统的 JavaScript 语言输出模板通常是这样写的:$(#result).append(There are basket.count items in your basket, basket.onSale are on sale!);上面这种写法相当繁琐不方便ES6 引入了模板字符串解决这个问题。$(#result).append(Thereareb${basket.count}bitemsin your basket,em${basket.onSale}emare on sale!);即用反引号(Tab上面的按键)表示如果模板字符串中嵌入变量需要将变量名写在${}之中。这样就不需要使用大量的引号和加号大大节约了开发时间。注在本地浏览器中使用模块化需要配置服务环境如果使用的是vscode编辑器可以安装Open with live server插件安装完成后重启编辑器就可以在.html文件上右键选择Open with live server然后浏览器输入localhost:5500打开端口号看编辑器最下方提示。如果是Hbuilder编辑器则需要配置一下web服务器其它编辑器具体的可以百度一下哈。阿门~做开发十多年的时间如果大家对于学习编程有很多疑惑没有思路不知道如何有效率的学习可以私信我我带你起飞如果需要最新系统的学习教程也可以管我要。做了很多年开发对于学习方式如何提高自己的技术有一定的经验术业有专攻多跟有经验的人交流学习对这个行业信息了解的多职业发展的空间就越大。
