一、新的变量声明方式 let/const
与var不同,新的变量声明方式带来了一些不一样的特性,其中最重要的两个特性就是提供了块级作用域与不再具备变量提升。
//es5
console.log(a) --> undefined
var a = 10
//es6
console.log(a) --> a is not defined
let a = 10
代码编译成es5的时候还是会有变量提升
我们常常使用let来声明一个值会被改变的变量,而使用const来声明一个值不会被改变的变量,也可以称之为常量。
当值为基础数据类型时,那么这里的值,就是指值本身。
基础数据类型包括(undefined、null、Number、String、Boolean、Symbol)
而当值对应的为引用数据类型时,那么我这里说的值,则表示指向该对象的引用。这里需要注意,正因为该值为一个引用,只需要保证引用不变就可以,我们仍然可以改变该引用所指向的对象。
当我们试图改变const声明的变量时,则会报错。
const a = null
a = 10 //会报错
const b = []
b.push(1) //b = [1]不会报错
b = [] //因为[]不是基础数据类型,b只是[]在内存中的引用,实际上b是不能变的,但是[]是可以变的
二、箭头函数的使用
// es5
var fn = function(a, b) { return a + b; }
// es6 箭头函数写法,当函数直接被return时,可以省略函数体的括号
const fn = (a, b) => a + b;
// es5
var foo = function() { var a = 20; var b = 30; return a + b; }
// es6
const foo = () => { const a = 20; const b = 30; return a + b; }
箭头函数可以替换函数表达式,但是不能替换函数声明
其次还有一个至关重要的一点,那就是箭头函数中,没有this。如果你在箭头函数中使用了this,那么该this一定就是外层的this。
//ES5
var person = {
name: 'Tom',
getName: function(){
return this.name //Tom
}
}
//ES6
var person = {
name: 'Tom',
getName: () => this.name //undefined.name
}
在ES6中,会默认采用严格模式,因此this也不会自动指向window对象了,而箭头函数本身并没有this,因此this就只能是undefined
可以用ES5中保存this的方式处理
//ES6
var person = {
name: 'Tom',
getName: (){
return setTimeout(()=>this.name,1000)
}
}
//编译成es5就变成了
var person = {
name: 'Tom',
getName: function(){
let _this = this
return setTime(function (){
_this.name
})
}
}
//注意:箭头函数中无法访问arguments对象
三、模板字符串
//ES5
var name = 'Tom'
var age = 22
var s = name + '今年' + age + '岁' // Tom今年22岁
//ES6
var s = `${name}今年${age}岁` // Tom今年22岁
使用 `` 将整个字符串包裹起来,而在其中使用 ${} 来包裹一个变量或者一个表达式。
四、解析结构
//ES5
var arrary = ['Tom',22]
var object = {name: 'Tom', age: 22}
var name = object.name
var age = object.age
//或者
var name = array[0]
var age = array[1]
//ES6
var [name, age] = array //效果和var name = array[0],var age = array[1]一样
var {name, age} = object //效果和var name = object.name,var age = object.age一样
数组以序列号一一对应,这是一个有序的对应关系。
而对象根据属性名一一对应,这是一个无序的对应关系。
五、展开运算符
var arr1 = [1,2,3]
var arr2 = [4,5,6]
var obj1 = {a:1, b:2, c:3}
var obj2 = {d:3, e:5, f:6}
1、连接arr1和arr2
var arr = [...arr1, ...arr2] //[1,2,3,4,5,6]
2、连接obj1和obj2
var obj = {...obj1, ...obj2} //{a:1, b:2, c:3, d:3, e:5, f:6}
六、函数参数默认值
//ES5
function add(x, y) {
var x = x || 10
var y = y || 20
return x + y
}
//ES6
function add(x=10, y=20) return x+y