JavaScript基礎快速復習

目錄

• 學習資訊
• 01 初識 JavaScript
  • 瀏覽器執行JS程序
  • JS的組成
  • JS初體驗
  • JS 的注釋
• 02 JavaScript輸入輸出陳述句
• 03 變數
  • 變數概述
  • 變數的使用
  • 變數的語法擴展
  • 變數的命名規范
• 04 資料型別
  • 4.1 資料型別簡介
  • 4.2 簡單資料型別（基本資料型別）
    • 數字型 Number
    • 字串型 String
    • 布爾型 Boolean
    • Undefined 和 Null
  • 4.3 獲取變數資料型別
  • 4.4 資料型別轉換
    • 轉換為字串
    • 轉換為數字型（重點)
    • 轉換為布爾型
• 05 運算子
• 06 流程控制分支
  • 三元運算式
  • 分支流程控制 switch 陳述句
  • switch 陳述句和 if else if 陳述句的區別
  • JS中的回圈
    • for 回圈
    • 斷點除錯
    • while 回圈
    • do while 回圈
    • continue 關鍵字
    • break 關鍵字
  • 07 JavaScript 陣列
  • 7.1 陣列的概念
  • 7.2 陣列的創建方式
  • 7.3 獲取陣列元素
  • 7.4 遍歷陣列
  • 7.5 陣列中新增元素
• 08 函式
  • 8.1 函式的概念
  • 8.2 函式的使用
    • 宣告函式
    • 呼叫函式
    • 函式的封裝
  • 8.3 函式的引數
    • 形參和實參
    • 函式形參和實參個數不匹配的問題
    • null
  • 8.4 函式的回傳值
    • break ,continue ,return的區別
  • 8.5 arguments 的使用
  • 8.6 函式可以呼叫另外一個函式
  • 8.7 函式宣告的兩種方式
• 09 作用域
  • 9.1 作用域
  • 9.2 變數的作用域
  • 9.3 作用域鏈
• 10 預決議
  • 10.1 預決議
  • 10.2 變數預決議和函式預決議
  • 10.3 預決議案例
  • null
• 11 物件
  • 11.1 物件
  • 11.2 創建物件的三種方式
    • 利用字面量創建物件
    • 利用 new Object 創建物件
    • 利用建構式創建物件
    • 建構式和物件
  • 11.3 new關鍵字
  • 11.4 遍歷物件屬性
• 12 內置物件
  • 12.1 內置物件
  • 12.2 查檔案
  • 12.3 Math物件
  • 12.4 日期物件
  • 12.5 陣列物件
  • 12.6 基本包裝型別

學習資訊

學習形式：網路教學視頻

學習地址：https://www.bilibili.com/video/BV1Sy4y1C7ha/?spm_id_from=333.337.search-card.all.click

學習開始時間：2022年11月18日

01 初識 JavaScript

瀏覽器執行JS程序

瀏覽器分成兩部分:渲染引擎和JS引擎

• 渲染引擎︰用來決議HTML與CSS，俗稱內核，比如chrome瀏覽器的 blink，老版本的 webkit

• JS引擎:也稱為JS解釋器，用來讀取網頁中的JavaScript代碼，對其處理后運行，比如chrome瀏覽器的V8

  瀏覽器本身并不會執行JS代碼，而是通過內置JavaScript引擎(解釋器)來執行JS代碼，JS引擎執行代碼時逐行解釋每一句原始碼（轉換為機器語言），然后由計算機去執行，所以JavaScript語言歸為腳本語言，會逐行解釋執行，

JS的組成

1）ECMAScript
ECMAScript 是由ECMA國際（原歐洲計算機制造商協會）進行標準化的一門編程語言，這種語言在萬維網上應用廣泛，它往往被稱為JavaScript或JScript，但實際上后兩者是ECMAScript語言的實作和擴展，

ECMAScript : ECMAScript規定了JS的編程語法和基礎核心知識，是所有瀏覽器廠商共同遵守的一套JS語法工業標準，

