25 JavaScript学习:var let const

JavaScript全局变量

在这里插入图片描述

JavaScript中全局变量存在多种情况和定义方式,下面详细解释并提供相应的举例:

  1. 使用var关键字声明的全局变量:

    var globalVar = "我是全局变量";
    
  2. 未使用var关键字声明的变量会成为全局变量(不推荐使用):

    anotherGlobalVar = "我也是全局变量";
    
  3. 在全局作用域中声明的函数也是全局变量:

    function globalFunction() {console.log("我是全局函数");
    }
    
  4. 全局对象(window)上直接定义的属性也会成为全局变量:

    window.globalProperty = "我是全局对象的属性";
    
  5. ES6之前没有块级作用域概念,因此在if语句、for循环等代码块中声明的变量,如果没有使用var,也会成为全局变量:

    if (true) {blockScopedVar = "我在if块中声明,但成为了全局变量";
    }
    

需要注意全局变量可能带来的问题,如命名冲突和不可预测的值改变。因此,在编程中应当尽量避免滥用全局变量,可以使用IIFE(立即调用函数表达式)或者ES6的模块化语法,来封装变量,减少全局污染的风险。

JavaScript局部变量

在这里插入图片描述

JavaScript中的局部变量是指在函数内部或代码块内部声明的变量,只能在其所属的函数或代码块内部访问。以下是 JavaScript 中局部变量的各种情况详解和举例:

  1. 使用关键字 varletconst 在函数内部声明的变量为局部变量:
function localVariableExample() {var localVar = "我是局部变量";let anotherLocalVar = "我也是局部变量";const constVar = "我是一个常量局部变量";// 在这个函数内可以访问 localVar、anotherLocalVar 和 constVar
}
  1. 使用 function 关键字声明的函数内部的参数也是局部变量:
function myFunction(param) {// 这里的 param 是局部变量
}
  1. ES6 的箭头函数的参数也是局部变量:
const myArrowFunction = (param) => {// 这里的 param 是局部变量
};
  1. 在代码块内(ES6引入了块级作用域)使用 letconst 关键字声明的变量也是局部变量:
if (true) {let blockScopedVar = "我是块级作用域的局部变量";const anotherBlockScopedVar = "我也是块级作用域的局部变量";// 只能在 if 代码块内访问 blockScopedVar 和 anotherBlockScopedVar
}

局部变量只在其所属的函数或代码块内部可见,出了这个范围就无法访问。这种限制有助于避免命名冲突和提高代码的可维护性。

JavaScript块级作用域

JavaScript在ES6中引入了块级作用域,允许使用letconst声明变量,这些变量的作用域仅限于包含它们的代码块内部。

下面是关于块级作用域的详细说明和举例:

  1. 使用let声明的变量:
{let x = 2;console.log(x); // 输出 2
}
console.log(x); // 报错,因为x在块级作用域外部不可见
  1. 使用const声明的常量也具有块级作用域:
{const PI = 3.14;console.log(PI); // 输出 3.14
}
console.log(PI); // 报错,因为PI在块级作用域外部不可见
  1. for循环中的块级作用域:
for (let i = 0; i < 3; i++) {console.log(i); // 输出 0, 1, 2
}
console.log(i); // 报错,因为i在for循环中具有块级作用域,超出循环后不可见

块级作用域可在代码中更好地控制变量的作用范围,避免变量提升和命名冲突等问题。这种特性在编写复杂的JavaScript程序时尤其有用。

JavaScript重新定义变量

在JavaScript中,使用let关键字可以重新定义变量,而使用var关键字则不能。重新定义变量指的是在同一作用域内多次声明同一个变量名,后面的声明将覆盖前面的声明。

下面分别以letvar来说明重新定义变量的情况:

  1. 使用let重新定义变量:
let x = 10;
console.log(x); // 输出 10
let x = 20; // 可以重新定义x,不会报错
console.log(x); // 输出 20

在使用let声明变量时,可以在同一作用域内多次声明同一个变量名,后面的声明会覆盖前面的声明。

  1. 使用var重新定义变量:
var y = 30;
console.log(y); // 输出 30
var y = 40; // 重新定义y,不会报错
console.log(y); // 输出 40

