JavaScript基礎

- JavaScript是什麼
- JavaScript最初的目的
- JavaScript現在的意義(應用場景)
- JavaScript和HTML、CSS的差別
- JavaScript的組成
- ECMAScript - JavaScript的核心
- BOM - 浏覽器對象模型
- DOM - 文檔對象模型
- JavaScript初體驗
- JavaScript的書寫位置
變量
- 什麼是變量
- 如何使用變量
- 變量在記憶體中的存儲
- 變量的命名規則和規範
資料類型
- 簡單資料類型
- - Number類型
  - String類型
  - Boolean類型
  - Undefined和Null
- 複雜資料類型
- 擷取變量的類型
- 字面量
注釋
- 單行注釋
- 多行注釋
資料類型轉換
- 轉換成字元串類型
- 轉換成數值類型
- 轉換成布爾類型
- 操作符
- 算術運算符
- 一進制運算符
- 邏輯運算符(布爾運算符)
- 關系運算符(比較運算符)
- 指派運算符
- 運算符的優先級
表達式和語句
- 表達式
- 語句
- 流程控制
- - 布爾類型的隐式轉換
  - - 案例
- 順序結構
- 分支結構
- - if語句
  - 三元運算符
  - switch語句
- 循環結構
- - while語句
  - do...while語句
  - for語句
- continue和break
數組
- 為什麼要學習數組
- 數組的概念
- 數組的定義
- 擷取數組元素
- 周遊數組
- 數組中新增元素
函數
- 為什麼要有函數
- 什麼是函數
- 函數的定義
- 函數的調用
- 函數的參數
- 函數的傳回值
- arguments的使用
- 函數其它
- - 匿名函數
  - 自調用函數
  - 函數是一種資料類型
- 作用域
- - 全局變量和局部變量
  - 塊級作用域
  - 詞法作用域
  - 作用域鍊
- 預解析
- 變量提升
對象
- 為什麼要有對象
- 什麼是對象
- JavaScript中的對象
- - 對象字面量
  - 對象建立方式
  - 屬性和方法
  - new關鍵字
  - this詳解
- 對象的使用
- - 周遊對象的屬性
  - 删除對象的屬性
  - 簡單類型和複雜類型的差別
  - - 基本類型在記憶體中的存儲
    - 複雜類型在記憶體中的存儲
    - 基本類型作為函數的參數
    - 複雜類型作為函數的參數
- 内置對象
- - MDN
  - 如何學習一個方法？
  - Math對象
  - - 案例
  - Date對象
  - - 案例
  - Array對象
  - - 案例
  - 基本包裝類型
  - String對象
  - - 案例

JavaScript是什麼

HTML CSS

JavaScript 程式設計語言流程控制

Netscape在最初将其腳本語言命名為LiveScript，後來Netscape在與Sun合作之後将其改名為JavaScript。JavaScript最初受Java啟發而開始設計的，目的之一就是“看上去像Java”，是以文法上有類似之處，一些名稱和命名規範也借自Java。JavaScript與Java名稱上的近似，是當時Netscape為了營銷考慮與Sun微系統達成協定的結果。Java和JavaScript的關系就像張雨和張雨生的關系，隻是名字很像。

Java 伺服器端的程式設計語言

JavaScript 運作在用戶端(浏覽器)的程式設計語言

JavaScript是一種運作用戶端的腳本語言

JavaScript的解釋器被稱為JavaScript引擎，為浏覽器的一部分，廣泛用于用戶端的腳本語言，最早是在HTML（标準通用标記語言下的一個應用）網頁上使用，用來給HTML網頁增加動态功能。

JavaScript基礎變量資料類型注釋資料類型轉換表達式和語句數組函數對象

JavaScript最初的目的

最初的目的是為了處理表單的驗證操作。

JavaScript現在的意義(應用場景)

JavaScript 發展到現在幾乎無所不能。

網頁特效
服務端開發(Node.js)
指令行工具(Node.js)
桌面程式(Electron)
App(Cordova)
控制硬體-物聯網(Ruff)
遊戲開發(cocos2d-js)

JavaScript和HTML、CSS的差別

HTML：提供網頁的結構，提供網頁中的内容
CSS: 用來美化網頁
JavaScript: 可以用來控制網頁内容，給網頁增加動态的效果

JavaScript的組成

JavaScript基礎變量資料類型注釋資料類型轉換表達式和語句數組函數對象

ECMAScript - JavaScript的核心

ECMA 歐洲計算機制造聯合會

網景：JavaScript

微軟：JScript

定義了JavaScript的文法規範