2）DOM——檔案物件模型
檔案物件模型(Document Object Model，簡稱DOM），是W3C組織推薦的處理可擴展標記語言的標準編程介面，通過DOM提供的介面可以對頁面上的各種元素進行操作(大小、位置、顏色等)，

3）BOM——瀏覽器物件模型
BOM(Browser Object Model，簡稱BOM)是指瀏覽器物件模型，它提供了獨立于內容的可以與瀏覽器視窗進行互動的物件結構，通過BOM可以操作瀏覽器視窗，比如彈出框、控制瀏覽器跳轉、獲取解析度等，

JS初體驗

JS有3種書寫位置，分別為行內、內嵌和外部，

1）行內式JS

<input type="button" value="https://www.cnblogs.com/keepcode/archive/2022/11/21/點我式試" onclick="alert('Hello world')"/>

• 可以將單行或少量JS代碼寫在HTML標簽的事件屬性中(以on開頭的屬性），如:onclick
• 注意單雙引號的使用：在HTML中我們推薦使用雙引號，JS中我們推薦使用單引號
• 可讀性差，在html中撰寫JS大量代碼時，不方便閱讀;
• 引號易錯，引號多層嵌套匹配時，非常容易弄混﹔
• 特殊情況下使用

2）內嵌JS

<script>
        alert("醉后不知天在水")
</script>

• 可以將多行JS代碼寫到<script>標簽中

• 內嵌JS是學習時常用的方式

3）外部 JS 檔案

<script src="https://www.cnblogs.com/keepcode/archive/2022/11/21/example.js"></script>

• 利于HTML頁面代碼結構化，把大段JS代碼獨立到HTML頁面之外，既美觀，也方便檔案級別的復用

• 參考外部JS檔案的script標簽中間不可以寫代碼

• 適合于JS代碼量比較大的情況

JS 的注釋

• 單行注釋使用雙斜線 //

• 多行注釋使用 /* 要注釋的代碼 */

02 JavaScript輸入輸出陳述句

方法	說明	歸屬
alert(msg)	瀏覽器彈出警示框	瀏覽器
console.log(msg)	瀏覽器控制臺列印輸出資訊	瀏覽器
prompt(info)	瀏覽器彈出輸入框，用戶可以輸入	瀏覽器

注：從prompt獲取的值的資料型別是字串型別，

03 變數

變數概述

什么是變數
白話∶變數就是一個裝東西的盒子，
通俗︰變數是用于存放資料的容器，我們通過變數名獲取資料，甚至資料可以修改，

變數在記憶體中的存盤
本質:變數是程式在記憶體中申請的一塊用來存放資料的空間，類似我們酒店的房間，一個房間就可以看做是一個變數，

變數的使用

變數在使用時分為兩步:

1.宣告變數

2.賦值

1.宣告變數

// 宣告變數
var age;	// 宣告一個名稱為 age 的變數

• var 是一個JS關鍵字，用來宣告變數( variable變數的意思)，使用該關鍵字宣告變數后，計算機會自動為變數分配記憶體空間，不需要程式員管
• age是程式員定義的變數名，我們要通過變數名來訪問記憶體中分配的空間

案例∶變數的使用
1.彈出一個輸入框，提示用戶輸入姓名，
2.彈出一個對話框，輸出用戶剛才輸入的姓名，

<script>
        var name= prompt("請輸入您的名字：");
        alert(name);
</script>

變數的語法擴展

更新變數
一個變數被重新復賦值后，它原有的值就會被覆寫，變數值將以最后一次賦的值為準，

<script>
        var name = "迪麗熱巴";
        console.log(name);
        name = "古力娜扎";
        console.log(name);	// 輸出古力娜扎
</script>

同時宣告多個變數
同時宣告多個變數時，只需要寫一個var，多個變數名之間使用英文逗號隔開，

var name="張三", age=18, address="China";

宣告變數的特殊情況

情況	說明	結果
var age; console.log(age)	只宣告，不賦值	undefined
console.log(name)	不宣告，不賦值，直接使用	報錯
age=10; console.log(age)	不宣告，只賦值	10

變數的命名規范

• 由字母(A-Za-z)、數字(O-9)、下劃線(_)、美元符號($ )組成，如: usrAge, num01,_name
• 嚴格區分大小寫，var app;和var App;是兩個變數
• 不能以數字開頭，18age是錯誤的
• 不能是關鍵字、保留字，例如: var、for、while
• 變數名必須有意義，MMD BBD nl →age
• 遵守駝峰命名法，首字母小寫，后面單詞的首字母需要大寫，myFirstName

04 資料型別

4.1 資料型別簡介

變數的資料型別
變數是用來存盤值的所在處，它們有名字和資料型別，變數的資料型別決定了如何將代表這些值的位存盤到計算機的記憶體中，JavaScript是一種弱型別或者說動態語言，這意味著不用提前宣告變數的型別，在程式運行程序中，型別會被自動確定，

var age=10;		// 這是一個數字型
var name="李白";		// 這是一個字串

在代碼運行時，變數的資料型別是由JS引擎根據=右邊變數值的資料型別來判斷的，運行完畢之后，變數就確定了資料型別，

JavaScript擁有動態型別，同時也意味著相同的變數可用作不同的型別∶

var x=6;
var x="Jack";

資料型別的分類

JS把資料型別分為兩類：

• 簡單資料型別（Number，String，Boolean，Undefined，Null）
• 復雜資料型別（object）

4.2 簡單資料型別（基本資料型別）

JavaScript中的簡單資料型別及其說明如下︰

簡單資料型別	說明	默認值
Number	數字型，包含整型值和浮點型值，如21、0.21	0
Boolean	布林值型別，如true 、false，等價于1和0	false
String	字串型別，如"張三”注意咱們 js 里面，字串都帶引號	""
Undefined	var a; 宣告了變數a但是沒有給值，此時a = undefined	undefined
Null	var a = null; 宣告了變數a為空值	null

數字型 Number

JavaScript數字型別既可以用來保存整數值，也可以保存小數(浮點數)，

var age = 18;			// 整數
var distance = 19.1;	// 小數

數字型范圍

JavaScript中數值的最大和最小值

alert(Number.MAX_VALUE);
alert(Number.MIN_VALUE);

數字型三個特殊值

alert(Infinity);
alert(-Infinity);
alert(NaA);

• Infinity ，代表無窮大，大于任何數值

• -Infinity ，代表無窮小，小于任何數值

• NaN，Not a number，代表一個非數值

isNaN()

用來判斷一個變數是否為非數字的型別，回傳 true 或者 false

isNaN(x)：

• x是數字，回傳 false
• x不是數字，回傳true

字串型 String

• 字串型可以是引號中的任意文本，其語法為雙引號""和單引號"

• 因為HTML標簽里面的屬性使用的是雙引號，JS這里我們更推薦使用單引號，

• JS可以用單引號嵌套雙引號，或者用雙引號嵌套單引號(外雙內單，外單內雙)

var str="He's name is Jakc";

字串轉義符

類似HTML里面的特殊字符，字串中也有特殊字符，我們稱之為轉義符，轉義符都是\開頭的，常用的轉義符及其說明如下:

轉義符	解釋說明
\n	換行符
\\	斜杠\
\'	' 單引號
\"	" 雙引號
\t	tab 縮進
\b	空格

字串長度

字串是由若干字符組成的，這些字符的數量就是字串的長度，通過字串的 length 屬性可以獲取整個字串的長度，

var msg = "Hello World!"
alert(msg.length)	// 顯示12

字串拼接

多個字串之間可以使用＋進行拼接，其拼接方式為 字串＋任何型別 = 拼接之后的新字串

console.log("jack" + "ma");		// jackma
console.log("jack" + 01);		// jack1 
console.log("jack" + true);		// jacktrue
console.log(12 + 12);			// 24	
console.log('12' + 12);			// 1212

記憶口訣：數值相加，字符相連

布爾型 Boolean

布爾型別有兩個值: true和false ，其中true表示真(對)，而false表示假(錯)，

Undefined 和 Null

一個宣告后沒有被賦值的變數會有一個默認值undefined(如果進行相連或者相加時，注意結果)，

undefined 和數字相加的結果是 NaN，

null 和數字相加的結果是數字，

4.3 獲取變數資料型別

typeof 可用來獲取檢測變數的資料型別，

var num=10;
console.log(typeof num)		// num

var username='Jack';
console.log(typeof username)	// string

var flag=true;
console.log(typeof flag);		// boolean

var timer=null;
console.log(typeof timer);		// object

var value2=undefined;
console.log(typeof value2);		// undefined

字面量
字面量是在源代碼中一個固定值的表示法，通俗來說，就是字面量表示如何表達這個值，

• 數字字面量：8,9,10

• 字串字面量：'黑馬程式員'，"大前端"

• 布爾字面量：true , false

4.4 資料型別轉換

什么是資料型別轉換
使用表單、prompt獲取過來的資料默認是字串型別的，此時就不能直接簡單的進行加法運算，而需要轉換變數的資料型別，通俗來說，就是把一種資料型別的變數轉換成另外一種資料型別，

我們通常會實作3種方式的轉換∶

• 轉換為字串型別
• 轉換為數字型
• 轉換為布爾型

轉換為字串

方式	說明	案例
toString()	轉成字串	var num= 1; alert(num.toString());
String()強制轉換	轉成字將串	var num = 1; alert(String(num));
加號拼接字串	和字串拼接的結果都是字串	var num = 1; alert(num+ "我是字串");

• toString(和String()使用方式不一樣，
• 三種轉換方式，我們更喜歡用第三種加號拼接字串轉換方式，這一種方式也稱之為隱式轉換，

轉換為數字型（重點)

方式	說明	案例
parselnt(string)函式	將string型別轉成整數數值型	parseInt('78')
parseFloat(string)函式	將string型別轉成浮點數數值型	parseFloat('78.21')
Number()強制轉換函式	將string型別轉換為數值型	Number("12')
js 隱式轉換( - * / )	利用算術運算隱式轉換為數值型	'12'-0

注意：

• parseInt('3.14') 的值是3、parseInt(3.99)的值是3、parseInt(250px)的值是250
• parseInt('name66') 的值是 NaN
• parseFloat('aa11') 的值是 NaN

總結：

• 當加號的任意一邊有字串型別時，結果會隱式轉換為字串
• 當字串和數字之間的運算子是 減/乘/除 時，結果會隱式轉換為數字

轉換為布爾型

方式	說明	案例
Boolean() 函式	其他型別轉換成布林值	Boolean('true');

• 代表空、否定的值會被轉換為false ，如 ""、0、NaN、null、undefined

• 其余值都會被轉換為true

05 運算子

比較運算子

運算子名稱	說明	案例	結果
==	判等號（會轉型），判斷兩邊的值是否相等	37 == '37'	true
=== !==	全等 要求值和資料型別一直	37 === '37'	false

邏輯運算子

邏輯運算子	說明	案例
&&	"邏輯與"，簡稱 "與" and	true && true
||	"邏輯或"，簡稱 "或" or	true || false
!	"邏輯非"，簡稱 "非" not	!true

• 邏輯與，兩邊都為 true 才回傳 true，否則回傳 false
• 邏輯或，只要一邊是 true 就回傳 true，否則回傳 false
• 邏輯非，只要是 true 就回傳 false

短路運算（邏輯中斷）

短路運算的原理∶當有多個運算式(值)時,左邊的運算式值可以確定結果時,就不再繼續運算右邊的運算式的值;

1）邏輯與

• 語法：運算式1 && 運算式2
• 如果第一個運算式的值為真，則回傳運算式2
• 如果第一個運算式的值為假，則回傳運算式1

2）邏輯或

• 語法：運算式1 || 運算式2
• 如果第一個運算式的值為真，則回傳運算式1
• 如果第一個運算式的值為假，則回傳運算式2

運算子的優先級

優先級	運算子	順序
1	小括號	()
2	一元運算子	++ -- !
3	算數運算子	先 * / % 后 + -
4	關系運算子	> >= < <=
5	相等運算子	== != === !==
6	邏輯運算子	先 && 后 ||
7	賦值運算子	=
8	逗號運算子	,

• 一元運算子里面的 邏輯非 優先級很高
• 邏輯與比邏輯或的優先級高

06 流程控制分支

流程控制主要有三種結構，分別是順序結構、分支結構和回圈結構，這三種結構代表三種代碼執行的順序，

三元運算式

語法結構
條件運算式 ? 運算式1:運算式2

age>18?alert("已成年"):alert("未成年")

執行思路

• 如果條件運算式結果為真則回傳運算式1的值

• 如果條件運算式結果為假則回傳運算式2的值

分支流程控制 switch 陳述句

語法結構

switch陳述句也是多分支陳述句，它用于基于不同的條件來執行不同的代碼，當要針對變數設定一系列的特定值的選項時，就可以使用switch，
心，

switch(運算式){
    case value1:
        執行陳述句1;
        break;
    case value2:
        執行陳述句2;
        break;
    case value3:
        執行陳述句3;
        break;
    ...
    default:
        執行陳述句最后陳述句;      
       }

執行思路

利用我們的運算式的值和 case后面的選項值相匹配如果匹配上，就執行該里面的陳述句如果都沒有匹配上，那么執行default里面的陳述句，

案例：

<script>
        var level = prompt("請輸入您的年齡：");
        level = parseInt(level);
        switch(level){
            case 1:
                alert("您的等級是1級！");
                break;
            case 2:
                alert("您的等級是2級！");
                break;
            case 3:
                alert("您的等級是3級！");
                break;
            default:
                alert("您的等級未知！");
        }
</script>

注意：

• level 的值和case里面的值相匹配的時候是全等，必須資料型別和值一致才可以
• 如果當前的 case 里面沒有 break，則不會退出 switch且繼續執行下一個 case

switch 陳述句和 if else if 陳述句的區別

• 一般情況下，它們兩個陳述句可以相互替換
• switch..case陳述句通常處理case為比較確定值的情況，而i...else...陳述句更加靈活，常用于范圍判斷(大于、等于某個范圍)
• switch陳述句進行條件判斷后直接執行到程式的條件陳述句，效率更高，而if...else陳述句有幾種條件，就得判斷多少次，
• 當分支比較少時，if...else陳述句的執行效率比switch陳述句高，
• 當分支比較多時，switch陳述句的執行效率比較高，而且結構更清晰，

JS中的回圈

• for 回圈
• while 回圈
• do...while 回圈

for 回圈

在程式中，一組被重復執行的陳述句被稱之為回圈體，能否繼續重復執行，取決于回圈的終止條件，由回圈體及回圈的終止條件組成的陳述句，被稱之為回圈陳述句

語法結構
for回圈主要用于把某些代碼回圈若干次，通常跟計數有關系，其語法結構如下:

for(初始化變數;條件運算式;操作運算式){
    // 回圈體;
}

案例：在瀏覽器控制臺輸出100句"JS天下第一！"

<script>
    for (var i=0; i<100;i++){
        console.log("JS天下第一！")
    }
</script>

斷點除錯

斷點除錯是指自己在程式的某一行設定一個斷點，除錯時，程式運行到這一行就會停住，然后你可以一步一步往下除錯，除錯程序中可以看各個變數當前的值，出錯的話，除錯到出錯的代碼行即顯示錯誤，停下，
斷點除錯可以幫我們觀察程式的運行程序
瀏覽器中按F12--> sources -->找到需要除錯的檔案-->在程式的某一行設定斷點Watch:監視，通過watch可以監視變數的值的變化，非常的常用，
F11:程式單步執行，讓程式一行一行的執行，這個時候，觀察watch中變數的值的變化，
代碼除錯的能力非常重要，只有學會了代碼除錯，才能學會自己解決bug的能力，初學者不要覺得除錯代碼麻煩就不去除錯，知識點花點功夫肯定學的會，但是代碼除錯這個東西，自己不去練，永遠都學不會，

while 回圈

while陳述句可以在條件運算式為真的前提下，回圈執行指定的一段代碼，直到運算式不為真時結束回圈while陳述句的語法結構如下:

while (條件運算式){
	// 回圈體
}

執行思路：

• 先執行條件運算式，如果結果為true，則執行回圈體代碼;如果為false，則退出回圈，執行后面代碼
• 執行回圈體代碼
• 回圈體代碼執行完畢后，程式會繼續判斷執行條件運算式，如條件仍為true，則會繼續執行回圈體，直到回圈條件為false時，整個回圈程序才會結束

do while 回圈

do... while 陳述句其實是while陳述句的一個變體，該回圈會先執行一次代碼塊，然后對條件運算式進行判斷，如果條件為真，就會重復執行回圈體，否則退出回圈，

do {
    回圈體
} while (條件運算式)

continue 關鍵字

continue關鍵字用于立即跳出本次回圈，繼續下一次回圈（本次回圈體中continue之后的代碼就會少執行一次)，

break 關鍵字

break關鍵字用于立即跳出整個回圈（回圈結束)，

07 JavaScript 陣列

7.1 陣列的概念

陣列是指一組資料的集合，其中的每個資料被稱作元素，在陣列中可以存放任意型別的元素，陣列是一種將一組資料存盤在單個變數名下的優雅方式，

// 普通變數一次只能存盤一個值
var num=10;

// 陣列一次可以存盤多個值
var arr = [1, 2, 3, 4];

7.2 陣列的創建方式

JS中創建陣列有兩種方式:

• 利用new創建陣列
• 利用陣列字面量創建陣列

// 利用new創建陣列
var arr = new Array();		// 創建一個空陣列

// 利用陣列字面量創建陣列
var arr = [];		// 創建一個空陣列

• 陣列的字面量是方括號[]
• 宣告陣列并賦值稱為陣列的初始化
• 字面量方式也是我們以后最多使用的方式

陣列元素的型別

陣列中可以存放任意型別的資料，例如字串，數字，布林值等，

var arr = [1, 'China', true, 66.66]

7.3 獲取陣列元素

陣列的索引

索引(下標)∶用來訪問陣列元素的序號(陣列下標從0開始），

陣列可以通過索引來訪問、設定、修改對應的陣列元素，我們可以通過“陣列名[索引]”的形式來獲取陣列中的元素，
這里的訪問就是獲取得到的意思

var arr = [1, 'China', true, 66.66];
// 獲取陣列中的第二個元素
alert(arr[1]);

陣列長度

獲取陣列長度可以使用 陣列名.length 方法獲取，

7.4 遍歷陣列

可以使用 for 回圈將陣列中的元素遍歷出來，

案例：

<script>
    var nameList = ['張三', '李四', '王五', '趙六', '陳琦'];
    for (var i=0; i<nameList.length; i++){
        console.log(nameList[i]);
    }
</script>

案例：獲取陣列中的最大值

<script>
    var arr = [1, 2, 3, 4, 6, 5, 78, 34];
    var max=arr[0];
    for(var i=0; i<arr.length-1;i++){            
        if (arr[i+1] > max){
            max = arr[i+1];
        }
    }
	console.log(max);
</script>

7.5 陣列中新增元素

通過修改length長度新增陣列元素

• 可以通過修改length長度來實作陣列擴容的目的
• 不能直接給陣列名賦值，否則會覆寫掉以前的資料
• length屬性是可讀寫的

var arr = [1, 2, 3];
arr.length=5;
console.log(arr);
console.log(arr[3]);
console.log(arr[4]);

其中索引號3、4的空間沒有給值，就是宣告變數未給值，默認值就是 undefined，

案例1：篩選陣列中大于10的元素，并將它們放到一個新的陣列中，

<script>
    var arr = [1, 2, 3, 5, 88, 89, 99];
    var newArr = [];
    for(var i=0; i<arr.length; i++){
        if (arr[i]>10){
            // 注意這里的寫法，很妙
            newArr[newArr.length] = arr[i];
        }
    }
    console.log(newArr);
</script>

案例2：翻轉陣列

<script>
    var arr = [1, 2, 3, 4, 6, 5, 7];
    var newArr = [];
    for (var i = arr.length-1; i>=0; i--){
        newArr[newArr.length] = arr[i];
    }
    console.log("原陣列：" + arr)
    console.log("翻轉之后的陣列：" + newArr);
</script>

08 函式

8.1 函式的概念

雖然 for回圈陳述句也能實作一些簡單的重復操作，但是比較具有局限性，此時我們就可以使用JS中的函式，

函式就是封裝了一段可以被重復執行呼叫的代碼塊目的：就是讓大量代碼重復使用

8.2 函式的使用

函式在使用時分為兩步：宣告函式和呼叫函式，

宣告函式

// 宣告函式
function 函式名(){
    // 函式體代碼
}

• function是宣告函式的關鍵字，必須小寫

• 由于函式一般是為了實作某個功能才定義的，所以通常我們將函式名命名為動詞，比如 getSum

• function宣告函式的關鍵字全部小寫

呼叫函式

// 呼叫函式
函式名();	// 通過呼叫函式名來執行函式體的代碼

• 呼叫的時候千萬不要忘記添加小括號
• 口訣：函式不呼叫，自己不執行

注意：宣告函式本身并不會執行代碼，只有呼叫函式時才會執行函式體代碼，

函式的封裝

函式的封裝是把一個或者多個功能通過函式的方式封裝起來，對外只提供一個簡單的函式介面，

案例：求1-100之間的累加和

<script>
    function getSum(){
    var sum=0;
    for (var i=0; i<=100; i++){
        sum += i;
    }
    console.log(sum)
	}
    getSum()
</script>

8.3 函式的引數

形參和實參

在宣告函式時，可以在函式名稱后面的小括號中添加一些引數，這些引數被稱為形參，而在呼叫該函式時，同樣也需要傳遞相應的引數，這些引數被稱為實參，

引數	說明
形參	形式上的引數函式定義的時候傳遞的引數當前并不知道是什么
實參	實際上的引數函式呼叫的時候傳遞的引數實參是傳遞給形參的

引數的作用：在函式內部某些值不能固定，我們可以通過引數在呼叫函式時傳遞不同的值進去，

函式形參和實參個數不匹配的問題

引數個數	說明
實參個數等于形參個數	輸出正確結果
實參個數多于形參個數	只取到形參個數
實參個數小于形參個數	多的形參定義為 undefined，結果為 NaN

8.4 函式的回傳值

return陳述句

有的時候，我們會希望函式將值回傳給呼叫者，此時通過使用 return 陳述句就可以實作，

function 函式名(){
    return 需要回傳的結果;
}

• 我們函式只是實作某種功能，最終的結果需要回傳給函式的呼叫者函式名(）通過return 實作的

• 只要函式遇到return 就把后面的結果回傳給函式的呼叫者﹐函式名() = return 后面的結果

• return陳述句之后的代碼不被執行

• return只能回傳一個值，如果用逗號隔開多個值，以最后一個為準

• 函式沒有return回傳undefined

案例：

<script>
    var name = prompt("請輸入您的名字：");
    function greeting(name){
        msg = "Hello " + name;
        return msg;
    }
    msg = greeting(name);
    alert(msg);
</script>

break ,continue ,return的區別

• break：結束當前的回圈體(如for、while )

• continue ：跳出本次回圈，繼續執行下次回圈(如for、while )

• return ：不僅可以退出回圈，還能夠回傳 return 陳述句中的值，同時還可以結束當前的函式體內的代碼

8.5 arguments 的使用

當我們不確定有多少個引數傳遞的時候，可以用arguments來獲取，在JavaScript中，arguments實際上它是當前函式的一個內置物件，所有函式都內置了一個arguments物件，arguments物件中存盤了傳遞的所有實參，

<script>
    function fn(){
        console.log(arguments)
    }
    fn(1, 2, 3);
</script>

瀏覽器 console 輸出結果:

arguments展示形式是一個偽陣列，因此可以進行遍歷，偽陣列具有以下特點∶

• 具有length屬性
• 按索引方式儲存資料
• 不具有陣列的push , pop等方法
• 只有函式才有 arguments 物件而且是每個函式都內置好了這個 arguments

8.6 函式可以呼叫另外一個函式

因為每個函式都是獨立的代碼塊，用于完成特殊任務，因此經常會用到函式相互呼叫的情況，

8.7 函式宣告的兩種方式

1、利用函式關鍵字自定義函式(命名函式)

function fn(){
    
}
fn();

2、函式運算式(匿名函式)

var 變數名 = function(){};

var fun = function(){
    console.log('函式運算式')
}
fun()

• fun是變數名不是函式名
• 函式運算式宣告方式跟宣告變數差不多，只不過變數里面存的是值而函式運算式里面存的是函式

09 作用域

9.1 作用域

作用域概述

通常來說，一段程式代碼中所用到的名字并不總是有效和可用的，而限定這個名字的可用性的代碼范圍就是這個名字的作用域，作用域的使用提高程式邏輯的區域性，增強了程式的可靠性，減少了名字沖突，

全域作用域

整個script標簽或者是一個單獨的 js 檔案，

區域作用域

在函式內部就是區域作用域這個代碼的名字只在函式內部起效果和作用

9.2 變數的作用域

變數作用域的分類
在JavaScript中，根據作用域的不同，變數可以分為兩種:

• 全域變數
• 區域變數

全域變數

在全域作用域下宣告的變數叫做全域變數(在函式外部定義的變數)，

• 全域變數在代碼的任何位置都可以使用
• 在全域作用域下var宣告的變數是全域變數
• 特殊情況下，在函式內不使用var宣告的變數也是全域變數(不建議使用)

區域變數

在區域作用域下宣告的變數叫做區域變數(在函式內部定義的變數)

• 區域變數只能在該函式內部使用
• 在函式內部var 宣告的變數是區域變數
• 函式的形參實際上就是區域變數

從執行效率來看全域變數和區域變數

(1全域變數只有瀏覽器關閉的時候才會銷毀，比較占記憶體資源

(2)區域變數當我們程式執行完畢就會銷毀，比較節約記憶體資源

9.3 作用域鏈

• 只要是代碼，就至少有一個作用域

• 寫在函式內部的區域作用域

• 如果函式中還有函式，那么在這個作用域中就又可以誕生一個作用域

• 根據在內部函式可以訪問外部函式變數的這種機制，用鏈式查找決定哪些資料能被內部函式訪問，就稱作作用域鏈

• 作用域鏈采取的查找方式是就近原則

案例：結果是幾？

<script>
    function f1(){
        var num=123;
        function f2(){
            console.log(num);	// 輸出123
        }
        f2();
    }
    var num=456;
    f1();
</script>

10 預決議

10.1 預決議

JavaScript代碼是由瀏覽器中的JavaScript決議器來執行的，JavaScript決議器在運行JavaScript代碼的時候分為兩步：預決議和代碼執行，

• 預決議：js引擎會把js 里面所有的 var還有 function 提升到當前作用域的最前面
• 代碼執行：按照代碼書寫的順序從上往下執行

10.2 變數預決議和函式預決議

預決議分為變數預決議（變數提升）和 函式預決議（函式提升）

1）變數提升就是把所有的變數宣告提升到當前的作用域最前面，不提升賦值操作

變數提升案例1

console.log(num);       // 輸出：undefined
var num=10;

// 相當于執行了以下代碼：
var num;
console.log(num); 
num = 10;	// 變數提升不提升賦值操作

變數提升案例2

fun();   // 報錯：fun is not defined
var fun = function(){
    console.log(11);
}


// 相當于執行了以下代碼：
var fun;
fun();
fun = function(){
    console.log(11);
}

2）函式提升就是把所有的函式宣告提升到當前作用域的最前面，不呼叫函式

函式提升案例

fn();       // 輸出:11
function fn(){
     console.log(11);
}

// 相當于執行了以下代碼：
function fn(){
     console.log(11);
}
fn();

10.3 預決議案例

案例1：

var num=10;
fun();
function fun(){
    console.log(num);	// 輸出結果 undefined
    var num=20;
}

// 相當于執行了以下操作
var num;
function fun(){
    // 函式內部的變數也提升到了函式內的頂部
    var num;
    console.log(num);	// 輸出結果 undefined
    num=20;		// 賦值操作不提升
}
num = 10;	// 賦值操作不提升
fun();

案例2：

f1();
console.log(c);
console.log(b);
console.log(a);
function f1(){
    var a=b=c=9;
    console.log(a);
    console.log(b);
    console.log(c);
}



// 相當于執行了以下代碼
function f1(){
    var a;
    a=b=c=9;
    console.log(a);		// 9
    console.log(b);		// 9
    console.log(c);		// 9
}
f1();
console.log(c);			// 9
console.log(b);			// 9
console.log(a);			// a is not defined

注意： var a=b=c=9; 相當于 var a=9; b=9; c=9;，b和c 前面是沒有 var 的，相當于 b 和 c 是全域變數，如果想集體宣告，應該這樣宣告：var a=9,b=9,c=9;

11 物件

11.1 物件

什么是物件?
現實生活中：萬物皆物件，物件是一個具體的事物，看得見摸得著的實物，例如，一本書、一輛汽車、一個人可以是“物件”，一個資料庫、一張網頁、一個與遠程服務器的連接也可以是“物件”，

在JavaScript中，物件是一組無序的相關屬性和方法的集合，所有的事物都是物件，例如字串、數值、陣列、函式等，

物件是由屬性和方法組成的，

• 屬性：事物的特征，在物件中用屬性來表示(常用名詞)

• 方法：事物的行為，在物件中用方法來表示(常用動詞)

11.2 創建物件的三種方式

在JavaScript中，現階段我們可以采用三種方式創建物件( object ) :

• 利用字面量創建物件
• 利用 new Object 創建物件
• 利用建構式創建物件

利用字面量創建物件

物件字面量：就是花括號 {} 里面包含了表達這個具體事物（物件）的屬性和方法，

• 里面的屬性或者方法我們采取鍵值對的形式 鍵屬性名:值屬性值

• 多個屬性或者方法中間用逗號隔開的

• 方法冒號后面跟的是一個匿名函式

案例：

var obj ={
    userName: '張三',
    age: 18,
    sex: '男',
    sayHi: function(){
        console.log('Hi~')
    }
}

物件的使用

1）呼叫物件的屬性我們采取 物件名.屬性名，如

console.log(obj.name)	// 輸出'張三'

2）也可以采用 物件名['屬性名'] 的方法，如：

console.log(obj['name'])	// 輸出'張三'

3）呼叫物件的方法，使用 物件名.方法名，如：

console.log(obj.sayHi())	// 輸出'張三'

變數、屬性、函式、方法總結

• 變數：單獨宣告賦值，單獨存在

• 屬性：物件里面的變數稱為屬性，不需要宣告，用來描述該物件的特征

• 函式︰單獨存在的，通過“函式名)”的方式就可以呼叫

• 方法：物件里面的函式稱為方法，方法不需要宣告，使用“物件.方法名()”的方式就可以呼叫，方法用來描述該物件的行為和功能，

利用 new Object 創建物件

案例：

var obj = new Object();     // 創建一個空物件
obj.userName = '張三';
obj.age = 18;
obj.sex = '男';
obj.sayHi = function(){
    console.log('Hi~');
}

利用建構式創建物件

為什么需要使用建構式?

• 就是因我們前面兩種創建物件的方式一次只能創建一個物件，

• 因為我們一次創建一個物件，里面很多的屬性和方法是大量相同的我們只能復制，

• 因此我們可以利用函式的方法重復這些相同的代碼我們就把這個函式稱為建構式，

• 又因為這個函式不一樣，里面封裝的不是普通代碼，而是物件，

• 建構式就是把我們物件里面一些相同的屬性和方法抽象出來封裝到函式里面，

建構式：是一種特殊的函式，主要用來初始化物件，即為物件成員變數賦初始值，它總與new運算子一起使用，我們可以把物件中一些公共的屬性和方法抽取出來，然后封裝到這個函式里面，

建構式的語法格式

function 建構式名(){
		this.屬性 = 值;
    	this.方法 = function(){
            
        }
}
//使用關鍵字 new 呼叫建構式
new 建構式名();

• 建構式的名字首字母要大寫
• 建構式不需要 return 就可以回傳結果
• 呼叫建構式，必須使用 new
• 屬性和方法前面必須添加 this

案例：利用建構式創建4大天王

function Star(name, age, sex){
        this.name = name;
        this.age = age;
        this.sex = sex;
        this.sing = function(song){
            console.log("即將為您播放天王"+ this.name +"的歌曲-" + song);
        }
}
var Liudehua = new Star('劉德華', 18, '男');
var Guofucheng = new Star('郭富城', 18, '男');
var Zhangxueyou = new Star('張學友', 20, '男');
var Liming = new Star('黎明', 17, '男');

console.log(typeof Liudehua);        // object
console.log(Liudehua.name);
Liudehua.sing('冰雨');

建構式和物件

• 建構式：如Stars()，抽象了物件的公共部分，封裝到了函式里面，它泛指某一大類( class )

• 創建物件：如new Stars()，特指某一個，通過new關鍵字創建物件的程序我們也稱為物件實體化

11.3 new關鍵字

new 關鍵字執行程序

• new 建構式可以在記憶體中創建了一個空的物件
• this 就會指向剛才創建的空物件
• 執行建構式里面的代碼給這個空物件添加屬性和方法
• 回傳這個物件（所以建構式里面不需要 return）

11.4 遍歷物件屬性

for...in 陳述句用于對陣列或者物件的屬性進行回圈操作，

語法格式：

for (變數 in 物件){
    ...
}

案例：

var obj = {
    uname: '張三',
    age: 18,
    address: '深圳'
}

for(var k in obj){
    // console.log(k);     // 輸出屬性名
    console.log(obj[k]);    // 輸出屬性值
}

12 內置物件

12.1 內置物件

• JavaScript中的物件分為3種∶自定義物件、內置物件、瀏覽器物件
• 前面兩種物件是JS基礎內容，屬于ECMAScript;
• 第三個瀏覽器物件屬于我們S獨有的，我們JS API講解
• 內置物件就是指JS語言自帶的一些物件，這些物件供開發者使用，并提供了一些常用的或是最基本而必要的功能（屬性和方法)
• 內置物件最大的優點就是幫助我們快速開發
• JavaScript提供了多個內置物件：Math、Date 、Array、String等

12.2 查檔案

MDN

學習一個內置物件的使用，只要學會其常用成員的使用即可，我們可以通過查檔案學習，可以通過MDN/W3C來查詢，

Mozilla開發者網路(MDN )提供了有關開放網路技術 (Open Web )的資訊，包括HTML、CSS和萬維網及HTML5應用的API，

MDN首頁：https://developer.mozilla.org/zh-CN/

如何學習物件中的方法

1）查閱該方法的功能

2）查看里面引數的意義和型別

3）查看回傳值的意義和型別

4）通過 demo 進行測驗

12.3 Math物件

Math概述

Math物件不是建構式，它具有數學常數和函式的屬性和方法，跟數學相關的運算（求絕對值，取整、最大值等）可以使用Math 中的成員，

Math.PI;			// 圓周率
Math.floor();		// 向下取整
Math.ceil();		// 向上取整
Math.round();		// 四舍五入版 就近取整 注意 -3.5 結果是 -3
Math.abs();			// 絕對值
Math.max();			// 最大值
Math.min();			// 最小值

亂數方法 Math.random()

Math.random() 函式回傳一個浮點數，偽亂數在范圍從0 到小于1，也就是說，從 0（包括 0）往上，但是不包括 1（排除 1）

更多解釋請見：Math.random

12.4 日期物件

創建一個新Date物件的唯一方法是通過new 運算子，例如：let now = new Date(); 若將它作為常規函式呼叫（即不加 new 運算子），將回傳一個字串，而非 Date 物件，

Date概述

• Date物件和Math物件不一樣，他是一個建構式，所以我們需要實體化后才能使用
• Date 實體用來處理日期和時間

Date()方法的使用

獲取當前時間必須實體化

var now = new Date();
console.log(now);

Date()建構式的引數
如果括號里面有時間，就回傳引數里面的時間，例如日期格式字串為‘2019-5-1’，可以寫成 new Date(2019-5-1) 或者new Date(2019/5/1)

日期格式化

我們想要 2019-8-8 8:8:8 格式的日期，要怎么辦?

需要獲取日期指定的部分，所以我們要手動的得到這種格式，

方法名	說明	代碼
getFullYear()	獲取當年	dObj.getFullYear()
getMonth()	獲取當月（0-11）	dObj.getMonth()
getDate()	獲取當天日期	dObj.getDate()
getDay()	獲取星期幾（周日0到周六6）	dObj.getDay()
getHours()	獲取當前小時	dObj.getHours()
getMinutes()	獲取當前分鐘	dObj.getMinutes()
getSeconds()	獲取當前秒鐘	dObj.getSeconds()

獲取日期的總的毫秒形式

Date 物件是基于1970年1月1日（世界標準時間)起的毫秒數

我們經常利用總的毫秒數來計算時間，因為它更精確，

獲取總的毫秒數（時間戳）有以下4種方法：

// 1、通過 valueOf() 或者 getTime() 獲取
var date = new Date();      
console.log(date.valueOf())     // 現在時間距離1970年1月1日的毫秒數
console.log(date.getTime())

console.log('----------------------')

// 2、簡單寫法（最常用的寫法）
var date1 = +new Date();    // +new Date() 回傳總的毫秒數
console.log(date1)

console.log('----------------------')

// 3、H5新增的寫法，獲得總的毫秒數
console.log(Date.now())

案例：倒計時

案例分析

• 核心演算法∶輸入的時間減去現在的時間就是剩余的時間，即倒計時，但是不能拿著時分秒相減，比如05分減去25分，結果會是負數的，
• 用時間戳來做，用戶輸入時間總的毫秒數減去現在時間的總的毫秒數，得到的就是剩余時間的毫秒數，
• 把剩余時間總的毫秒數轉換為天、時、分、秒（時間戳轉換為時分秒)

