ES6，划时代的JavaScript版本｜ 青训营笔记

这是我参与「第五届青训营 」伴学笔记创作活动的第 5 天

前言

在之前的学习中，我们对整个JavaScript的一些特性进行了较为深刻的了解，接下来，我们将重点讨论ECMAScript版本对JavaScript的影响。

ES6是JavaScript划时代的里程碑

为什么这么说呢，因为es5到es6的JavaScript更新了太多实用的新特性。这些新特性多到我们需要单独的一篇文章来了解它。

具有块级作用域的let和const

es6中对变量的命名新增let标注，与var不同，let定义的变量具有块级作用域。具体代码请看如下。

let flag = true
let t = 0

if(flag) {
    let t = 1
    console.log(t)
}

这行代码输入结果为1，而如果将let替换为var则直接导致程序崩溃。原因是var不具有块级作用域，在代码运行开始会进行变量飞升，即所有var定义的变量移动至代码首部，这样就造成了t的重复定义。let带来的作用域为我们带来了极大的便利。

const用于声明常量，在es6以前JavaScript没有专门用于定义常量的关键字，const的出现也为防止数据被无意间修改带来了极大的帮助，但值得注意的是，在面对引用数据类型（如对象，数组）时，const只能够保证其地址空间固定不变，但不保证其中成员不变，即const定义的对象和数组可以修改其成员但不能直接替换对象或数组。

const obj = { a: 1 }
obj.a = 2 //正确
obj = { a: 2} //错误

箭头函数

在es6以前，我们使用function关键字定义函数，但在es6中，我们有了箭头函数这个崭新的选择。箭头函数不支持先使用后定义，而function会飞升，这点与var类似。另外，箭头函数修正了JavaScript函数中this指向不明确的问题，具体如下

function hello1() {
    console.log(this)
}

const hello2 = () => {
    console.log(this)
}

const t = {}

t.hello1 = hello1
t.hello2 = hello2

t.hello1() //输出对象t
t.hello2() //输出window(浏览器环境下)

function会随着调用的对象而将其this指针变化，但箭头函数的this永远指向定义它的环境。浏览器环境下在最外层作用域定义即为指向window。

展开运算符

es6中我们可以使用便利优雅的写法扩展对象和数组，例如我们要合并两个数组

const a1 = [1, 2]
const a2 = [3, 4, 5]
console.log([...a1, ...a2])

通过...我们可以将原有的数组或对象展开，避免了各种不美观的for循环的出现，让代码可读性更上一层楼。

总结

本次我们再次了解了es6对JavaScript带来的极大影响，这对我们以后进行JavaScript编码带来的收益绝对是巨大的。