JavaScript的核心，描述了語言的基本文法和資料類型，ECMAScript是一套标準，定義了一種語言的标準與具體實作無關

BOM - 浏覽器對象模型

一套操作浏覽器功能的API

通過BOM可以操作浏覽器視窗，比如：彈出框、控制浏覽器跳轉、擷取分辨率等

DOM - 文檔對象模型

一套操作頁面元素的API

DOM可以把HTML看做是文檔樹，通過DOM提供的API可以對樹上的節點進行操作

JavaScript初體驗

CSS：行内樣式、嵌入樣式、外部樣式

JavaScript的書寫位置

寫在行内

寫在script标簽中

<head>
      <script>
        alert('Hello World!');
      </script>
    </head>

寫在外部js檔案中，在頁面引入

注意點

引用外部js檔案的script标簽中不可以寫JavaScript代碼

變量

什麼是變量

什麼是變量

變量是計算機記憶體中存儲資料的辨別符，根據變量名稱可以擷取到記憶體中存儲的資料
為什麼要使用變量

使用變量可以友善的擷取或者修改記憶體中的資料

如何使用變量

var聲明變量

變量的指派

var age;
age = 18;

同時聲明多個變量

var age, name, sex;
    age = 10;
    name = 'zs';

同時聲明多個變量并指派

變量在記憶體中的存儲

JavaScript基礎變量資料類型注釋資料類型轉換表達式和語句數組函數對象

變量的命名規則和規範

規則 - 必須遵守的，不遵守會報錯
- 由字母、數字、下劃線、$符号組成，不能以數字開頭
- 不能是關鍵字和保留字，例如：for、while
- 區分大小寫
規範 - 建議遵守的，不遵守不會報錯
- 變量名必須有意義
- 遵守駝峰命名法。首字母小寫，後面單詞的首字母需要大寫。例如：userName、userPassword

資料類型

簡單資料類型

Number、String、Boolean、Undefined、Null

Number類型

數值字面量：數值的固定值的表示法數值字面量：數值的固定值的表示法

110 1024 60.5
進制

十進制

var num = 9;

進行算數計算時，八進制和十六進制表示的數值最終都将被轉換成十進制數值。

十六進制

var num = 0xA;

數字序列範圍：09以及AF

八進制

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類型
‘abc’ “abc”
- 字元串字面量
  
  ‘程式猿’，‘程式媛’
  
  思考：如何列印以下字元串。
  
  我是一個"正直"的人
  
  我很喜歡"美女’程式猿’"
- 轉義符
  
  JavaScript基礎變量資料類型注釋資料類型轉換表達式和語句數組函數對象
- 字元串長度
  
  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. 指派運算符

表達式和語句

表達式

一個表達式可以産生一個值，有可能是運算、函數調用、有可能是字面量。表達式可以放在任何需要值的地方。

語句

語句可以了解為一個行為，循環語句和判斷語句就是典型的語句。一個程式有很多個語句組成，一般情況下;分割一個一個的語句

流程控制

程式的三種基本結構

布爾類型的隐式轉換

轉換為true   非空字元串  非0數字  true 任何對象
轉換成false  空字元串  0  false  null  undefined

// 結果是什麼？
var a = !!'123'

案例

var message;
// 會自動把message轉換成false
if (message) {     
  // todo...
}

順序結構

從上到下執行的代碼就是順序結構

程式預設就是由上到下順序執行的

分支結構

根據不同的情況，執行對

在這裡插入代碼片

應代碼

if語句

文法結構

if (/* 條件表達式 */) {
  // 執行語句
}

if (/* 條件表達式 */){
  // 成立執行語句
} else {
  // 否則執行語句
}

if (/* 條件1 */){
  // 成立執行語句
} else if (/* 條件2 */){
  // 成立執行語句
} else if (/* 條件3 */){
  // 成立執行語句
} else {
  // 最後預設執行語句
}

案例：

求兩個數的最大數

判斷一個數是偶數還是奇數

分數轉換，把百分制轉換成ABCDE <60 E 60-70 D 70-80 C 80-90 B 90 - 100 A

三元運算符

表達式1 ? 表達式2 : 表達式3

是對if……else語句的一種簡化寫法

案例：

是否年滿18歲

從兩個數中找最大值

switch語句

文法格式:

switch (expression) {
  case 常量1:
    語句;
    break;
  case 常量2:
    語句;
    break;
  case 常量3:
    語句;
    break;
  …
  case 常量n:
    語句;
    break;
  default:
    語句;
    break;
}

break可以省略，如果省略，代碼會繼續執行下一個case

