JavaScript 基礎 - 7

? 關于JS函數部分的學習和一個案例的練習

1 函數封裝

抽取相同部分代碼封裝

優點

  • 提高代碼復用性:封裝好的函數可以在多個地方被重復調用,避免了重復編寫相同的代碼。例如,編寫一個計算兩個數之和的函數,在多個不同的計算場景中都可以調用這個函數。
  • 增強代碼可維護性:當函數的功能需要修改或擴展時,只需要在函數內部進行修改,而不需要在所有調用該函數的地方都進行修改。比如,要修改計算兩個數之和的邏輯,只需要在封裝的函數內部修改,不會影響到其他調用該函數的代碼。
  • 便于代碼閱讀和理解:通過函數的命名可以清晰地表達其功能,使代碼的可讀性更高。其他人在閱讀代碼時,只需要看函數名就能大致了解其功能,而不需要去查看函數內部的具體實現。

原則

  • 單一職責原則:每個函數應該只負責一項特定的功能,功能要明確、簡潔。比如,一個函數只負責計算平均值,另一個函數只負責數據的排序,這樣可以避免函數功能過于復雜,提高代碼的可維護性和可讀性。
  • 高內聚低耦合:函數內部的代碼應該緊密圍繞其核心功能,內部的各個部分之間有很強的關聯性;同時,函數與外部的其他代碼之間的耦合度要低,盡量減少對外部變量和函數的依賴。

