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.pswp.cn/news/914436.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/914436.shtml
英文地址,請注明出處:http://en.pswp.cn/news/914436.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

C++ 多態詳解:從概念到實現原理----《Hello C++ Wrold!》(14)--(C/C++)

文章目錄前言多態的概念多態的定義和實現虛函數虛函數的重寫(覆蓋)多態的構成條件override 和 final&#xff08;C11提出&#xff09;finaloverride重載、覆蓋(重寫)、隱藏(重定義)的對比抽象類接口繼承和實現繼承多態的原理虛函數表(也叫做虛表)引申:虛表的打印多態的原理靜態…

Node.js + Express的數據庫AB View切換方案設計

方案總覽數據導入過程&#xff1a; - 根據控制表判斷當前活躍組&#xff08;假設當前活躍的是a&#xff0c;那么接下來要導入到b&#xff09;。 - 清空非活躍表&#xff08;即b表&#xff09;的數據&#xff0c;然后將新數據導入到b表。 - 切換控制表&#xff0c;將活…

C++_編程提升_temaplate模板_案例

類模板案例案例描述: 實現一個通用的數組類&#xff0c;要求如下&#xff1a;可以對內置數據類型以及自定義數據類型的數據進行存儲將數組中的數據存儲到堆區構造函數中可以傳入數組的容量提供對應的拷貝構造函數以及operator防止淺拷貝問題提供尾插法和尾刪法對數組中的數據進…

Win11系統安裝Anaconda環境極簡教程

Win11系統安裝Anaconda環境極簡教程 &#x1f4e5; 第一步&#xff1a;下載 Anaconda 安裝包 打開瀏覽器&#xff0c;訪問 Anaconda 官網&#xff0c;選擇View All Installers 選擇所需版本&#xff08;此文以2024.02-1為例&#xff09;&#xff0c;點擊進行下載&#xff08;…

Datawhale AI夏令營-基于帶貨視頻評論的用戶洞察挑戰賽

一.賽事目標基于星火大模型Spark 4.0 Ultra&#xff0c;對視頻和評論的數據進行商品識別&#xff0c;情感分析&#xff0c;歸類分析&#xff0c;最終為帶貨效果進行評價。并通過優化模型來提高評價準確度二.賽事環境1.基礎平臺&#xff1a;星火大模型Spark 4.0 Ultra2.賽事數據…

如何基于FFMPEG 實現視頻推拉流

文章目錄 前言環境準備為什么選擇 FFmpeg什么是nginx 1.7.11.3 GryphonNginx的conf配置啟動nginx推流命令接收視頻流Untiy播放視頻流最后前言 我們經常會有在電腦上實現推拉流的需求,Unity 和Unreal 都提供了基于WebRTC 的視頻流方案,效果還不錯,但是當我們需要推拉整個電腦…

飛算JavaAI:從情緒價值到代碼革命,智能合并項目與定制化開發新范式

目錄一、飛算 JavaAI 是什么&#xff1f;二、飛算JavaAI&#xff1a;安裝登錄2.1 IDEA插件市場安裝&#xff08;推薦&#xff09;2.2 離線安裝包三、飛算JavaAI核心功能&#xff1a;一鍵生成完整工程代碼功能背景3.1 理解需求3.2 設計接口3.3 表結構自動設計3.4 處理邏輯&#…

Python 基礎語法與數據類型(十一) - 類 (class) 與對象 (實例)

文章目錄1. 什么是類 (Class)&#xff1f;1.1 定義一個類2. 什么是對象 (Object) 或實例 (Instance)&#xff1f;2.1 創建對象&#xff08;實例化&#xff09;3. 訪問屬性和調用方法4. 類屬性 vs 實例屬性5. self 的重要性總結練習題練習題答案前幾篇文章我們學習了變量、數據類…

精準數據檢索+數據飛輪自驅優化,彩訊AI知識庫助力企業知識賦能和效率創新

近兩年&#xff0c;人工智能技術的精細化發展&#xff0c;讓知識庫概念重新成為“熱門詞匯”&#xff0c;騰訊ima等智能工作臺產品為個人用戶打造專屬知識庫&#xff0c;而面向B端市場&#xff0c;企業AI知識庫也逐步成為企業集中存儲與管理核心文檔、數據、經驗和流程的知識中…

打破空間邊界!Nas-Cab用模塊化設計重構個人存儲邏輯

文章目錄前言1. Windows安裝Nas-Cab2. 本地局域網連接Nas-Cab3. 安裝Cpolar內網穿透4. 固定Nas-Cab 公網地址"數據管理不該受制于硬件形態或地理邊界。這個開源方案證明&#xff1a;當功能模塊化且可擴展時&#xff0c;私有云可以像水一樣滲透進所有設備——現在就去Git倉…

