当前位置: 首页 > news >正文

js的局部变量和全局变量

全局变量

常常定义在函数外,具有全局定义域,在整个js代码的任何地方都可以使用,这个就叫全局变量

局部变量

定义在函数内部,只在当前函数的定义域可以被使用,而且不同的函数可以定义相同的局部变量,他们之间相互没有关系,互不干扰,函数像酒店房间,而局部变量像入住的客人,只能在自己的房间活动,不能影响其他房间。

在今天写轮播图的时候我们需要写一段代码是当鼠标经过轮播图的时候,轮播图停止自动播放,而当鼠标离开轮播图时,轮播图继续自动播放,在这段代码中我一直无法实现这个功能,后来检查代码发现时因为全局变量和局部变量使用不妥,在命名定时器时,我在函数内命名,使其只能在该函数里使用,所以后面的代码无法实现,这个问题也会成为我们写代码时难以注意到的一个小问题。

 function time() {i++;img.src = sliderData[i].urlp.innerHTML = sliderData[i].titlefooter.backgroundColor = sliderData[i].colordocument.querySelector('.slider-indicator .active').classList.remove('active')document.querySelector(`.slider-indicator li:nth-child(${i + 1})`).classList.add('active')if (i === sliderData.length - 1) {i = -1;}}let timerId = setInterval(time, 1000)box.addEventListener('mouseenter', function () {clearInterval(timerId)})box.addEventListener('mouseleave', function () {timerId = setInterval(time, 1000)})

let和const

这俩个关键字也许我们细细品味,let用来定义变量而const用来定义常量,也就是let定义的变量还可以重新赋值,而const定义的常量不可重新赋值。

在随机点名案例中,我们按开始按钮,定时器函数开始运行,而按停止按钮,定时器停止,删除抽到的名字,因为名字的顺序是随机的,所以我们需要使用随机数函数,而在停止按钮那我们需要删除抽到的名字,所以随机数需要是一个全局变量,而且因为每一次随机数都相当于重新赋值,所以需要用let来定义。

 const arr = ['马超', '黄忠', '赵云', '关羽', '张飞']const name = document.querySelector('.qs')const kaishi = document.querySelector('.start')const jieshu = document.querySelector('.end')let n = 0let random = 0kaishi.addEventListener('click', function () {n = setInterval(function () {random = Math.floor(Math.random() * arr.length)name.innerHTML = arr[random]if (arr.length === 1) {kaishi.disabled = true;jieshu.disabled = true;}}, 100)})jieshu.addEventListener('click', function () {clearInterval(n)arr.splice(random, 1)})

那如果是没有小白点,随机出的数字只在定时器内使用,则我们可以使用const来定义,因为每一次循环都相当于一次新的定义,并不是重新赋值,与常量不冲突。

小tip

1. 如果在函数里面不定义直接使用,也可以变成全局变量,但是是流氓做法,不推荐

2.当全局变量和局部变量重名时,在函数里局部变量会覆盖全局变量,函数结束后覆盖结束

 <script>let str = "我是全局变量";function b() {let str = "我是局部变量";console.log(str); //结果:我是局部变量}b();console.log(str);//结果:我是全局变量</script>

3.js的特殊性决定它可以在js的任何地方声明变量,它可以先定义再使用,因为js在执行前会对整个脚本文件的声明部分做完整分析。

4.现在一般不使用var声明变量

http://www.dtcms.com/a/279314.html

相关文章:

  • 测试驱动开发(TDD)实战:在 Spring 框架实现中践行 “红 - 绿 - 重构“ 循环
  • Bash vs PowerShell | 从 CMD 到跨平台工具:Bash 与 PowerShell 的全方位对比
  • vue3 服务端渲染时请求接口没有等到数据,但是客户端渲染是请求接口又可以得到数据
  • 7.14 map | 内存 | 二维dp | 二维前缀和
  • python+Request提取cookie
  • 电脑升级Experience
  • python transformers笔记(Trainer类)
  • 代码随想录算法训练营第三十五天|416. 分割等和子集
  • LLM表征工程还有哪些值得做的地方
  • 内部文件审计:企业文件服务器审计对网络安全提升有哪些帮助?
  • 防火墙技术概述
  • Qt轮廓分析设计+算法+避坑
  • Redis技术笔记-主从复制、哨兵与持久化实战指南
  • 第五章 uniapp实现兼容多端的树状族谱关系图,剩余组件
  • 学习C++、QT---25(QT中实现QCombobox库的介绍和用QCombobox设置编码和使用编码的讲解)
  • SQL ORM映射框架深度剖析:从原理到实战优化
  • 【Unity】MiniGame编辑器小游戏(十三)最强射手【Shooter】(下)
  • ElasticSearch重置密码
  • 嵌入式 Linux开发环境构建之Source Insight 的安装和使用
  • c++算法二
  • 不同Linux版本下安装Synopsys工具的差异与选择建议
  • PyTorch 数据加载全攻略:从自定义数据集到模型训练
  • [Pytorch]深度学习-part1
  • 策略模式及优化
  • LangChain面试内容整理-知识点16:OpenAI API接口集成
  • Linux操作系统之信号:信号的产生
  • 观察应用宝进程的自启动行为
  • Spring Boot启动原理:从main方法到内嵌Tomcat的全过程
  • vue vxe-tree 树组件加载大量节点数据,虚拟滚动的用法
  • 每日mysql