2 函數使用

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width= , initial-scale=1.0"><title>Document</title>
</head>
<style>span{display: inline-block;width:fit-content;height:fit-content;text-align: center;line-height: 50px;border: 1px solid #000;margin-right: 10px;}
</style>
<body><script>// 函數聲明function sheet99(){for(let i = 1; i <= 9; i++){for(let j = 1; j <= i; j++){document.write('<span>'+ i +'×'+ j +'='+ (i*j) +'</span>');}document.write('<br>')}}// 函數調用sheet99();</script></body>
</html>

3 函數傳參

語法 function 函數名(參數列表) 參數逗號隔開 參數默認值 getsum(a = 0,b = 0)

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>function sum(n){var sum = 0;for(var i = 1; i <= n; i++){sum += i;}return sum;}console.log(sum(10));</script>
</body>
</html>

4 函數返回值

根據需求設置函數返回值


5 作用域

對于一個名稱的可用范圍 限定這個名字的代碼可用范圍就是作用域

提高了代碼的局部性 增強了程序的可靠性 減少了名字沖突

全局作用域 局部作用域


6 匿名函數?

function () {} 沒有名字的函數 無法直接使用 想要使用有兩種方式

6.1 函數表達式

將匿名函數賦值一個變量 通過變量名稱調用 使用前必須先聲明函數表達式

 let fn =function(){}

6.2 立即執行函數?

立刻執行 不需要調用 用于避免全局變量的污染

立刻執行函數后必須加;?

(function(形參){})(實參);
(function(){}())

7 案例練習

?需求:完成一個用戶輸入秒數 自動轉換為時分的程序

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body></body>
<script>// var time = +prompt("請輸入秒數");// var hour = parseInt(time / 3600);// var minute = parseInt(time % 3600 / 60);// var second = time % 60;// alert(hour + "時" + minute + "分" + second + "秒");(function(time){var hour = parseInt(time / 3600);var minute = parseInt(time % 3600 / 60);var second = time % 60;alert(hour + "時" + minute + "分" + second + "秒");})(prompt("請輸入秒數"));</script>
</html>

學習時間 2025.01.22

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/web/67731.shtml
繁體地址,請注明出處:http://hk.pswp.cn/web/67731.shtml
英文地址,請注明出處:http://en.pswp.cn/web/67731.shtml

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

相關文章

詳解u3d之AssetBundle

一.AssetBundle的概念 “AssetBundle”可以指兩種不同但相關的東西。 1.1 AssetBundle指的是u3d在磁盤上生成的存放資源的目錄 目錄包含兩種類型文件(下文簡稱AB包)&#xff1a; 一個序列化文件&#xff0c;其中包含分解為各個對象并寫入此單個文件的資源。資源文件&#x…

微信登錄模塊封裝

文章目錄 1.資質申請2.combinations-wx-login-starter1.目錄結構2.pom.xml 引入okhttp依賴3.WxLoginProperties.java 屬性配置4.WxLoginUtil.java 后端通過 code 獲取 access_token的工具類5.WxLoginAutoConfiguration.java 自動配置類6.spring.factories 激活自動配置類 3.com…

DeepSeek 介紹及對外國的影響

DeepSeek 簡介 DeepSeek&#xff08;深度求索&#xff09;是一家專注實現 AGI&#xff08;人工通用智能&#xff09;的中國科技公司&#xff0c;2023 年成立&#xff0c;總部位于杭州&#xff0c;在北京設有研發中心。與多數聚焦具體應用&#xff08;如人臉識別、語音助手&…

MySQL數據庫(二)- SQL

目錄 ?編輯 一 DDL (一 數據庫操作 1 查詢-數據庫&#xff08;所有/當前&#xff09; 2 創建-數據庫 3 刪除-數據庫 4 使用-數據庫 (二 表操作 1 創建-表結構 2 查詢-所有表結構名稱 3 查詢-表結構內容 4 查詢-建表語句 5 添加-字段名數據類型 6 修改-字段數據類…

ARM嵌入式學習--第十天(UART)

--UART介紹 UART(Universal Asynchonous Receiver and Transmitter)通用異步接收器&#xff0c;是一種通用串行數據總線&#xff0c;用于異步通信。該總線雙向通信&#xff0c;可以實現全雙工傳輸和接收。在嵌入式設計中&#xff0c;UART用來與PC進行通信&#xff0c;包括與監控…

面試題-消失的數字-異或

消失的數字 數組nums包含從0到n的所有整數&#xff0c;但其中缺了一個。請編寫代碼找出那個缺失的整數。你有辦法在 O(n) 時間內完成嗎&#xff1f; 示例&#xff1a; 輸入&#xff1a;[3,0,1] 輸出&#xff1a;2 int missingNumber(int* nums, int numsSize) {}分析 本題對…

數據結構與算法之棧: LeetCode 1685. 有序數組中差絕對值之和 (Ts版)

有序數組中差絕對值之和 https://leetcode.cn/problems/sum-of-absolute-differences-in-a-sorted-array/description/ 描述 給你一個 非遞減 有序整數數組 nums 請你建立并返回一個整數數組 result&#xff0c;它跟 nums 長度相同&#xff0c;且result[i] 等于 nums[i] 與數…

筆試-排列組合

應用 一個長度為[1, 50]、元素都是字符串的非空數組&#xff0c;每個字符串的長度為[1, 30]&#xff0c;代表非負整數&#xff0c;元素可以以“0”開頭。例如&#xff1a;[“13”, “045”&#xff0c;“09”&#xff0c;“56”]。 將所有字符串排列組合&#xff0c;拼起來組成…

Python3 OS模塊中的文件/目錄方法說明十七

一. 簡介 前面文章簡單學習了 Python3 中 OS模塊中的文件/目錄的部分函數。 本文繼續來學習 OS 模塊中文件、目錄的操作方法&#xff1a;os.walk() 方法、os.write()方法 二. Python3 OS模塊中的文件/目錄方法 1. os.walk() 方法 os.walk() 方法用于生成目錄樹中的文件名&a…

[Java]抽象類

1. 什么是抽象類&#xff1f; 1.1 定義&#xff1a; 抽象類是一個不能實例化的類&#xff0c;它是用來作為其他類的基類的。抽象類可以包含抽象方法和非抽象方法。抽象方法沒有方法體&#xff0c;子類必須重寫這些方法并提供具體的實現。抽象類可以有構造方法、成員變量、靜態…

css三角圖標

案例三角&#xff1a; <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>Document</title><s…

跨越通信障礙:深入了解ZeroMQ的魅力

在復雜的分布式系統開發中&#xff0c;進程間通信就像一座橋梁&#xff0c;連接著各個獨立運行的進程&#xff0c;讓它們能夠協同工作。然而&#xff0c;傳統的通信方式往往伴隨著復雜的設置、高昂的性能開銷以及有限的靈活性&#xff0c;成為了開發者們前進道路上的 “絆腳石”…

深入解析 COUNT(DISTINCT) OVER(ORDER BY):原理、問題與高效替代方案

目錄 一、累計去重需求場景 二、COUNT(DISTINCT) OVER(ORDER BY) 語法解析 2.1 基礎語法 2.2 執行原理 三、三大核心問題分析

線性數據結構:單向鏈表

放棄眼高手低&#xff0c;你真正投入學習&#xff0c;會因為找到一個新方法產生成就感&#xff0c;學習不僅是片面的記單詞、學高數......只要是提升自己的過程&#xff0c;探索到了未知&#xff0c;就是學習。 目錄 一.鏈表的理解 二.鏈表的分類&#xff08;重點理解&#xf…

基于PyQt5打造的實用工具——PDF文件加圖片水印,可調大小位置,可批量處理!

01 項目簡介 &#xff08;1&#xff09;項目背景 隨著PDF文件在信息交流中的廣泛應用&#xff0c;用戶對圖片水印的添加提出了更高要求&#xff0c;既要美觀&#xff0c;又需高效處理批量文件。現有工具難以實現精確調整和快速批量操作&#xff0c;操作繁瑣且效果不理想。本項…

MCU內部ADC模塊誤差如何校準

本文章是筆者整理的備忘筆記。希望在幫助自己溫習避免遺忘的同時&#xff0c;也能幫助其他需要參考的朋友。如有謬誤&#xff0c;歡迎大家進行指正。 一、ADC誤差校準引言 MCU 片內 ADC 模塊的誤差總包括了 5 個靜態參數 (靜態失調&#xff0c;增益誤差&#xff0c;微分非線性…

嵌入式硬件篇---CPUGPUTPU

文章目錄 第一部分&#xff1a;處理器CPU&#xff08;中央處理器&#xff09;1.通用性2.核心數3.緩存4.指令集5.功耗和發熱 GPU&#xff08;圖形處理器&#xff09;1.并行處理2.核心數量3.內存帶寬4.專門的應用 TPU&#xff08;張量處理單元&#xff09;1.為深度學習定制2.低精…

03-機器學習-數據獲取

一、流行機器學習數據集 主流機器學習數據集匯總 數據集名稱描述來源MNIST手寫數字圖像數據集&#xff0c;由美國人口普查局員工書寫。MNIST官網ImageNet包含數百萬張圖像&#xff0c;用于圖像分類和目標檢測。ImageNet官網AudioSet包含YouTube音頻片段&#xff0c;用于聲音分…

doris:STRUCT

STRUCT<field_name:field_type [COMMENT comment_string], ... > 表示由多個 Field 組成的結構體&#xff0c;也可被理解為多個列的集合。 不能作為 Key 使用&#xff0c;目前 STRUCT 僅支持在 Duplicate 模型的表中使用。一個 Struct 中的 Field 的名字和數量固定&…

一次端口監聽正常,tcpdump無法監聽到指定端口報文問題分析

tcpdump命令&#xff1a; sudo tcpdump -i ens2f0 port 6471 -XXnnvvv 下面是各個部分的詳細解釋&#xff1a; 1.tcpdump: 這是用于捕獲和分析網絡數據包的命令行工具。 2.-i ens2f0: 指定監聽的網絡接口。ens2f0 表示本地網卡&#xff09;&#xff0c;即計算機該指定網絡接口捕…