在使用var声明变量时,由于var存在变量提升的特性,重新定义变量也是有效的,后面的声明会覆盖前面的声明。

总结来说,使用letvar都可以进行变量的重新定义,但建议在ES6及以后的代码中使用letconst来声明变量,以避免变量提升等问题,并更好地控制作用域。

JavaScript循环作用域

在 JavaScript 中,循环并不会创建新的作用域,这意味着在使用 var 声明变量时,循环体内部声明的变量会被提升到循环外部的作用域中。这可能导致意外的行为,特别是在使用异步操作时。

举例来说:

for (var i = 0; i < 3; i++) {setTimeout(function() {console.log(i);}, 100);
}

在上面的例子中,当 setTimeout 回调执行时,它会打印出 3,而不是预期的 0、1 和 2。这是因为 i 变量在循环内部被提升到了循环外部的作用域,以至于所有的 setTimeout 共享同一个 i 变量,并且在循环结束后才被赋值为 3。

为了避免这个问题,可以使用 letconst 声明变量,因为它们会在每次迭代中创建一个新的变量实例,从而解决了作用域共享的问题。

for (let i = 0; i < 3; i++) {setTimeout(function() {console.log(i);}, 100);
}

在这个例子中,每个 setTimeout 回调都会引用一个独立的 i 变量,因此会按照预期打印出 0、1 和 2。

HTML 代码中使用全局变量

在 HTML 中定义全局变量的方式如下:

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>使用全局变量</title></head><body><script>// 在 script 标签内部定义全局变量var globalVar = "Hello World!";function sayHello() {alert(globalVar);}</script><button onclick="sayHello()">Click me</button></body>
</html>

在上面的例子中,通过在 <script> 标签内部定义一个全局变量 globalVar 和一个函数 sayHello。当按钮被点击时,会调用 sayHello 函数来弹出全局变量 globalVar 的值。

在实际情况中,很少有必要在 HTML 中定义全局变量。通常,全局变量应该在 JavaScript 文件中定义,而不是嵌入到 HTML 中。可以使用 <script src="path/to/file.js"></script> 语法从 HTML 文件中链接到 JavaScript 文件,并在 JavaScript 文件中定义全局变量。例如:

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>使用全局变量</title></head><body><script src="global.js"></script><button onclick="sayHello()">Click me</button></body>
</html>

global.js 文件中定义全局变量和函数:

var globalVar = "Hello World!";function sayHello() {alert(globalVar);
}

这样做的好处是,将 JavaScript 代码与 HTML 文件分离开来,使代码更易于管理和维护。

const 关键字

const 是 JavaScript 中用来声明常量的关键字。使用 const 声明的变量必须进行初始化,并且一旦被赋值后就不能再被修改。这意味着 const 声明的变量是不可变的。例如:

const PI = 3.14159;

在这个例子中,PI 被赋值为 3.14159,并且不能再被改变。

与 var 和 let 不同,const 声明的作用域为块级作用域,而不是函数作用域。也就是说,在使用 const 声明的变量只在其声明所在的块内部有效。

另外需要注意的是,虽然 const 声明的变量不可修改,但如果 const 声明的变量是一个对象,那么对象的属性是可以修改的。例如:

const person = {name: 'Alice',age: 30
};// 对象的属性可以修改,但是不能重新赋值给person
person.age = 31;

总结一下,const 关键字用于声明不可变的常量,常用于声明不会被修改的值,以及避免意外的变量重复赋值。

const并非真正的常量

在 JavaScript 中,使用 const 关键字声明的变量被称为常量,因为它们在初始化后不可被重新赋值。这意味着一旦使用 const 声明变量并赋予初值后,就不能再对其进行重新赋值。

例如:

const PI = 3.14159;
PI = 3.14; // 这行代码会导致错误,因为常量PI不能被重新赋值

虽然 const 声明的变量本身是不可变的,但若该变量是一个对象,那么对象的属性是可以修改的。这意味着虽然不能给该变量赋予新的值,但仍然可以修改其属性。

例如:

const person = {name: 'Alice',age: 30
};person.age = 31; // 这里修改了对象属性,不会导致错误

因此,虽然 const 声明的变量并非完全不可变,但通过 const 声明的变量确实可以在保证不被重复赋值的情况下,允许对对象属性进行修改。