switch 語句在比較值時使用的是全等操作符, 是以不會發生類型轉換（例如，字元串’10’ 不等于數值 10）

案例：

顯示星期幾

素質教育（把分數變成ABCDE）千萬不要寫100個case喲

循環結構

循環結構：重複做一件事情

在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
}

執行順序：1243 ---- 243 -----243(直到循環條件變成false)

初始化表達式
判斷表達式
自增表達式
循環體

continue和break

break:立即跳出整個循環，即循環結束，開始執行循環後面的内容（直接跳到大括号）

continue:立即跳出目前循環，繼續下一次循環（跳到i++的地方）

數組

為什麼要學習數組

之前學習的資料類型，隻能存儲一個值(比如：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 (var  i = 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)();

作用域

作用域：變量可以起作用的範圍

全局變量和局部變量

全局變量

在任何地方都可以通路到的變量就是全局變量，對應全局作用域
局部變量

隻在固定的代碼片段内可通路到的變量，最常見的例如函數内部。對應局部作用域(函數作用域)

不使用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基礎變量資料類型注釋資料類型轉換表達式和語句數組函數對象

// 案例2
function f1() {
    var num = 123;
    function f2() {
        console.log( num );
    }
    f2();
}
var num = 456;
f1();

JavaScript基礎變量資料類型注釋資料類型轉換表達式和語句數組函數對象

預解析

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基礎變量資料類型注釋資料類型轉換表達式和語句數組函數對象

複雜類型在記憶體中的存儲

JavaScript基礎變量資料類型注釋資料類型轉換表達式和語句數組函數對象

基本類型作為函數的參數

JavaScript基礎變量資料類型注釋資料類型轉換表達式和語句數組函數對象

複雜類型作為函數的參數

JavaScript基礎變量資料類型注釋資料類型轉換表達式和語句數組函數對象

// 下面代碼輸出的結果
function Person(name,age,salary) {
  this.name = name;
  this.age = age;
  this.salary = salary;
}
function f1(person) {
  person.name = "ls";
  person = new Person("aa",18,10);
}

var p = new Person("zs",18,1000);
console.log(p.name);
f1(p);
console.log(p.name);

思考：

//1. 
var num1 = 10;
var num2 = num1;
num1 = 20;
console.log(num1);
console.log(num2);

//2. 
var num = 50;
function f1(num) {
    num = 60;
    console.log(num);
}
f1(num);
console.log(num);

//3. 
var num1 = 55;
var num2 = 66;
function f1(num, num1) {
  num = 100;
  num1 = 100;
  num2 = 100;
  console.log(num);
  console.log(num1);
  console.log(num2);
}

f1(num1, num2);
console.log(num1);
console.log(num2);
console.log(num);

内置對象

JavaScript中的對象分為3種：内置對象、浏覽器對象、自定義對象

JavaScript 提供多個内置對象：Math/Array/Number/String/Boolean…

對象隻是帶有屬性和方法的特殊資料類型。

學習一個内置對象的使用，隻要學會其常用的成員的使用（通過查文檔學習）

可以通過MDN/W3C來查詢

内置對象的方法很多，我們隻需要知道内置對象提供的常用方法，使用的時候查詢文檔。

MDN

Mozilla 開發者網絡（MDN）提供有關開放網絡技術（Open Web）的資訊，包括 HTML、CSS 和網際網路及 HTML5 應用的 API。

MDN
通過查詢MDN學習Math對象的random()方法的使用

如何學習一個方法？

方法的功能
參數的意義和類型
傳回值意義和類型
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()	 // 求指數次幂/求平方根

案例

求10-20之間的随機數
随機生成顔色RGB
模拟實作max()/min()

Date對象

建立

Date

執行個體用來處理日期和時間。Date 對象基于1970年1月1日（世界标準時間）起的毫秒數。

// 擷取目前時間，UTC世界時間，距1970年1月1日（世界标準時間）起的毫秒數
var now = new Date();
console.log(now.valueOf());	// 擷取距1970年1月1日（世界标準時間）起的毫秒數

Date構造函數的參數
1. 毫秒數 1498099000356		new 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

案例

寫一個函數，格式化日期對象，傳回yyyy-MM-dd HH:mm:ss的形式

function formatDate(d) {
  //如果date不是日期對象，傳回
  if (!date instanceof Date) {
    return;
  }
  var year = d.getFullYear(),
      month = d.getMonth() + 1, 
      date = d.getDate(), 
      hour = d.getHours(), 
      minute = d.getMinutes(), 
      second = d.getSeconds();
  month = month < 10 ? '0' + month : month;
  date = date < 10 ? '0' + date : date;
  hour = hour < 10 ? '0' + hour : hour;
  minute = minute < 10 ? '0' + minute:minute;
  second = second < 10 ? '0' + second:second;
  return year + '-' + month + '-' + date + ' ' + hour + ':' + minute + ':' + second;
}

計算時間差，傳回相差的天/時/分/秒

function getInterval(start, end) {
  var day, hour, minute, second, interval;
  interval = end - start;
  interval /= 1000;
  day = Math.round(interval / 60 /60 / 24);
  hour = Math.round(interval / 60 /60 % 24);
  minute = Math.round(interval / 60 % 60);
  second = Math.round(interval % 60);
  return {
    day: day,
    hour: hour,
    minute: minute,
    second: second
  }
}

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);

