JavaScript基礎

JavaScript介紹

JavaScript是什麼

JavaScript是一種運行在***客戶端*** 的***腳本語言***

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

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

JavaScript和HTML、CSS的區別

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

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

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

JavaScript的組成

ECMAScript - JavaScript的核心

定義了JavaScript的語法規範

JavaScript的核心，描述了語言的基本語法和數據類型，ECMAScript是一套標準，定義了一種語言的標準與具體實現無關

BOM - 瀏覽器對象模型

一套操作瀏覽器功能的API

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

DOM - 文檔對象模型

一套操作頁面元素的API

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

JavaScript初體驗

JavaScript的書寫位置

寫在script標籤中

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

寫在外部js文件中，在頁面引入

<script src="main.js"></script>

注意點

引用外部js文件的script標籤中不可以寫JavaScript代碼

計算機組成

軟件

應用軟件：瀏覽器(chrome/ie/firefox)、QQ、Sublime、Word
系統軟件：Windows、Linux、OSX

硬件

三大件：CPU、內存、硬盤
輸入設備：鼠標、鍵盤、手寫板、攝像頭等
輸出設備：顯示器、打印機、投影儀等

變量

什麼是變量

什麼是變量

變量是計算機內存中存儲數據的標識符，根據變量名稱可以獲取到內存中存儲的數據
爲什麼要使用變量

使用變量可以方便的獲取或者修改內存中的數據

如何使用變量

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。(變量名稱爲name的注意點)
```
// 通過瀏覽器的控制檯查看，是帶引號的
// name比較特殊，name是window對象的一個屬性
var name = 18; 
```
- 區分大小寫
規範 - 建議遵守的，不遵守不會報錯
- 變量名必須有意義
- 遵守駝峯命名法。首字母小寫，後面單詞的首字母需要大寫。例如：userName、userPassword

數據類型

簡單數據類型

number、string、boolean、undefined、null

number類型

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

6 7 110
進制

十進制
	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;
浮點數值的最高精度是 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類型

字符串字面量

‘程序猿’，‘程序媛’, “程序猿”

