ES6

声明：所有图片来源于网络

ES6 简介

编程语言JavaScript是ECMAScript的实现和扩展 。ES6， 全称 ECMAScript 6.0 ，是 JavaScript 的下一个版本标准，2015.06 发版。

常用语法新特性

变量声明 let

我们都知道在ES6以前，var关键字声明变量。无论声明在何处，都会被视为声明在函数的最顶部(不在函数内即在全局作用域的最顶部)。这就是函数变量提升例如

1
2
3
4
5
6

function aa() {
 if(true) {
  var test = 'hello man' 
  }
  alert(test) 
}

以上的代码实际上是:

1
2
3
4
5
6
7

function aa() {
 var test; 
 if(true) {
  test = 'hello man' 
  }
  alert(test) 
}

let 允许创建块级作用域，ES6 推荐在函数中使用 let 定义变量，而非 var：

在 ES6 (块级作用域即在一个函数内部 ，在一个代码块内部),代码效果如下

1
2
3
4
5
6
7
8

function aa() { 
  if(bool) { 
    let test = 'hello man' 
  } else { 
    //test 在此处访问不到 
    console.log(test) 
  } 
}

常量声明

同样在块级作用域有效的另一个变量声明方式是 const，它可以声明一个常量。

1
2

const name = 'lux' 
name = 'joe' //再次赋值此时会报错

ES6 中，const 声明的常量类似于指针，它指向某个引用，也就是说这个「常量」并非一成不变的，如

有几个点需要注意：

• let 关键词声明的变量不具备变量提升（hoisting）特性
• let 和 const 声明只在最靠近的一个块中（花括号内）有效
• 当使用常量 const 声明时，请使用大写变量，如：CAPITAL_CASING
• const 在声明时必须被赋值

模板语法和分隔符

ES6 中有一种十分简洁的方法组装一堆字符串和变量。
${ … } 用来渲染一个变量
` 作为分隔符

1
2

let user = 'Gavino';
console.log(`Hi ${user}!`); // Hi Gavino!

es6模板字符简直是开发者的福音啊，解决了ES5在字符串功能上的痛点。
第一个用途，基本的字符串格式化。将表达式嵌入字符串中进行拼接。用${}来界定。

1
2
3
4
5
6
7

//es5 
var name = 'lux' 
console.log('hello' + name) 

//es6 
const name = 'lux' 
console.log(`hello ${name}`) //hello lux

第二个用途，在ES5时我们通过反斜杠()来做多行字符串或者字符串一行行拼接。ES6反 引号(``)直接搞定。

1
2
3
4
5
6
7
8

// es5 
var msg = "Hi \ 
man!" 

// es6 
const template = `<div> 
	<span>hello world</span> 
</div>`

箭头函数（Arrow Functions）

ES6 中，箭头函数就是函数的一种简写形式，使用括号包裹参数，跟随一个 =>，紧接着是函数体：

如下代码（ES6）

1
2
3

(response,message) => {
 ....... 
}

相当于ES5代码

1
2
3

function(response,message){
 ...... 
}

箭头函数最直观的三个特点。

1. 不需要function关键字来创建函数
2. 省略return关键字
3. 继承当前上下文的 this 关键字

for…of VS for…in

…….