25 JavaScript学习：var let const

news2025/1/14 0:46:55

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. 使用关键字 var、let 或 const 在函数内部声明的变量为局部变量：
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引入了块级作用域）使用 let 或 const 关键字声明的变量也是局部变量：
if (true) {
    let blockScopedVar = "我是块级作用域的局部变量";
    const anotherBlockScopedVar = "我也是块级作用域的局部变量";
  
    // 只能在 if 代码块内访问 blockScopedVar 和 anotherBlockScopedVar
}

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

JavaScript块级作用域

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

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

  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关键字则不能。重新定义变量指的是在同一作用域内多次声明同一个变量名，后面的声明将覆盖前面的声明。

下面分别以let和var来说明重新定义变量的情况：

  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存在变量提升的特性，重新定义变量也是有效的，后面的声明会覆盖前面的声明。

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

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。

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

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.coloradmin.cn/o/1646430.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Celery(分布式任务队列)入门学习笔记

Celery(分布式任务队列)入门学习笔记

Celery 的简单介绍 用 Celery 官方的介绍&#xff1a;它是一个分布式任务队列; 简单&#xff0c;灵活&#xff0c;可靠的处理大量消息的分布式系统; 它专注于实时处理&#xff0c;并支持任务调度。 Celery 如果使用 RabbitMQ 作为消息系统的话&#xff0c;整个应用体系就是下…
阅读更多...
状压dp 理论例题 详解

状压dp 理论例题 详解

状压dp 四川2005年省选题&#xff1a;互不侵犯 首先我们可以分析一下&#xff0c;按照我们普通的思路&#xff0c;就是用搜索&#xff0c;枚举每一行的每一列&#xff0c;尝试放下一个国王&#xff0c;然后标记&#xff0c;继续枚举下一行 那么&#xff0c;我们的时间复杂度…
阅读更多...
什么是X电容和Y电容？

什么是X电容和Y电容？

先补充个知识&#xff1a; 一、什么是差模信号和共模信号 差模信号&#xff1a;大小相等&#xff0c;方向相反的交流信号&#xff1b;双端输入时&#xff0c;两个信号的相位相差180度 共模信号&#xff1a;大小相等。方向相同。双端输入时&#xff0c;两个信号相同。 二、安规…
阅读更多...
嵌入式5-6QT

嵌入式5-6QT

1> 思维导图 2> 自由发挥应用场景&#xff0c;实现登录界面。 要求&#xff1a;尽量每行代码都有注释。 #include "mywidget.h"MyWidget::MyWidget(QWidget *parent): QWidget(parent) {//设置标题this->setWindowTitle("MYQQ");//设置图标this…
阅读更多...
5月6号作业

5月6号作业

申请该结构体数组&#xff0c;容量为5&#xff0c;初始化5个学生的信息 使用fprintf将数组中的5个学生信息&#xff0c;保存到文件中去 下一次程序运行的时候&#xff0c;使用fscanf&#xff0c;将文件中的5个学生信息&#xff0c;写入(加载)到数组中去&#xff0c;并直接输出学…
阅读更多...
PyTorch机器学习实现液态神经网络

PyTorch机器学习实现液态神经网络

大家好&#xff0c;人工智能的发展催生了神经网络这一强大的预测工具&#xff0c;这些网络通过数据和参数优化生成预测&#xff0c;每个神经元像逻辑回归门一样工作。结合反向传播技术&#xff0c;模型能够根据损失函数来调整参数权重&#xff0c;实现自我优化。 然而&#xf…
阅读更多...
题目：排序疑惑

题目：排序疑惑

问题描述&#xff1a; 解题思路&#xff1a; 做的时候没想到&#xff0c;其实这是以贪心题。我们可以每次排最大的区间&#xff08;小于n&#xff0c;即n-1大的区间&#xff09;&#xff0c;再判断是否有序 。因此只需要分别判断排&#xff08;1~n-1&#xff09;和&#xff08;…
阅读更多...
算法学习：二分查找

算法学习：二分查找

&#x1f525; 引言 在现代计算机科学与软件工程的实践中&#xff0c;高效数据检索是众多应用程序的核心需求之一。二分查找算法&#xff0c;作为解决有序序列查询问题的高效策略&#xff0c;凭借其对数时间复杂度的优越性能&#xff0c;占据着算法领域里举足轻重的地位。本篇内…
阅读更多...
open 函数到底做了什么

open 函数到底做了什么

使用设备之前我们通常都需要调用 open 函数&#xff0c;这个函数一般用于设备专有数据的初始化&#xff0c;申请相关资源及进行设备的初始化等工作&#xff0c;对于简单的设备而言&#xff0c;open 函数可以不做具体的工作&#xff0c;你在应用层通过系统调用 open 打开设备…
阅读更多...
Unity 修复Sentinel key not found (h0007)错误

Unity 修复Sentinel key not found (h0007)错误

这个问题是第二次遇到了&#xff0c;上次稀里糊涂的解决了&#xff0c;也没当回事&#xff0c;这次又跑出来了&#xff0c;网上找的教程大部分都是出自一个人。 1.删除这个路径下的文件 C:\ProgramData\SafeNet Sentinel&#xff0c;注意ProgramData好像是隐藏文件 2.在Windows…
阅读更多...
04-19 周五 GitHub actions-runner 程序解释