轉換公式如下：

d = parselnt(總秒數/60/60/24);		//計算天數
h = parseInt(總秒數/60/60%24);		//計算小時
m = parseInt(總秒數/60%60);		// 計算分數
s = parseInt(總秒數%60);			//計算當前秒數

代碼實作：

function countDown(time){
    var nowTime = +new Date();  // 回傳當前時間總的毫秒數
    var inputTime = +new Date(time);    // 用戶輸入的總的毫秒數
    var times = (inputTime - nowTime) / 1000; // 轉換為秒
    var d = parseInt(times/60/60/24);		//計算天數
    d = d<10 ? '0' + d: d;
    var h = parseInt(times/60/60%24);		//計算小時
    h = h<10 ? '0' + h: h;
    var m = parseInt(times/60%60);		// 計算分數
    m = m<10 ? '0' + m: m;
    var s = parseInt(times%60);			//計算當前秒數
    s = s<10 ? '0' + s: s;

    return d + '天' + h + '時' + m + '分' + s + '秒';    
}
console.log(countDown('2022-11-20 23:00:00'))

12.5 陣列物件

創建陣列的兩種方式

1）利用陣列字面創建陣列

var arr = [1, 2, 3];
console.log(arr[0]);

2）利用 new Array()

var arr1 = new Array();
var arr2 = new Array(2);	// 2 表示陣列長度為2，里面有兩個空陣列元素
var arr3 = new Array(2, 3);		// 等價于[2, 3]，這樣寫表示里面有2個陣列元素是2和3

