当前位置: 首页 > 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.lryc.cn/news/588528.html

相关文章:

  • Java面试总结(经典题)(Java多线程)(一)
  • kotlin学习笔记
  • 【日常技能】excel的vlookup 匹配#N/A
  • Linux ACL权限策略
  • Faiss库
  • OFDM系统中关于信号同步的STO估计与CFO估计的MATLAB仿真
  • 基于Android的景点旅游信息系统App
  • DNS重绑定
  • 操作系统-第一章操作系统和第二章进程(知识点学习/期末复习/笔试/面试/考研)
  • 机载激光雷达目标识别:从点云到凝视成像的算法全景
  • 延迟双删懂不
  • 大数据领域开山鼻祖组件Hadoop核心架构设计
  • 逻辑代数中的基本规则,代入规则和反演规则,对偶规则
  • 九、官方人格提示词汇总(中-3)
  • 【C语言进阶】指针面试题详解(2)
  • LeetCode|Day11|557. 反转字符串中的单词 III|Python刷题笔记
  • 【Bluedroid】蓝牙协议栈enable流程深度解析
  • LogUtil日志工具类你真的封装对了么?
  • 19.数据增强技术
  • LeetCode 692题解 | 前K个高频单词
  • JAVA进阶--JVM
  • C#——数据与变量
  • Brooks 低温泵On-Board Cryopump 安装和维护手法Installation and Maintenance Manual
  • 文献查找任务及其方法
  • 信息学奥赛一本通 1549:最大数 | 洛谷 P1198 [JSOI2008] 最大数
  • 7.14练习案例总结
  • YOLOv11开发流程
  • 数字化红头文件生成工具:提升群聊与团队管理效率的创新方案
  • H264的帧内编码和帧间编码
  • 每日mysql