JavaScript let、const与var的区别_let,const和var的区别-优快云博客

本文链接：https://blog.youkuaiyun.com/UserPython/article/details/108304383

ES5中的var是没有块级作用域的（if/for）

ES5中的let是有块级作用域的（if/for）

ES5之前因为if和for都没有块级作用域的概念，所以在很多时候，我们都必须借助于function的作用域来解决外面变量的问题（闭包）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vuejs</title>
    <script src="js/vue.js"></script>
</head>
<body>
  <button>按钮1</button>
  <button>按钮2</button>
  <button>按钮3</button>
  <hr>

  <input type="button" value="按钮1">
  <input type="button" value="按钮2">
  <input type="button" value="按钮3">
<script>
  // ES5之前因为if和for都没有块级作用域的概念，所以在很多时候，
  // 我们都必须借助于function的作用域来解决外面变量的问题（闭包）

  // ES6中，加入了let，let它是有if和for的块级作用域


  // var没有块级作用域，在变量作用域外一样可以调用
  {
    var name = "breezy";
    console.log(name);
  }
  console.log(name);

  // 没有块级作用域引起的问题：if的块级
  var func;
  if(true){
    var name2 = "kuse";
    func = function(){
      console.log(name2);
    }
  }
  // name2 = "KU";
  func();

  // 没有块级作用域引起的问题：for的块级
  // 闭包可以解决这个问题，因为函数是一个作用域
  var btns = document.getElementsByTagName("button");
  for(var i = 0; i < btns.length; i++){
  	 //错误方式
    // btns[i].addEventListener('click', function(){
    //   console.log("第" + i + "个按钮被点击");
    // })

    // 闭包写法
    (function(num){
      btns[num].addEventListener('click', function(){
      console.log("第" + num + "个按钮被点击");
    })
    })(i)
  }


  // ES6写法
  const btnss = document.getElementsByTagName("input");
  for(let i = 0; i < btnss.length; i++){
    btnss[i].addEventListener("click", function(){
      console.log("第" + i + "个按钮被点击");
    })
  }
</script>

</body>
</html>

const定义某个变量为常量，不可以再次赋值

当我们修饰的标识符不会被再次赋值时，就可以使用const来保证数据的安全性

<script>
  const a = 20;
  // a = 30; //错误：不可以再次修改

  // const name; //错误：const修饰的标识符必须赋值

  // 常量的含义是指向的对象不能修改，但是可以改变对象内部的属性
  const obj = {
    name:'breezy',
    age: 18
  }
  console.log(obj);
  
  obj.name = "kuse";
  obj.age = 20;
  console.log(obj);
</script>

对象字面量增强写法

<script>
  // 1、属性的增强写法
  const name = "breezy";
  const age = 18;
  const height = 1.88;

  // ES5的写法
  const obj = {
    name: name,
    age: age,
    height: height
  }
  console.log(obj);

  // ES6的写法
  const obj2 = {
    name,
    age,
    height
  }
  console.log(obj2);
</script>

<script>
  // 2、函数的增强写法
  // ES5的写法
  const obj = {
    run: function(){

    }, 
    eat: function(){

    }
  }

  // ES6的写法
  const obj2 = {
    run(){

    },
    eat(){

    }
  }
</script>