判斷是否是陣列

1）instanceof 運算子，可以用來檢測是否為陣列

var arr = [1, 2, 3];
var obj = {};

console.log(arr instanceof Array);		// true
console.log(obj instanceof Array);		// false

2）Array.isArray(引數)；H5新增的方法

var arr = [1, 2, 3];
var obj = {};

console.log(Array.isArray(arr));		// true
console.log(Array.isArray(obj));		// false

添加洗掉陣列元素的方法

方法名	說明	回傳值
push(引數1...)	末尾添加一個或多個元素，注意修改原陣列	并回傳新的長度
pop()	洗掉陣列最后一個元素，把陣列長度減1無引數、修改原陣列	回傳它洗掉的元素的值
unshift(引數1...)	向陣列的開頭添加一個或更多元素，注意修改原陣列	并回傳新的長度
shift()	洗掉陣列的第一個元素，陣列長度減1無引數、修改原陣列	并回傳第一個元素的值

案例：有一個包含工資的陣列[1500,1200,2000,2100,1800]，要求把陣列中工資超過200O的冊除，剩余的放到新陣列里面

var arr = [1500, 1200, 2000, 2100,1800];
var newArr = [];
for (var i=0; i<=arr.length; i++){
    if (arr[i] < 2000){
        // newArr[newArr.length] = arr[i];
        newArr.push(arr[i]);
    }
}
console.log(newArr);

