ES6 let和const定义变量与常量的应用实例分析

ES6 let和const定义变量与常量的应用实例分析

let的应用实例

示例1

// ES6之前
for(var i=0; i<5; i++) {
  setTimeout(function() {
    console.log(i)
  }, 1000)
}

// ES6之后
for(let i=0; i<5; i++) {
  setTimeout(function() {
    console.log(i)
  }, 1000)
}

在ES6之前，使用var方式定义变量，会造成变量提升的问题，导致在循环执行的时候，setTimeout中的回调函数都会使用相同的i值，即最终输出5个5。

而使用ES6新增的let关键字定义i变量，则可解决这个问题，每次迭代的i值都能够得到很好地保留。

示例2

let once = function(fn) {
  let result
  return function() {
    if(fn) {
      result = fn.apply(this, arguments)
      fn = null
    }
    return result
  }
}

let fn = function() {
  console.log('执行了一次');
  return 'result'
}

let f = once(fn)
console.log(f());
console.log(f());

在上述示例中，我们利用let关键字创建了一个函数once，该函数只有第一次调用会执行其传入的函数fn。每次调用之后，fn就变成null，不再执行，而结果result会一直保存。这一过程中用到了let的块级作用域，从而保证fn和result只在once函数内部保存，而不会暴露在全局环境中。

const的应用实例

示例1

const PI = 3.1415926
console.log(PI)

在上述示例中，我们利用const关键字定义了一个常量PI，值为圆周率，由于圆周率是不可变量，所以使用const定义符合逻辑。值得注意的是，一旦使用const定义常量后，常量的值不能再被修改。

示例2

const obj = {
  name: '小明',
  age: 18,
  gender: 'male'
}
obj.age = 20
console.log(obj.age)

在上述示例中，我们使用const关键字定义了一个对象obj，虽然我们修改了其中一个属性age的值，但是并未改变obj的引用地址。这是因为const定义的是常量引用地址，而不是其内部属性的值。在需要保证引用地址不变的情况下，使用const定义对象符合最佳实践。

总的来说，let和const关键字的应用范围更加严谨，能够有效避免一些不必要的问题，同时通过块级作用域的引入，使代码更加规范。

阅读剩余 40%