案例

将一個字元串數組輸出為|分割的形式，比如“劉備|張飛|關羽”。使用兩種方式實作

function myJoin(array, seperator) {
  seperator = seperator || ',';
  array = array || [];
  if (array.length == 0){
    return '';
  }
  var str = array[0];
  for (var i = 1; i < array.length; i++) {
    str += seperator + array[i];
  }
  return str;
}
var array = [6, 3, 5, 6, 7, 8, 0];
console.log(myJoin(array, '-'));

console.log(array.join('-'))

将一個字元串數組的元素的順序進行反轉。[“a”, “b”, “c”, “d”] -> [ “d”,“c”,“b”,“a”]。使用兩種種方式實作。提示：第i個和第length-i-1個進行交換

function myReverse(arr) {
  if (!arr || arr.length == 0) {
    return [];
  }
  for (var i = 0; i < arr.length / 2; i++) {
    var tmp = arr[i];
    arr[i] = arr[this.length - i - 1];
    arr[arr.length - i - 1] = tmp;
  }
  return arr;
}

var array = ['a', 'b', 'c'];
console.log(myReverse(array));

console.log(array.reverse());

工資的數組[1500, 1200, 2000, 2100, 1800],把工資超過2000的删除

// 方式1
var array =  [1500,1200,2000,2100,1800];
var tmpArray = [];
for (var i = 0; i < array.length; i++) {
  if(array[i] < 2000) {
    tmpArray.push(array[i]);
  }
}
console.log(tmpArray);
// 方式2
var array =  [1500, 1200, 2000, 2100, 1800];
array = array.filter(function (item, index) {
  if (item < 2000) {
    return true;
  }
  return false;
});
console.log(array);

[“c”, “a”, “z”, “a”, “x”, “a”]找到數組中每一個a出現的位置

var array =  ['c', 'a', 'z', 'a', 'x', 'a'];
do {
  var index = array.indexOf('a',index + 1);
  if (index != -1){
    console.log(index);
  }
} while (index > 0);

編寫一個方法去掉一個數組的重複元素

var array =  ['c', 'a', 'z', 'a', 'x', 'a'];
function clear() {
  var o = {};
  for (var i = 0; i < array.length; i++) {
    var item = array[i];
    if (o[item]) {
      o[item]++;
    }else{
      o[item] = 1;
    }
  }
  var tmpArray = [];
  for(var key in o) {
    if (o[key] == 1) {
      tmpArray.push(key);
    }else{
      if(tmpArray.indexOf(key) == -1){
        tmpArray.push(key);
      }
    }
  }
  returm tmpArray;
}

console.log(clear(array));

基本包裝類型

為了友善操作基本資料類型，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碼轉換成字元串

案例

截取字元串"我愛中華人民共和國"，中的"中華"

var s = "我愛中華人民共和國";
s = s.substr(2,2);
console.log(s);

"abcoefoxyozzopp"查找字元串中所有o出現的位置

var s = 'abcoefoxyozzopp';
var array = [];
do {
  var index = s.indexOf('o', index + 1);
  if (index != -1) {
    array.push(index);
  }
} while (index > -1);
console.log(array);

把字元串中所有的o替換成!

var s = 'abcoefoxyozzopp';
do {
  s = s.replace('o', '');
} while (s.indexOf('o') > -1);
console.log(s);

console.log(s.replace(/o/ig, ''));

判斷一個字元串中出現次數最多的字元，統計這個次數

var s = 'abcoefoxyozzopp';
var o = {};

for (var i = 0; i < s.length; i++) {
  var item = s.charAt(i);
  if (o[item]) {
    o[item] ++;
  }else{
    o[item] = 1;
  }
}

var max = 0;
var char ;
for(var key in o) {
  if (max < o[key]) {
    max = o[key];
    char = key;
  }
}

console.log(max);
console.log(char);