关注我,不迷路,共学习,同进步

关注我,不迷路,共学习,同进步

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.xdnf.cn/news/1410251.html

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

MathType如何使用LaTex代码编辑公式?MathType使用LaTex代码编辑公式教程 mathtype高仿latex

MathType专为解决数学公式输入问题打造&#xff0c;内置有自定义函数识别、国际性字符输入、拖放表达式、标签命名等丰富的功能&#xff0c;下面就来看看如何使用LaTex代码编辑公式吧。 MathType使用LaTex代码编辑公式教程 第一步&#xff1a;首先打开软件&#xff0c;并准备…

海亮杯总结

写在前面&#xff1a; 1001003002020270&#xff0c;rnk42&#xff0c;超级菜 你说的对&#xff0c;但是《第三届“海亮杯”》是由海亮教育集团自主研发的一款全新开放世界冒险游戏。游戏发生在一个被称作「浙江省诸暨海亮高级中学」的幻想世界&#xff0c;在这里&#xff0c;…

【电子取证篇】WinHex哈希校验值大小写转换和WinHex常规设置功能

【电子取证篇】WinHex哈希校验值大小写转换和WinHex常规设置功能 简单记录下WinHex哈希校验大小写值转换和新增加的一些功能、常用设置&#xff0c;WinHex时不时增加点小功能的&#xff0c;挺喜欢这种的&#xff0c;像挖宝藏一样&#xff0c;总会给你一些惊喜—【蘇小沐】 1、…

Python基础学习之sys.argv[0]及类似方法

前言 在Python编程中&#xff0c;经常会遇到要拿取当前代码路径或者当前代码名称&#xff0c;今天分享几个拿取的方法。 一.功能目的 拿取当前代码路径或者当前代码名称。 二.功能调研 根据搜索引擎&#xff0c;我们可以提取到以下信息&#xff1a; 1.sys.argv[0] 是脚本自身…

在浏览器中查看Revit模型:原理及实现

Greg Schleusner AIA 有一天向我提到&#xff0c;业内许多人认为带有 SVF2 的 Autodesk Viewer 是建筑模型最强大、性能最强的在线查看器之一&#xff0c;并且想知道开源 VIM 查看器和格式如何比较。 可以使用NSDT 3DConvert的 Revit插件 上传你的模型并在线查看预览&#xff…

全新神经网络架构KAN一夜爆火!200参数顶30万,MIT华人一作 | 最新快讯

白交衡宇发自凹非寺 量子位公众号 QbitAI 一种全新的神经网络架构 KAN&#xff0c;诞生了&#xff01; 与传统的 MLP 架构截然不同&#xff0c;且能用更少的参数在数学、物理问题上取得更高精度。 比如&#xff0c;200 个参数的 KANs&#xff0c;就能复现 DeepMind 用 30 万参数…

如何同时或者按顺序间隔启动多个程序

首先&#xff0c;需要用到的这个工具&#xff1a; 度娘网盘 提取码&#xff1a;qwu2 蓝奏云 提取码&#xff1a;2r1z 1、打开工具&#xff0c;切换到定时器模块&#xff0c;快捷键&#xff1a;Ctrl3 2、新建一个定时器&#xff0c;我这里演示同时打开多个程序&#xff08;比…

WPF基础应用

WPF参考原文 MVVM介绍 1.常用布局控件 1.1 布局控件 WPF&#xff08;Windows Presentation Foundation&#xff09;提供了多种布局容器来帮助开发者设计用户界面&#xff0c;以下是一些常用的布局&#xff1a; Grid: Grid是最常用的布局容器之一&#xff0c;它允许你通过定…

链表经典面试题上

目录 创作不易&#xff0c;如若对您有帮助&#xff0c;还望三连&#xff0c;谢谢&#xff01;&#xff01;&#xff01; 题目一&#xff1a;203. 移除链表元素 - 力扣&#xff08;LeetCode&#xff09; 题目二&#xff1a;206. 反转链表 - 力扣&#xff08;LeetCode&#xff…

22-ESP32-S3模数转换器(ADC)

