关于JavaScript，17年你可以尝试这20条建议（上）

点击上方“前端达人” 可以订阅哦！

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

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

1、用BABEL书写代码

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

安装方法

$ npm install -g babel-cli

脚本输出

babel es6.js -o compiled.js

2、使用新方法声明变量

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

3、使用箭头函数

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

单行箭头函数（只能包含一条语句）：

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

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

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

4、使用Promise进行回调

在实际的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

5、使用map函数

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

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

6、使用filter函数

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

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

7、使用reduce函数

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

8、学会如何处理数据

如果你经常与各种API打交道，就要学会如何处理好数组和对象，如何优雅高效的处理这些数据内容，让我们的工作更加简单？小编建议你使用Facebook的immutable-js，项目地址http://facebook.github.io/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

9、开始学习Node.jS

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

10、NPM包管理工具

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

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

公众号

前端达人

长按识别左边二维码关注我