陣列排序

方法名	說明	是否修改原陣列
reverse()	顛倒陣列中元素的順序,無引數	該方法會改變原來的陣列回傳新陣列
sort()	對陣列的元素進行排序	該方法會改變原來的陣列回傳新陣列

陣列索引方法

方法名	說明	回傳值
indexOf()	陣列中查找給定元素的第一個索引	如果存在回傳索引號如果不存在，則回傳-1，
lastIndexOf()	在陣列中的最后一個的索引	如果存在回傳索引號如果不存在，則回傳-1，

案例：陣列去重

• 目標：把舊陣列里面不重復的元素選取出來放到新陣列中，重復的元素只保留一個，放到新陣列中去重，
• 核心演算法：我們遍歷舊陣列，然后拿著舊陣列元素去查詢新陣列，如果該元素在新陣列里面沒有出現過，我們就添加，否則不添加，
• 我們怎么知道該元素沒有存在？利用 新陣列.indexOf(陣列元素) 如果回傳時-1就說明新陣列里面沒有該元素

案例：

function unique(arr){
    var newArr = [];
    for (var i=0; i<arr.length; i++){
        if (newArr.indexOf(arr[i]) == -1){
            newArr.push(arr[i]);
        }
    }
    return newArr;
}

var arr = [1500, 1200, 1500, 2100, 1800, 1200];
var demo = unique(arr);
console.log(demo)

