ES6 简介
历时将近6年的时间来制定的新 ECMAScript 标准 ECMAScript 6(亦称 ECMAScript Harmony,简称 ES6)终于在 2015年 6月正式发布,自从上一个标准版本 ES5 在 2009 年发布以后,ES6 就一直以新语法、新特性的优越型吸引著众多 Javascript 开发者,驱使他们积极尝鲜
由于 ES6 是在2015年发布的,所以也叫ES2015
以后ECMAScript 标准一年已更新,统一使用年份命名:ES2016、ES2017
ES6常用的一些新特性
块级作用域绑定
在ES5之前,不存在块级作用域,在编程的时候很多时候会带来很多的不便,ES6新增了块级作用域,补足了在这方面的缺陷
块级生命指的是该声明的变量无法被代码块外部访问,块级作用域,又被称为词法作用域(lexical scopes),可以再如下的条件创建:
- 函数内部
- 在代码块(即{})内部
块级作用域是很多类C语言的工作机制,ECMAScript 6 引入块级声明的目的是增强 JavaScript 的灵活性,同时又能与其他编程语言保持一致
let声明
使用let声明变量的语法和使用var声明的语法是一样的,但是let声明的变量的作用域会限制在当前的代码块中,这是let与var的最大区别
<script type="text/javascript">
let a = 10;
if(a > 5) {
console.log(b); // 用let声明的变量没有声明前这一特性,所以此处也访问不到(报错)
let b = 20;
console.log(b)
}
console.log(b) // 由于b是在if块中使用let声明的,所以此处无法访问到(报错)
</script>
注意
- 用let声明的变量具有块级作用域,只能在声明的块中访问,在块外面无法访问
- 用let声明的变量也没有声明提前这一特性
- 在同一个块中,let声明的变量也不能重复声明
- 在声明变量的时候尽量使用let,慢慢的抛弃var
const声明
在 ES6 使用 const 来声明的变量称之为常量,这意味着他们不能再次被赋值,由于这个原因,所有的const声明的变量都必须在声明处初始化,const声明的常量和let变量一样也是具有块级作用域的特性
<script type="text/javascript">
var a = 20;
if (true) {
const b = 20;
b = 30; // 错误,常量不能重新赋值
const c; // 错误,常量声明的同时必须赋值
}
</script>
注意:
- const的新特性除了声明的是常量外,其他与let一样
- 在let和const声明前的这段区域称之为暂存性死区(The Temporal Dead Zone —TDZ)
- 使用let和const声明的变量和常量不再是window的属性,也就是说通过window.a是无法访问到的
循环中的块级绑定
使用var声明的循环变量在循环结束后仍然可以访问到,使用let声明的循环变量,在循环结束之后会立即销毁
<script type="text/javascript">
for(let i = 0; i < 3; i++) { // 循环结束之后会立即销毁i
console.log(i)
}
console.log(i) // 此处无法访问到i
</script>
循环中的函数
// 下面的代码,是输出10个10,而不是0,1,2,...
<script type="text/javascript">
var funcs = [];
for(var i = 0; i < 10; i++) {
funcs.push(function(){
console.log(i)
})
}
funcs.forEach(function(func) {
func(); //输出10个10
})
</script>
如果使用let声明变量,则完全可以避免前面的问题,这是ES6规范中专门定义的特性。在for…in和for…of 循环中也适用
<script type="text/javascript">
var funcs = [];
for(let i = 0; i < 10; i ++) {
funcs.push(function(){
console.log(i)
})
}
funcs.forEach(function(func){
func() // 输出0,1,2...9
})
</script>
let 声明使得每次迭代都会创建一个变量i,所以循环内部创建的函数会获得各自的变量 i 的拷贝,每份拷贝都会在每次迭代的开始被创建并被赋值
函数的新增特性
带默认参数的函数
JavaScript 函数的最大的一个特点就是在传递参数的时候,参数的个数不受限制的,为了健壮性考虑,一般在函数内部需要做一些默认值的处理
function makeRequest(url,timeout,callback){
timeout = timeout || 2000;
callback = callback || function(){}
}
其实上面的默认值方法有个bug:当timeout是0的时候也会当做假值来处理,从而给赋值默认值2000
// ES6从语言层面上增加了默认值的支持,看下面的代码
// 这个函数如果只传入第一个参数,后面两个不传入,则会使用默认值
// 如果后面两个也传入了参数,则不会使用默认值
function makeRequest(url,timeout = 2000,callback = function(){}){
// 其余代码
}
默认参数对 arguments 对象的影像
在非严格模式下,arguments 总是能反映出命名参数的变化,看下面的代码:
<script type="text/javascript">
function foo(a,b){
// 非严格模式
console.log(arguments[0] === a) // true
console.log(arguments[1] === b) // true
a = 10
b = 20
console.log(arguments[0] === a) // true
console.log(arguments[1] === b) // true
}
foo(1,2)
</script>
在ES5的严格模式下,arguments只反映参数的初始值,而不再反映命名参数的变化!
<script type="text/javascript">
function foo(a,b){
// 严格模式
"use strict"
console.log(arguments[0] === a) // true
console.log(arguments[1] === b) // true
a = 10
b = 20
console.log(arguments[0] === a) // false 修改a的值不会影响到arguments[0]的值
console.log(arguments[1] === b) // false
}
foo(1,2)
</script>
当使用ES6参数默认值的时候,不管是否是在严格模式下,都和ES5的严格模式相同,看下面的代码:
<script type="text/javascript">
function foo(a,b = 30){
console.log(arguments[0] === a) // true
console.log(arguments[1] === b) // true
a = 10
b = 20
console.log(arguments[0] === a) // false 由于b使用了默认值,虽然a没有使用默认值,但是仍然表现的和严格模式一样
console.log(arguments[1] === b) // false b使用了默认值,所以表现和严格模式一样
}
foo(1,2)
</script>
注意:如果这样调用foo(1),则 a == 1,b == 30,arguments[0] == 1, arguments[1] == undefined,也就是说默认值并不会赋值给arguments参数
默认参数表达式
参数的默认值,也可以是一个表达式或者函数调用等,看下面的代码:
<script type="text/script">
function getValue(){
return 5;
}
function add(first,second = getValue()){
// 表示使用getValue这个函数的返回值作为second的默认值
return first + second
}
console.log(add(1,1)) // 2,调用add函数的时候,传入了第二个参数,则以传入的参数为准
console.log(add(1)) // 6,调用add函数的时候,没有传入第二个参数,则会调用getValue函数
</script>
有一点需要注意:getValue() 只会在调用add且不传入第二个参数的时候才会去调用,不是在解析阶段调用的
<script type="text/javascript">
let value = 5
function getValue(){
return value++
}
function add(first,second = getValue()){
return first + second
}
console.log(add(1,2)) // 2
console.log(add(1)) // 6
console.log(add(1)) // 7
console.log(add(1)) // 8
</script>
由于默认值可以表达式,所以我们甚至可以使用前面的参数作为后面参数的默认值
function add(first, second = first){ // 使用第一个参数作为第二个参数的默认值
return first + second
}
注意:可以把前面的参数作为后面参数的默认值,但是不能把后面的参数作为第一个参数的默认值,这可以前面说的let和const的暂存性死区一个意思
function add(first = second, second){ // 这种写法是错误的
return first + second
}
未命名参数的问题
JavaScript 并不是限制传入的参数的数量,在调用函数的时候,传入的实参的个数超过形参的个数的时候,超过的部分就称为了未命名参数,在ES5之前,我们一般可以通过arguments对象来获取到未命名参数的值,但是略显繁琐
<script type="text/javascript">
function foo(a){
console.log(a)
console.log(arguments[1]) // 取得传入的多余的参数
}
foo(2,3)
</script>
ES6,提供了一种更加优雅处理未命名参数的问题:剩余参数(Rest Parameters)
语法:function a (a, … b){ }
剩余参数使用三个点(…)和变量名表示
<script type="text/javascript">
function foo(a,...b){
console.log(a)
console.log(b instanceof Array) // true,多余的参数都被放入了b中,b其实就是一个数组
}
foo(2,3,4,6)
</script>
注意:
- 函数最多只能有一个剩余参数b,而且这个剩余参数必须位于参数列表的最后位置
- 虽然有了剩余参数,但是arguments仍然存在,但是arguments完全无视了剩余参数的存在
- 剩余参数是在函数声明的时候出现的
函数中的扩展运算符
例如:Math中的max函数可以返回任意多个参数中的最大值,但是如果这些参数在一个数组中,则没有办法直接传入,以前通用的做法是使用apply方法
看下面的代码:
<script type="text/javascript">
let values = [25,50,75,100]
console.log(Math.max.apply(Math,values)) // 100
</script>
上面这种方法虽然可行,但是总是不是那么直观
使用ES6提供的扩展运算符可以很容易的解决这个问题,在数组前加前缀 …(三个点)
<script type="text/javascript">
let values = [25,50,75,100]
console.log(Math.max(...values)) // 使用扩展运算符,相当于拆解了数组了
console.log(Math.max(...values,200)) // 也可以使用扩展运算符合参数的混用,则这个时候就有5个参数与比较了
</script>
注意:剩余参数和扩展运算符都是使用三个点作为前缀,但是他们呢使用的位置是不一样的
- 剩余参数是用在函数的声明的时候的参数列表中,而且必须在参数列表的后面
- 扩展运算符是用在函数调用的时候作为实参来传递的,在实参中的位置没有限制
全新的函数:箭头函数(=>)
ECMAScript 6 最有意思的部分之一就是箭头函数,正如其名,箭头函数由“箭头”(=>)这种新的语法来定义
其实在别的语言中早就有了这种语法结构,不过他们叫拉姆达表达式
箭头函数语法
// 基本语法如下:
(形参列表) => {
// 函数体
}
// 箭头函数可以赋值给变量,也可以像匿名函数一样直接作为参数传递
- 实例1:
<script type="text/javascript">
var sum = (num1,num2) => {
return num1 + num2
}
console.log(sum(3,4))
// 前面的箭头函数等同于下面的传统函数
var add = function(num1,num2) {
return num1 + num2
}
console.log(add(2,4))
</script>
如果函数体内只有一行代码,则包裹函数体的大括号 ({ }) 完全可以省略,如果有return,return 关键字也可以省略
如果函数体内有多条语句,则 { } 不能省略
- 实例2:
<script type="text/javascript">
var sum = (num1, num2) => num1 + num2
console.log(sum(5,4))
// 前面的箭头函数等同于下面的传统函数
var add = function(num1,num2) {
return num1 + num2
}
console.log(add(2,4))
// 如果这一行代码是没有返回值的,则方法的返回自也是undefined
var foo = (num1,num2) => console.log("aaa")
console.log(foo(3,4)) // 这二个地方的返回值就是undefined
</script>
如果箭头函数只有一个参数,则包裹参数的小括号可以省略,其余情况下都不可以省略,当然如果不传入参数也不可以省略
- 实例3:
<script type="text/javascript">
var foo = a => a + 3 // 因为只有一个参数,所以()可以省略
console.log(foo(4)) // 7
</script>
如果想直接返回一个js对象,而且还不想添加传统的大括号和return,则必须给整个对象添加一个小括号()
- 实例4:
<script type="text/javascript">
var foo = () => ({name:'lisi',age:30})
console.log(foo())
// 等同于下面的
var foo1 = () => {
return {
name:'lisi',
age:30
}
}
</script>
使用箭头函数实现函数自执行
<script type="text/javascript">
var person = (name => {
return {
name:name,
age:30
}
})('zs')
console.log(person)
</script>
箭头函数中无this绑定(No this Binding)
在ES5之前this的绑定是个比较麻烦的问题,稍不注意就达不到自己想要的效果,因为this的绑定和定义位置无关,只和调用方式有关
在箭头函数中则没有这样的问题,在箭头函数中,this和定义时的作用域相关,不用考虑调用方式
箭头函数没有this绑定,意味着this只能通过查找作用域链来确定,如果箭头函数被另一个不包含箭头函数的函数囊括,那么this的值和该函数中的this相等,否则this的值为window
<script type="text/javascript">
var PageHandler = {
id:'123456',
init:function(){
document.addEventListener('click',
event => this.doSomething(event.type),false) // 在此处this的和init函数内的this相同
},
doSomething:function(type){
console.log('Handling' + type + 'for' + this.id)
}
}
PageHandler.init()
</script>
看下面的一段代码:
<script type="text/javascript">
var p = {
foo:() => console.log(this) // 此处this为window
}
p.foo()
// 输出为window对象,并不是我想要的,所以在定义对象的方法的时候应该避免使用箭头函数
// 箭头函数一般用在传递参数,或者在函数内部声明函数的时候使用
</script>
说明:
- 箭头函数作为一个使用完就扔的函数,不能作为构造函数使用,也就是不能使用new的方式来使用箭头函数
- 由于箭头函数中的this与函数的作用域相关,所以不能使用call、apply、bind来重新绑定this,但是虽然this不能重新绑定,但是还是可以使用call和apply方法去执行箭头函数的
== 无arguments绑定==
虽然箭头函数没有自己的arguments对象,但是在箭头函数内部还是可以使用它外部函数的arguments对象的
<script type="text/javascript">
function foo(){
// 这里的arguments是foo函数的arguments对象,箭头函数自己没有arguments对象的
return () => arguments[0] // 箭头函数的返回值是foo函数的第一个参数
}
var arrow = foo(4,5)
console.log(arrow())
</script>
对象功能的扩展
在JavaScript中,几乎多有的类型都是对象,所以使用好对象,对提示JavaScript的性能很重要
ECMAScript 6 给对象的各个方面,从简单的语法扩展到操作与交互,都做了改进
对象类别
ECMAScript 6 规范明确定义了每种对象类别,理解该术语对于从整体上认识该门语言显得十分重要,对象类别包括:
- 普通对象(ordinary object)拥有 JavaScript 对象所有的默认行为
- 特异对象(exotic object)的某些内部行为和默认的有所差异
- 标准对象(standard object)是ECMAScript 6 中定义的对象,例如Array,Date等,他们既可能是普通也可能是特异对象
内置对象(built-in object)指JavaScript 执行环境开始运行时已存在的对象,标准对象均为内置对象