【ECMAScript 5_6_7】2、ES6——let/const关键字

80 阅读 0 评论 53 点赞

我是靠谱客的博主忧伤蜡烛，最近开发中收集的这篇文章主要介绍【ECMAScript 5_6_7】2、ES6——let/const关键字，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

一、let关键字

let
1. 作用:
  * 与var类似, 用于声明一个变量
2. 特点:
  * 在块作用域内有效
  * 不能重复声明
  * 不会预处理, 不存在变量提升
3. 应用:
  * 循环遍历加监听
  * 使用let取代var是趋势

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>01_let关键字</title>
</head>
<body>

<button>测试1</button>
<br>
<button>测试2</button>
<br>
<button>测试3</button>
<br>
<script type="text/javascript">
  /*console.log(a)
  var a = 5
  a = 6
  console.log(a)*/

  //console.log(a)  // let定义的变量不会预处理，不存在变量提升
  let a = 5
  //let a = 6  // let定义的变量不能重复声明
  console.log(a)

  /*var btns = document.getElementsByTagName('button')
  for (var i = 0; i < btns.length; i++) {
    (function (i) {
      var btn = btns[i]
      btn.onclick = function () {
        alert(i)  // 必须利用闭包才会延长内部函数局部变量生命周期使用外部变量的值
      }
    })(i)
  }*/

  var btns = document.getElementsByTagName('button')
  for (let i = 0; i < btns.length; i++) {  // let定义的变量会有一个块作用域，在块作用域内有效
    var btn = btns[i]
    btn.onclick = function () {
      alert(i)
    }
  }
</script>
</body>

</html>

二、const关键字

const
1. 作用:
  * 定义一个常量
2. 特点:
  * 不能修改
  * 其它特点同let
3. 应用:
  * 保存不用改变的数据

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>02_const关键字</title>
</head>
<body>
<script type="text/javascript">
  let NAME = 'one'
  NAME = 'dean'
  console.log(NAME)

  const AGE = 5
  // AGE = 6  // const定义的变量不能修改
  console.log(AGE)

</script>
</body>
</html>