前端基礎入門四（JavaScript基礎）
學習目標:
- 掌握程式設計的基本思維
- 掌握程式設計的基本語法
我們先來學習JavaScript基礎，後續會講解JavaScript高階。
重點內容
變數的宣告及使用
資料型別
型別轉換
運算子
JavaScript介紹
JavaScript是什麼
JavaScript是一種執行在客戶端 的指令碼語言
JavaScript的直譯器被稱為JavaScript引擎，為瀏覽器的一部分，廣泛用於客戶端的指令碼語言，最早是在HTML（標準通用標記語言下的一個應用）網頁上使用，用來給HTML網頁增加動態功能。
JavaScript現在的意義(應用場景)
JavaScript 發展到現在幾乎無所不能。
- 網頁特效
- 服務端開發(Node.js)
- 命令列工具(Node.js)
- 桌面程式(Electron)
- App(Cordova)
- 控制硬體-物聯網(Ruff)
- 遊戲開發(cocos2d-js)
JavaScript和HTML、CSS的區別
- HTML：提供網頁的結構，提供網頁中的內容
- CSS: 用來美化網頁
- JavaScript: 可以用來控制網頁內容，給網頁增加動態的效果
JavaScript的組成
ECMAScript - JavaScript的核心
ECMA 歐洲計算機制造聯合會
網景：JavaScript
微軟：JScript
定義了JavaScript的語法規範
JavaScript的核心，描述了語言的基本語法和資料型別，ECMAScript是一套標準，定義了一種語言的標準與具體實現無關
BOM - 瀏覽器物件模型
一套操作瀏覽器功能的API
通過BOM可以操作瀏覽器視窗，比如：彈出框、控制瀏覽器跳轉、獲取解析度等
DOM - 文件物件模型
一套操作頁面元素的API
DOM可以把HTML看做是文件樹，通過DOM提供的API可以對樹上的節點進行操作
JavaScript的書寫位置
寫在行內
<input type="button" value="按鈕" onclick="alert('Hello World')" />
寫在script標籤中
<head>
<script>
alert('Hello World!');
</script>
</head>
寫在外部js檔案中，在頁面引入
<script src="main.js"></script>
變數
- 什麼是變數
變數是計算機記憶體中儲存資料的識別符號，根據變數名稱可以獲取到記憶體中儲存的資料 - 為什麼要使用變數
使用變數可以方便的獲取或者修改記憶體中的資料
如何使用變數
var宣告變數
var age;
變數的賦值
var age;age = 18;
同時宣告多個變數
var age, name, sex; age = 10; name = 'zs';
同時宣告多個變數並賦值
var age = 10, name = 'zs';
變數在記憶體中的儲存
var age = 18;
變數的命名規則和規範
-
規則 - 必須遵守的，不遵守會報錯
- 由字母、數字、下劃線、$符號組成，不能以數字開頭
- 不能是關鍵字和保留字，例如：for、while。
- 區分大小寫
-
規範 - 建議遵守的，不遵守不會報錯
- 變數名必須有意義
- 遵守駝峰命名法。首字母小寫，後面單詞的首字母需要大寫。例如：userName、userPassword
資料型別
簡單資料型別
Number、String、Boolean、Undefined、Null
Number型別
- 數值字面量：數值的固定值的表示法
110 1024 60.5 -
進位制
十進位制
var num = 9; 進行算數計算時，八進位制和十六進位制表示的數值最終都將被轉換成十進位制數值。
十六進位制
var num = 0xA; 數字序列範圍：0~9以及A~F
八進位制
var num1 = 07;// 對應十進位制的7 var num2 = 019;// 對應十進位制的19 var num3 = 08;// 對應十進位制的8 數字序列範圍：0~7 如果字面值中的數值超出了範圍，那麼前導零將被忽略，後面的數值將被當作十進位制數值解析
-
浮點數
-
浮點數的精度問題
浮點數
var n = 5e-324;// 科學計數法5乘以10的-324次方
浮點數值的最高精度是 17 位小數，但在進行算術計算時其精確度遠遠不如整數
var result = 0.1 + 0.2; // 結果不是 0.3，而是：0.30000000000000004
console.log(0.07 * 100);
不要判斷兩個浮點數是否相等
-
- 數值範圍
最小值：Number.MIN_VALUE，這個值為： 5e-324
最大值：Number.MAX_VALUE，這個值為： 1.7976931348623157e+308
無窮大：Infinity
無窮小：-Infinity
-
數值判斷
-
NaN：not a number
- NaN 與任何值都不相等，包括他本身
- isNaN: is not a number
-
String型別
字串長度
length屬性用來獲取字串的長度
var str = '程式猿 Hello World'; console.log(str.length);
字串拼接
字串拼接使用 + 連線
console.log(11 + 11);
console.log('hello' + ' world');
console.log('100' + '100');
console.log('11' + 11);
console.log('male:' + true);
- 兩邊只要有一個是字串，那麼+就是字串拼接功能
- 兩邊如果都是數字，那麼就是算術功能。
Boolean型別
- Boolean字面量： true和false，區分大小寫
- 計算機內部儲存：true為1，false為0
Undefined和Null
- undefined表示一個聲明瞭沒有賦值的變數，變數只宣告的時候值預設是undefined
- null表示一個空，變數的值如果想為null，必須手動設定
複雜資料型別
Object
獲取變數的型別
typeof
var age = 18; console.log(typeof age);// 'number'
字面量
在原始碼中一個固定值的表示法。
數值字面量：8, 9, 10
字串字面量：'程式設計師', "大前端"
布林字面量：true，false
註釋
單行註釋
用來描述下面一個或多行程式碼的作用
// 這是一個變數 var name = 'hm';
多行註釋
用來註釋多條程式碼
/* var age = 18; var name = 'zs'; console.log(name, age); */
資料型別轉換
如何使用谷歌瀏覽器，快速的檢視資料型別？
字串的顏色是黑色的，數值型別是藍色的，布林型別也是藍色的，undefined和null是灰色的
轉換成字串型別
-
toString()
var num = 5; console.log(num.toString());
-
String()
String()函式存在的意義：有些值沒有toString()，這個時候可以使用String()。比如：undefined和null
- 拼接字串方式
num + ""，當 + 兩邊一個操作符是字串型別，一個操作符是其它型別的時候，會先把其它型別轉換成字串再進行字串拼接，返回字串
轉換成數值型別
- Number()
Number()可以把任意值轉換成數值，如果要轉換的字串中有一個不是數值的字元，返回NaN - parseInt()
var num1 = parseInt("12.3abc");// 返回12，如果第一個字元是數字會解析知道遇到非數字結束
var num2 = parseInt("abc123");// 返回NaN，如果第一個字元不是數字或者符號就返回NaN
-
parseFloat()
parseFloat()把字串轉換成浮點數
parseFloat()和parseInt非常相似，不同之處在與
parseFloat會解析第一個. 遇到第二個.或者非數字結束 如果解析的內容裡只有整數，解析成整數
- +，-0等運算
var str = '500'; console.log(+str);// 取正 console.log(-str);// 取負 console.log(str - 0);
轉換成布林型別
- Boolean()
0 ''(空字串) null undefined NaN 會轉換成false 其它都會轉換成true
操作符
運算子 operator
5 + 6
表示式 組成 運算元和操作符，會有一個結果
算術運算子
一元運算子
一元運算子：只有一個運算元的運算子
5 + 6 兩個運算元的運算子 二元運算子
++ 自身加1
-- 自身減1
- 前置++
var num1 = 5; ++ num1; var num2 = 6; console.log(num1 + ++ num2);
後置++
var num1 = 5; num1 ++; var num2 = 6 console.log(num1 + num2 ++);
總結
前置++：先加1，後參與運算
後置++：先參與運算，後加1
上面兩個理解後，下面兩個自通
前置-- ：先減1，後參與運算
後置-- ：先參與運算，後減1
邏輯運算子(布林運算子)
&& 與 兩個運算元同時為true，結果為true，否則都是false
|| 或 兩個運算元有一個為true，結果為true，否則為false
! 非 取反
關係運算符(比較運算子)
< > >= <= == != === !==
==與===的區別：==只進行值得比較，===型別和值同時相等，則相等 var result = '55' == 55;// true var result = '55' === 55;// false 值相等，型別不相等 var result = 55 === 55;// true
賦值運算子
= += -= *= /= %=
例如： var num = 0; num += 5;//相當於num = num + 5;
運算子的優先順序
優先順序從高到底
1. ()優先順序最高 2. 一元運算子++--! 3. 算數運算子先*/%後 +- 4. 關係運算符>>=<<= 5. 相等運算子==!====!== 6. 邏輯運算子 先&&後|| 7. 賦值運算子
表示式和語句
表示式
一個表示式可以產生一個值，有可能是運算、函式呼叫、有可能是字面量。表示式可以放在任何需要值的地方
語句
語句可以理解為一個行為，迴圈語句和判斷語句就是典型的語句。一個程式有很多個語句組成，一般情況下;分割一個一個的語句
流程控制
程式的三種基本結構
順序結構
從上到下執行的程式碼就是順序結構
程式預設就是由上到下順序執行的
分支結構
根據不同的情況，執行對應程式碼
迴圈結構
迴圈結構：重複做一件事情
分支結構
if語句
語法結構
if (/* 條件表示式 */) {
// 執行語句
}
if (/* 條件表示式 */){
// 成立執行語句
} else {
// 否則執行語句
}
if (/* 條件1 */){
// 成立執行語句
} else if (/* 條件2 */){
// 成立執行語句
} else if (/* 條件3 */){
// 成立執行語句
} else {
// 最後預設執行語句
}
switch語句
語法格式:
switch (expression) {
case 常量1:
語句;
break;
case 常量2:
語句;
break;
case 常量3:
語句;
break;
…
case 常量n:
語句;
break;
default:
語句;
break;
}
break可以省略，如果省略，程式碼會繼續執行下一個case
switch 語句在比較值時使用的是全等操作符, 因此不會發生型別轉換（例如，字串'10' 不等於數值 10）
布林型別的隱式轉換
流程控制語句會把後面的值隱式轉換成布林型別
轉換為true非空字串非0數字true 任何物件 轉換成false空字串0falsenullundefined // 結果是什麼？ var a = !!'123';
迴圈結構
在javascript中，迴圈語句有三種，while、do..while、for迴圈。
while語句
基本語法：
// 當迴圈條件為true時，執行迴圈體，
// 當迴圈條件為false時，結束迴圈。
while (迴圈條件) {
//迴圈體
}
程式碼示例：
// 計算1-100之間所有數的和
// 初始化變數
var i = 1;
var sum = 0;
// 判斷條件
while (i <= 100) {
// 迴圈體
sum += i;
// 自增
i++;
}
console.log(sum);
do...while語句
do..while迴圈和while迴圈非常像，二者經常可以相互替代，但是do..while的特點是不管條件成不成立，都會執行一次。
基礎語法：
do {
// 迴圈體;
} while (迴圈條件);
程式碼示例：
// 初始化變數
var i = 1;
var sum = 0;
do {
sum += i;//迴圈體
i++;//自增
} while (i <= 100);//迴圈條件
for語句
while和do...while一般用來解決無法確認次數的迴圈。for迴圈一般在迴圈次數確定的時候比較方便
for迴圈語法：
// for迴圈的表示式之間用的是;號分隔的，千萬不要寫成,
for (初始化表示式1; 判斷表示式2; 自增表示式3) {
// 迴圈體4
}
continue和break
break:立即跳出整個迴圈，即迴圈結束，開始執行迴圈後面的內容（直接跳到大括號）
continue:立即跳出當前迴圈，繼續下一次迴圈（跳到i++的地方）
除錯
-
過去除錯JavaScript的方式
- alert()
- console.log()
- 斷點除錯
斷點除錯是指自己在程式的某一行設定一個斷點，除錯時，程式執行到這一行就會停住，然後你可以一步一步往下除錯，除錯過程中可以看各個變數當前的值，出錯的話，除錯到出錯的程式碼行即顯示錯誤，停下。
-
除錯步驟
瀏覽器中按F12-->sources-->找到需要除錯的檔案-->在程式的某一行設定斷點
- 除錯中的相關操作
Watch: 監視，通過watch可以監視變數的值的變化，非常的常用。
F10: 程式單步執行，讓程式一行一行的執行，這個時候，觀察watch中變數的值的變化。
F8：跳到下一個斷點處，如果後面沒有斷點了，則程式執行結束。
tips: 監視變數，不要監視表示式，因為監視了表示式，那麼這個表示式也會執行。
- 程式碼除錯的能力非常重要，只有學會了程式碼除錯，才能學會自己解決bug的能力。初學者不要覺得除錯程式碼麻煩就不去除錯，知識點花點功夫肯定學的會，但是程式碼除錯這個東西，自己不去練，永遠都學不會。
陣列
為什麼要學習陣列
之前學習的資料型別，只能儲存一個值(比如：Number/String。我們想儲存班級中所有學生的姓名，此時該如何儲存？
陣列的概念
所謂陣列，就是將多個元素（通常是同一型別）按一定順序排列放到一個集合中，那麼這個集合我們就稱之為陣列。
陣列的定義
陣列是一個有序的列表，可以在陣列中存放任意的資料，並且陣列的長度可以動態的調整。
通過陣列字面量建立陣列
// 建立一個空陣列 var arr1 = []; // 建立一個包含3個數值的陣列，多個數組項以逗號隔開 var arr2 = [1, 3, 4]; // 建立一個包含2個字串的陣列 var arr3 = ['a', 'c']; // 可以通過陣列的length屬性獲取陣列的長度 console.log(arr3.length); // 可以設定length屬性改變陣列中元素的個數 arr3.length = 0;
獲取陣列元素
陣列的取值
// 格式：陣列名[下標]下標又稱索引 // 功能：獲取陣列對應下標的那個值，如果下標不存在，則返回undefined。 var arr = ['red',, 'green', 'blue']; arr[0];// red arr[2]; // blue arr[3]; // 這個陣列的最大下標為2,因此返回undefined
遍歷陣列
遍歷：遍及所有，對陣列的每一個元素都訪問一次就叫遍歷。
陣列遍歷的基本語法：
for(var i = 0; i < arr.length; i++) {
// 陣列遍歷的固定結構
}
陣列中新增元素
陣列的賦值
// 格式：陣列名[下標/索引] = 值; // 如果下標有對應的值，會把原來的值覆蓋，如果下標不存在，會給陣列新增一個元素。 var arr = ["red", "green", "blue"]; // 把red替換成了yellow arr[0] = "yellow"; // 給陣列新增加了一個pink的值 arr[3] = "pink";
函式
為什麼要有函式
如果要在多個地方求1-100之間所有數的和，應該怎麼做？
什麼是函式
把一段相對獨立的具有特定功能的程式碼塊封裝起來，形成一個獨立實體，就是函式，起個名字（函式名），在後續開發中可以反覆呼叫
函式的作用就是封裝一段程式碼，將來可以重複使用
函式的定義
-
函式宣告
function 函式名(){
// 函式體
}
-
函式表示式
var fn = function() {
// 函式體
}
- 特點：
函式宣告的時候，函式體並不會執行，只要當函式被呼叫的時候才會執行。
函式一般都用來幹一件事情，需用使用動詞+名詞，表示做一件事情 tellStory sayHello等
函式的呼叫
呼叫函式的語法：
函式名();
特點：
函式體只有在呼叫的時候才會執行，呼叫需要()進行呼叫。
可以呼叫多次(重複使用)
程式碼示例：
// 宣告函式
function sayHi() {
console.log("吃了沒？");
}
// 呼叫函式
sayHi();
// 求1-100之間所有數的和
function getSum() {
var sum = 0;
for (vari = 0; i < 100; i++) {
sum += i;
}
console.log(sum);
}
// 呼叫
getSum();
函式的引數
為什麼要有引數
function getSum() {
var sum = 0;
for (var i = 1; i <= 100; i++) {
sum += i;
}
console.log();
}
// 雖然上面程式碼可以重複呼叫，但是隻能計算1-100之間的值
// 如果想要計算n-m之間所有數的和，應該怎麼辦呢？
語法：
// 函式內部是一個封閉的環境，可以通過引數的方式，把外部的值傳遞給函式內部
// 帶引數的函式宣告
function 函式名(形參1, 形參2, 形參...){
// 函式體
}
// 帶引數的函式呼叫
函式名(實參1, 實參2, 實參3);
形參和實參
- 形式引數：在宣告一個函式的時候，為了函式的功能更加靈活，有些值是固定不了的，對於這些固定不了的值。我們可以給函式設定引數。這個引數沒有具體的值，僅僅起到一個佔位置的作用，我們通常稱之為形式引數，也叫形參。
- 實際引數：如果函式在宣告時，設定了形參，那麼在函式呼叫的時候就需要傳入對應的引數，我們把傳入的引數叫做實際引數，也叫實參。
var x = 5, y = 6;
fn(x,y);
function fn(a, b) {
console.log(a + b);
}
//x,y實參，有具體的值。函式執行的時候會把x,y複製一份給函式內部的a和b，函式內部的值是複製的新值，無法修改外部的x,y
函式的返回值
當函式執行完的時候，並不是所有時候都要把結果列印。我們期望函式給我一些反饋（比如計算的結果返回進行後續的運算），這個時候可以讓函式返回一些東西。也就是返回值。函式通過return返回一個返回值
返回值語法：
//宣告一個帶返回值的函式
function 函式名(形參1, 形參2, 形參...){
//函式體
return 返回值;
}
//可以通過變數來接收這個返回值
var 變數 = 函式名(實參1, 實參2, 實參3);
函式的呼叫結果就是返回值，因此我們可以直接對函式呼叫結果進行操作。
返回值詳解：
如果函式沒有顯示的使用 return語句 ，那麼函式有預設的返回值：undefined 如果函式使用 return語句，那麼跟再return後面的值，就成了函式的返回值 如果函式使用 return語句，但是return後面沒有任何值，那麼函式的返回值也是：undefined 函式使用return語句後，這個函式會在執行完 return 語句之後停止並立即退出，也就是說return後面的所有其他程式碼都不會再執行。
arguments的使用
JavaScript中，arguments物件是比較特別的一個物件，實際上是當前函式的一個內建屬性。也就是說所有函式都內建了一個arguments物件，arguments物件中儲存了傳遞的所有的實參。arguments是一個偽陣列，因此及可以進行遍歷
函式其它
匿名函式
匿名函式：沒有名字的函式
匿名函式如何使用：
將匿名函式賦值給一個變數，這樣就可以通過變數進行呼叫 匿名函式自呼叫
關於自執行函式（匿名函式自呼叫）的作用：防止全域性變數汙染。
自呼叫函式
匿名函式不能通過直接呼叫來執行，因此可以通過匿名函式的自呼叫的方式來執行
(function () {
alert(123);
})();
函式是一種資料型別
function fn() {}
console.log(typeof fn);
- 函式作為引數
因為函式也是一種型別，可以把函式作為兩一個函式的引數，在兩一個函式中呼叫
- 函式做為返回值
因為函式是一種型別，所以可以把函式可以作為返回值從函式內部返回，這種用法在後面很常見。
function fn(b) {
var a = 10;
return function () {
alert(a+b);
}
}
fn(15)();
程式碼規範
1.命名規範
2.變數規範
var name = 'zs';
3.註釋規範
// 這裡是註釋
4.空格規範
5.換行規範
var arr = [1, 2, 3, 4];
if (a > b) {
}
for(var i = 0; i < 10; i++) {
}
function fn() {
}
作用域
作用域：變數可以起作用的範圍
全域性變數和區域性變數
- 全域性變數
在任何地方都可以訪問到的變數就是全域性變數，對應全域性作用域 - 區域性變數
只在固定的程式碼片段內可訪問到的變數，最常見的例如函式內部。對應區域性作用域(函式作用域)不使用var宣告的變數是全域性變數，不推薦使用。
變數退出作用域之後會銷燬，全域性變數關閉網頁或瀏覽器才會銷燬
塊級作用域
任何一對花括號（｛和｝）中的語句集都屬於一個塊，在這之中定義的所有變數在程式碼塊外都是不可見的，我們稱之為塊級作用域。
在es5之前沒有塊級作用域的的概念,只有函式作用域，現階段可以認為JavaScript沒有塊級作用域
詞法作用域
變數的作用域是在定義時決定而不是執行時決定，也就是說詞法作用域取決於原始碼，通過靜態分析就能確定，因此詞法作用域也叫做靜態作用域。
在 js 中詞法作用域規則:
- 函式允許訪問函式外的資料.
- 整個程式碼結構中只有函式可以限定作用域.
- 作用域規則首先使用提升規則分析
- 如果當前作用規則中有名字了, 就不考慮外面的名字
var num = 123;
function foo() {
console.log( num );
}
foo();
if ( false ) {
var num = 123;
}
console.log( num ); // undefiend
作用域鏈
只有函式可以製造作用域結構， 那麼只要是程式碼，就至少有一個作用域, 即全域性作用域。凡是程式碼中有函式，那麼這個函式就構成另一個作用域。如果函式中還有函式，那麼在這個作用域中就又可以誕生一個作用域。
將這樣的所有的作用域列出來，可以有一個結構: 函式內指向函式外的鏈式結構。就稱作作用域鏈。
// 案例1：
function f1() {
function f2() {
}
}
var num = 456;
function f3() {
function f4() {
}
}
預解析
JavaScript程式碼的執行是由瀏覽器中的JavaScript解析器來執行的。JavaScript解析器執行JavaScript程式碼的時候，分為兩個過程：預解析過程和程式碼執行過程
預解析過程：
- 把變數的宣告提升到當前作用域的最前面，只會提升宣告，不會提升賦值。
- 把函式的宣告提升到當前作用域的最前面，只會提升宣告，不會提升呼叫。
- 先提升var，在提升function
JavaScript的執行過程
var a = 25;
function abc (){
alert(a);//undefined
var a = 10;
}
abc();
// 如果變數和函式同名的話，函式優先
console.log(a);
function a() {
console.log('aaaaa');
}
var a = 1;
console.log(a);
全域性解析規則
函式內部解析規則
變數提升
- 變數提升
定義變數的時候，變數的宣告會被提升到作用域的最上面，變數的賦值不會提升。 - 函式提升
JavaScript解析器首先會把當前作用域的函式宣告提前到整個作用域的最前面
// 1、-----------------------------------
var num = 10;
fun();
function fun() {
console.log(num);
var num = 20;
}
//2、-----------------------------------
var a = 18;
f1();
function f1() {
var b = 9;
console.log(a);
console.log(b);
var a = '123';
}
// 3、-----------------------------------
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 printPerson(name, age, sex....) {
}
// 函式的引數如果特別多的話，可以使用物件簡化
function printPerson(person) {
console.log(person.name);
……
}
什麼是物件
現實生活中：萬物皆物件，物件是一個具體的事物，一個具體的事物就會有行為和特徵。
舉例： 一部車，一個手機
車是一類事物，門口停的那輛車才是物件
特徵：紅色、四個輪子 行為：駕駛、剎車
JavaScript中的物件
JavaScript中的物件其實就是生活中物件的一個抽象 JavaScript的物件是無序屬性的集合。 其屬性可以包含基本值、物件或函式。物件就是一組沒有順序的值。我們可以把JavaScript中的物件想象成鍵值對，其中值可以是資料和函式。 物件的行為和特徵 特徵---屬性 行為---方法
- 事物的特徵在物件中用屬性來表示。
- 事物的行為在物件中用方法來表示。
物件字面量
字面量：11 'abc' true [] {}等
var o = {
name: 'zs,
age: 18,
sex: true,
sayHi: function () {
console.log(this.name);
}
};
物件建立方式
物件字面量
var o = {
name: 'zs',
age: 18,
sex: true,
sayHi: function () {
console.log(this.name);
}
};
new Object()建立物件
var person = new Object();
person.name = 'lisi';
person.age = 35;
person.job = 'actor';
person.sayHi = function(){
console.log('Hello,everyBody');
}
工廠函式建立物件
function createPerson(name, age, job) {
var person = new Object();
person.name = name;
person.age = age;
person.job = job;
person.sayHi = function(){
console.log('Hello,everyBody');
}
return person;
}
var p1 = createPerson('張三', 22, 'actor');
自定義建構函式
function Person(name,age,job){
this.name = name;
this.age = age;
this.job = job;
this.sayHi = function(){
console.log('Hello,everyBody');
}
}
var p1 = new Person('張三', 22, 'actor');
屬性和方法
如果一個變數屬於一個物件所有，那麼該變數就可以稱之為該物件的一個屬性，屬性一般是名詞，用來描述事物的特徵 如果一個函式屬於一個物件所有，那麼該函式就可以稱之為該物件的一個方法，方法是動詞，描述事物的行為和功能
new關鍵字
建構函式 ，是一種特殊的函式。主要用來在建立物件時初始化物件， 即為物件成員變數賦初始值，總與new運算子一起使用在建立物件的語句中。
- 建構函式用於建立一類物件，首字母要大寫。
- 建構函式要和new一起使用才有意義。
new在執行時會做四件事情
new會在記憶體中建立一個新的空物件 new 會讓this指向這個新的物件 執行建構函式目的：給這個新物件加屬性和方法 new會返回這個新物件
this詳解
JavaScript中的this指向問題，有時候會讓人難以捉摸，隨著學習的深入，我們可以逐漸瞭解 現在我們需要掌握函式內部的this幾個特點 1. 函式在定義的時候this是不確定的，只有在呼叫的時候才可以確定 2. 一般函式直接執行，內部this指向全域性window 3. 函式作為一個物件的方法，被該物件所呼叫，那麼this指向的是該物件 4. 建構函式中的this其實是一個隱式物件，類似一個初始化的模型，所有方法和屬性都掛載到了這個隱式物件身上，後續通過new關鍵字來呼叫，從而實現例項化
物件的使用
遍歷物件的屬性
通過for..in語法可以遍歷一個物件
var obj = {};
for (var i = 0; i < 10; i++) {
obj[i] = i * 2;
}
for(var key in obj) {
console.log(key + "==" + obj[key]);
}
刪除物件的屬性
function fun() {
this.name = 'mm';
}
var obj = new fun();
console.log(obj.name); // mm
delete obj.name;
console.log(obj.name); // undefined
簡單型別和複雜型別的區別
基本型別又叫做值型別，複雜型別又叫做引用型別
值型別：簡單資料型別，基本資料型別，在儲存時，變數中儲存的是值本身，因此叫做值型別。
引用型別：複雜資料型別，在儲存是，變數中儲存的僅僅是地址（引用），因此叫做引用資料型別。
- 堆和棧
堆疊空間分配區別：
1、棧（作業系統）：由作業系統自動分配釋放 ，存放函式的引數值，區域性變數的值等。其操作方式類似於資料結構中的棧；
2、堆（作業系統）： 儲存複雜型別(物件)，一般由程式設計師分配釋放， 若程式設計師不釋放，由垃圾回收機制回收，分配方式倒是類似於連結串列。 - 注意：JavaScript中沒有堆和棧的概念，此處我們用堆和棧來講解，目的方便理解和方便以後的學習。
內建物件
JavaScript中的物件分為3種：內建物件、瀏覽器物件、自定義物件
JavaScript 提供多個內建物件：Math/Array/Number/String/Boolean...
物件只是帶有屬性和方法的特殊資料型別。
學習一個內建物件的使用，只要學會其常用的成員的使用（通過查文件學習）
可以通過MDN/W3C來查詢
內建物件的方法很多，我們只需要知道內建物件提供的常用方法，使用的時候查詢文件。
如何學習一個方法？
- 方法的功能
- 引數的意義和型別
- 返回值意義和型別
- demo進行測試
Math物件
Math物件不是建構函式，它具有數學常數和函式的屬性和方法，都是以靜態成員的方式提供
跟數學相關的運算來找Math中的成員（求絕對值，取整）
Math
演示：Math.PI、Math.random()、Math.floor()/Math.ceil()、Math.round()、Math.abs() 、Math.max()
Math.PI// 圓周率 Math.random()// 生成隨機數 Math.floor()/Math.ceil()// 向下取整/向上取整 Math.round()// 取整，四捨五入 Math.abs()// 絕對值 Math.max()/Math.min()// 求最大和最小值 Math.sin()/Math.cos()// 正弦/餘弦 Math.power()/Math.sqrt()// 求指數次冪/求平方根
Date物件
建立 Date 例項用來處理日期和時間。Date 物件基於1970年1月1日（世界標準時間）起的毫秒數。
// 獲取當前時間，UTC世界時間，距1970年1月1日（世界標準時間）起的毫秒數
var now = new Date();
console.log(now.valueOf());// 獲取距1970年1月1日（世界標準時間）起的毫秒數
Date建構函式的引數
1. 毫秒數 1498099000356new Date(1498099000356)
2. 日期格式字串'2015-5-1'new Date('2015-5-1')
3. 年、月、日……new Date(2015, 4, 1)// 月份從0開始
獲取日期的毫秒形式
var now = new Date(); // valueOf用於獲取物件的原始值 console.log(date.valueOf()) // HTML5中提供的方法，有相容性問題 var now = Date.now(); // 不支援HTML5的瀏覽器，可以用下面這種方式 var now = + new Date();// 呼叫 Date物件的valueOf()
日期格式化方法
toString()// 轉換成字串 valueOf()// 獲取毫秒值 // 下面格式化日期的方法，在不同瀏覽器可能表現不一致，一般不用 toDateString() toTimeString() toLocaleDateString() toLocaleTimeString()
獲取日期指定部分
getTime()// 返回毫秒數和valueOf()結果一樣，valueOf()內部呼叫的getTime() getMilliseconds() getSeconds()// 返回0-59 getMinutes()// 返回0-59 getHours()// 返回0-23 getDay()// 返回星期幾 0週日6周6 getDate()// 返回當前月的第幾天 getMonth()// 返回月份，***從0開始*** getFullYear() //返回4位的年份如 2016
Array物件
建立陣列物件的兩種方式
- 字面量方式
- new Array()
// 1. 使用建構函式建立陣列物件
// 建立了一個空陣列
var arr = new Array();
// 建立了一個數組，裡面存放了3個字串
var arr = new Array('zs', 'ls', 'ww');
// 建立了一個數組，裡面存放了4個數字
var arr = new Array(1, 2, 3, 4);
// 2. 使用字面量建立陣列物件
var arr = [1, 2, 3];
// 獲取陣列中元素的個數
console.log(arr.length);
-
檢測一個物件是否是陣列
- instanceof
- Array.isArray() HTML5中提供的方法，有相容性問題
函式的引數，如果要求是一個數組的話，可以用這種方式來進行判斷
-
toString()/valueOf()
- toString() 把陣列轉換成字串，逗號分隔每一項
- valueOf() 返回陣列物件本身
- 陣列常用方法
演示：push()、shift()、unshift()、reverse()、sort()、splice()、indexOf()
// 1 棧操作(先進後出) push() pop()//取出陣列中的最後一項，修改length屬性 // 2 佇列操作(先進先出) push() shift()//取出陣列中的第一個元素，修改length屬性 unshift()//在陣列最前面插入項，返回陣列的長度 // 3 排序方法 reverse()//翻轉陣列 sort();//即使是陣列sort也是根據字元，從小到大排序 // 帶引數的sort是如何實現的？ // 4 操作方法 concat()//把引數拼接到當前陣列 slice()//從當前陣列中擷取一個新的陣列，不影響原來的陣列，引數start從0開始,end從1開始 splice()//刪除或替換當前陣列的某些專案，引數start, deleteCount, options(要替換的專案) // 5 位置方法 indexOf()、lastIndexOf()//如果沒找到返回-1 // 6 迭代方法 不會修改原陣列(可選) every()、filter()、forEach()、map()、some() // 7 方法將陣列的所有元素連線到一個字串中。 join()
清空陣列
// 方式1 推薦 arr = []; // 方式2 arr.length = 0; // 方式3 arr.splice(0, arr.length);
基本包裝型別
為了方便操作基本資料型別，JavaScript還提供了三個特殊的引用型別：String/Number/Boolean
// 下面程式碼的問題？
// s1是基本型別，基本型別是沒有方法的
var s1 = 'zhangsan';
var s2 = s1.substring(5);
// 當呼叫s1.substring(5)的時候，先把s1包裝成String型別的臨時物件，再呼叫substring方法，最後銷燬臨時物件, 相當於：
var s1 = new String('zhangsan');
var s2 = s1.substring(5);
s1 = null;
// 建立基本包裝型別的物件
var num = 18;//數值，基本型別
var num = Number('18');//型別轉換
var num = new Number(18);//基本包裝型別，物件
// Number和Boolean基本包裝型別基本不用，使用的話可能會引起歧義。例如：
var b1 = new Boolean(false);
var b2 = b1 && true;// 結果是什麼
String物件
字串的不可變
var str = 'abc'; str = 'hello'; // 當重新給str賦值的時候，常量'abc'不會被修改，依然在記憶體中 // 重新給字串賦值，會重新在記憶體中開闢空間，這個特點就是字串的不可變 // 由於字串的不可變，在大量拼接字串的時候會有效率問題
建立字串物件
var str = new String('Hello World');
// 獲取字串中字元的個數
console.log(str.length);
字串物件的常用方法
字串所有的方法，都不會修改字串本身(字串是不可變的)，操作完成會返回一個新的字串
// 1 字元方法 charAt()//獲取指定位置處字元 charCodeAt()//獲取指定位置處字元的ASCII碼 str[0]//HTML5，IE8+支援 和charAt()等效 // 2 字串操作方法 concat()//拼接字串，等效於+，+更常用 slice()//從start位置開始，擷取到end位置，end取不到 substring()//從start位置開始，擷取到end位置，end取不到 substr()//從start位置開始，擷取length個字元 // 3 位置方法 indexOf()//返回指定內容在元字串中的位置 lastIndexOf()//從後往前找，只找第一個匹配的 // 4 去除空白 trim()//只能去除字串前後的空白 // 5 大小寫轉換方法 to(Locale)UpperCase()//轉換大寫 to(Locale)LowerCase()//轉換小寫 // 6 其它 search() replace() split() fromCharCode() // String.fromCharCode(101, 102, 103);//把ASCII碼轉換成字串