1 - 編程語言
1.1 編程
- 編程:
- 就是讓計算機為解決某個問題而使用某種程序設計語言編寫程序代碼焕窝,并最終得到結(jié)果的過程。
- 計算機程序:
- 就是計算機所執(zhí)行的一系列的指令集合肢簿,而程序全部都是用我們所掌握的語言來編寫的咱圆,所以人們要控制計算機一定要通過計算機語言向計算機發(fā)出命令匈睁。
1.2 計算機語言
計算機語言指用于人與計算機之間通訊的語言任岸,它是人與計算機之間傳遞信息的媒介。
計算機語言的種類非常的多吕座,總的來說可以分成機器語言,匯編語言和高級語言三大類。
實際上計算機最終所執(zhí)行的都是 機器語言撇叁,它是由“0”和“1”組成的二進制數(shù),二進制是計算機語言的基礎。
1.3 編程語言
編程語言:
可以通過類似于人類語言的“語言”來控制計算機,讓計算機為我們做事情审姓,這樣的語言就叫做編程語言(Programming Language)骨宠。編程語言是用來控制計算機的一系列指令桦他,它有固定的格式和詞匯(不同編程語言的格式和詞匯不一樣)萎羔,必須遵守割岛。如今通用的編程語言有兩種形式:匯編語言和高級語言。
語言類型 | 說明 |
---|---|
匯編語言 | 匯編語言和機器語言實質(zhì)是相同的吭敢,都是直接對硬件操作碰凶,只不過指令采用了英文縮寫的標識符,容易識別和記憶。 |
高級語言 | 高級語言主要是相對于低級語言而言痒留,它并不是特指某一種具體的語言,而是包括了很多編程語言蠢沿,常用的有C語言伸头、C++、Java舷蟀、C#恤磷、Python、PHP野宜、JavaScript扫步、Go語言、Objective-C匈子、Swift等河胎。 |
1.4 翻譯器
高級語言所編制的程序不能直接被計算機識別,必須經(jīng)過轉(zhuǎn)換才能被執(zhí)行虎敦,為此游岳,我們需要一個翻譯器。翻譯器可以將我們所編寫的源代碼轉(zhuǎn)換為機器語言其徙,這也被稱為二進制化胚迫。
1.5 編程語言和標記語言區(qū)別
語言 | 說明 |
---|---|
編程語言 | 編程語言有很強的邏輯和行為能力。在編程語言里, 你會看到很多 if else 唾那、for 访锻、while等具有邏輯性和行為能力的指令,這是主動的闹获。 |
標記語言 | 標記語言(html)不用于向計算機發(fā)出指令期犬,常用于格式化和鏈接。標記語言的存在是用來被讀取的, 他是被動的避诽。 |
總結(jié)
- 計算機可以幫助人類解決某些問題
- 程序員利用編程語言編寫程序發(fā)出指令控制計算機來實現(xiàn)這些任務
- 編程語言有機器語言哭懈、匯編語言、高級語言
- 高級語言需要一個翻譯器轉(zhuǎn)換為計算機識別的機器語言
- 編程語言是主動的有很強的邏輯性
2 - 計算機基礎
2.1 計算機組成
硬件(輸入 輸出 cpu 內(nèi)存 硬盤)+軟件(系統(tǒng)軟件 應用軟件)
2.2 數(shù)據(jù)存儲
- 計算機內(nèi)部使用二進制 0 和 1來表示數(shù)據(jù)茎用。
- 所有數(shù)據(jù)遣总,包括文件、圖片等最終都是以二進制數(shù)據(jù)(0 和 1)的形式存放在硬盤中的轨功。
- 所有程序旭斥,包括操作系統(tǒng),本質(zhì)都是各種數(shù)據(jù)古涧,也以二進制數(shù)據(jù)的形式存放在硬盤中垂券。平時我們所說的安裝軟件,其實就是把程序文件復制到硬盤中。
- 硬盤菇爪、內(nèi)存都是保存的二進制數(shù)據(jù)算芯。
2.3 數(shù)據(jù)存儲單位
大小關系:bit < byte < kb < GB < TB<.....
- 位(bit): 1bit 可以保存一個 0 或者 1 (最小的存儲單位)
- 字節(jié)(Byte):1B = 8b
- 千字節(jié)(KB):1KB = 1024B
- 兆字節(jié)(MB):1MB = 1024KB
- 吉字節(jié)(GB): 1GB = 1024MB
- 太字節(jié)(TB): 1TB = 1024GB
2.4 程序運行
計算機運行軟件的過程:
1. 打開某個程序時,先從硬盤中把程序的代碼加載到內(nèi)存中
2. CPU執(zhí)行內(nèi)存中的代碼
注意:之所以要內(nèi)存的一個重要原因凳宙,是因為 cpu運行太快了熙揍,如果只從硬盤中讀數(shù)據(jù)昙衅,會浪費cpu性能今妄,所以,才使用存取速度更快的內(nèi)存來保存運行時的數(shù)據(jù)赁炎。(內(nèi)存是電是尖,硬盤是機械)
3 - 初始JavaScript
3.1 JavaScript 是什么
布蘭登·艾奇用10天設計出JavaScript意系,最初名LiveScript,后與sun合作改名
- JavaScript 是一種運行在客戶端的腳本語言 (Script 是腳本的意思)
- 腳本語言:不需要編譯饺汹,運行過程中由 js 解釋器( js 引擎)逐行來進行解釋并執(zhí)行
- 現(xiàn)在也可以基于 Node.js 技術(shù)進行服務器端編程
3.2 JavaScript的作用
- 表單動態(tài)校驗(密碼強度檢測) ( JS 產(chǎn)生最初的目的 )
- 網(wǎng)頁特效
- 服務端開發(fā)(Node.js)
- 桌面程序(Electron)
- App(Cordova)
- 控制硬件-物聯(lián)網(wǎng)(Ruff)
- 游戲開發(fā)(cocos2d-js)
3.3 HTML/CSS/JS 的關系
- html/css標記語言--描述類語言
- js腳本語言--編程類語言
3.4 瀏覽器執(zhí)行 JS 簡介
瀏覽器分成兩部分:渲染引擎和 JS 引擎
渲染引擎:用來解析html和css蛔添,俗稱內(nèi)核,比如chrome瀏覽器的blink兜辞,老版本的webkit
-
js引擎:也稱為JS解釋器作郭。用來讀取網(wǎng)頁中的JavaScript代碼,對其處理后運行弦疮,比如chrome瀏覽器的V8
瀏覽器本身并不會執(zhí)行JS代碼夹攒,而是通過內(nèi)置 JavaScript 引擎(解釋器) 來執(zhí)行 JS 代碼 。JS 引擎執(zhí)行代碼時逐行解釋每一句源碼(轉(zhuǎn)換為機器語言)胁塞,然后由計算機去執(zhí)行咏尝,所以 JavaScript 語言歸為腳本語言,會逐行解釋執(zhí)行
3.5 JS 的組成
- ECMAScript:JavaScript語法
- DOM:頁面文檔對象模型
- BOM:瀏覽器對象模型
-
ECMAScript
? ECMAScript 是由ECMA 國際( 原歐洲計算機制造商協(xié)會)進行標準化的一門編程語言啸罢,這種語言在萬維網(wǎng)上應用廣泛编检,它往往被稱為 JavaScript或 JScript,但實際上后兩者是 ECMAScript 語言的實現(xiàn)和擴展扰才。
? 基于JavaScript(網(wǎng)景公司)允懂、Jscript(微軟公司)
? ECMAScript:規(guī)定了JS的編程語法和基礎核心知識,是所有瀏覽器廠商共同遵守的一套JS語法工業(yè)標準衩匣。
更多參看MDN: MDN手冊
-
DOM——文檔對象模型
? 文檔對象模型(DocumentObject Model蕾总,簡稱DOM),是W3C組織推薦的處理可擴展標記語言的標準編程接口琅捏。通過 DOM 提供的接口可以對頁面上的各種元素進行操作(大小生百、位置、顏色等)
-
BOM——瀏覽器對象模型
? 瀏覽器對象模型(Browser Object Model柄延,簡稱BOM) 是指瀏覽器對象模型蚀浆,它提供了獨立于內(nèi)容的、可以與瀏覽器窗口進行互動的對象結(jié)構(gòu)。通過BOM可以操作瀏覽器窗口市俊,比如彈出框杨凑、控制瀏覽器跳轉(zhuǎn)、獲取分辨率等摆昧。
3.6 JS 初體驗
JS 有3種書寫位置撩满,分別為行內(nèi)、內(nèi)嵌和外部据忘。
-
行內(nèi)式
<input type="button" value="點我試試" onclick="alert('Hello World')" />
- 可以將單行或少量 JS 代碼寫在HTML標簽的事件屬性中(以 on 開頭的屬性),如:onclick
- 注意單雙引號的使用:在HTML中我們推薦使用雙引號, JS 中我們推薦使用單引號
- 可讀性差搞糕, 在html中編寫JS大量代碼時勇吊,不方便閱讀;
- 引號易錯窍仰,引號多層嵌套匹配時汉规,非常容易弄混;
- 特殊情況下使用
-
內(nèi)嵌式
<script> alert('Hello World~!'); </script>
- 可以將多行JS代碼寫到 script 標簽中
- 內(nèi)嵌 JS 是學習時常用的方式
-
外部JS文件
<script src="my.js"></script>
- 利于HTML頁面代碼結(jié)構(gòu)化驹吮,把大段 JS代碼獨立到 HTML 頁面之外针史,既美觀,也方便文件級別的復用
- 引用外部 JS文件的 script 標簽中間不可以寫代碼
- 適合于JS 代碼量比較大的情況
4 - JavaScript注釋
- flex子項目占的份數(shù)
- align-self控制子項自己在側(cè)軸的排列方式
- order屬性定義子項的排列順序(前后順序)
4.1 單行注釋
為了提高代碼的可讀性碟狞,JS與CSS一樣啄枕,也提供了注釋功能。
JS中的注釋主要有兩種族沃,分別是 單行注釋 和 多行注釋频祝。
單行注釋的注釋方式如下:
// 我是一行文字,不想被 JS引擎 執(zhí)行脆淹,所以 注釋起來
// 用來注釋單行文字( 快捷鍵 ctrl + / )
4.2 多行注釋
多行注釋的注釋方式如下:
/*
獲取用戶年齡和姓名
并通過提示框顯示出來
*/
/* */ 用來注釋多行文字( 默認快捷鍵 alt + shift + a )
快捷鍵修改為: ctrl + shift + /
vscode → 首選項按鈕 → 鍵盤快捷方式 → 查找 原來的快捷鍵 → 修改為新的快捷鍵 → 回車確認
5 - JavaScript輸入輸出語句
為了方便信息的輸入輸出常空,JS中提供了一些輸入輸出語句,其常用的語句如下:
方法 | 說明 | 歸屬 |
---|---|---|
alert(msg) | 瀏覽器彈出警示框 | 瀏覽器 |
console.log(msg) | 瀏覽器控制臺打印輸出信息 | 瀏覽器 |
prompt(info) | 瀏覽器彈出輸入框盖溺,用戶可以輸入 | 瀏覽器 |
- 注意:alert() 主要用來顯示消息給用戶漓糙,console.log() 用來給程序員自己看運行時的消息。
6 - 變量的概念
6.1 什么是變量
變量是用于存放數(shù)據(jù)的容器
6.2 變量在內(nèi)存中的存儲
本質(zhì):變量是程序在內(nèi)存中申請的一塊用來存放數(shù)據(jù)的空間烘嘱。類似我們酒店的房間昆禽,一個房間就可以看做是一個變量。
7 - 變量的使用?
- 變量的聲明
- 變量的賦值
7.1 聲明變量
// 聲明變量
var age; // 聲明一個 名稱為age 的變量
var 是一個 JS關鍵字蝇庭,用來聲明變量( variable 變量的意思 )为狸。使用該關鍵字聲明變量后,計算機會自動為變量分配內(nèi)存空間遗契,不需要程序員管
age 是程序員定義的變量名辐棒,我們要通過變量名來訪問內(nèi)存中分配的空間
7.2 賦值
age = 10; // 給 age 這個變量賦值為 10
- = 用來把右邊的值賦給左邊的變量空間中 此處代表賦值的意思
- 變量值是程序員保存到變量空間里的值
7.3 變量的初始化
var age = 18; // 聲明變量同時賦值為 18
// 聲明一個變量并賦值, 我們稱之為變量的初始化。
7.4 變量語法擴展
-
更新變量
? 一個變量被重新復賦值后漾根,它原有的值就會被覆蓋泰涂,變量值將以最后一次賦的值為準。
var age = 18; age = 81; // 最后的結(jié)果就是81因為18 被覆蓋掉了
-
同時聲明多個變量
? 同時聲明多個變量時辐怕,只需要寫一個 var逼蒙, 多個變量名之間使用英文逗號隔開。
var age = 10, name = 'zs', sex = 2;
-
聲明變量特殊情況
情況 說明 結(jié)果 var age ; console.log (age); 只聲明 不賦值 undefined console.log(age) 不聲明 不賦值 直接使用 報錯 age = 10; console.log (age); 不聲明 只賦值 10
7.5 變量命名規(guī)范
規(guī)則:
- 由字母(A-Za-z)寄疏、數(shù)字(0-9)是牢、下劃線(_)、美元符號( $ )組成陕截,如:usrAge, num01, _name
- 嚴格區(qū)分大小寫驳棱。var app; 和 var App; 是兩個變量
- 不能 以數(shù)字開頭。 18age 是錯誤的
- 不能 是關鍵字农曲、保留字社搅。例如:var、for乳规、while
- 變量名必須有意義形葬。 MMD BBD nl → age
- 遵守駝峰命名法。首字母小寫暮的,后面單詞的首字母需要大寫笙以。myFirstName
8 - 數(shù)據(jù)類型
8.1 數(shù)據(jù)類型簡介
-
為什么需要數(shù)據(jù)類型
? 在計算機中,不同的數(shù)據(jù)所需占用的存儲空間是不同的冻辩,為了便于把數(shù)據(jù)分成所需內(nèi)存大小不同的數(shù)據(jù)源织,充分利用存儲空間,于是定義了不同的數(shù)據(jù)類型微猖。
-
變量的數(shù)據(jù)類型
? 變量是用來存儲值的所在處谈息,它們有名字和數(shù)據(jù)類型。變量的數(shù)據(jù)類型決定了如何將代表這些值的位存儲到計算機的內(nèi)存中凛剥。JavaScript 是一種弱類型或者說動態(tài)語言侠仇。這意味著不用提前聲明變量的類型,在程序運行過程中犁珠,類型會被自動確定:
var age = 10; // 這是一個數(shù)字型 var areYouOk = '是的'; // 這是一個字符串
? 在代碼運行時逻炊,變量的數(shù)據(jù)類型是由 JS引擎 根據(jù) = 右邊變量值的數(shù)據(jù)類型來判斷 的,運行完畢之后犁享, 變量就確定了數(shù)據(jù)類型余素。JavaScript 擁有動態(tài)類型,同時也意味著相同的變量可用作不同的類型:
var x = 6; // x 為數(shù)字 var x = "Bill"; // x 為字符串
-
數(shù)據(jù)類型的分類
JS 把數(shù)據(jù)類型分為兩類:
簡單數(shù)據(jù)類型 (Number,String,Boolean,Undefined,Null)
復雜數(shù)據(jù)類型 (object)
8.2 簡單數(shù)據(jù)類型
簡單數(shù)據(jù)類型(基本數(shù)據(jù)類型)
簡單數(shù)據(jù)類型 | 說明 | 默認值 |
---|---|---|
Number | 數(shù)字型炊昆,包括整型和浮點型 21 0.21 | 0 |
Boolean | 布爾類型桨吊,true false等價于1 0 | false |
String | 字符串類型 | “ ” |
Undefined | var a; 聲明了變量a但沒有賦值威根,此時a = undefined | undefined |
Null | var a = null; 聲明了變量a為空值 | null |
1、數(shù)字型 Number
? JavaScript 數(shù)字類型既可以保存整數(shù)视乐,也可以保存小數(shù)(浮點數(shù))洛搀。
var age = 21; // 整數(shù)
var Age = 21.3747; // 小數(shù)
-
數(shù)字型進制
最常見的進制有二進制、八進制佑淀、十進制留美、十六進制。
// 1.八進制數(shù)字序列范圍:0~7 var num1 = 07; // 對應十進制的7 var num2 = 019; // 對應十進制的19 var num3 = 08; // 對應十進制的8 // 2.十六進制數(shù)字序列范圍:0~9以及A~F var num = 0xA;
現(xiàn)階段我們只需要記住伸刃,在JS中八進制前面加0谎砾,十六進制前面加 0x
-
數(shù)字型范圍
最大值:Number.MAX_VALUE,這個值為: 1.7976931348623157e+308
最小值:Number.MIN_VALUE捧颅,這個值為:5e-32
-
數(shù)字型三個特殊值
Infinity 景图,代表無窮大,大于任何數(shù)值
-Infinity 隘道,代表無窮小症歇,小于任何數(shù)值
-
NaN 郎笆,Not a number谭梗,代表一個非數(shù)值
isNaN:用來判斷一個變量是否為非數(shù)字的類型,是數(shù)字返回 true 否則 false
var usrAge = 21; var isOk = isNaN(userAge); console.log(isNum); // false 宛蚓,21 不是一個非數(shù)字 var usrName = "andy"; console.log(isNaN(userName));// true 激捏,"andy"是一個非數(shù)字
2、字符串型 String
? 字符串型可以是引號中的任意文本凄吏,其語法為 雙引號 "" 和 單引號''
var strMsg = "我愛北京天安門~"; // 使用雙引號表示字符串
var strMsg2 = '我愛吃豬蹄~'; // 使用單引號表示字符串
// 常見錯誤
var strMsg3 = 我愛大肘子; // 報錯远舅,沒使用引號,會被認為是js代碼痕钢,但js沒有這些語法
? 因為 HTML 標簽里面的屬性使用的是雙引號图柏,JS 這里我們更推薦使用單引號。
-
字符串引號嵌套
? JS 可以用單引號嵌套雙引號 任连,或者用雙引號嵌套單引號 (外雙內(nèi)單蚤吹,外單內(nèi)雙)
var strMsg = '我是"高帥富"程序猿'; // 可以用''包含"" var strMsg2 = "我是'高帥富'程序猿"; // 也可以用"" 包含'' // 常見錯誤 var badQuotes = 'What on earth?"; // 報錯,不能 單雙引號搭配
-
字符串轉(zhuǎn)義符
? 類似HTML里面的特殊字符随抠,字符串中也有特殊字符裁着,我們稱之為轉(zhuǎn)義符。
? 轉(zhuǎn)義符都是 \ 開頭的拱她,常用的轉(zhuǎn)義符及其說明如下:
轉(zhuǎn)義符 解釋說明 \n 換行符二驰,n 是 newline 的意思 \ \ 斜杠 \ ' ' 單引號 " ”雙引號 \t tab 縮進 \b 空格 ,b 是 blank 的意思 -
字符串長度
? 字符串是由若干字符組成的秉沼,這些字符的數(shù)量就是字符串的長度桶雀。通過字符串的 length 屬性可以獲取整個字符串的長度矿酵。
var strMsg = "我是帥氣多金的程序猿!"; alert(strMsg.length); // 顯示 11
-
字符串拼接
多個字符串之間可以使用 + 進行拼接背犯,其拼接方式為 字符串 + 任何類型 = 拼接之后的新字符串
-
拼接前會把與字符串相加的任何類型轉(zhuǎn)成字符串坏瘩,再拼接成一個新的字符串
//1.1 字符串 "相加" alert('hello' + ' ' + 'world'); // hello world //1.2 數(shù)值字符串 "相加" alert('100' + '100'); // 100100 //1.3 數(shù)值字符串 + 數(shù)值 alert('11' + 12); // 1112
- + 號總結(jié)口訣:數(shù)值相加 ,字符相連
-
字符串拼接加強
console.log('pink老師' + 18); // 只要有字符就會相連 var age = 18; console.log('pink老師age歲啦'); // 這樣不行哦 console.log('pink老師' + age); // pink老師18 console.log('pink老師' + age + '歲啦'); // pink老師18歲啦
- 經(jīng)常會將字符串和變量來拼接漠魏,變量可以很方便地修改里面的值
- 變量是不能添加引號的倔矾,因為加引號的變量會變成字符串
- 如果變量兩側(cè)都有字符串拼接,口訣“引引加加 ”柱锹,刪掉數(shù)字哪自,變量寫加中間
3、布爾型Boolean
? 布爾類型有兩個值:true 和 false 禁熏,其中 true 表示真(對)壤巷,而 false 表示假(錯)。
? 布爾型和數(shù)字型相加的時候瞧毙, true 的值為 1 胧华,false 的值為 0。
console.log(true + 1); // 2
console.log(false + 1); // 1
4宙彪、Undefined和 Null
? 一個聲明后沒有被賦值的變量會有一個默認值undefined ( 如果進行相連或者相加時矩动,注意結(jié)果)
var variable;
console.log(variable); // undefined
console.log('你好' + variable); // 你好undefined
console.log(11 + variable); // NaN
console.log(true + variable); // NaN
? 一個聲明變量給 null 值,里面存的值為空(學習對象時释漆,我們繼續(xù)研究null)
var vari = null;
console.log('你好' + vari); // 你好null
console.log(11 + vari); // 11
console.log(true + vari); // 1
8.3 獲取變量數(shù)據(jù)類型
-
獲取檢測變量的數(shù)據(jù)類型
? typeof 可用來獲取檢測變量的數(shù)據(jù)類型
console.log(typeof 18) // 結(jié)果 "number" console.log(typeof "小白") // 結(jié)果 "string" console.log(typeof true) // 結(jié)果 "boolean" console.log(typeof undefined) // 結(jié)果 "undefined" console.log(typeof null) // 結(jié)果 "object"
-
字面量
? 字面量是在源代碼中一個固定值的表示法悲没,通俗來說,就是字面量表示如何表達這個值男图。
- 數(shù)字字面量:8, 9, 10
- 字符串字面量:'黑馬程序員', "大前端"
- 布爾字面量:true示姿,false
8.4 數(shù)據(jù)類型轉(zhuǎn)換
? 什么是數(shù)據(jù)類型轉(zhuǎn)換?
? 使用表單逊笆、prompt 獲取過來的數(shù)據(jù)默認是字符串類型的栈戳,此時就不能直接簡單的進行加法運算,而需要轉(zhuǎn)換變量的數(shù)據(jù)類型难裆。通俗來說子檀,就是把一種數(shù)據(jù)類型的變量轉(zhuǎn)換成另一種數(shù)據(jù)類型,通常會實現(xiàn)3種方式的轉(zhuǎn)換:
轉(zhuǎn)換為字符串類型
轉(zhuǎn)換為數(shù)字型
轉(zhuǎn)換為布爾型
1差牛、轉(zhuǎn)換為字符串
var num=1;
/* 方式1:toString() */
alert(num.toString());
/* 方式2:String()強制轉(zhuǎn)換 */
alert(String(num));
/* 方式3:+加號拼接 */
alert(num+"yes");
- toString() 和 String() 使用方式不一樣命锄。
- 三種轉(zhuǎn)換方式,更多第三種加號拼接字符串轉(zhuǎn)換方式偏化, 這一種方式也稱之為隱式轉(zhuǎn)換脐恩。
2、轉(zhuǎn)換為數(shù)字型(重點)
/* parseInt(string) */
parseInt('78');
/* parseFloat(string) */
parseFloat('832.23');
/* Number()強制轉(zhuǎn)換 */
Number('12');
/* js隱式轉(zhuǎn)換 */
'12' - 0;
- 注意 parseInt 和 parseFloat 單詞的大小寫
- 隱式轉(zhuǎn)換是在進行算數(shù)運算的時候侦讨,JS 自動轉(zhuǎn)換了數(shù)據(jù)類型
3驶冒、轉(zhuǎn)換為布爾型
/* Boolean() */
Boolean('true')
代表空苟翻、否定的值會被轉(zhuǎn)換為 false ,如 ''骗污、0崇猫、NaN、null需忿、undefined
-
其余值都會被轉(zhuǎn)換為 true
console.log(Boolean('')); // false console.log(Boolean(0)); // false console.log(Boolean(NaN)); // false console.log(Boolean(null)); // false console.log(Boolean(undefined)); // false console.log(Boolean('小白')); // true console.log(Boolean(12)); // true
9 - 解釋型語言和編譯型語言
9.1 概述
計算機不能直接理解任何除機器語言以外的語言诅炉,所以必須要把程序員所寫的程序語言翻譯成機器語言才能執(zhí)行程序。程序語言翻譯成機器語言的工具屋厘,被稱為翻譯器
- 翻譯器翻譯的方式有兩種:一個是編譯涕烧,另外一個是解釋。兩種方式之間的區(qū)別在于翻譯的時間點不同
- 編譯器是在代碼執(zhí)行之前進行編譯汗洒,生成中間代碼文件
- 解釋器是在運行時進行及時解釋议纯,并立即執(zhí)行(當編譯器以解釋方式運行的時候,也稱之為解釋器)
9.2 執(zhí)行過程
類似于請客吃飯:
編譯語言:首先把所有菜做好溢谤,才能上桌吃飯
解釋語言:好比吃火鍋瞻凤,邊吃邊涮,同時進行
10 - 關鍵字和保留字
10.1 標識符
標識(zhi)符:就是指開發(fā)人員為變量世杀、屬性阀参、函數(shù)、參數(shù)取的名字玫坛。
標識符不能是關鍵字或保留字结笨。
10.2 關鍵字
關鍵字:是指 JS本身已經(jīng)使用了的字包晰,不能再用它們充當變量名湿镀、方法名。
包括:break伐憾、case勉痴、catch、continue树肃、default蒸矛、delete、do胸嘴、else雏掠、finally、for劣像、function乡话、if抽莱、in桅滋、instanceof襟沮、new怠褐、return、switch闸婴、this坏挠、throw、try邪乍、typeof降狠、var、void庇楞、while喊熟、with 等。
10.3 保留字
保留字:實際上就是預留的“關鍵字”姐刁,意思是現(xiàn)在雖然還不是關鍵字芥牌,但是未來可能會成為關鍵字,同樣不能使用它們當變量名或方法名聂使。
包括:boolean壁拉、byte、char柏靶、class弃理、const、debugger屎蜓、double痘昌、enum、export炬转、extends辆苔、fimal、float扼劈、goto驻啤、implements、import荐吵、int骑冗、interface、long先煎、mative贼涩、package、private薯蝎、protected遥倦、public、short良风、static谊迄、super闷供、synchronized、throws统诺、transient歪脏、volatile 等。
注意:如果將保留字用作變量名或函數(shù)名粮呢,那么除非將來的瀏覽器實現(xiàn)了該保留字婿失,否則很可能收不到任何錯誤消息。當瀏覽器將其實現(xiàn)后啄寡,該單詞將被看做關鍵字豪硅,如此將出現(xiàn)關鍵字錯誤。
11 - 運算符(操作符)?
11.1 運算符的分類
運算符(operator)也被稱為操作符挺物,是用于實現(xiàn)賦值懒浮、比較和執(zhí)行算數(shù)運算等功能的符號。
JavaScript中常用的運算符有:
- 算數(shù)運算符
- 遞增和遞減運算符
- 比較運算符
- 邏輯運算符
- 賦值運算符
11.2 算數(shù)運算符
-
算術(shù)運算符概述
概念:算術(shù)運算使用的符號识藤,用于執(zhí)行兩個變量或值的算術(shù)運算砚著。
+ - * / %
-
浮點數(shù)的精度問題
浮點數(shù)值的最高精度是 17 位小數(shù),但在進行算術(shù)計算時其精確度遠遠不如整數(shù)痴昧。
var result = 0.1 + 0.2; // 結(jié)果不是 0.3稽穆,而是:0.30000000000000004 console.log(0.07 * 100); // 結(jié)果不是 7, 而是:7.000000000000001
所以:不要直接判斷兩個浮點數(shù)是否相等 !
-
表達式和返回值
表達式:是由數(shù)字赶撰、運算符舌镶、變量等以能求得數(shù)值的有意義排列方法所得的組合
簡單理解:是由數(shù)字、運算符豪娜、變量等組成的式子
表達式最終都會有一個結(jié)果餐胀,返回給開發(fā)者,稱為返回值
11.3 遞增和遞減運算符
-
遞增和遞減運算符概述
如果需要反復給數(shù)字變量添加或減去1侵歇,可以使用遞增(++)和遞減( -- )運算符來完成骂澄。
在 JavaScript 中吓蘑,遞增(++)和遞減( -- )既可以放在變量前面惕虑,也可以放在變量后面。放在變量前面時磨镶,我們可以稱為前置遞增(遞減)運算符溃蔫,放在變量后面時,我們可以稱為后置遞增(遞減)運算符琳猫。 注意:遞增和遞減運算符必須和變量配合使用伟叛。
-
遞增運算符
-
前置遞增運算符
++num 前置遞增,就是自加1脐嫂,類似于 num = num + 1统刮,但是 ++num 寫起來更簡單紊遵。
使用口訣:先自加,后返回值
var num = 10; alert(++num + 10); // 21
-
后置遞增運算符
num++ 后置遞增侥蒙,就是自加1暗膜,類似于 num = num + 1 ,但是 num++ 寫起來更簡單鞭衩。
使用口訣:先返回原值学搜,后自加
var num = 10; alert(10 + num++); // 20
-
11.4 比較運算符
-
比較運算符概述
概念:比較運算符(關系運算符)是兩個數(shù)據(jù)進行比較時所使用的運算符,比較運算后论衍,會返回一個布爾值(true / false)作為比較運算的結(jié)果瑞佩。
< > <= >= == != === !==要求值和數(shù)據(jù)類型一致
-
等號比較
//=賦值 將右邊賦值給左邊 console.log(18 == '18');//==判斷 值是否相等(注意此時有隱式轉(zhuǎn)換) console.log(18 === '18'); //===全等 值和數(shù)據(jù)類型是否相同
11.5 邏輯運算符
-
邏輯運算符概述
概念:邏輯運算符是用來進行布爾值運算的運算符,其返回值也是布爾值坯台。后面開發(fā)中經(jīng)常用于多個條件的判斷
&& || !
-
邏輯與&&
兩邊都是 true才返回 true炬丸,否則返回 false
-
邏輯或 ||
兩邊都是 false才返回 false,否則返回 true
-
邏輯非 蜒蕾!
邏輯非(!)也叫作取反符御雕,用來取一個布爾值相反的值,如 true 的相反值是 false
var isOk = !true; console.log(isOk); // false
-
短路運算(邏輯中斷)
短路運算的原理:當有多個表達式(值)時,左邊的表達式值可以確定結(jié)果時,就不再繼續(xù)運算右邊的表達式的值;
-
邏輯與
語法: 表達式1 && 表達式2
- 如果第一個表達式的值為真滥搭,則返回表達式2 - 如果第一個表達式的值為假酸纲,則返回表達式1
console.log( 123 && 456 ); // 456 console.log( 0 && 456 ); // 0 console.log( 123 && 456 && 789 ); // 789
-
邏輯或
語法: 表達式1 || 表達式2
- 如果第一個表達式的值為真,則返回表達式1 - 如果第一個表達式的值為假瑟匆,則返回表達式2
console.log( 123 || 456 ); // 123 console.log( 0 || 456 ); // 456 console.log( 123 || 456 || 789 ); // 123
-
11.6 賦值運算符
概念:用來把數(shù)據(jù)賦值給變量的運算符闽坡。
= += -= *= /= %=
var age = 10;
age += 5; // 相當于 age = age + 5;
age -= 5; // 相當于 age = age - 5;
age *= 10; // 相當于 age = age * 10;
11.7 運算符優(yōu)先級
優(yōu)先級 | 運算符 | 順序 |
---|---|---|
1 | 小括號 | () |
2 | 一元 | ++ -- ! |
3 | 算數(shù) | 先* / % 后 + - |
4 | 關系 | > >= < <= |
5 | 相等 | == != === !== |
6 | 邏輯 | 先 && 后 || |
7 | 賦值 | = |
8 | 逗號 | , |
- 一元運算符里面的邏輯非優(yōu)先級很高
- 邏輯與比邏輯或優(yōu)先級高
12 - 流程控制
12.1 流程控制概念
在一個程序執(zhí)行的過程中,各條代碼的執(zhí)行順序?qū)Τ绦虻慕Y(jié)果是有直接影響的愁溜。很多時候我們要通過控制代碼的執(zhí)行順序來實現(xiàn)我們要完成的功能疾嗅。
簡單理解:**流程控制就是來控制代碼按照一定結(jié)構(gòu)順序來執(zhí)行**
流程控制主要有三種結(jié)構(gòu),分別是**順序結(jié)構(gòu)**冕象、**分支結(jié)構(gòu)**和**循環(huán)結(jié)構(gòu)**,代表三種代碼執(zhí)行的順序渐扮。
12.2 順序流程控制
? 順序結(jié)構(gòu)是程序中最簡單论悴、最基本的流程控制,它沒有特定的語法結(jié)構(gòu)墓律,程序會按照代碼的先后順序膀估,依次執(zhí)行,程序中大多數(shù)的代碼都是這樣執(zhí)行的耻讽。
12.3 分支流程控制
-
分支結(jié)構(gòu)
由上到下執(zhí)行代碼的過程中察纯,根據(jù)不同的條件,執(zhí)行不同的路徑代碼(執(zhí)行代碼多選一的過程),從而得到不同的結(jié)果
JS 語言提供了兩種分支結(jié)構(gòu)語句:if 語句饼记、switch 語句
-
if 語句
- 語法結(jié)構(gòu)
// 條件成立執(zhí)行代碼香伴,否則什么也不做 if (條件表達式) { // 條件成立執(zhí)行的代碼語句 }
語句可以理解為一個行為,循環(huán)語句和分支語句就是典型的語句具则。一個程序由很多個語句組成瞒窒,一般情況下,會分割成一個一個的語句乡洼。
-
if else語句(雙分支語句)
-
語法結(jié)構(gòu)
// 條件成立 執(zhí)行 if 里面代碼崇裁,否則執(zhí)行else 里面的代碼 if (條件表達式) { // [如果] 條件成立執(zhí)行的代碼 } else { // [否則] 執(zhí)行的代碼 }
-
-
if else if 語句(多分支語句)
-
語法結(jié)構(gòu)
// 適合于檢查多重條件。 if (條件表達式1) { 語句1束昵; } else if (條件表達式2) { 語句2拔稳; } else if (條件表達式3) { 語句3; .... } else { // 上述條件都不成立執(zhí)行此處代碼 }
-
12.4 三元表達式
-
語法結(jié)構(gòu)
表達式1 ? 表達式2 : 表達式3;
-
執(zhí)行思路
- 如果表達式1為 true 锹雏,則返回表達式2的值巴比,如果表達式1為 false,則返回表達式3的值
- 簡單理解: 就類似于 if else (雙分支) 的簡寫
12.5 switch分支流程控制
-
語法結(jié)構(gòu)
switch 語句也是多分支語句礁遵,它用于基于不同的條件來執(zhí)行不同的代碼轻绞。當要針對變量設置一系列的特定值的選項時,就可以使用 switch佣耐。
switch( 表達式 ){ case value1: // 表達式 等于 value1 時要執(zhí)行的代碼 break; case value2: // 表達式 等于 value2 時要執(zhí)行的代碼 break; default: // 表達式 不等于任何一個 value 時要執(zhí)行的代碼 }
switch :開關 轉(zhuǎn)換 政勃, case :小例子 選項
關鍵字 switch 后面括號內(nèi)可以是表達式或值, 通常是一個變量
關鍵字 case , 后跟一個選項的表達式或值兼砖,后面跟一個冒號
switch 表達式的值會與結(jié)構(gòu)中的 case 的值做比較
如果存在匹配全等(===) 奸远,則與該 case 關聯(lián)的代碼塊會被執(zhí)行,并在遇到 break 時停止讽挟,整個 switch 語句代碼執(zhí)行結(jié)束
-
如果所有的 case 的值都和表達式的值不匹配懒叛,則執(zhí)行 default 里的代碼
注意: 執(zhí)行case 里面的語句時,如果沒有break耽梅,則繼續(xù)執(zhí)行下一個case里面的語句薛窥。
-
switch 語句和 if else if 語句的區(qū)別
- 一般情況下,它們兩個語句可以相互替換
- switch...case 語句通常處理 case為比較確定值的情況眼姐, 而 if…else…語句更加靈活诅迷,常用于范圍判斷(大于、等于某個范圍)
- switch 語句進行條件判斷后直接執(zhí)行到程序的條件語句妥凳,效率更高竟贯。而if…else 語句有幾種條件,就得判斷多少次逝钥。
- 當分支比較少時,if… else語句的執(zhí)行效率比 switch語句高。
- 當分支比較多時艘款,switch語句的執(zhí)行效率比較高持际,而且結(jié)構(gòu)更清晰。
13 - 循環(huán)?
13.1 for循環(huán)
-
語法結(jié)構(gòu)
for(初始化變量; 條件表達式; 操作表達式 ){ //循環(huán)體 }
名稱 作用 初始化變量 通常被用于初始化一個計數(shù)器哗咆,該表達式可以使用 var 關鍵字聲明新的變量蜘欲,這個變量幫我們來記錄次數(shù)。 條件表達式 用于確定每一次循環(huán)是否能被執(zhí)行晌柬。如果結(jié)果是 true 就繼續(xù)循環(huán)姥份,否則退出循環(huán)。 操作表達式 用于確定每一次循環(huán)是否能被執(zhí)行年碘。如果結(jié)果是 true 就繼續(xù)循環(huán)澈歉,否則退出循環(huán)。 執(zhí)行過程:
- 初始化變量屿衅,初始化操作在整個 for 循環(huán)只會執(zhí)行一次埃难。
執(zhí)行條件表達式,如果為true涤久,則執(zhí)行循環(huán)體語句涡尘,否則退出循環(huán),循環(huán)結(jié)束响迂。
- 執(zhí)行操作表達式考抄,此時第一輪結(jié)束。
- 第二輪開始蔗彤,直接去執(zhí)行條件表達式(不再初始化變量)座泳,如果為 true ,則去執(zhí)行循環(huán)體語句幕与,否則退出循環(huán)挑势。
- 繼續(xù)執(zhí)行操作表達式,第二輪結(jié)束啦鸣。
- 后續(xù)跟第二輪一致潮饱,直至條件表達式為假,結(jié)束整個 for 循環(huán)诫给。
斷點調(diào)試:
斷點調(diào)試是指自己在程序的某一行設置一個斷點香拉,調(diào)試時,程序運行到這一行就會停住中狂,然后你可以一步一步往下調(diào)試凫碌,調(diào)試過程中可以看各個變量當前的值,出錯的話胃榕,調(diào)試到出錯的代碼行即顯示錯誤盛险,停下。斷點調(diào)試可以幫助觀察程序的運行過程
斷點調(diào)試的流程:
1、瀏覽器中按 F12--> sources -->找到需要調(diào)試的文件-->在程序的某一行設置斷點
2苦掘、Watch: 監(jiān)視换帜,通過watch可以監(jiān)視變量的值的變化,非常的常用鹤啡。
3惯驼、摁下F11,程序單步執(zhí)行递瑰,讓程序一行一行的執(zhí)行祟牲,這個時候,觀察watch中變量的值的變化抖部。
-
for 循環(huán)重復相同的代碼
比如輸出10句“媳婦我錯了”
// 基本寫法 for(var i = 1; i <= 10; i++){ console.log('媳婦我錯了~'); } // 用戶輸入次數(shù) var num = prompt('請輸入次數(shù):')说贝; for ( var i = 1 ; i <= num; i++) { console.log('媳婦我錯了~'); }
-
for 循環(huán)重復不相同的代碼
例如,求輸出1到100歲:
// 基本寫法 for (var i = 1; i <= 100; i++) { console.log('這個人今年' + i + '歲了'); }
例如您朽,求輸出1到100歲狂丝,并提示出生、死亡
// for 里面是可以添加其他語句的 for (var i = 1; i <= 100; i++) { if (i == 1) { console.log('這個人今年1歲了哗总, 它出生了'); } else if (i == 100) { console.log('這個人今年100歲了几颜,它死了'); } else { console.log('這個人今年' + i + '歲了'); } }
for循環(huán)因為有了計數(shù)器的存在,還可以重復的執(zhí)行某些操作讯屈,比如做一些算術(shù)運算蛋哭。
13.2 雙重for循環(huán)
-
雙重 for 循環(huán)概述
循環(huán)嵌套是指在一個循環(huán)語句中再定義一個循環(huán)語句的語法結(jié)構(gòu),例如在for循環(huán)語句中涮母,可以再嵌套一個for 循環(huán)谆趾,這樣的 for 循環(huán)語句我們稱之為雙重for循環(huán)。
-
雙重 for 循環(huán)語法
for (外循環(huán)的初始; 外循環(huán)的條件; 外循環(huán)的操作表達式) { for (內(nèi)循環(huán)的初始; 內(nèi)循環(huán)的條件; 內(nèi)循環(huán)的操作表達式) { 需執(zhí)行的代碼; } }
- 內(nèi)層循環(huán)可以看做外層循環(huán)的循環(huán)體語句
- 內(nèi)層循環(huán)執(zhí)行的順序也要遵循 for 循環(huán)的執(zhí)行順序
- 外層循環(huán)執(zhí)行一次叛本,內(nèi)層循環(huán)要執(zhí)行全部次數(shù)
-
打印五行五列星星
var star = ''; for (var j = 1; j <= 3; j++) { for (var i = 1; i <= 3; i++) { star += '☆' } // 每次滿 5個星星 就 加一次換行 star += '\n' } console.log(star);
核心邏輯:
1.內(nèi)層循環(huán)負責一行打印五個星星
2.外層循環(huán)負責打印五行
-
for 循環(huán)小結(jié)
- for 循環(huán)可以重復執(zhí)行某些相同代碼
- for 循環(huán)可以重復執(zhí)行些許不同的代碼沪蓬,因為我們有計數(shù)器
- for 循環(huán)可以重復執(zhí)行某些操作,比如算術(shù)運算符加法操作
- 隨著需求增加来候,雙重for循環(huán)可以做更多跷叉、更好看的效果
- 雙重 for 循環(huán),外層循環(huán)一次营搅,內(nèi)層 for 循環(huán)全部執(zhí)行
- for 循環(huán)是循環(huán)條件和數(shù)字直接相關的循環(huán)
13.3 while循環(huán)
while語句的語法結(jié)構(gòu)如下:
while (條件表達式) {
// 循環(huán)體代碼
}
執(zhí)行思路:
- 1 先執(zhí)行條件表達式云挟,如果結(jié)果為 true,則執(zhí)行循環(huán)體代碼转质;如果為 false园欣,則退出循環(huán),執(zhí)行后面代碼
- 2 執(zhí)行循環(huán)體代碼
- 3 循環(huán)體代碼執(zhí)行完畢后休蟹,程序會繼續(xù)判斷執(zhí)行條件表達式沸枯,如條件仍為true日矫,則會繼續(xù)執(zhí)行循環(huán)體,直到循環(huán)條件為 false 時辉饱,整個循環(huán)過程才會結(jié)束
注意:
- 使用 while 循環(huán)時一定要注意搬男,它必須要有退出條件拣展,否則會成為死循環(huán)
13.4 do-while循環(huán)
do... while 語句的語法結(jié)構(gòu)如下:
do {
// 循環(huán)體代碼 - 條件表達式為 true 時重復執(zhí)行循環(huán)體代碼
} while(條件表達式);
執(zhí)行思路
1 先執(zhí)行一次循環(huán)體代碼
-
2 再執(zhí)行條件表達式彭沼,如果結(jié)果為 true,則繼續(xù)執(zhí)行循環(huán)體代碼备埃,如果為 false姓惑,則退出循環(huán),繼續(xù)執(zhí)行后面代碼
注意:先再執(zhí)行循環(huán)體按脚,再判斷于毙,do…while循環(huán)語句至少會執(zhí)行一次循環(huán)體代碼
13.5 continue褪储、break
continue 關鍵字用于立即跳出本次循環(huán)惭载,繼續(xù)下一次循環(huán)(本次循環(huán)體中 continue 之后的代碼就會少執(zhí)行一次)蟀伸。
例如忍坷,吃5個包子痘拆,第3個有蟲子贴彼,就扔掉第3個本缠,繼續(xù)吃第4個第5個包子燥透,其代碼實現(xiàn)如下:
for (var i = 1; i <= 5; i++) {
if (i == 3) {
console.log('這個包子有蟲子溶褪,扔掉');
continue; // 跳出本次循環(huán)币旧,跳出的是第3次循環(huán)
}
console.log('我正在吃第' + i + '個包子呢');
}
/*結(jié)果
我正在吃第1個包子呢
我正在吃第2個包子呢
這個包子有蟲子,扔掉
我正在吃第4個包子呢
我正在吃第5個包子呢
*/
break 關鍵字用于立即跳出整個循環(huán)(循環(huán)結(jié)束)猿妈。
例如吹菱,吃5個包子,吃到第3個發(fā)現(xiàn)里面有半個蟲子彭则,其余的不吃了鳍刷,其代碼實現(xiàn)如下:
for (var i = 1; i <= 5; i++) {
if (i == 3) {
break; // 直接退出整個for 循環(huán),跳到整個for下面的語句
}
console.log('我正在吃第' + i + '個包子呢');
}
/*結(jié)果
我正在吃第1個包子呢
我正在吃第2個包子呢
*/
14 - 代碼規(guī)范
14.1 標識符命名規(guī)范
- 變量俯抖、函數(shù)的命名必須要有意義
- 變量的名稱一般用名詞
- 函數(shù)的名稱一般用動詞
14.2 操作符規(guī)范
// 操作符的左右兩側(cè)各保留一個空格
for (var i = 1; i <= 5; i++) {
if (i == 3) {
break; // 直接退出整個 for 循環(huán)输瓜,跳到整個for循環(huán)下面的語句
}
console.log('我正在吃第' + i + '個包子呢');
}
14.3 單行注釋規(guī)范
for (var i = 1; i <= 5; i++) {
if (i == 3) {
break; // 單行注釋前面注意有個空格
}
console.log('我正在吃第' + i + '個包子呢');
}
14.4 其他規(guī)范
關鍵詞、操作符之間后加空格
比如:if括號前后空格
if (true) {}
比如:for括號前后空格
for (var i = 0; i < 100; i++) {}
15 - 數(shù)組?
15.1 數(shù)組的概念
- 數(shù)組可以把一組相關的數(shù)據(jù)一起存放蚌成,并提供方便的訪問(獲惹岸弧)方式
- 數(shù)組是指一組數(shù)據(jù)的集合,其中的每個數(shù)據(jù)被稱作元素担忧,在數(shù)組中可以存放任意類型的元素芹缔。數(shù)組是一種將一組數(shù)據(jù)存儲在單個變量名下的優(yōu)雅方式
15.2 創(chuàng)建數(shù)組
JS 中創(chuàng)建數(shù)組有兩種方式:
-
利用 new 創(chuàng)建數(shù)組
var 數(shù)組名 = new Array() ; var arr = new Array(); // 創(chuàng)建一個新的空數(shù)組
注意 Array () 瓶盛,A 要大寫
-
利用數(shù)組字面量創(chuàng)建數(shù)組
//1. 使用數(shù)組字面量方式創(chuàng)建空的數(shù)組 var 數(shù)組名 = []最欠; //2. 使用數(shù)組字面量方式創(chuàng)建帶初始值的數(shù)組 var 數(shù)組名 = ['小白','小黑','大黃','瑞奇'];
- 數(shù)組的字面量是方括號 [ ]
- 聲明數(shù)組并賦值稱為數(shù)組的初始化
- 這種字面量方式也是我們以后最多使用的方式
-
數(shù)組元素的類型
數(shù)組中可以存放任意類型的數(shù)據(jù)示罗,例如字符串,數(shù)字芝硬,布爾值等
var arrStus = ['小白',12,true,28.9];
15.3 獲取數(shù)組中的元素
? 索引 (下標) :用來訪問數(shù)組元素的序號(數(shù)組下標從 0 開始),通過“數(shù)組名[索引]”的形式來獲取數(shù)組中的元素
// 定義數(shù)組
var arrStus = [1,2,3];
// 獲取數(shù)組中的第2個元素
alert(arrStus[1]);
注意:如果訪問時數(shù)組沒有和索引值對應的元素蚜点,則得到的值是undefined
15.4 遍歷數(shù)組
- 數(shù)組遍歷
var arr = ['red','green', 'blue'];
for(var i = 0; i < arr.length; i++){
console.log(arrStus[i]);
}
-
數(shù)組的長度
var arrStus = [1,2,3]; alert(arrStus.length); // 3
當我們數(shù)組里面的元素個數(shù)發(fā)生了變化,這個 length 屬性跟著一起變化
-
數(shù)組的length屬性可以被修改:
- 如果設置的length屬性值大于數(shù)組的元素個數(shù)拌阴,則會在數(shù)組末尾出現(xiàn)空白元素绍绘;
- 如果設置的length屬性值小于數(shù)組的元素個數(shù),則會把超過該值的數(shù)組元素刪除
15.5 數(shù)組中新增元素
? 數(shù)組中可以通過以下方式在數(shù)組的末尾插入新元素:
數(shù)組[ 數(shù)組.length ] = 新數(shù)據(jù);
16 - 函數(shù)?
16.1 函數(shù)的概念
就是封裝了一段可被重復調(diào)用執(zhí)行的代碼塊迟赃。通過此代碼塊可以實現(xiàn)大量代碼的重復使用
16.2 函數(shù)的使用
1陪拘、聲明函數(shù)
// 聲明函數(shù)
function 函數(shù)名() {
//函數(shù)體代碼
}
function 是聲明函數(shù)的關鍵字,必須小寫
由于函數(shù)一般是為了實現(xiàn)某個功能才定義的, 所以通常我們將函數(shù)名命名為動詞纤壁,比如 getSum
2左刽、調(diào)用函數(shù)
// 調(diào)用函數(shù)
函數(shù)名(); // 通過調(diào)用函數(shù)名來執(zhí)行函數(shù)體代碼
調(diào)用的時候千萬不要忘記添加小括號
-
口訣:函數(shù)不調(diào)用,自己不執(zhí)行
注意:聲明函數(shù)本身并不會執(zhí)行代碼酌媒,只有調(diào)用函數(shù)時才會執(zhí)行函數(shù)體代碼欠痴。
3、函數(shù)的封裝
-
函數(shù)的封裝是把一個或者多個功能通過函數(shù)的方式封裝起來秒咨,對外只提供一個簡單的函數(shù)接口
例子:封裝計算1-100累加和
/* 計算1-100之間值的函數(shù) */ // 聲明函數(shù) function getSum(){ var sumNum = 0;// 準備一個變量喇辽,保存數(shù)字和 for (var i = 1; i <= 100; i++) { sumNum += i;// 把每個數(shù)值 都累加 到變量中 } alert(sumNum); } // 調(diào)用函數(shù) getSum();
16.3 函數(shù)的參數(shù)
1、函數(shù)參數(shù)語法
形參:函數(shù)定義時 設置接收調(diào)用時傳入
實參:函數(shù)調(diào)用時 傳入小括號內(nèi)的真實數(shù)據(jù)
-
? 參數(shù)的作用 : 在函數(shù)內(nèi)部某些值不能固定拭荤,我們可以通過參數(shù)在調(diào)用函數(shù)時傳遞不同的值進去茵臭。
函數(shù)參數(shù)的運用:
// 帶參數(shù)的函數(shù)聲明 function 函數(shù)名(形參1, 形參2 , 形參3...) { // 可以定義任意多的參數(shù),用逗號分隔 // 函數(shù)體 } // 帶參數(shù)的函數(shù)調(diào)用 函數(shù)名(實參1, 實參2, 實參3...);
- 調(diào)用的時候?qū)崊⒅凳莻鬟f給形參的
- 形參簡單理解為:不用聲明的變量
- 實參和形參的多個參數(shù)之間用逗號(,)分隔
2舅世、函數(shù)形參和實參數(shù)量不匹配時
參數(shù)個數(shù) | 說明 |
---|---|
實參個數(shù)=形參個數(shù) | 輸出正確結(jié)果 |
實參個數(shù)>形參個數(shù) | 只取到形參的個數(shù) |
實參個數(shù)<形參個數(shù) | 多的形參定義為undefined旦委,結(jié)果為NaN |
注意:在JavaScript中,形參的默認值是undefined雏亚。
小結(jié):
- 函數(shù)可以帶參數(shù)也可以不帶參數(shù)
- 聲明函數(shù)的時候缨硝,函數(shù)名括號里面的是形參,形參的默認值為 undefined
- 調(diào)用函數(shù)的時候罢低,函數(shù)名括號里面的是實參
- 多個參數(shù)中間用逗號分隔
- 形參的個數(shù)可以和實參個數(shù)不匹配查辩,但是結(jié)果不可預計,我們盡量要匹配
16.4 函數(shù)的返回值
1网持、return 語句
返回值:函數(shù)調(diào)用整體代表的數(shù)據(jù)宜岛;函數(shù)執(zhí)行完成后可以通過return語句將指定數(shù)據(jù)返回 。
// 聲明函數(shù)
function 函數(shù)名(){
...
return 需要返回的值功舀;
}
// 調(diào)用函數(shù)
函數(shù)名(); // 此時調(diào)用函數(shù)就可以得到函數(shù)體內(nèi)return 后面的值
- 在使用 return 語句時萍倡,函數(shù)會停止執(zhí)行,并返回指定的值
- 如果函數(shù)沒有 return 辟汰,返回的值是 undefined
2列敲、break ,continue ,return 的區(qū)別
- break :結(jié)束當前的循環(huán)體(如 for阱佛、while)
- continue :跳出本次循環(huán),繼續(xù)執(zhí)行下次循環(huán)(如 for戴而、while)
- return :不僅可以退出循環(huán)凑术,還能夠返回 return 語句中的值,同時還可以結(jié)束當前的函數(shù)體內(nèi)的代碼
16.5 arguments的使用
? 當不確定有多少個參數(shù)傳遞的時候所意,可以用 arguments 來獲取淮逊。所有函數(shù)都內(nèi)置了一個 arguments 對象,arguments 對象中存儲了傳遞的所有實參扁眯。arguments展示形式是一個偽數(shù)組壮莹,因此可以進行遍歷翅帜。偽數(shù)組具有以下特點:
具有 length 屬性
按索引方式儲存數(shù)據(jù)
-
不具有數(shù)組的 push , pop 等方法
注意:在函數(shù)內(nèi)部使用該對象姻檀,用此對象獲取函數(shù)調(diào)用時傳的實參
16.6 函數(shù)案例
函數(shù)內(nèi)部可以調(diào)用另一個函數(shù),在同一作用域代碼中涝滴,函數(shù)名即代表封裝的操作绣版,使用函數(shù)名加括號即可以將封裝的操作執(zhí)行
16.7 函數(shù)的兩種聲明方式
-
自定義函數(shù)方式(命名函數(shù))
利用函數(shù)關鍵字 function 自定義函數(shù)方式
// 聲明定義方式 function fn() {...} // 調(diào)用 fn();
- 因為有名字,所以也被稱為命名函數(shù)
- 調(diào)用函數(shù)的代碼既可以放到聲明函數(shù)的前面歼疮,也可以放在聲明函數(shù)的后面
-
函數(shù)表達式方式(匿名函數(shù))
利用函數(shù)表達式方式的寫法如下:
// 這是函數(shù)表達式寫法杂抽,匿名函數(shù)后面跟分號結(jié)束 var fn = function(){...}; // 調(diào)用的方式韩脏,函數(shù)調(diào)用必須寫到函數(shù)體下面 fn();
- 因為函數(shù)沒有名字缩麸,所以也被稱為匿名函數(shù)
- 這個fn 里面存儲的是一個函數(shù)
- 函數(shù)表達式方式原理跟聲明變量方式是一致的
17 - 作用域?
17.1 作用域概述
通常來說,一段程序代碼中所用到的名字并不總是有效和可用的赡矢,而限定這個名字的可用性的代碼范圍就是這個名字的作用域杭朱。作用域的使用提高了程序邏輯的局部性,增強了程序的可靠性吹散,減少了命名沖突弧械。
JavaScript(es6前)中的作用域有兩種:全局作用域、局部作用域(函數(shù)作用域)
17.2 全局作用域
作用于所有代碼執(zhí)行的環(huán)境(<script> 標簽內(nèi)部) 或者 一個獨立的 js 文件
17.3 局部作用域
作用于函數(shù)內(nèi)的代碼環(huán)境空民,就是局部作用域刃唐,也稱為函數(shù)作用域
17.4 JS沒有塊級作用域
塊作用域由 { } 包括。
-
在其他編程語言中(如 java界轩、c#等)画饥,在 if 語句、循環(huán)語句中創(chuàng)建的變量浊猾,僅僅只能在本 if 語句抖甘、本循環(huán)語句中使用
java有塊級作用域:
if(true){ int num = 123; system.out.print(num); // 123 } system.out.print(num); // 報錯
而與之類似的JavaScript代碼,則不會報錯:Js中沒有塊級作用域(在ES6之前)
if(true){ var num = 123; console.log(123); //123 } console.log(123); //123
18 - 變量的作用域
在JavaScript中与殃,根據(jù)作用域的不同单山,變量可以分為兩種:全局變量 局部變量
18.1 全局變量
在全局作用域下聲明的變量叫做全局變量(在函數(shù)外部定義的變量)碍现。
- 全局變量在代碼的任何位置都可以使用
- 在全局作用域下 var 聲明的變量 是全局變量
- 特殊情況下,在函數(shù)內(nèi)不使用 var 聲明的變量也是全局變量(不建議使用)
18.2 局部變量
在局部作用域下聲明的變量叫做局部變量(在函數(shù)內(nèi)部定義的變量)
- 局部變量只能在該函數(shù)內(nèi)部使用
- 在函數(shù)內(nèi)部 var 聲明的變量是局部變量
- 函數(shù)的形參實際上就是局部變量
18.3 全局變量和局部變量的區(qū)別
- 全局變量:在任何一個地方都可以使用米奸,只有在瀏覽器關閉時才會被銷毀昼接,因此比較占內(nèi)存
- 局部變量:只在函數(shù)內(nèi)部使用,當其所在的代碼塊被執(zhí)行時悴晰,會被初始化慢睡;當代碼塊運行結(jié)束后,就會被銷毀铡溪,因此更節(jié)省內(nèi)存空間
19 - 作用域鏈
只要是代碼都一個作用域中漂辐,寫在函數(shù)內(nèi)部的局部作用域,未寫在任何函數(shù)內(nèi)部即在全局作用域中棕硫;如果函數(shù)中還有函數(shù)髓涯,那么在這個作用域中就又可以誕生一個作用域;根據(jù)在**[內(nèi)部函數(shù)可以訪問外部函數(shù)變量]**的這種機制哈扮,用鏈式查找決定哪些數(shù)據(jù)能被內(nèi)部函數(shù)訪問纬纪,就稱作作用域鏈
案例分析1:
function f1() {
var num = 123;
function f2() {
console.log( num );
}
f2();
}
var num = 456;
f1();
作用域鏈:采取就近原則的方式來查找變量最終的值
var a = 1;
function fn1() {
var a = 2;
var b = '22';
fn2();
function fn2() {
var a = 3;
fn3();
function fn3() {
var a = 4;
console.log(a); //a的值 ?
console.log(b); //b的值 ?
}
}
}
fn1();
20 - 預解析
20.1 預解析的相關概念
JavaScript 代碼是由瀏覽器中的 JavaScript 解析器來執(zhí)行的。JavaScript 解析器在運行 JavaScript 代碼的時候分為兩步:預解析和代碼執(zhí)行滑肉。
預解析:在當前作用域下, JS 代碼執(zhí)行之前包各,瀏覽器會默認把帶有 var 和 function 聲明的變量在內(nèi)存中進行提前聲明或者定義。
-
代碼執(zhí)行: 從上到下執(zhí)行JS語句靶庙。
預解析會把變量和函數(shù)的聲明在代碼執(zhí)行之前執(zhí)行完成问畅。
20.2 變量預解析
預解析也叫做變量、函數(shù)提升六荒,就是變量的聲明會被提升到當前作用域的最上面护姆,變量的賦值不會提升
console.log(num); // 結(jié)果是多少?
var num = 10; // 恬吕?
結(jié)果:undefined
20.3 函數(shù)預解析
函數(shù)提升: 函數(shù)的聲明會被提升到當前作用域的最上面签则,但是不會調(diào)用函數(shù)
fn();
function fn() {
console.log('打印');
}
結(jié)果:控制臺打印字符串 --- ”打印“
20.4 函數(shù)表達式聲明函數(shù)問題
函數(shù)表達式創(chuàng)建函數(shù),會執(zhí)行變量提升铐料,此時接收函數(shù)的變量名無法正確的調(diào)用:
fn();
var fn = function() {
console.log('想不到吧');
}
結(jié)果:報錯提示 ”fn is not a function"
解釋:該段代碼執(zhí)行之前渐裂,會做變量聲明提升,fn在提升之后的值是undefined钠惩;而fn調(diào)用是在fn被賦值為函數(shù)體之前柒凉,此時fn的值是undefined,所以無法正確調(diào)用
21 - 對象?
21.1 對象的相關概念
-
什么是對象篓跛?
對象是一組無序的相關屬性和方法的集合膝捞,所有的事物都是對象,例如字符串愧沟、數(shù)值蔬咬、數(shù)組鲤遥、函數(shù)等
對象是由屬性和方法組成的屬性:事物的特征(常用名詞)
方法:事物的行為(常用動詞)
-
為什么需要對象?
保存一個值時林艘,可以使用變量
保存多個值(一組值)時盖奈,可以使用數(shù)組
如果要保存一個人的完整信息呢?
例如狐援,將“張三瘋”的個人的信息保存在數(shù)組中的方式為:
var arr = [‘張三瘋’, ‘男', 128,154];
上述例子中用數(shù)組保存數(shù)據(jù)的缺點是:數(shù)據(jù)只能通過索引值訪問钢坦,開發(fā)者需要清晰的清除所有的數(shù)據(jù)的排行才能準確地獲取數(shù)據(jù),而當數(shù)據(jù)量龐大時啥酱,不可能做到記憶所有數(shù)據(jù)的索引值爹凹。
為了讓更好地存儲一組數(shù)據(jù),對象應運而生:對象中為每項數(shù)據(jù)設置了屬性名稱镶殷,可以訪問數(shù)據(jù)更語義化禾酱,數(shù)據(jù)結(jié)構(gòu)清晰,表意明顯批钠,方便開發(fā)者使用宇植。
使用對象記錄上組數(shù)據(jù)為:
var obj = { "name":"張三瘋", "sex":"男", "age":128, "height":154 }
JS中的對象表達結(jié)構(gòu)更清晰,更強大埋心。
21.2 創(chuàng)建對象的三種方式
1、利用字面量創(chuàng)建對象
就是花括號 { } 里面包含了表達這個具體事物(對象)的屬性和方法忙上;{ } 里面采取鍵值對的形式表示
鍵:相當于屬性名
-
值:相當于屬性值拷呆,可以是任意類型的值(數(shù)字類型、字符串類型疫粥、布爾類型茬斧,函數(shù)類型等)
代碼如下:
var star = { name : 'pink', age : 18, sex : '男', sayHi : function(){ alert('大家好啊~'); } };
上述代碼中 star即是創(chuàng)建的對象。
(1)對象的使用
-
對象的屬性
- 對象中存儲具體數(shù)據(jù)的項
-
對象的方法
- 對象中存儲函數(shù)的項
-
訪問對象的屬性
對象.屬性名
-
對象[‘屬性名’]
console.log(star.name) // 調(diào)用名字屬性 console.log(star['name']) // 調(diào)用名字屬性
-
調(diào)用對象的方法
star.sayHi(); // 調(diào)用 sayHi 方法,注意梗逮,一定不要忘記帶后面的括號
(2)變量项秉、屬性、函數(shù)慷彤、方法總結(jié)
屬性是對象的一部分娄蔼,而變量不是對象的一部分,變量是單獨存儲數(shù)據(jù)的容器
- 變量:單獨聲明賦值底哗,單獨存在
- 屬性:對象里面的變量稱為屬性岁诉,不需要聲明,用來描述該對象的特征
方法是對象的一部分跋选,函數(shù)不是對象的一部分涕癣,函數(shù)是單獨封裝操作的容
- 函數(shù):單獨存在的,通過“函數(shù)名()”的方式就可以調(diào)用
- 方法:對象里面的函數(shù)稱為方法前标,方法不需要聲明坠韩,使用“對象.方法名()”的方式就可以調(diào)用距潘,方法用來描述該對象的行為和功能
2、利用 new Object 創(chuàng)建對象
-
創(chuàng)建空對象
var andy = new Obect();
通過內(nèi)置構(gòu)造函數(shù)Object創(chuàng)建對象只搁,此時andy變量已經(jīng)保存了創(chuàng)建出來的空對象
-
給空對象添加屬性和方法
通過對象操作屬性和方法的方式绽昼,來為對象增加屬性和方法
andy.name = 'pink'; andy.age = 18; andy.sex = '男'; andy.sayHi = function(){ alert('大家好啊~'); }
注意:
- Object() :第一個字母大寫
- new Object() :需要 new 關鍵字
- 使用的格式:對象.屬性 = 值;
3、利用構(gòu)造函數(shù)創(chuàng)建對象
-
構(gòu)造函數(shù)
構(gòu)造函數(shù):主要用來初始化對象须蜗,即為對象成員變量賦初始值硅确,它總與 new 運算符一起使用
-
構(gòu)造函數(shù)的封裝格式:
function 構(gòu)造函數(shù)名(形參1,形參2,形參3) { this.屬性名1 = 參數(shù)1; this.屬性名2 = 參數(shù)2; this.屬性名3 = 參數(shù)3; this.方法名 = 函數(shù)體; }
-
構(gòu)造函數(shù)的調(diào)用格式
var obj = new 構(gòu)造函數(shù)名(實參1,實參2明肮,實參3)
以上代碼中菱农,obj即接收到構(gòu)造函數(shù)創(chuàng)建出來的對象
-
注意事項
- 構(gòu)造函數(shù)約定首字母大寫。
- 函數(shù)內(nèi)的屬性和方法前面需要添加 this 柿估,表示當前對象的屬性和方法循未。
- 構(gòu)造函數(shù)中不需要 return 返回結(jié)果。
- 當我們創(chuàng)建對象的時候秫舌,必須用 new 來調(diào)用構(gòu)造函數(shù)的妖。
-
其他
構(gòu)造函數(shù),如 Stars()足陨,抽象了對象的公共部分嫂粟,封裝到了函數(shù)里面,它泛指某一大類(class)
創(chuàng)建對象墨缘,如 new Stars()星虹,特指某一個,通過 new 關鍵字創(chuàng)建對象的過程我們也稱為對象實例化
-
new關鍵字的作用
- 在構(gòu)造函數(shù)代碼開始執(zhí)行之前镊讼,創(chuàng)建一個空對象宽涌;
- 修改this的指向,把this指向創(chuàng)建出來的空對象蝶棋;
- 執(zhí)行函數(shù)的代碼
- 在函數(shù)完成之后卸亮,返回this---即創(chuàng)建出來的對象
21.3 遍歷對象
for...in 語句用于對數(shù)組或者對象的屬性進行循環(huán)操作
for (變量 in 對象名字) {
// 在此執(zhí)行代碼
}
語法中的變量是自定義的,通常我們會將這個變量寫為 k 或者 key
for (var k in obj) {
console.log(k); // 這里的 k 是屬性名
console.log(obj[k]); // 這里的 obj[k] 是屬性值
}
22 - 內(nèi)置對象
22.1 內(nèi)置對象
? JavaScript 中的對象分為3種:自定義對象 玩裙、內(nèi)置對象兼贸、 瀏覽器對象
? 前面兩種對象是JS 基礎 內(nèi)容,屬于 ECMAScript献酗; 第三個瀏覽器對象屬于 JS 獨有的寝受, JS API 講解內(nèi)置對象就是指 JS 語言自帶的一些對象,這些對象供開發(fā)者使用罕偎,并提供了一些常用的或是最基本而必要的功能(屬性和方法)很澄,內(nèi)置對象最大的優(yōu)點就是幫助我們快速開發(fā)
? JavaScript 提供了多個內(nèi)置對象:Math、 Date 、Array甩苛、String等
22.2 查文檔
? 查找文檔:學習一個內(nèi)置對象的使用蹂楣,只要學會其常用成員的使用即可
? Mozilla 開發(fā)者網(wǎng)絡(MDN)提供了有關開放網(wǎng)絡技術(shù)(Open Web)的信息,包括 HTML讯蒲、CSS 和萬維網(wǎng)及 HTML5 應用的 API
? MDN:https://developer.mozilla.org/zh-CN/
22.3 Math對象
? Math 對象不是構(gòu)造函數(shù)痊土,跟數(shù)學相關的運算(求絕對值,取整墨林、最大值等)可以使用 Math 中的成員
屬性赁酝、方法名 | 功能 |
---|---|
Math.PI | 圓周率 |
Math.floor() | 向下取整 |
Math.ceil() | 向上取整 |
Math.round() | 四舍五入版 就近取整 注意 -3.5 結(jié)果是 -3 |
Math.abs() | 絕對值 |
Math.max()/Math.min() | 求最大和最小值 |
Math.random() | 獲取范圍在[0,1)內(nèi)的隨機值 |
? 注意:上面的方法使用時必須帶括號
? 獲取指定范圍內(nèi)的隨機整數(shù):
function getRandom(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
22.4 日期對象
? Date 對象和 Math 對象不一樣,Date是一個構(gòu)造函數(shù)旭等,所以使用時需要實例化后才能使用其中具體方法和屬性酌呆。Date 實例用來處理日期和時間
-
使用Date實例化日期對象
- 獲取當前時間必須實例化:
var now = new Date();
- 獲取指定時間的日期對象
var future = new Date('2019/5/1');
注意:如果創(chuàng)建實例時并未傳入?yún)?shù),則得到的日期對象是當前時間對應的日期對象
-
使用Date實例的方法和屬性
getFullYear()//獲取當年 getMonth()//獲取當月(0-11) getDate()//獲取當日日期 getDay()//獲取周幾(周日0-6周六) getHours()//獲取當前小時 getMinutes()//獲取當前分鐘 getSeconds()//獲取當前秒鐘 dObj.方法名//調(diào)用方式
-
通過Date實例獲取總毫米數(shù)
-
總毫秒數(shù)的含義
? 基于1970年1月1日(世界標準時間)起的毫秒數(shù)
-
獲取總毫秒數(shù)
// 實例化Date對象 var now = new Date(); // 1. 用于獲取對象的原始值 console.log(date.valueOf()) console.log(date.getTime()) // 2. 簡單寫可以這么做 var now = + new Date(); // 3. HTML5中提供的方法搔耕,有兼容性問題 var now = Date.now();
-
22.5 數(shù)組對象
1隙袁、創(chuàng)建數(shù)組的兩種方式
-
字面量方式
-
示例代碼如下:
var arr = [1,"test",true];
-
-
new Array()
-
示例代碼如下:
var arr = new Array();
? 注意:上面代碼中arr創(chuàng)建出的是一個空數(shù)組,如果需要使用構(gòu)造函數(shù)Array創(chuàng)建非空數(shù)組弃榨,可以在創(chuàng)建數(shù)組時傳入?yún)?shù)
? 參數(shù)傳遞規(guī)則如下:
如果只傳入一個參數(shù)菩收,則參數(shù)規(guī)定了數(shù)組的長度
如果傳入了多個參數(shù),則參數(shù)稱為數(shù)組的元素
-
2鲸睛、檢測是否為數(shù)組
-
instanceof 運算符
-
instanceof 可以判斷一個對象是否是某個構(gòu)造函數(shù)的實例
var arr = [1, 23]; var obj = {}; console.log(arr instanceof Array); // true console.log(obj instanceof Array); // false
-
-
Array.isArray()
-
Array.isArray()用于判斷一個對象是否為數(shù)組娜饵,isArray() 是 HTML5 中提供的方法
var arr = [1, 23]; var obj = {}; console.log(Array.isArray(arr)); // true console.log(Array.isArray(obj)); // false
-
3、添加刪除數(shù)組元素的方法
push(參數(shù)1...)//末尾追加元素 返回新的長度 注意修改原數(shù)組
pop()//刪除最后一個元素 返回刪除元素 修改原數(shù)組
unshift(參數(shù)1...)//開頭追加元素 返回新的長度 注意修改原數(shù)組
shift()//刪除開頭一個元素 返回刪除元素 修改原數(shù)組
注意:push腊凶、unshift為增加元素方法弄匕;pop测暗、shift為刪除元素的方法
4、數(shù)組排序
reverse()//顛倒數(shù)組中元素順序(無參數(shù))脱货,會改變原數(shù)組政鼠,返回新數(shù)組
sort()//對數(shù)組元素排序风瘦,會改變原數(shù)組,返回新數(shù)組
注意:sort方法需要傳入?yún)?shù)來設置升序公般、降序排序
- 如果傳入“function(a,b){ return a-b;}”万搔,則為升序
- 如果傳入“function(a,b){ return b-a;}”,則為降序
5官帘、數(shù)組索引方法
indexOf()//數(shù)組中查找給定元素的第一個索引瞬雹,不存在則返回-1
lastIndexOf()//數(shù)組中查找給定元素的最后一個索引,不存在則返回-1
6刽虹、數(shù)組轉(zhuǎn)換為字符串
toString()//把數(shù)組轉(zhuǎn)換為字符串酗捌,逗號分隔每一項
join('分隔符')//如果不傳參數(shù),則按照","拼接元素
7、其他方法
concat()//連接2個或多個數(shù)組 不影響原數(shù)組 返回新數(shù)組
slice()//返回截取的數(shù)組 slice(begin,end)
splice()//返回被刪除元素的新數(shù)組 splice(第幾個開始胖缤,要刪除的個數(shù))
22.6 字符串對象
1尚镰、基本包裝類型
? 為了方便操作基本數(shù)據(jù)類型,JavaScript 還提供了三個特殊的引用類型:String哪廓、Number和 Boolean
? 基本包裝類型就是把簡單數(shù)據(jù)類型包裝成為復雜數(shù)據(jù)類型狗唉,這樣基本數(shù)據(jù)類型就有了屬性和方法
// 下面代碼有什么問題?
var str = 'andy';
console.log(str.length);
// 1. 生成臨時變量涡真,把簡單類型包裝為復雜數(shù)據(jù)類型
var temp = new String('andy');
// 2. 賦值給我們聲明的字符變量
str = temp;
// 3. 銷毀臨時變量
temp = null;
2分俯、字符串的不可變
? 當重新給字符串變量賦值的時候,變量之前保存的字符串不會被修改哆料,依然在內(nèi)存中重新給字符串賦值缸剪,會重新在內(nèi)存中開辟空間,這個特點就是字符串的不可變
? 由于字符串的不可變剧劝,在大量拼接字符串的時候會有效率問題
3橄登、根據(jù)字符返回位置
indexOf('要找的字符', 開始的位置)//找不到則返回-1
lastIndexOf()//從后往前找,只找第一個匹配的
? 案例:查找字符串"abcoefoxyozzopp"中所有o出現(xiàn)的位置以及次數(shù)
- 先查找第一個o出現(xiàn)的位置
- 然后 只要indexOf 返回的結(jié)果不是 -1 就繼續(xù)往后查找
- 因為indexOf 只能查找到第一個讥此,所以后面的查找拢锹,利用第二個參數(shù),當前索引加1萄喳,從而繼續(xù)查找
4卒稳、根據(jù)位置返回字符
charAt(index)//返回指定位置的字符
charCodeAt(index)//返回指定位置字符的ASCII碼
str[index]//返回指定位置的字符 html5,ie8+支持
? 案例:判斷一個字符串 'abcoefoxyozzopp' 中出現(xiàn)次數(shù)最多的字符他巨,并統(tǒng)計其次數(shù)
核心算法:利用 charAt() 遍歷這個字符串
把每個字符都存儲給對象充坑, 如果對象沒有該屬性,就為1染突,如果存在了就 +1
-
遍歷對象捻爷,得到最大值和該字符
? 注意:在遍歷的過程中,把字符串中的每個字符作為對象的屬性存儲在對象總份企,對應的屬性值是該字符出現(xiàn)的次數(shù)
5也榄、字符串操作方法
concat(str1, str2, str3...)//拼接字符串,等效于+司志,+更常用
substr(start, length)//截取字符串 參數(shù):開始位置索引 截取個數(shù)
slice(start, end)//截取字符串 end取不到
substring(start, end)//和slice相似甜紫,區(qū)別在于不接受負值
6、replace()方法
? replace() 方法用于在字符串中用一些字符替換另一些字符骂远,其使用格式如下:
字符串.replace(被替換的字符串囚霸, 要替換為的字符串);
7激才、split()方法
? split()方法用于切分字符串拓型,它可以將字符串切分為數(shù)組额嘿。在切分完畢之后,返回的是一個新數(shù)組
字符串.split("分割字符")
23 - 簡單數(shù)據(jù)類型和復雜數(shù)據(jù)類型
23.1 簡單數(shù)據(jù)類型
? 簡單類型(基本數(shù)據(jù)類型吨述、值類型):在存儲時變量中存儲的是值本身岩睁,包括string ,number揣云,boolean捕儒,undefined,null
23.2 復雜數(shù)據(jù)類型
? 復雜數(shù)據(jù)類型(引用類型):在存儲時變量中存儲的僅僅是地址(引用)邓夕,通過 new 關鍵字創(chuàng)建的對象(系統(tǒng)對象刘莹、自定義對象),如 Object焚刚、Array点弯、Date等;
23.3 堆棧
- 堆椏蠊荆空間分配區(qū)別:
1抢肛、棧(操作系統(tǒng)):由操作系統(tǒng)自動分配釋放存放函數(shù)的參數(shù)值、局部變量的值等碳柱。其操作方式類似于數(shù)據(jù)結(jié)構(gòu)中的棧捡絮;
簡單數(shù)據(jù)類型存放到棧里面
2、堆(操作系統(tǒng)):存儲復雜類型(對象)莲镣,一般由程序員分配釋放福稳,若程序員不釋放,由垃圾回收機制回收瑞侮。
-
簡單數(shù)據(jù)類型的存儲方式
? 值類型變量的數(shù)據(jù)直接存放在變量(椀脑玻空間)中
-
復雜數(shù)據(jù)類型的存儲方式
? 引用類型變量(棧空間)里存放的是地址半火,真正的對象實例存放在堆空間中
23.4 簡單類型傳參
? 函數(shù)的形參也可以看做是一個變量越妈,當我們把一個值類型變量作為參數(shù)傳給函數(shù)的形參時,其實是把變量在椗ヌ牵空間里的值復制了一份給形參叮称,那么在方法內(nèi)部對形參做任何修改,都不會影響到的外部變量
function fn(a) {
a++;
console.log(a);
}
var x = 10;
fn(x);
console.log(x)藐鹤;
? 運行結(jié)果如下:
11
10
23.5 復雜數(shù)據(jù)類型傳參
? 函數(shù)的形參也可以看做是一個變量,當我們把引用類型變量傳給形參時赂韵,其實是把變量在椨榻冢空間里保存的堆地址復制給了形參,形參和實參其實保存的是同一個堆地址祭示,所以操作的是同一個對象
function Person(name) {
this.name = name;
}
function f1(x) { // x = p
console.log(x.name); // 2. 這個輸出什么 ?
x.name = "張學友";
console.log(x.name); // 3. 這個輸出什么 ?
}
var p = new Person("劉德華");
console.log(p.name); // 1. 這個輸出什么 ?
f1(p);
console.log(p.name); // 4. 這個輸出什么 ?
? 運行結(jié)果如下:
劉德華
劉德華
張學友
張學友