没有块级作用域var、有块级作用域let、不可变常量const使用注意事项

小码哥呀

已于 2022-02-08 11:14:16 修改

阅读量256

点赞数

分类专栏： VUE 文章标签：前端 vue

于 2021-11-08 15:05:16 首次发布

本文链接：https://blog.csdn.net/qq_46112274/article/details/121207902

版权

VUE 专栏收录该内容

62 篇文章 8 订阅

订阅专栏

这里写目录标题

1、块级作用域let和var
2、什么时候使用const?
3、const使用注意事项

1、块级作用域let和var

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

1.1、块级作用域var

1.1.1、变量var的作用域

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
  <div id="app">
  </div>
  <script src="../js/vue.js"></script>
  <script>
    //1.变量作用域：变量在什么范围内可用
    {
      var name = 'why';
      console.log(name)
    }
    console.log(name);
    
  </script>
</body>
</html>

在这里插入图片描述

1.1.2、var没有块级作用域引发的问题,在大括号外部任然可以修改name变量

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
  <div id="app">
    <button>按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
    <button>按钮4</button>
    <button>按钮5</button>
  </div>
  <script src="../js/vue.js"></script>
  <script>
    //1.变量作用域：变量在什么范围内可用
    // {
    //   var name = 'why';
    //   console.log(name)
    // }
    // console.log(name);

    //2.没有块级作用域引发的问题,在大括号外部任然可以修改name变量
    var func;
    if(true){
      var name= 'why'
    
      func = function(){
        console.log(name)
      }
    }
    name='kobe';
    func()

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

在这里插入图片描述

1.1.3、var没有块级作用域引发的问题

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
  <div id="app">
    <button>按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
    <button>按钮4</button>
    <button>按钮5</button>
  </div>
  <script src="../js/vue.js"></script>
  <script>
    //1.变量作用域：变量在什么范围内可用
    // {
    //   var name = 'why';
    //   console.log(name)
    // }
    // console.log(name);

    //2.没有块级作用域引发的问题,在大括号外部任然可以修改name变量
    // var func;
    // if(true){
    //   var name= 'why'
    
    //   func = function(){
    //     console.log(name)
    //   }
    // }
    // name='kobe';
    // func()

    //3.没有块级作用域引发的问题：for的块级
    var btns = document.getElementsByTagName('button');
    for(var i = 0;i<btns.length; i++){
      btns[i].addEventListener('click',function(){
        console.log('第' + i + '个按钮被点击');
      })
    }
    //使用闭包解决上述问题
    // for(var i = 0;i<btns.length; i++){
    //   (function (num){
    //     btns[i].addEventListener('click',function(){
    //       console.log('第' + num + '个按钮被点击');
    //     })
    //   })
    //   (i)
    // }
      
  </script>
</body>
</html>

在这里插入图片描述

1.2、块级作用域let

ES6中引入了let、let它是有if和for的块级作用域

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
  <div id="app">
    <button>按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
    <button>按钮4</button>
    <button>按钮5</button>
  </div>
  <script src="../js/vue.js"></script>
  <script>
    //ES5之前因为if和for都没有块级作用域概念，所以在很多时候，我们都必须借助于function
    //作用域来解决外面变量的问题
    //ES6中引入了let、let它是有if和for的块级作用域
    //1.变量作用域：变量在什么范围内可用
    // {
    //   var name = 'why';
    //   console.log(name)
    // }
    // console.log(name);

    //2.没有块级作用域引发的问题,在大括号外部任然可以修改name变量
    // var func;
    // if(true){
    //   var name= 'why'
    
    //   func = function(){
    //     console.log(name)
    //   }
    // }
    // name='kobe';
    // func()

    //3.没有块级作用域引发的问题：for的块级
    // var btns = document.getElementsByTagName('button');
    // for(var i = 0;i<btns.length; i++){
    //   btns[i].addEventListener('click',function(){
    //     console.log('第' + i + '个按钮被点击');
    //   })
    // }
    //使用闭包解决上述问题
    // for(var i = 0;i<btns.length; i++){
    //   (function (num){
    //     btns[i].addEventListener('click',function(){
    //       console.log('第' + num + '个按钮被点击');
    //     })
    //   })
    //   (i)
    // }
      
    const btns = document.getElementsByTagName('button');
    for(let i = 0;i<btns.length; i++){
      btns[i].addEventListener('click',function(){
        console.log('第' + i + '个按钮被点击');
      })
    }

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

在这里插入图片描述

2、什么时候使用const?

当我们的标识符不会被再次赋值时，就可以使用const来保障数据安全性。
建议：在es6开发中，优先使用const，只有需要改变某一标识符时才使用let

3、const使用注意事项

3.1、一旦给const修饰的标识符赋值之后，该标识符不能被修改

 //注意1、一旦给const修饰的标识符赋值之后，该标识符不能被修改
  // const name = 'abc';
  // name = 'cdf';

在这里插入图片描述

3.2、在使用const定义标识符时，必须进行赋值

//注意2、在使用const定义标识符时，必须进行赋值
const name;

在这里插入图片描述

3.3、常量含义指向的对象不能被修改，但是对象内部的属性可以被修改

 //注意3、常量含义指向的对象不能被修改，但是对象内部的属性可以被修改
  const people = {
    name:'me',
    age:18,
    height:1.88
  }
  console.log(people)

  people.name='kebo',
  people.age=40,
  people.height=2.18
  console.log(people)

在这里插入图片描述

小码哥呀

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
没有块级作用域var、有块级作用域let、不可变常量const使用注意事项

const的使用和注意点1、什么时候使用const?2、const使用注意事项2.1、一旦给const修饰的标识符赋值之后，该标识符不能被修改2.2、在使用const定义标识符时，必须进行赋值2.3、常量含义指向的对象不能被修改，但是对象内部的属性可以被修改1、什么时候使用const?当我们的标识符不会被再次赋值时，就可以使用const来保障数据安全性。建议：在es6开发中，优先使用const，只有需要改变某一标识符时才使用let2、const使用注意事项2.1、一旦给const修饰的标识符赋值之
复制链接

扫一扫