ES5及ES6常用对比及个人总结（var、let、const、对象字面量增强写法）

---

1、关于var和let

var的设计可以看成JavaScript语言设计上的错误，但这种错误多半不能修复和移除，因为需要向后兼容，大概2008年左右，Brendan Eich就决定修复这个问题，于是他添加了一个新的关键字：let

- ES5 var

ES5的var，在if和for循环中，没有块级作用域的概念
if 代码例：

var func
if(true){
  var name = 'sky'
  func = function () {
    console.log(name) // 此处打印结果name为 ‘Ssky’
  }
}
name = 'Ssky'
func()

for循环 代码例[^1]：

var btns = document.getElementsByTagName('button')
for (var i = 0; i < btns.length; i++) {
  btns[i].addEventListener('click',function(){
    console.log('第' + i + '个按钮被点击') // 此处打印结果，i为btns.length+1的数字
  })
}

在ES5之前，这种问题可以通过函数自带的作用域来解决（产生一个闭包）
代码例如下：

var btns = document.getElementsByTagName('button')
for (var i = 0; i < btns.length; i++) {
  (function (i) {
    btns[i].addEventListener('click', function () {
      console.log('第' + i + '个按钮被点击') // 此处打印结果，i为当前点击button的索引数
    })
  })(i)
}

- ES5 var 总结

也就是说，内部定义的变量，会影响到外部定义的同名变量，像如上for循环的代码例[^1]，返回的i则是循环执行完毕后的最终的那个i。
解决的方式可以通过添加一个匿名函数产生函数作用域，使函数内的i变为当前i，而不受外部i的影响。

- ES6 let

在ES6中，可以利用let轻松解决这种现象，
代码例：

const btns = document.getElementsByTagName('button')
for(let i=0 ; i<btns.length ; i++){
  btns[i].addEventListener('click', function () {
    console.log('第' + i + '个按钮被点击') // 此处打印结果，i为当前点击button的索引数
  })
}

- ES6 let 总结

let 定义的变量，将只作用于当前作用域，如外部有同名变量，则互不影响，因此上面例子中，点击每个button时只返回for循环内部的那个当前的i，并不受其他i的影响

---

2、关于const

- 在很多语言中已经存在，比如C/C++，主要作用是将某个变量修饰为常量
- 在JavaScript中也是如此，使用const修饰的标识符为常量，且不允许再次赋值

- 使用const的注意事项

注意事项一
const被赋值的标识符，不能修改，否则报错，代码例：

const name = 'sky'
name = 'abc'

注意事项二
不要用const声明一个未被赋值的变量，否则报错，代码例：

const age

注意事项三
const指向的对象(地址)不能被修改，但是对象内的属性可以被修改，代码例：

const obj = {
  name: 'sky',
  age: 18,
  height: 1.80
}

obj.name = 'Ssky',
obj.age = 17,
obj.height = 1.75

- ES6 const 总结

当修饰的标识符不会被再次赋值时，可以使用const来保证数据的安全性，在ES6开发中，优先使用const，只在需要改变某个标识符时才使用let。

3、ES6中对象字面量的增强写法

- 属性的增强写法

代码例：

const name = 'sky'
const age = 18
const height = 1.80

// ES5的写法
var obj = {
  name: name,
  age: age,
  height: height
}

// ES6的写法
const obj = {
  name,
  age,
  height
}

- 函数的增强写法

代码例：

// ES5的写法
var obj = {
  get: function(){

  },
  set: function () {

  }
}

// ES6的写法
const obj = {
  get(){

  },
  set(){

  }
}

---

- Recorded by Scorpio_sky@2020-08-25