Sigma-Aldrich細胞培養基礎知識:細胞培養的安全注意事項

細胞培養實驗室風險評估風險評估的主要目的是防止人員受傷&#xff0c;保護財產&#xff0c;并避免對個人和環境的傷害。在許多國家&#xff0c;法律要求進行風險評估。例如&#xff0c;英國的《英國職業健康與安全法案&#xff08;1974年&#xff09;》就是一個例子。歐洲共同…

Imx6ull用網線與電腦連接

理解工作方式沒有路由器時&#xff0c;可以使用&#xff0c;只要保持虛擬機的兩個網卡一個與電腦在同一網,一個與板子在同一網段(保持通信)就可以從虛擬機往板子下載第一步&#xff1a;查看電腦連接的網絡這一步是在找到主機ip地址這兩步在其他同類教程里一樣的第二步:設置以太…

力扣454.四數相加Ⅱ

給你四個整數數組 nums1、nums2、nums3 和 nums4 &#xff0c;數組長度都是 n &#xff0c;請你計算有多少個元組 (i, j, k, l) 能滿足&#xff1a;0 < i, j, k, l < nnums1[i] nums2[j] nums3[k] nums4[l] 0示例 1&#xff1a;輸入&#xff1a;nums1 [1,2], nums2 …

Joplin:一款免費開源、功能強大且注重隱私的筆記軟件

Joplin 是一款免費開源、功能強大且注重隱私的筆記和待辦事項應用程序&#xff0c;它的設計目標是成為 Evernote 等流行筆記應用的強大替代品&#xff0c;尤其適合重視數據所有權和隱私的用戶。 功能特性 Joplin 的核心定位與優勢如下&#xff1a; 完全開源&#xff1a;代碼公…

滲透前四天總結

目錄 一.DNS DNS 基本概述 DNS解析過程 二.HTTPS TLS握手過程 RSA加密 對稱加密&#xff1a; 非對稱加密&#xff1a; RSA加密過程 三.使用xdebug調試php 四.信息收集 一.DNS DNS 基本概述 DNS&#xff1a;域名系統(DomainNameSystem)因特網的一項核心服務&#xf…

Python----NLP自然語言處理(中文分詞器--jieba分詞器)

一、介紹文本語料在輸送給NLP模型前&#xff0c;需要一系列的預處理工作&#xff0c;才能符合模型輸入的要求。對于NLP來說&#xff0c;他學習一篇人類書寫的文章不是整體的來學習&#xff0c;而是一個詞一個詞的來學習。所以文本預處理的第一個步驟就是對文本進行分詞處理。&a…

深入了解linux系統—— 進程信號的保存

信號 信號&#xff0c;什么是信號&#xff1f; 在現實生活中&#xff0c;鬧鐘&#xff0c;紅綠燈&#xff0c;電話鈴聲等等&#xff1b;這些都是現實生活中的信號&#xff0c;當鬧鐘想起時&#xff0c;我就要起床&#xff1b;當電話鈴聲想起時&#xff0c;我就知道有人給我打電…

Redis 事務錯誤處理機制與開發應對策略

&#x1f4d8; Redis 事務錯誤處理機制與開發應對策略一、Redis 事務基礎回顧 Redis 中的事務由以下三組命令構成&#xff1a;命令作用說明MULTI開始一個事務&#xff0c;進入命令入隊模式命令集所有后續命令不會立即執行&#xff0c;而是入隊等待提交EXEC提交事務&#xff0c;…

信息學奧賽一本通 1549:最大數 | 洛谷 P1198 [JSOI2008] 最大數

【題目鏈接】 ybt 1549&#xff1a;最大數 洛谷 P1198 [JSOI2008] 最大數 【題目考點】 1. 線段樹&#xff1a;單點修改 區間查詢 知識點講解見&#xff1a;洛谷 P3374 【模板】樹狀數組 1&#xff08;線段樹解法&#xff09; 【解題思路】 本題為設線段樹維護區間最值&a…

【STM32】什么在使能寄存器或外設之前必須先打開時鐘?

這篇文章解釋一個非常基礎但是重要的問題&#xff1a; 為什么在使能寄存器或外設之前必須先打開時鐘&#xff1f; 我們會發現&#xff0c;如果不開時鐘就訪問寄存器 ? 會“寫不進去”或“讀取錯誤”。 因此&#xff0c;我們在寫代碼時&#xff0c;總是需要 先開時鐘&#xff0…