let

let 声明的成员只会在所声明的块中生效
let 修复了变量声明提升现象

  1. // let 声明的成员只会在所声明的块中生效 -------------------------------------------
  2. if (true) {
  3.   // var foo = 'zce'
  4.   let foo = 'zce'
  5.   console.log(foo)
  6. }
  8. // let 修复了变量声明提升现象 --------------------------------------------
  10. // console.log(foo)
  11. // var foo = 'zce'
  13. console.log(foo)
  14. let foo = 'zce'

let 在 for 循环中的表现

  1. // let 在 for 循环中的表现 ---------------------------------------------------
  3. for (var i = 0; i < 3; i++) {
  4.   for (var i = 0; i < 3; i++) {
  5.     console.log(i)
  6.   }
  7.   console.log('内层结束 i = ' + i)
  8. }
  9. // 0 1 2 内层结束 i = 3
  11. for (var i = 0; i < 3; i++) {
  12.   for (let i = 0; i < 3; i++) {
  13.     console.log(i)
  14.   }
  15.   console.log('内层结束 i = ' + i)
  16. }
  17. // 0 1 2 内层结束 i = 0
  18. // 0 1 2 内层结束 i = 1
  19. // 0 1 2 内层结束 i = 2
  21. // for 循环会产生两层作用域 ----------------------------------
  23. for (let i = 0; i < 3; i++) {
  24.   let i = 'foo'
  25.   console.log(i)
  26. }
  27. // foo foo foo
  29. // let i = 0
  31. // if (i < 3) {
  32. //   let i = 'foo'
  33. //   console.log(i)
  34. // }
  36. // i++
  38. // if (i < 3) {
  39. //   let i = 'foo'
  40. //   console.log(i)
  41. // }
  43. // i++
  45. // if (i < 3) {
  46. //   let i = 'foo'
  47. //   console.log(i)
  48. // }
  50. // i++

let 应用场景：循环绑定事件，事件处理函数中获取正确索引

  1. // let 应用场景：循环绑定事件，事件处理函数中获取正确索引 -----------------------------------------------------
  3. var elements = [{}, {}, {}]
  4. for (var i = 0; i < elements.length; i++) {
  5.   elements[i].onclick = function () {
  6.     console.log(i)
  7.   }
  8. }
  9. elements[2].onclick()//3
  11. // 闭包保存i
  12. var elements = [{}, {}, {}]
  13. for (var i = 0; i < elements.length; i++) {
  14.     elements[i].onclick = (function (i) {
  15.         return function () {
  16.             console.log(i)
  17.         }
  18.     })(i)
  19. }
  20. elements[0].onclick()//0
  21. elements[0].onclick()//0
  22. elements[1].onclick()//1
  24. // 使用let绑定
  25. var elements = [{}, {}, {}]
  26. for (let i = 0; i < elements.length; i++) {
  27.     elements[i].onclick = function () {
  28.         console.log(i)
  29.     }
  30. }
  31. elements[1].onclick()//1

const

const声明的成员只会在所声明的块中生效
const声明的变量变量值无法被修改，对于数据成员的修改是没有问题的

  1. // const name = 'zce'
  2. // 恒量声明过后不允许重新赋值
  3. // name = 'jack'
  5. // 恒量要求声明同时赋值
  6. // const name
  7. // name = 'zce'
  9. // 恒量只是要求内层指向不允许被修改
  10. // const obj = {}
  11. // 对于数据成员的修改是没有问题的
  12. // obj.name = 'zce'
  14. // obj = {}
  16. if (1 < 3) {
  17.     const a = 2
  18. }
  19. console.log(a)