六、ES6规范
ES6规范
编程语言JavaScript是ECMAScript的实现和扩展 。ECMAScript是由ECMA（一个类似W3C的标准组织）参与进行标准化的语法规范。ECMAScript定义了：语言语法 – 语法解析规则、关键字、语句、声明、运算符等。类型 – 布尔型、数字、字符串、对象等。原型和继承内建对象和函数的标准库 – JSON、Math、数组方法、对象自省方法等ECMAScript标准不定义HTML或CSS的相关功能，也不定义类似DOM（文档对象模型）的Web API，这些都在独立的标准中进行定义。ECMAScript涵盖了各种环境中JS的使用场景，无论是浏览器环境还是类似node.js的非浏览器环境。ECMAScript 6.0（以下简称ES6）是JavaScript语言的下一代标准，2015年6月正式发布。它的目标，是使得JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言。
1、Node.js中使用ES6
ES6+ 太棒了,但是很多高级功能node是不支持的,就需要使用babel转换成ES5
（1）babel转换配置,项目根目录添加.babelrc 文件
{"presets" : ['es2015']}
（2）安装es6转换模块
cnpm install babel-preset-es2015 --save-dev
（3）全局安装命令行工具
cnpm install babel-cli -g
（4）使用
babel-node js文件名
2、变量声明let
我们都是知道在ES6以前，var关键字（全局关键字，无论何处，变量都是全局的）声明变量。无论声明在何处，都会被视为声明在函数的最顶部，这就是函数变量提升。例如
function aa() {if(bool) {var test = 'hello man'} else {console.log(test)}}
以上的代码实际上是:
function aa() {var test // 变量提升if(bool) {test = 'hello man'} else {//此处访问test 值为undefinedconsole.log(test)}//此处访问test 值为undefined}
所以不用关心bool是否为true or false。实际上，无论如何test都会被创建声明。
接下来ES6主角登场：
我们通常用let和const来声明，let表示变量、const表示常量。let和const都是块级作用域。怎么理解这个块级作用域？在一个函数内部 ，在一个代码块内部。看以下代码
function aa() {if(bool) {let test = 'hello man'} else {//test 在此处访问不到console.log(test)}}
3、常量声明
const 用于声明常量，看以下代码
const name = 'lux'name = 'joe' //再次赋值此时会报错
4、模板字符串
es6模板字符简直是开发者的福音啊，解决了ES5在字符串功能上的痛点。
第一个用途，基本的字符串格式化（只能使用``字符）。将表达式嵌入字符串中进行拼接。用${}来界定。
//es5var name = 'lux'console.log('hello' + name)//es6const name = 'lux'console.log(`hello ${ name}`) //hello lux
第二个用途，在ES5时我们通过反斜杠()来做多行字符串或者字符串一行行拼接。ES6反引号(``)直接搞定。
// es5var msg = "Hi \ man!"// es6const template = `<div> <span>hello world</span> </div>`
5、函数默认参数
ES6为参数提供了默认值。在定义函数时便初始化了这个参数，以便在参数没有被传递进去时使用。
看例子代码
function action(num = 200) {console.log(num)}action() //200action(300) //300
6、箭头函数
ES6很有意思的一部分就是函数的快捷写法。也就是箭头函数。
箭头函数最直观的三个特点。
1不需要function关键字来创建函数
2省略return关键字
3继承当前上下文的 this 关键字
看下面代码（ES6）
(response,message) => {.......}
相当于ES5代码
function(response,message){......}function add(a,b){console.log(a+b);}add(2,3);//箭头函数add2=(a,b)=>{console.log(a+b);}add2(2,3);//省略函数名，省略return关键字add3=(a,b)=>a+b;console.log(add3(2,3));
7、对象初始化简写（变量转对象）
ES5我们对于对象都是以键值对的形式书写，是有可能出现键值对重名的。例如
function people(name, age) {return {name: name,age: age};}
以上代码可以简写为
function people(name, age) {return {name,age};}
8、解构(对象、数组中属性转变量)
数组和对象是JS中最常用也是最重要表示形式。为了简化提取信息，ES6新增了解构，这是将一个数据结构分解为更小的部分的过程
ES5我们提取对象中的信息形式如下
const people = {name: 'lux',age: 20}const name = people.nameconst age = people.ageconsole.log(name + ' --- ' + age)
是不是觉得很熟悉，没错，在ES6之前我们就是这样获取对象信息的，一个一个获取。现在，ES6的解构能让我们从对象或者数组里取出数据存为变量，例如
//对象const people = {name: 'lux',age: 20}const { name, age } = peopleconsole.log(`${ name} --- ${ age}`)//数组const color = ['red', 'blue']const [first, second] = colorconsole.log(first) //'red'console.log(second) //'blue'
9、Spread Operator（数据追加的过程）
ES6中另外一个好玩的特性就是Spread Operator 也是三个点儿…接下来就展示一下它的用途。 组装对象或者数组（表示对象、数组的扩展，值的融合）
//数组const color = ['red', 'yellow']const colorful = [...color, 'green', 'pink']console.log(colorful) //[red, yellow, green, pink]//对象const alp = { fist: 'a', second: 'b'}const alphabets = { ...alp, third: 'c' }console.log(alphabets) //{ "fist": "a", "second": "b", "third": "c"
6.3.9 import 和 export
import导入模块、export导出模块
lib.js
let fn0=function(){console.log('fn0...');}export { fn0}
demo9.js
import { fn0} from './lib'fn0();
注意：node(v8.x)本身并不支持import关键字，所以我们需要使用babel的命令行工具来执行（配置详见6.2小节内容）
babel-node demo9
系统管理员
一时失言乱红尘
刺骨的言语ヽ痛彻心扉
傷城~
小鱼儿
太过爱你忘了你带给我的痛
你的名字
还没有评论，来说两句吧...