思考：如何打印以下字符串。
我是一個"正直"的人
我很喜歡CSDN
轉義符
字符串長度

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);
```
1. 兩邊只要有一個是字符串，那麼+就是字符串拼接功能
2. 兩邊如果都是數字，那麼就是算術功能。

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

操作符

算術運算符

一元運算符

++、–

前置++

var num1 = 5;
++ num1;  -> num1 = num1 + 1;

var num2 = 6;
console.log(num1 + ++ num2);

後置++

var num1 = 5;
num1 ++;    
var num2 = 6 
console.log(num1 + num2 ++);

猜猜看

var a = 1; var b = ++a + ++a; console.log(b);    
var a = 1; var b = a++ + ++a; console.log(b);    
var a = 1; var b = a++ + a++; console.log(b);    
var a = 1; var b = ++a + a++; console.log(b);

邏輯運算符

&&  兩個操作數同時爲true，結果爲true，否則都是false
||  兩個操作數有一個爲true，結果爲true，否則爲false
!   取反

// 練習	
var a = 3  &&  0 || 2;  
var b = 3 || 0 &&  2; 
var c= 0 || 2 && 3; 
alert(a),alert(b),alert(c);

// 面試題
var a = 1+1 && 3;
var b = 0 && 1+1; 
var c = 1 ||  2 && 3-1;
alert(a);
alert(b);
alert(c);

比較運算符

<  >  >=  <= == != === !==

比較規則：

兩邊都爲字符串時，則按照字符串的字符編碼進行逐位比較
一邊爲數字，一邊爲字符串時，則將字符串轉換爲數字進行比較
一邊爲數字，一邊爲布爾值時，則將布爾值轉換爲數字進行比較

==與===的區別：==只進行值得比較，===類型和值同時相等，則相等

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. 賦值運算符

// 練習1：
((4 >= 6) || ('人' != '阿凡達')) && !(((12 * 2) == 144) && true) 
// 練習2：
var num = 10;
if (5 == num / 2 && (2 + 2 * num).toString() === '22') {   
  console.log(true);
}

表達式和語句

表達式

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

常識:
只能操作一個值的操作符叫一元操作符,組成的表達式叫一元表達式.(一個值一個運算符)
由兩個值和一個運算符連接起來的表達式叫二元表達式。(兩個值一個運算符)
由三個值和兩個運算符連接起來的表達式叫三元表達式.(三個值兩個運算符)
例如：
12
aa++
aa + 56
5 > 6 ? '5' : '6'

語句

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

JavaScript所提供的語句分爲以下幾大類： 
  1. 變量聲明，賦值語句：var。
  語法如下： var 變量名稱 [=初始值]
  例如：var num = 25;
  2. 條件和分支語句：if...else，switch。 （後面具體學習）
  3. 循環語句：for， for...in，while,break,continue。（後面具體學習）
  4. 註釋語句：//，/*...*/。 
  // 這是單行註釋 
  /* 這可以多行註釋.... */

流程控制

程序的三種基本結構

順序結構

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

程序默認就是由上到下順序執行的

分支結構

根據不同的情況，執行對應代碼

循環結構

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

分支結構

if語句

語法結構

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

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

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

三元運算符

表達式1 ? 表達式2 : 表達式3
是對if……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  空字符串  0  false  null  undefined

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

案例

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

循環結構

在javascript中，循環語句有三種，while、do…while、for循環。

for語句

寫while循環的經常會忘記自增，for循環其實是while循環演化過來的，語法更加的簡潔明瞭，使用非常的廣泛。

for循環語法：

// for循環的表達式之間用的是;號分隔的，千萬不要寫成,
for (初始化表達式1; 判斷表達式2; 自增表達式3) {
  // 循環體4
}

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

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

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);//循環條件

調試

過去調試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 (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);

形參和實參
1. 形式參數：在聲明一個函數的時候，爲了函數的功能更加靈活，有些值是固定不了的，對於這些固定不了的值。我們可以給函數設置參數。這個參數沒有具體的值，僅僅起到一個佔位置的作用，我們通常稱之爲形式參數，也叫形參。
2. 實際參數：如果函數在聲明時，設置了形參，那麼在函數調用的時候就需要傳入對應的參數，我們把傳入的參數叫做實際參數，也叫實參。

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() {    
    }
}

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

預解析

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中沒有堆和棧的概念，此處我們用堆和棧來講解，目的方便理解和方便以後的學習。

基本類型在內存中的存儲

複雜類型在內存中的存儲

基本類型作爲函數的參數

複雜類型作爲函數的參數

// 下面代碼輸出的結果
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()	 // 求指數次冪/求平方根

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 (!d 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, 3000,4000，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() 	//轉換大寫 document.write("guagua".toLocaleUpperCase());
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);

JavaScript基礎知識

JavaScript基礎

JavaScript介紹

JavaScript是什麼

JavaScript和HTML、CSS的區別

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

JavaScript的組成

ECMAScript - JavaScript的核心

BOM - 瀏覽器對象模型

DOM - 文檔對象模型

JavaScript初體驗

JavaScript的書寫位置

計算機組成

軟件

硬件

變量

什麼是變量

如何使用變量

變量在內存中的存儲

變量的命名規則和規範

數據類型

簡單數據類型

number類型

string類型

boolean類型

undefined和null

複雜數據類型

獲取變量的類型

字面量

註釋

單行註釋

多行註釋

數據類型轉換

轉換成字符串類型

轉換成數值類型

轉換成布爾類型

操作符

算術運算符

一元運算符

邏輯運算符

比較運算符

賦值運算符

運算符的優先級

表達式和語句

表達式

語句

流程控制

順序結構

分支結構

循環結構

分支結構

if語句

三元運算符

switch語句

布爾類型的隱式轉換

案例

循環結構

for語句

while語句

do…while語句

調試

數組

爲什麼要學習數組

數組的概念

數組的定義

獲取數組元素

遍歷數組

數組中新增元素

函數

爲什麼要有函數

什麼是函數

函數的定義

函數的調用

函數的參數

函數的返回值

arguments的使用

函數其它

匿名函數

自調用函數

函數是一種數據類型