ECMAScript新特性- let、const

var、 let、const 的区别

1、var是ES5提出的，let和const是ES6提出的。

2、let和var声明的是变量，声明之后可以更改，声明时可以不赋值； const声明的是常量，一旦声明必须赋值，并且声明后不能再修改；但如果声明的是复合类型数据，可以修改其属性。

/*
    const 在声明的同时 就必须要设置一个初始值 
    声明和赋值不能像var那样 分开
*/
// const name
// name = 'zsl'  // 会报错


/*
  注意： const所声名的成员不能被修改只是不允许在声明了过后
         重新去指向一个新的内存地址,并不是不允许修改恒量中的属性成员
*/
const obj = {}
obj.name = 'zsl'  // 这种情况并没有修改obj所指向的内存地址 只是修改了内存空间的数据 所以是被允许的


obj = {} // 如果是这样 则会改变obj的内存地址指向 会报错

3、var允许重复声明变量，后一个变量会覆盖前一个变量。let和const在同一作用域不允许重复声明变量，会报错。

4、var声明的变量存在变量提升（将变量提升到当前作用域的顶部），即var声明的变量可以在声明之前调用，值为undefined。
let和const不存在变量提升。即它们所声明的变量一定要在声明后使用，否则报ReferenceError错。

5、var是函数作用域，let，const是块级作用域注意：作用域 -> 某个成员能够起作用的范围；块 -> 指的是在代码中用花括号包裹起来的范围在函数中声明了var，整个函数内都是有效的，比如说在for循环内定义的一个var变量

var elements = [{}, {}, {}]

// for (var i = 0; i < elements.length; i++) {
//   elements[i].onClick = function() {
//     console.log(i)
//   }
// }

/*
  打印出都是3的原因
  这里的i 始终都是全局作用的i，在循环完之后，i就会被累加到了3
  所以无论打印的是哪个元素,结果都是一样的
*/
// elements[1].onClick() // 3
// elements[2].onClick() // 3

// 使用闭包可以解决这个问题
// for (var i = 0; i < elements.length; i++) {
//   elements[i].onClick = (function(i) {
//     return function() {
//       console.log(i)
//     }
//   })(i)
// }

// elements[1].onClick() // 1
// elements[2].onClick() // 2

使用let 块级作用域

for (let i = 0; i < elements.length; i++) {
  elements[i].onClick = function() {
    console.log(i)
  }
}

elements[1].onClick() // 1
elements[2].onClick() // 2

ECMAScript新特性- let、const

var、 let、const 的区别

猜你喜欢