ESP32-S3模数转换器&#xff08;ADC&#xff09; 什么是模数转换器&#xff08;ADC&#xff09;&#x1f50d;&#xff1f; 模数转换器&#xff08;ADC&#xff09;是一种将模拟信号&#xff08;如电压&#xff09;转换为数字信号的设备。在ESP32-S3中&#xff0c;ADC用于将模…

深入图像分类:使用美国手语数据集训练定制化神经网络

引言 在前一篇博客中&#xff0c;我们探讨了如何使用MNIST数据集训练一个基础的神经网络来进行手写数字识别。在本文中&#xff0c;我们将更进一步&#xff0c;使用美国手语字母表&#xff08;ASL&#xff09;数据集来构建一个定制化的图像分类模型。通过这个过程&#xff0c;…

羊大师:羊奶营养好选择

羊大师&#xff1a;羊奶营养好选择 羊奶确实是一种营养丰富的饮品&#xff0c;它被视为乳品中的精品&#xff0c;被称为“奶中之王”是世界上公认的最接近人奶的乳品。以下是一些羊奶的主要营养成分和其对人体的益处&#xff1a; 蛋白质&#xff1a;羊奶中的蛋白质含量丰富&a…

k8s部署maven项目

failed to verify certificate: x509: certificate signed by unknown authority 今天在执行kubectl get nodes的时候报的证书验证问题&#xff0c;看了一圈首次搭建k8s的都是高频出现的问题。 couldn’t get current server API group list: Get “https://kubernetes.docker…

什么是死锁?代码演示,死锁如何排查和解决

死锁的概念 死锁是指在多线程或多进程中&#xff0c;两个或两个以上的线程或进程在执行过程中&#xff0c;因抢夺资源而造成的一种相互等待的现象。简单来说&#xff0c;就是两个或两个以上的线程或进程都在等待对方释放资源&#xff0c;从而导致所有线程或进程都无法继续执行的…

【python】python标准化考试系统[单项选择题 简易版](源码)【独一无二】

&#x1f449;博__主&#x1f448;&#xff1a;米码收割机 &#x1f449;技__能&#x1f448;&#xff1a;C/Python语言 &#x1f449;公众号&#x1f448;&#xff1a;测试开发自动化【获取源码商业合作】 &#x1f449;荣__誉&#x1f448;&#xff1a;阿里云博客专家博主、5…

[python]texthero安装后测试代码

测试环境&#xff1a; anaconda3python3.8 texthero1.1.0 测试代码来自官方&#xff1a;https://github.com/jbesomi/texthero 代码&#xff1a; import texthero as hero import pandas as pddf pd.read_csv("https://gitee.com/FIRC/texthero/raw/master/dataset/…

解决Linux中磁盘满/dev/vda1使用率100%问题

发现根目录下占用100%&#xff0c;具体还要排场到底是有哪些大文件占用 那么就在根目录下查询各个子文件夹的占用状态&#xff0c;有过大不用的即可删除 df -h *我的磁盘是100G&#xff0c;但这些总共加起来也接近不了这个数值 那就是有可能出现 已删除空间却没有释放的进程…

用python画一个正八边形

1 问题 使用turtle库的turtle.fd()函数和turtle.seth()函数绘制一个边长100的正八边形。 2 方法 1、利用for循环解决如何画出图形中相同的八条边的问题。 2、再利用turtle.fd()函数和turtle.seth()函数画出完整的图形。 代码清单 1 import turtleturtle.pensize(2)d0for i in r…

Mybatis进阶(映射关系多对一 )

文章目录 1.需求分析2.应用实例&#xff08;xml配置&#xff09;1.数据表设计2.entity设计&#xff08;不要使用toString会栈溢出&#xff09;1.Pet.java2.User.java 3.编写Mapper1.PetMapper.java2.UserMapper.java 4.编写Mapper.xml1.UserMapper.xml2.PetMapper.xml 5.测试Us…

初识Vue-组件化开发(应用实例)

目录 一、任务管理应用 1.介绍 2.代码 1. 任务列表组件 (TaskList.vue) 2. 添加任务组件 (AddTask.vue) 3. 应用入口组件 (App.vue) 4. 主入口文件 (main.js) 3.效果 4.总结 二、购物车 1.介绍 2.代码 1. 商品列表组件 (ProductList.vue) 2. 购物车组件 (Cart.vue…