陣列轉換為字串

方法名	說明	回傳值
toString()	把陣列轉換成字串，逗號分隔每一項	回傳一個字串
join('分隔符')	方法用于把陣列中的所有元素轉換為一個字串	回傳一個字串

案例：

var arr=['red', 'green', 'blue', 'white'];
console.log(arr.toString())     // red,green,blue,white
console.log(arr.join())         // red,green,blue,white
console.log(arr.join(''))       // redgreenbluewhite
console.log(arr.join('-'))      // red-green-blue-white
console.log(arr.join('&'))      // red&green&blue&white

拓展

方法名	說明	回傳值
concat()	連接兩個或多個陣列不影響原陣列	回傳一個新的陣列
slice()	陣列截取slice(begin, end)	回傳被截取專案的新陣列
splice()	陣列洗掉splice(第幾個開始,要洗掉個數)	回傳被洗掉專案的新陣列注意，這個會影響原陣列

注意：slice() 和 splice() 目的基本相同，建議重點看下 splice()

concat 案例：

const array1 = ['a', 'b', 'c'];
const array2 = ['d', 'e', 'f'];
const array3 = array1.concat(array2);

console.log(array3);	// [ 'a', 'b', 'c', 'd', 'e', 'f' ]

slice 案例：

const animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];

