关于前端技术的更新速度,小编就不在这里多说了,不知道大家是否深有体会,好不容易一个框架用熟了,版本更新了又有新的流行框架替代了,我们又开始从’Hello world’学习新的内容。我们如何保持一份安静的心,不急不躁的在2019年学习JavaScript?小编这里有20条建议,希望对大家有所启发。

ES2015(es6)已经出来好几年了,虽然目前现有的浏览器还无法直接运行,但是目前最流行的几种前端框架都集成了ES6,学习ES6是掌握未来JavaScript发展的基础。es6被称为JavaScript历史上重大的一次变革,提供了非常多语言级别的新特性,因此我们十分有必要来抽点时间看看ES2015,利用语言的新特性,提高JavaScript的开发效率,使开发更加高效与规范化。

虽然现在浏览器不支持最新的JAVASCRPT,幸亏有了Babel的出现,我们才能用最新的ES2015(es6)语法书写Javascript,通过Babel编译成浏览器能识别的Javascript(es5)。

安装方法

$ npm install -g babel-cli

脚本输出

babel es6.js -o compiled.js

众所周知,ES5中,我们通过var来声明变量,但是变量默认是全局作用域或者函数作用域,声明函数曾经是创造作用域的唯一方法。这点和其他编程语言存在差异,其他语言大多数都存在块级作用域。所以在es6中,新提出的let是用来解决这个缺陷的。同时还引入const来定义常量,一旦定以后不可以修改,不过如果是引用类型,那么可以改变属性。

箭头函数是一种更简单的函数声明方式,可以把它看做是一种语法糖,匿名函数永远是匿名的。箭头函数,顾名思义便使用箭头(=>)进行定义函数,通过此方式,能使你代码风格更简洁。示例如下:

单行箭头函数(只能包含一条语句):

let doubleShort=(num)=>num*2;

多行(参数列别的右括号、箭头需要保持在同一行):

let doubleLong=(num)=>{let doubleNum=num*2;return doubleNum;}

在实际的JavaScript开发中,我们需要用到很多的异步开发。如果我们需要在页面中实现一系列的动画效果,每一个动画效果都依赖前一个动画效果是否完成,为了实现这些动画效果,我们需要通过回调函数把这些效果“串”起来。我们就可以通过ES6的Promise方法将这些函数“串”起来:

var val = 1;
// 我们假设step1, step2, step3都是ajax调用后端或者是
// 在Node.js上查询数据库的异步操作
// 每个步骤都有对应的失败和成功处理回调
// 需求是这样,step1、step2、step3必须按顺序执行
function step1(resolve, reject) {
console.log('步骤一:执行');
if (val >= 1) {
resolve('Hello I am No.1');
} else if (val === 0) {
reject(val);
}
}
function step2(resolve, reject) {
console.log('步骤二:执行');
if (val === 1) {
resolve('Hello I am No.2');
} else if (val === 0) {
reject(val);
}
}
function step3(resolve, reject) {
console.log('步骤三:执行');
if (val === 1) {
resolve('Hello I am No.3');
} else if (val === 0) {
reject(val);
}
}
new Promise(step1).then(function(val){
console.info(val);
return new Promise(step2);
}).then(function(val){
console.info(val);
return new Promise(step3);
}).then(function(val){
console.info(val);
return val;
}).then(function(val){
console.info(val);
return val;
});
// 执行之后将会打印
步骤一:执行
Hello I am No.1
步骤二:执行
Hello I am No.2
步骤三:执行
Hello I am No.3
Hello I am No.3

map函数并非ES6的新内容,在ES5中就有了,map和forEach非常相似,都是用来遍历数组中的每一项值的,用来遍历数组中的每一项;与forEach的区别就是支持return返回,具体示例如下:

[1,2,3].map((num)=>num*2);//[2,4,6]

filter函数并非ES6的新内容,在ES5中就有了,filter() 方法创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素,具体示例如下:

[4,7,,2,3].filter((num)=>num % 2===0);// [4,2]

reduce函数也并非es6的新函数,reduce() 方法接收一个函数作为累加器,数组中的每个值(从左到右)开始计算并缩减,最终计算为一个值,示例代码如下:

[7,2,4].reduce((a,b)=>a+b);//13

让我们看一个综合的示例,map,filter,reduce结合示例,是不是让循环更简单?

[3,2,1,6].map(num=>num*7).filter(num=>num<20).reduce((a,b)=>a+b);//21

如果你经常与各种API打交道,就要学会如何处理好数组和对象,如何优雅高效的处理这些数据内容,让我们的工作更加简单?小编建议你使用Facebook的immutable-js,提供的类型包括:List,Stack,Map,OrderedMap,Set,OrderedSet和Record,简单的示例如下:

安装:

npm install immutable

示意:

const { Map } = require('immutable')
const map1 = Map({ a: 1, b: 2, c: 3 })
const map2 = map1.set('b', 50)
map1.get('b') // 2
map2.get('b') // 50

Node.js小编就不用多解释了,在以往的文章有过详细的介绍,想学习的同学们可以查看历史文章进行查看。如果没有Nodejs的出现,前端也不会有如今的繁荣。Node.js能让我们前端开发人员使用前端的语言开发后台,是不是很心动啊。虽然大多数公司应用的并不广泛,但是通过NodeJS的学习,能让我们更加的了解后台开发人员的思维,让我们能够更加轻松与后台人员沟通,提高开发效率。

目前大概有30万第三方包通过NPM进行安装,远远超过JAVA、PHP、NET相关的第三方插件,掌握NPM的使用安装十分有必要,NPM工具可以通过Nodejs进行安装,通过对第三方包的引用,运用恰当会大大提高我们的开发效率。

关于今天的分享就到这里,希望对大家有所帮助,我会在下篇文章分享剩余的10条建议,大家如果有更好的建议,欢迎留言分享。

更多精彩内容,请微信关注“前端达人”公众号