1. 首页
  2. IT资讯

关于JavaScript,19年你可以尝试这20条建议(上)

“u003Cdivu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002Fdfic-imagehandleru002F18d1ab18-93d7-402f-a0c8-56992ab69e09″ img_width=”1023″ img_height=”682″ alt=”关于JavaScript,19年你可以尝试这20条建议(上)” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cp class=”ql-align-justify”u003Eu003Cbru003Eu003Cu002Fpu003Eu003Cp class=”ql-align-justify”u003E关于前端技术的更新速度,小编就不在这里多说了,不知道大家是否深有体会,好不容易一个框架用熟了,版本更新了又有新的流行框架替代了,我们又开始从’Hello world’学习新的内容。我们如何保持一份安静的心,不急不躁的在2019年学习JavaScript?小编这里有20条建议,希望对大家有所启发。u003Cu002Fpu003Eu003Cp class=”ql-align-justify”u003EES2015(es6)已经出来好几年了,虽然目前现有的浏览器还无法直接运行,但是目前最流行的几种前端框架都集成了ES6,学习ES6是掌握未来JavaScript发展的基础。es6被称为JavaScript历史上重大的一次变革,提供了非常多语言级别的新特性,因此我们十分有必要来抽点时间看看ES2015,利用语言的新特性,提高JavaScript的开发效率,使开发更加高效与规范化。u003Cu002Fpu003Eu003Ch1 class=”ql-align-justify”u003E1、用BABEL书写代码u003Cu002Fh1u003Eu003Cp class=”ql-align-justify”u003E虽然现在浏览器不支持最新的JAVASCRPT,幸亏有了Babel的出现,我们才能用最新的ES2015(es6)语法书写Javascript,通过Babel编译成浏览器能识别的Javascript(es5)。u003Cu002Fpu003Eu003Cp class=”ql-align-justify”u003Eu003Cstrongu003E安装方法u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpre class=”ql-align-justify”u003E$ npm install -g babel-cliu003Cbru003Eu003Cu002Fpreu003Eu003Cp class=”ql-align-justify”u003Eu003Cstrongu003E脚本输出u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpre class=”ql-align-justify”u003Ebabel es6.js -o compiled.jsu003Cbru003Eu003Cu002Fpreu003Eu003Ch1 class=”ql-align-justify”u003E2、使用新方法声明变量u003Cu002Fh1u003Eu003Cp class=”ql-align-justify”u003E众所周知,ES5中,我们通过var来声明变量,但是变量默认是全局作用域或者函数作用域,声明函数曾经是创造作用域的唯一方法。这点和其他编程语言存在差异,其他语言大多数都存在块级作用域。所以在es6中,新提出的let是用来解决这个缺陷的。同时还引入const来定义常量,一旦定以后不可以修改,不过如果是引用类型,那么可以改变属性。u003Cu002Fpu003Eu003Ch1 class=”ql-align-justify”u003Eu003Cstrongu003E3、使用箭头函数u003Cu002Fstrongu003Eu003Cu002Fh1u003Eu003Cp class=”ql-align-justify”u003E箭头函数是一种更简单的函数声明方式,可以把它看做是一种语法糖,匿名函数永远是匿名的。箭头函数,顾名思义便使用箭头(=>)进行定义函数,通过此方式,能使你代码风格更简洁。示例如下:u003Cu002Fpu003Eu003Cp class=”ql-align-justify”u003E单行箭头函数(只能包含一条语句):u003Cu002Fpu003Eu003Cpre class=”ql-align-justify”u003Elet doubleShort=(num)=>num*2;u003Cbru003Eu003Cu002Fpreu003Eu003Cp class=”ql-align-justify”u003E多行(参数列别的右括号、箭头需要保持在同一行):u003Cu002Fpu003Eu003Cpre class=”ql-align-justify”u003Elet doubleLong=(num)=>{let doubleNum=num*2;return doubleNum;}u003Cbru003Eu003Cu002Fpreu003Eu003Ch1 class=”ql-align-justify”u003Eu003Cstrongu003E4、使用Promise进行回调u003Cu002Fstrongu003Eu003Cu002Fh1u003Eu003Cp class=”ql-align-justify”u003E在实际的JavaScript开发中,我们需要用到很多的异步开发。如果我们需要在页面中实现一系列的动画效果,每一个动画效果都依赖前一个动画效果是否完成,为了实现这些动画效果,我们需要通过回调函数把这些效果“串”起来。我们就可以通过ES6的Promise方法将这些函数“串”起来:u003Cu002Fpu003Eu003Cpre class=”ql-align-justify”u003Evar val = 1;u003Cbru003Eu002Fu002F 我们假设step1, step2, step3都是ajax调用后端或者是u003Cbru003Eu002Fu002F 在Node.js上查询数据库的异步操作u003Cbru003Eu002Fu002F 每个步骤都有对应的失败和成功处理回调u003Cbru003Eu002Fu002F 需求是这样,step1、step2、step3必须按顺序执行u003Cbru003Efunction step1(resolve, reject) {u003Cbru003E console.log(‘步骤一:执行’);u003Cbru003E if (val >= 1) {u003Cbru003E resolve(‘Hello I am No.1’);u003Cbru003E } else if (val === 0) {u003Cbru003E reject(val);u003Cbru003E }u003Cbru003E}u003Cbru003Efunction step2(resolve, reject) {u003Cbru003E console.log(‘步骤二:执行’);u003Cbru003E if (val === 1) {u003Cbru003E resolve(‘Hello I am No.2’);u003Cbru003E } else if (val === 0) {u003Cbru003E reject(val);u003Cbru003E }u003Cbru003E}u003Cbru003Efunction step3(resolve, reject) {u003Cbru003E console.log(‘步骤三:执行’);u003Cbru003E if (val === 1) {u003Cbru003E resolve(‘Hello I am No.3’);u003Cbru003E } else if (val === 0) {u003Cbru003E reject(val);u003Cbru003E }u003Cbru003E}u003Cbru003Enew Promise(step1).then(function(val){u003Cbru003E console.info(val);u003Cbru003E return new Promise(step2);u003Cbru003E}).then(function(val){u003Cbru003E console.info(val);u003Cbru003E return new Promise(step3);u003Cbru003E}).then(function(val){u003Cbru003E console.info(val);u003Cbru003E return val;u003Cbru003E}).then(function(val){u003Cbru003E console.info(val);u003Cbru003E return val;u003Cbru003E});u003Cbru003Eu002Fu002F 执行之后将会打印u003Cbru003E步骤一:执行u003Cbru003EHello I am No.1u003Cbru003E步骤二:执行u003Cbru003EHello I am No.2u003Cbru003E步骤三:执行u003Cbru003EHello I am No.3u003Cbru003EHello I am No.3u003Cbru003Eu003Cu002Fpreu003Eu003Cp class=”ql-align-justify”u003Eu003Cbru003Eu003Cu002Fpu003Eu003Ch1 class=”ql-align-justify”u003Eu003Cstrongu003E5、使用map函数u003Cu002Fstrongu003Eu003Cu002Fh1u003Eu003Cp class=”ql-align-justify”u003Emap函数并非ES6的新内容,在ES5中就有了,map和forEach非常相似,都是用来遍历数组中的每一项值的,用来遍历数组中的每一项;与forEach的区别就是支持return返回,具体示例如下:u003Cu002Fpu003Eu003Cpre class=”ql-align-justify”u003E[1,2,3].map((num)=>num*2);u002Fu002F[2,4,6]u003Cbru003Eu003Cu002Fpreu003Eu003Ch1 class=”ql-align-justify”u003Eu003Cstrongu003E6、使用filter函数u003Cu002Fstrongu003Eu003Cu002Fh1u003Eu003Cp class=”ql-align-justify”u003Efilter函数并非ES6的新内容,在ES5中就有了,filter() 方法创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素,具体示例如下:u003Cu002Fpu003Eu003Cpre class=”ql-align-justify”u003E[4,7,,2,3].filter((num)=>num % 2===0);u002Fu002F [4,2]u003Cbru003Eu003Cu002Fpreu003Eu003Ch1 class=”ql-align-justify”u003Eu003Cstrongu003E7、使用reduce函数u003Cu002Fstrongu003Eu003Cu002Fh1u003Eu003Cp class=”ql-align-justify”u003Ereduce函数也并非es6的新函数,reduce() 方法接收一个函数作为累加器,数组中的每个值(从左到右)开始计算并缩减,最终计算为一个值,示例代码如下:u003Cu002Fpu003Eu003Cpre class=”ql-align-justify”u003E[7,2,4].reduce((a,b)=>a+b);u002Fu002F13u003Cbru003Eu003Cu002Fpreu003Eu003Cp class=”ql-align-justify”u003E让我们看一个综合的示例,map,filter,reduce结合示例,是不是让循环更简单?u003Cu002Fpu003Eu003Cpre class=”ql-align-justify”u003E[3,2,1,6].map(num=>num*7).filter(num=>num<20).reduce((a,b)=>a+b);u002Fu002F21u003Cbru003Eu003Cu002Fpreu003Eu003Ch1 class=”ql-align-justify”u003Eu003Cstrongu003E8、学会如何处理数据u003Cu002Fstrongu003Eu003Cu002Fh1u003Eu003Cp class=”ql-align-justify”u003E如果你经常与各种API打交道,就要学会如何处理好数组和对象,如何优雅高效的处理这些数据内容,让我们的工作更加简单?小编建议你使用Facebook的immutable-js,提供的类型包括:List,Stack,Map,OrderedMap,Set,OrderedSet和Record,简单的示例如下:u003Cu002Fpu003Eu003Cp class=”ql-align-justify”u003E安装:u003Cu002Fpu003Eu003Cpre class=”ql-align-justify”u003Enpm install immutableu003Cbru003Eu003Cu002Fpreu003Eu003Cp class=”ql-align-justify”u003E示意:u003Cu002Fpu003Eu003Cpre class=”ql-align-justify”u003Econst { Map } = require(‘immutable’)u003Cbru003Econst map1 = Map({ a: 1, b: 2, c: 3 })u003Cbru003Econst map2 = map1.set(‘b’, 50)u003Cbru003Emap1.get(‘b’) u002Fu002F 2u003Cbru003Emap2.get(‘b’) u002Fu002F 50u003Cbru003Eu003Cu002Fpreu003Eu003Ch1 class=”ql-align-justify”u003Eu003Cstrongu003E9、开始学习Node.jSu003Cu002Fstrongu003Eu003Cu002Fh1u003Eu003Cp class=”ql-align-justify”u003ENode.js小编就不用多解释了,在以往的文章有过详细的介绍,想学习的同学们可以查看历史文章进行查看。如果没有Nodejs的出现,前端也不会有如今的繁荣。Node.js能让我们前端开发人员使用前端的语言开发后台,是不是很心动啊。虽然大多数公司应用的并不广泛,但是通过NodeJS的学习,能让我们更加的了解后台开发人员的思维,让我们能够更加轻松与后台人员沟通,提高开发效率。u003Cu002Fpu003Eu003Ch1 class=”ql-align-justify”u003Eu003Cstrongu003E10、NPM包管理工具u003Cu002Fstrongu003Eu003Cu002Fh1u003Eu003Cp class=”ql-align-justify”u003E目前大概有30万第三方包通过NPM进行安装,远远超过JAVA、PHP、NET相关的第三方插件,掌握NPM的使用安装十分有必要,NPM工具可以通过Nodejs进行安装,通过对第三方包的引用,运用恰当会大大提高我们的开发效率。u003Cu002Fpu003Eu003Ch1 class=”ql-align-justify”u003Eu003Cstrongu003E小节u003Cu002Fstrongu003Eu003Cu002Fh1u003Eu003Cp class=”ql-align-justify”u003E关于今天的分享就到这里,希望对大家有所帮助,我会在下篇文章分享剩余的10条建议,大家如果有更好的建议,欢迎留言分享。u003Cu002Fpu003Eu003Cp class=”ql-align-center”u003E更多精彩内容,请微信u003Cstrongu003E关注“前端达人”公众号u003Cu002Fstrongu003E!u003Cu002Fpu003Eu003Cu002Fdivu003E”

原文始发于:关于JavaScript,19年你可以尝试这20条建议(上)

主题测试文章,只做测试使用。发布者:杀手梦三刀,转转请注明出处:http://www.cxybcw.com/10794.html

联系我们

13687733322

在线咨询:点击这里给我发消息

邮件:1877088071@qq.com

工作时间:周一至周五,9:30-18:30,节假日休息

QR code