console.log(animals.slice(2));
// expected output: Array ["camel", "duck", "elephant"]

console.log(animals.slice(2, 4));
// expected output: Array ["camel", "duck"]

console.log(animals.slice(1, 5));
// expected output: Array ["bison", "camel", "duck", "elephant"]

console.log(animals.slice(-2));
// expected output: Array ["duck", "elephant"]

console.log(animals.slice(2, -1));
// expected output: Array ["camel", "duck"]

console.log(animals.slice());
// expected output: Array ["ant", "bison", "camel", "duck", "elephant"]

splice 案例1：

const months = ['Jan', 'March', 'April', 'June'];
months.splice(1, 0, 'Feb');
// inserts at index 1
console.log(months);
// expected output: Array ["Jan", "Feb", "March", "April", "June"]

months.splice(4, 1, 'May');
// replaces 1 element at index 4
console.log(months);
// expected output: Array ["Jan", "Feb", "March", "April", "May"]

splice 案例2：

從索引 3 的位置開始洗掉 1 個元素

var myFish = ['angel', 'clown', 'drum', 'mandarin', 'sturgeon'];
var removed = myFish.splice(3, 1);

// 運算后的 myFish: ["angel", "clown", "drum", "sturgeon"]
// 被洗掉的元素：["mandarin"]

更多資訊見：splice() 的使用

12.6 基本包裝型別

為了方便操作基本資料型別，JavaScript還提供了三個特殊的參考型別：String、Number和Boolean，基本包裝型別就是把簡單資料型別包裝成為復雜資料型別，這樣基本資料型別就有了屬性和方法，

//下面代碼有什么問題?
var str = 'andy' ;
console.log(str.length);

按道理基本資料型別是沒有屬性和方法的，而物件才有屬性和方法，但上面代碼卻可以執行，這是因為 js 會把基本資料型別包裝為復雜資料型別，其執行程序如下:

//1.生成臨時變數，把簡單型別包裝為復雜資料型別
var temp = new String('andy');

//2.賦值給我們宣告的字符變數
str = temp;

//3.銷毀臨時變數
temp = null;

179-25

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/537741.html

標籤：其他

上一篇：vue+ arcgis for js4.x 地方坐標系地圖服務（Spatial Reference）

下一篇：快速構建頁面結構的 3D Visualization