es2015学习笔记经典⼊门教程
es2015也称为ES6，是JavaScript语⾔的下⼀代标准，下⾯将分享如何⼀步步解开它的⾯纱，哟没有⼀种幸福感O(∩_∩)O哈哈~
⽬录
1. 简介
ECMAScript6（以下简称ES6）是JavaScript语⾔的下⼀代标准。因为当前版本的ES6是在2015年6⽉批准通过发布的，所以⼜称ECMAScript 2015, 是⾃从2009年ES5标准化后的第⼀次重⼤更新。。虽然⽬前并不是所有浏览器都能兼容ES6全部特性，但越来越多的程序员在实际项⽬当中已经开始使⽤ES6了。
2. 为什么要了解es6
随着越来越多的程序员在实际项⽬当中已经开始使⽤ES6了。所以就算你现在不打算使⽤ES6，但为了看懂别⼈的你也该懂点ES6的语法了...如：
var sum=0;
[2.3,2,2].map(function(elem){
sum+=elem;
});
console.log('sum='+sum);
注：Angular.js、react.js、vue.js都是以es6为标准的，koa框架（node的mvc）致⼒于全栈开发也全部兼容
3. ES-Checker
⽤来检查各种运⾏环境对ES6 的⽀持情况
$ npm install -g es-checker
$ es-checker
4. Babel
Babel是⼀个⼴泛使⽤的 ES6 转码器，可以将 ES6 代码转为 ES5 代码，从⽽在现有环境执⾏。这意味着，你可以⽤ ES6 的⽅式编写程序，⼜不⽤担⼼现有环境是否⽀持。
Babel的配置⽂件是.babelrc，存放在项⽬的根⽬录下。使⽤ Babel 的第⼀步，就是配置这个⽂件。
⼯具：
Ø  bable-loader
安able-loader
$npm install bable-loader –g
安装转换规则
$npm install bable-preset-es2015 –save-dev
Ø  babel-cli⼯具，⽤于命令⾏转码；
$ npm install --g babel-cli
# 转码结果输出到标准输出
$ babel example.js
# 转码结果写⼊⼀个⽂件
# --out-file 或 -o 参数指定输出⽂件
$ babel example.js --out-file compiled.js
# 或者
$ babel example.js -o compiled.js
# 整个⽬录转码
# --out-dir 或 -d 参数指定输出⽬录
$ babel src --out-dir lib
# 或者
$ babel src -d lib
# -s 参数⽣成source map⽂件
$ babel src -d lib -s
Ø  babel-node：babel-cli⼯具⾃带⼀个命令，提供⼀个⽀持ES6的REPL环境。它⽀持Node的REPL环境的所有功能，⽽且可以直接运⾏ES6代码；
Ø  babel-register：该模块改写require命令，为它加上⼀个钩⼦。此后，每当使⽤require加载.js、.jsx、.es和.es6后缀名的⽂件，就会先⽤Babel进⾏转码；
Ø  babel-core：如果某些代码需要调⽤ Babel 的 API 进⾏转码，就要使⽤该模块；
Ø  babel-polyfill：Babel 默认只转换新的 JavaScript 句法（syntax），⽽不转换新的 API
5. 开发⼯具
5.1. Sublime Text
2)        解压zip⽂件，并重命名⽂件夹“Nodejs”
3)        打开sublime，操作"preference"-->"Browse packages", 把Nodejs复制到该⽬录
4)        打开Nodejs⽂件夹，到⽂件“Nodejs.sublime-build”，要更改encoding为GB2312或者utf8否则终端显⽰乱码
5)        要⽤sublime打开⽂件“Nodejs.sublime-settings”并修改
"node_command":"D:\Program\",
"npm_command":"D:\Program\d",
6)        重启sublime
新建⼀个test.js⽂件，按 Ctrl + B 或者F7运⾏，。
5.2.  WebStorm
绝对是前端开发⼤型应⽤的利器之⼀，后续介绍
6.  es6新语法
6.1.  Let/const和块级作⽤域
在ES2015的新语法中，影响速度最为直接范围最⼤的，恐怕就是 let 和 const 了，它们是继var 之后，新的变量定义⽅法。与 let 相
⽐，const 更容易被理解：const 也就是 constant 的缩写，跟 C/C++ 等经典语⾔⼀样，⽤于定义常量，即不可变量。但由于在ES6之前的 ECMAScript 标准中，并没有原⽣的实现，所以在降级编译中，会马上进⾏引⽤检查，然后使⽤ var 代替。
// foo.js
const foo ='bar'
foo ='newvalue'
$ babel foo.js
...
SyntaxError: test.js: Line 3:"foo" is read-only
1|const foo ='bar'
2|
>3| foo ='newvalue'
...
块级作⽤域
在ES6诞⽣之前，给JavaScript 新⼿解答困惑时，经常会提到⼀个观点：JavaScript 没有块级作⽤域。这个问题之所以为⼈所熟知，是因为它引发了诸如历遍监听事件需要使⽤闭包解决等问题。
<button>⼀</button>
<button>⼆</button>
<button>三</button>
<button>四</button>
<div id="output"></div>
<script>
var buttons =document.querySelectorAll('button')
var output =document.querySelector('#output')
for(var i =0; i < buttons.length; i++){
buttons[i].addEventListener('click',function(){
output.innerText = buttons[i].innerText
})
}
</script>
运⾏时就会报出这样的错误信息：
Uncaught TypeError: Cannot readproperty 'innerText' of undefined
出现这个错误的原因是因为buttons[i]不存在，即为undefined。对i的变量引⽤(Reference)⼀直保持在
上⼀层作⽤域（循环语句所在层）上，⽽当循环结束i 则正好是 buttons.length。⽽在ES6中，我们只需做出⼀个⼩⼩的改动，便可以解决该问题（假设所使⽤的浏览器已经⽀持所需要的特性）：
// ...
for(/* var */ let i =0; i < buttons.length; i++){
// ...
}
// ...
改进后的代码经过 babel 的编译后的代码：
// ...
var _loop =function(i){
buttons[i].addEventListener('click',function(){
output.innerText = buttons[i].innerText
})
}
for(var i =0; i < buttons.length; i++){
_loop(i)
}
// ...
6.2.  箭头函数
继let和const之后，箭头函数就是使⽤率最⾼的新特性。顾名思义便是使⽤箭头(=>)进⾏定义的函数，属于匿名函数（Lambda）⼀类。当然了，也可以作为定义式函数使⽤，但我们并不推荐这样做，随后会详细解释。
使⽤（⽤法）
foo => foo +' world'//means return`foo + ' world'`
(foo, bar)=> foo + bar
foo =>{
return foo +' world'
}
(foo, bar)=>{
return foo + bar
}
其最⼤的好处便是简洁明了，省略了function关键字，⽽使⽤=>代替。
let names =['Will','Jack','Peter','Steve','John','Hugo','Mike']
let newSet = names
.map((name, index)=>{
return{
id: index,
name: name
}
})
.filter(man => man.id %2==0)
.map(man =>[man.name])
.reduce((a, b)=> a.concat(b))
console.log(newSet)//=> [ 'Will','Peter', 'John', 'Mike' ]
箭头函数与上下⽂绑定
参考CoffeeScript 中的定义⼀般，是⽤于对函数内部的上下⽂ （this）绑定为定义函数所在的作⽤域的上下⽂。let obj ={
hello:'world',
foo(){
let bar =()=>{
returnthis.hello
}
return bar
}
}
window.hello ='ES6'
window.bar = obj.foo()
window.bar()//=> 'world'
上⾯代码中的 obj.foo 等价于：
// ...
foo(){学javascript前要学什么
let bar =(function(){
returnthis.hello
}).bind(this)
return bar
}
// ...
注意事项
另外，要注意的是箭头函数对上下⽂的绑定是强制性的，⽆法通过 apply 或 call ⽅法改变其上下⽂。
let a ={
init(){
this.bar =()=>this.dam
},

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。