04-19 周五 GitHub actions-runner 程序解释

04-19 周五 GitHub actions-runner 程序解释 时间版本修改人描述2024年4月19日17:26:17V0.1宋全恒新建文档 简介 本文主要描述了actions-runner-linux-x64-2.315.0.tar.gz这个github actions CI所需要的客户端安装包的重要文件和内容信息。有关GitHub actions 的配置&#xff…
阅读更多...
利用matplotlib和networkx绘制有向图[显示边的权重]

利用matplotlib和networkx绘制有向图[显示边的权重]

使用Python中的matplotlib和networkx库来绘制一个有向图&#xff0c;并显示边的权重标签。 1. 定义了节点和边&#xff1a;节点是一个包含5个节点的列表&#xff0c;边是一个包含各个边以及它们的权重的列表。 2. 创建了一个有向图对象 G。 3. 向图中添加节点和边。 4. 设置了…
阅读更多...
Elasticsearch：如何使用 Java 对索引进行 ES|QL 的查询

Elasticsearch：如何使用 Java 对索引进行 ES|QL 的查询

在我之前的文章 “Elasticsearch&#xff1a;对 Java 对象的 ES|QL 查询”&#xff0c;我详细介绍了如何使用 Java 来对 ES|QL 进行查询。对于不是很熟悉 Elasticsearch 的开发者来说&#xff0c;那篇文章里的例子还是不能单独来进行运行。在今天的这篇文章中&#xff0c;我来详…
阅读更多...
外贸企业邮箱是什么？做外贸企业邮箱哪个好？

外贸企业邮箱是什么？做外贸企业邮箱哪个好？

外贸企业邮箱是什么&#xff1f;外贸企业在进行跨国沟通时必不可少的工具就是外贸企业邮箱&#xff0c;外贸企业邮箱需要具备的条件就是海外邮件抵达率高、安全稳定、多语言沟通。而我们又怎么选择一个适合的外贸企业邮箱呢&#xff1f;小编今天带您一起了解。 一、外贸企业邮…
阅读更多...
MySQL基础_5.多表查询

MySQL基础_5.多表查询

文章目录 一、多表连接1.1、笛卡尔积&#xff08;或交叉连接&#xff09; 二、多表查询&#xff08;SQL99语法&#xff09;2.1、内连接(INNER JOIN)2.2、内连接(INNER JOIN) 一、多表连接 多表查询&#xff0c;也称为关联查询&#xff0c;指两个或更多个表一起完成查询操作。 …
阅读更多...
一款开源的原神工具箱，专为现代化 Windows 平台设计，旨在改善桌面端玩家的游戏体验

一款开源的原神工具箱，专为现代化 Windows 平台设计，旨在改善桌面端玩家的游戏体验

Snap.Hutao 胡桃工具箱是一款以 MIT 协议开源的原神工具箱&#xff0c;专为现代化 Windows 平台设计&#xff0c;旨在改善桌面端玩家的游戏体验。通过将既有的官方资源与开发团队设计的全新功能相结合&#xff0c;提供了一套完整且实用的工具集&#xff0c;且无需依赖任何移动设…
阅读更多...
Django开发实战之登录用户鉴权登录界面实现

Django开发实战之登录用户鉴权登录界面实现

Django自带的鉴权系统非常的安全&#xff0c;大家可以放心使用&#xff0c;那么如何使用呢&#xff1f; 1、首先需要检查settings文件种的INSTALLED_APPS&#xff0c;有没有这两部分内容&#xff1a; 2、检查中间件&#xff0c;比如这两个中间件&#xff0c;一个是用于登录&a…
阅读更多...
【探秘地球宝藏】矿产资源知多少？

【探秘地球宝藏】矿产资源知多少？

当我们仰望高楼林立的城市&#xff0c;乘坐便捷的交通工具&#xff0c;享受各种现代生活的便利时&#xff0c;你是否曾想过这一切背后的支撑力量&#xff1f;答案就藏在我们脚下——矿产资源&#xff0c;这些大自然赋予的宝贵财富&#xff0c;正是现代社会发展的基石。今天&…
阅读更多...
使用ThemeRoller快速实现前端页面风格美化

使用ThemeRoller快速实现前端页面风格美化

使用ThemeRoller快速实现前端页面风格美化 文章目录 使用ThemeRoller快速实现前端页面风格美化一、ThemeRoller二、使用方法1.基本操作面板介绍2.直接用现成的配色风格——Gallery画廊3.自定义风格——Roll Your Own4.下载风格包并应用到页面 一、ThemeRoller ThemeRoller是jQ…
阅读更多...
基于矩阵乘法的GPU烤机python代码（pytorch版）

基于矩阵乘法的GPU烤机python代码（pytorch版）

前言 测试gpu前需要安装Anaconda、pytorch、tmux、nvitop。 单gpu 代码 import numpy as np from tqdm import tqdmProject &#xff1a;gpu-test File &#xff1a;gpu_stress.py Author &#xff1a;xxx Date &#xff1a;2024/4/20 16:13import argparse import …
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023