第一眼——ES6

愈来愈多的框架推荐使用ES6进行高效开发，node也早已支持ES6，那不如就偷偷瞄一眼儿这性感的“编程语言”？
献给初学者

Go~

ES6的一些特性

检测本地是否支持ES6环境
简便方法：直接在浏览器调试工具下尝试输入Promise（ES6的新API，用于异步事件的处理），若是能打印出其构造函数，则支持（若是真有浏览器光是支持了Promise而不支持ES6，那我服！）

在开发环境里面使用ES6
webpack+babel 做为转译工具进行ES6到ES5的编译
wp的配置详见
《webpack的安装及配置》

• 安装插件：
  babel-loader

npm install babel-loader

babel-core

npm install babel-core

babel-es2015-transform

npm install babel-babel-transform

• 在webpack.config.js的module属性中的loaders字段加入

{
     test: /\.js$/,
     loader: 'babel'
}

• 在项目根目录下建立配置文件.babelrc

{
  'presets': ['es2015']
}

---

一些新东西

1. class
   类！

咱们经过一个demo来初见一下js的class

class Student {
        getName() {
              console.log( ' This is es6 style ' );
        }  
        //注意：这里不用逗号
        getClass() {
              console.log( 'gp02' );
        }
}

1. let
   块级做用域变量声明

之前经过var声明的变量由于变量提高的缘故，若非在函数做用域内声明，则为全局变量，而let则是解决了这个问题
一个实用场景：

//<=ES5
for ( var i = 0; i < 10; i ++ ) {
}
console.log( i );//9  变量提高到了全局
//ES6
for ( let ii = 0; ii < 10; i ++ ) {
}
console.log( ii );//undefined  变量只在for循环块级做用域中生效

Q：如何造成块级做用域？
大括号包围则造成一个块级做用域，如函数、循环、判断、选择等结构

{
     let a = 0;
}
console.log( a );//undefined
let k = 0;
console.log( k );//0;

1. const
   静态变量

const NAME = 'Samuel';
NAME = 'Lucifer';
console.log( NAME ); //报错，静态变量不能被从新复制，它至关于一个常量

1. 箭头函数

   • 用=>来表示匿名函数function() {}

   • 若是没有=>后没有{},则表示返回=>后的内容

const A=(a, b)=>a+b;

等价于

const A = function(a, b) {
        return a+b;
}

• 方便回调函数的定义

fetch(url).then((data)=>{
        console.log( data );
        //从写法上来讲也体现了回调函数的意义，“拿到data了，接着作点什么”
});

1. 模块化

• ES5的模块化

关键字：require module exports
遵循CommonJS规范
详见：前端模块化的那些事儿

• ES6的模块化

关键字：import（导入） export（导出）
module.js

var number = 20;
//经过export导出
export default number

import.js

//经过import引入module模块
import num from './module.js'  //这里是module.js的相对路径
//num对应module的出口number
console.log( num );//20

---

第一眼差很少看到这儿吧。别色眯眯的不想走啦！
行行行，再看一眼：

瞧得咋地？A bright new future is coming！（半夜看的同窗，对不起！）4不4很酥胡~。:)解决了之前那些无处安放的对象和做用域问题。要是您忘不了，以后还有ES6的API。。。