JavaScript

• JavaScript 是世界上最流行的語言之一，是一種運(yùn)行在客戶端的腳本語言 （Script 是腳本的意思）
• 腳本語言：不需要編譯,，運(yùn)行過程中由 js 解釋器( js 引擎）逐行來進(jìn)行解釋并執(zhí)行
• 現(xiàn)在也可以基于 Node.js 技術(shù)進(jìn)行服務(wù)器端編程

JavaScript的作用

• 表單動態(tài)校驗(yàn)（密碼強(qiáng)度檢測） （ JS 產(chǎn)生最初的目的 ）
• 網(wǎng)頁特效
• 服務(wù)端開發(fā)(Node.js)
• 桌面程序(Electron)
• App(Cordova)
• 控制硬件-物聯(lián)網(wǎng)(Ruff)
• 游戲開發(fā)(cocos2d-js)

HTML/CSS/JS 的關(guān)系

HTML/CSS 標(biāo)記語言--描述類語言

• HTML 決定網(wǎng)頁結(jié)構(gòu)和內(nèi)容( 決定看到什么 ),，相當(dāng)
  于人的身體
• CSS 決定網(wǎng)頁呈現(xiàn)給用戶的模樣( 決定好不好看 )，
  相當(dāng)于給人穿衣服,、化妝
• JS 腳本語言--編程類語言
  實(shí)現(xiàn)業(yè)務(wù)邏輯和頁面控制( 決定功能 ),，相當(dāng)
  于人的各種動作

瀏覽器執(zhí)行 JS 簡介

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

• 渲染引擎：用來解析HTML與CSS，俗稱內(nèi)核,，比如 chrome 瀏覽器的 blink ,，老版本的 webkit
• JS 引擎：也稱為 JS 解釋器。 用來讀取網(wǎng)頁中的JavaScript代碼,，對其處理后運(yùn)行,，比如 chrome 瀏覽器的 V8
  瀏覽器本身并不會執(zhí)行JS代碼，而是通過內(nèi)置 JavaScript 引擎(解釋器) 來執(zhí)行 JS 代碼 ,。JS 引擎執(zhí)行代碼時(shí)逐行解釋
  每一句源碼（轉(zhuǎn)換為機(jī)器語言）,，然后由計(jì)算機(jī)去執(zhí)行，所以 JavaScript 語言歸為腳本語言,，會逐行解釋執(zhí)行,。

JS 的組成

• ECMAScript：ECMAScript 規(guī)定了JS的編程語法和基礎(chǔ)核心知識，是所有瀏覽器廠商共同遵守的一套JS語法工業(yè)標(biāo)準(zhǔn),。
• 文檔對象模型（Document Object Model,，簡稱DOM），是W3C組織推薦的處理可擴(kuò)展標(biāo)記語言的標(biāo)準(zhǔn)編程接口,。
  通過 DOM 提供的接口可以對頁面上的各種元素進(jìn)行操作（大小,、位置、顏色等）,。
• BOM (Browser Object Model,，簡稱BOM) 是指瀏覽器對象模型，它提供了獨(dú)立于內(nèi)容的,、可以與瀏覽器窗口進(jìn)行
  互動的對象結(jié)構(gòu),。通過BOM可以操作瀏覽器窗口，比如彈出框,、控制瀏覽器跳轉(zhuǎn),、獲取分辨率等,。

JS的使用

JS 有3種書寫位置，分別為行內(nèi),、內(nèi)嵌和外部,。

1. 行內(nèi)式 JS

2.內(nèi)嵌 JS

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

3.外部 JS文件

利于HTML頁面代碼結(jié)構(gòu)化，把大段 JS代碼獨(dú)立到 HTML 頁面之外,，既美觀,，也方便文件級別的復(fù)用

• 引用外部 JS文件的 script 標(biāo)簽中間不可以寫代碼
• 適合于JS 代碼量比較大的情況

JS注釋

• 單行注釋
  為了提高代碼的可讀性，JS與CSS一樣,，也提供了注釋功能,。JS中的注釋主要有兩種，分別是單行注釋和多行注釋,。
  單行注釋的注釋方式如下：

// 用來注釋單行文字（ 快捷鍵 ctrl + / ）

• 注釋多行

vscode - 首選項(xiàng)按鈕 -鍵盤快捷方式 -查找 原來的快捷鍵 - 修改為新的快捷鍵 - 回車確認(rèn)

JavaScript 輸入輸出語句

為了方便信息的輸入輸出,，JS中提供了一些輸入輸出語句，其常用的語句如下：

注意：alert() 主要用來顯示消息給用戶,，console.log() 用來給程序員自己看運(yùn)行時(shí)的消息。

什么是變量

• 通俗：變量是用于存放數(shù)據(jù)的容器,。 我們通過 變量名 獲取數(shù)據(jù),，甚至數(shù)據(jù)可以修改,。
• 變量在內(nèi)存中的存儲
  本質(zhì)：變量是程序在內(nèi)存中申請的一塊用來存放數(shù)據(jù)的空間,。
  類似我們酒店的房間，一個(gè)房間就可以看做是一個(gè)變量,。

變量的使用

變量在使用時(shí)分為兩步： 1. 聲明變量 2. 賦值

1. 聲明變量
   // 聲明變量

var age; // 聲明一個(gè) 名稱為age 的變量

• var 是一個(gè) JS關(guān)鍵字,，用來聲明變量( variable 變量的意思 )。使用該關(guān)鍵字聲明變量后,，計(jì)算機(jī)會自動為變量分配內(nèi)存空間,。
• age 是程序員定義的變量名，我們要通過變量名來訪問內(nèi)存中分配的空間

2. 賦值

• = 用來把右邊的值賦給左邊的變量空間中 此處代表賦值的意思
• 變量值是程序員保存到變量空間里的值

3. 變量的初始化

var age = 18; // 聲明變量同時(shí)賦值為 18

聲明一個(gè)變量并賦值,， 我們稱之為變量的初始化,。
注意：一個(gè)變量被重新復(fù)賦值后，它原有的值就會被覆蓋,，變量值將以最后一次賦的值為準(zhǔn),。

同時(shí)聲明多個(gè)變量時(shí)，只需要寫一個(gè) var,， 多個(gè)變量名之間使用英文逗號隔開,。

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

5.變量命名規(guī)范

數(shù)據(jù)類型

1.為什么需要數(shù)據(jù)類型
在計(jì)算機(jī)中,，不同的數(shù)據(jù)所需占用的存儲空間是不同的,，為了便于把數(shù)據(jù)分成所需內(nèi)存大小不同的數(shù)據(jù)，充分利用存儲空間,，于是定義了不同的數(shù)據(jù)類型,。

2.變量的數(shù)據(jù)類型
變量是用來存儲值的所在處，它們有名字和數(shù)據(jù)類型,。變量的數(shù)據(jù)類型決定了如何將代表這些值的位存儲到計(jì)算機(jī)的內(nèi)存中,。
JavaScript 是一種弱類型或者說動態(tài)語言。這意味著不用提前聲明變量的類型,，在程序運(yùn)行過程中,，類型會被自動確定。

var age = 10; // 這是一個(gè)數(shù)字型
var areYouOk = '是的'; // 這是一個(gè)字符串
var x = 6; // x 為數(shù)字
var x = 'Bill'; // x 為字符串

在代碼運(yùn)行時(shí),，變量的數(shù)據(jù)類型是由 JS引擎 根據(jù) = 右邊變量值的數(shù)據(jù)類型來判斷 的,，運(yùn)行完畢之后， 變量就確定了數(shù)據(jù)類型,。
JavaScript 擁有動態(tài)類型,，同時(shí)也意味著相同的變量可用作不同的類型：

數(shù)據(jù)類型的分類

1. JS 把數(shù)據(jù)類型分為兩類：

• 簡單數(shù)據(jù)類型 （Number,String,Boolean,Undefined,Null）
• 復(fù)雜數(shù)據(jù)類型 （object)

2. 簡單數(shù)據(jù)類型（基本數(shù)據(jù)類型）
   JavaScript 中的簡單數(shù)據(jù)類型及其說明如下：

3. 數(shù)字型范圍
   JavaScript中數(shù)值的最大和最小值

alert(Number.MAX_VALUE); // 1.7976931348623157e+308
alert(Number.MIN_VALUE); // 5e-324

• 最大值：Number.MAX_VALUE，這個(gè)值為： 1.7976931348623157e+308
• 最小值：Number.MIN_VALUE,，這個(gè)值為：5e-32

4. 數(shù)字型三個(gè)特殊值

- Infinity ,，代表無窮大，大于任何數(shù)值
- -Infinity ,，代表無窮小,，小于任何數(shù)值
- NaN ,，Not a number，代表一個(gè)非數(shù)值

5.isNaN()
用來判斷一個(gè)變量是否為非數(shù)字的類型,，返回 true 或者 false

6.字符串型 String
字符串型可以是引號中的任意文本,，其語法為 雙引號 '' 和 單引號''

var strMsg = '我愛北京~'; // 使用雙引號表示字符串
var strMsg2 = '我愛北京~'; // 使用單引號表示字符串

注意：因?yàn)?HTML 標(biāo)簽里面的屬性使用的是雙引號,，JS 這里我們更推薦使用單引號。
7.字符串引號嵌套
JS 可以用單引號嵌套雙引號 ,，或者用雙引號嵌套單引號 (外雙內(nèi)單,，外單內(nèi)雙)

8.字符串轉(zhuǎn)義符
類似HTML里面的特殊字符，字符串中也有特殊字符,，我們稱之為轉(zhuǎn)義符,。
轉(zhuǎn)義符都是 \ 開頭的
轉(zhuǎn)義符都是 \ 開頭的，常用的轉(zhuǎn)義符及其說明如下：

9.字符串是由若干字符組成的，這些字符的數(shù)量就是字符串的長度,。通過字符串的 length 屬性可以獲取整個(gè)字符串的長度,。
（注意空格也是一個(gè)字符串哦）

var strMsg = '我餓了！';
alert(strMsg.length); // 顯示 4

10.字符串拼接

• 多個(gè)字符串之間可以使用 + 進(jìn)行拼接,，其拼接方式為 字符串 + 任何類型 = 拼接之后的新字符串
• 拼接前會把與字符串相加的任何類型轉(zhuǎn)成字符串,，再拼接成一個(gè)新的字符串

11.布爾型 Boolean
布爾類型有兩個(gè)值：true 和 false ，其中 true 表示真（對）,，而 false 表示假（錯）,。
布爾型和數(shù)字型相加的時(shí)候,， true 的值為 1 ,，false 的值為 0。

console.log(true + 1); // 2
console.log(false + 1); // 1

12.Undefined 和 Null
一個(gè)聲明后沒有被賦值的變量會有一個(gè)默認(rèn)值 undefined ( 如果進(jìn)行相連或者相加時(shí),，注意結(jié)果）

一個(gè)聲明變量給 null 值,，里面存的值為空（學(xué)習(xí)對象時(shí)，我們繼續(xù)研究null)

var vari = null;
console.log('你好' + vari); // 你好null
console.log(11 + vari); // 11
console.log(true + vari); // 1

獲取檢測變量的數(shù)據(jù)類型

1.typeof 可用來獲取檢測變量的數(shù)據(jù)類型

注意：null的返回值不是null,，是object
2.字面量
字面量是在源代碼中一個(gè)固定值的表示法,，通俗來說，就是字面量表示如何表達(dá)這個(gè)值,。

數(shù)據(jù)類型轉(zhuǎn)換

使用表單,、prompt 獲取過來的數(shù)據(jù)默認(rèn)是字符串類型的，此時(shí)就不能直接簡單的進(jìn)行加法運(yùn)算,，而需要轉(zhuǎn)換變量的數(shù)據(jù)類型,。通俗來說,，就是把一種數(shù)據(jù)類型的變量轉(zhuǎn)換成另外一種數(shù)據(jù)類型。
我們通常會實(shí)現(xiàn)3種方式的轉(zhuǎn)換：

• 轉(zhuǎn)換為字符串類型
• 轉(zhuǎn)換為數(shù)字型
• 轉(zhuǎn)換為布爾型

1.轉(zhuǎn)換為字符串

• toString() 和 String() 使用方式不一樣,。

2.轉(zhuǎn)換為數(shù)字型（重點(diǎn)）

• 注意 parseInt 和 parseFloat 單詞的大小寫,，這2個(gè)是重點(diǎn)
• 隱式轉(zhuǎn)換是我們在進(jìn)行算數(shù)運(yùn)算的時(shí)候，JS 自動轉(zhuǎn)換了數(shù)據(jù)類型

3.轉(zhuǎn)換為布爾型

• 代表空,、否定的值會被轉(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

運(yùn)算符（操作符）

運(yùn)算符的分類

?運(yùn)算符（operator）也被稱為操作符,，是用于實(shí)現(xiàn)賦值,、比較和執(zhí)行算數(shù)運(yùn)算等功能的符號。

算數(shù)運(yùn)算符

• 算術(shù)運(yùn)算符概述

  概念：算術(shù)運(yùn)算使用的符號,，用于執(zhí)行兩個(gè)變量或值的算術(shù)運(yùn)算,。

• 浮點(diǎn)數(shù)的精度問題

  ?浮點(diǎn)數(shù)值的最高精度是 17 位小數(shù)，但在進(jìn)行算術(shù)計(jì)算時(shí)其精確度遠(yuǎn)遠(yuǎn)不如整數(shù),。

  var result = 0.1 + 0.2;//結(jié)果是：0.30000000000000004
  console.log(0.07 * 100);//結(jié)果是：7.000000000000001
  

  ?所以：不要直接判斷兩個(gè)浮點(diǎn)數(shù)是否相等 !

• 表達(dá)式和返回值

遞增和遞減運(yùn)算符

• 遞增和遞減運(yùn)算符概述

  ?如果需要反復(fù)給數(shù)字變量添加或減去1,，可以使用遞增（++）和遞減（ -- ）運(yùn)算符來完成。

  在 JavaScript 中,，遞增（++）和遞減（ -- ）既可以放在變量前面,，也可以放在變量后面。放在變量前面時(shí),，我們可以稱為前置遞增（遞減）運(yùn)算符,，放在變量后面時(shí)，我們可以稱為后置遞增（遞減）運(yùn)算符,。

    注意：遞增和遞減運(yùn)算符必須和變量配合使用,。 
  

• 遞增運(yùn)算符

  • 前置遞增運(yùn)算符

    ++num 前置遞增，就是自加1,，類似于 num = num + 1

    使用口訣：先自加,，后返回值

  var num = 10; alert(++num + 10); // 21

  • 后置遞增運(yùn)算符

    num++ 后置遞增，就是自加1，類似于 num = num + 1

    使用口訣：先返回原值,，后自加

  var  num = 10;
  alert(10 + num++);  // 20
  

總結(jié)：

比較運(yùn)算符

• 比較運(yùn)算符概述

  ?概念：比較運(yùn)算符（關(guān)系運(yùn)算符）是兩個(gè)數(shù)據(jù)進(jìn)行比較時(shí)所使用的運(yùn)算符，比較運(yùn)算后,，會返回一個(gè)布爾值（true / false）作為比較運(yùn)算的結(jié)果,。

• 等號比較

console.log(18 == '18'); // true
console.log(18 === '18'); // false

邏輯運(yùn)算符

• 邏輯運(yùn)算符概述

  ?邏輯運(yùn)算符是用來進(jìn)行布爾值運(yùn)算的運(yùn)算符，其返回值也是布爾值,。后面開發(fā)中經(jīng)常用于多個(gè)條件的判斷

• 邏輯與&&

  ?兩邊都是 true才返回 true,，否則返回 false

• 邏輯或 ||

  ?兩邊都是 true才返回 true，否則返回 false

• 邏輯非 ,！

  ?邏輯非（!）也叫作取反符,，用來取一個(gè)布爾值相反的值，如 true 的相反值是 false

  var isOk = !true; console.log(isOk); // false

賦值運(yùn)算符

?概念：用來把數(shù)據(jù)賦值給變量的運(yùn)算符,。

var age = 10;
age += 5;  // 相當(dāng)于 age = age + 5;
age -= 5;  // 相當(dāng)于 age = age - 5;
age *= 10; // 相當(dāng)于 age = age * 10;

運(yùn)算符優(yōu)先級

• 一元運(yùn)算符里面的邏輯非優(yōu)先級很高
• 邏輯與比邏輯或優(yōu)先級高

流程控制

流程控制概念

?在一個(gè)程序執(zhí)行的過程中,，各條代碼的執(zhí)行順序?qū)Τ绦虻慕Y(jié)果是有直接影響的,。很多時(shí)候我們要通過控制代碼的執(zhí)行順序來實(shí)現(xiàn)我們要完成的功能。

?簡單理解：流程控制就是來控制代碼按照一定結(jié)構(gòu)順序來執(zhí)行

?流程控制主要有三種結(jié)構(gòu)：順序結(jié)構(gòu),、分支（選擇）結(jié)構(gòu),、循環(huán)結(jié)構(gòu)

順序流程控制

分支流程控制

• 分支結(jié)構(gòu)

?
?JS 語言提供了兩種分支結(jié)構(gòu)語句：if 語句,、switch 語句

• if 語句

  • 語法結(jié)構(gòu)
  // 條件成立執(zhí)行代碼,，否則什么也不做 if (條件表達(dá)式) { // 條件成立執(zhí)行的代碼語句 }

  語句可以理解為一個(gè)行為，循環(huán)語句和分支語句就是典型的語句,。一個(gè)程序由很多個(gè)語句組成,，一般情況下，會分割成一個(gè)一個(gè)的語句。

• if else語句（雙分支語句）

  • 語法結(jié)構(gòu)

    // 條件成立  執(zhí)行 if 里面代碼,，否則執(zhí)行else 里面的代碼
    if (條件表達(dá)式) {
        // [如果] 條件成立執(zhí)行的代碼
    } else {
        // [否則] 執(zhí)行的代碼
    }
    
    

• if else if 語句(多分支語句)

  • 語法結(jié)構(gòu)

    // 適合于檢查多重條件,。 if (條件表達(dá)式1) { 語句1,； } else if (條件表達(dá)式2) { 語句2； } else if (條件表達(dá)式3) { 語句3,； .... } else { // 上述條件都不成立執(zhí)行此處代碼 }

總結(jié)：

if語句

語法結(jié)構(gòu)

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

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

if (/* 條件1 */){
  // 成立執(zhí)行語句
} else if (/* 條件2 */){
  // 成立執(zhí)行語句
} else if (/* 條件3 */){
  // 成立執(zhí)行語句
} else {
  // 最后默認(rèn)執(zhí)行語句
}

三元表達(dá)式

• 語法結(jié)構(gòu)

  表達(dá)式1 ? 表達(dá)式2 : 表達(dá)式3;

• 執(zhí)行思路

  • 如果表達(dá)式1為 true ,，則返回表達(dá)式2的值,，如果表達(dá)式1為 false,，則返回表達(dá)式3的值
  • 簡單理解： 就類似于 if else （雙分支） 的簡寫

switch分支流程控制

• 語法結(jié)構(gòu)

  switch( 表達(dá)式 ){ 
     case value1:
         // 表達(dá)式 等于 value1 時(shí)要執(zhí)行的代碼
         break;
     case value2:
         // 表達(dá)式 等于 value2 時(shí)要執(zhí)行的代碼
         break;
     default:
         // 表達(dá)式 不等于任何一個(gè) value 時(shí)要執(zhí)行的代碼
  }
  

  • 關(guān)鍵字 switch 后面括號內(nèi)可以是表達(dá)式或值,， 通常是一個(gè)變量

  • 關(guān)鍵字 case , 后跟一個(gè)選項(xiàng)的表達(dá)式或值,，后面跟一個(gè)冒號

  • switch 表達(dá)式的值會與結(jié)構(gòu)中的 case 的值做比較

  • 如果存在匹配全等(===) ，則與該 case 關(guān)聯(lián)的代碼塊會被執(zhí)行,，并在遇到 break 時(shí)停止,，整個(gè) switch 語句代碼執(zhí)行結(jié)束

  • 如果所有的 case 的值都和表達(dá)式的值不匹配,，則執(zhí)行 default 里的代碼

    注意： 執(zhí)行case 里面的語句時(shí),，如果沒有break,，則繼續(xù)執(zhí)行下一個(gè)case里面的語句。

• switch 語句和 if else if 語句的區(qū)別

  • 一般情況下,，它們兩個(gè)語句可以相互替換
  • switch...case 語句通常處理 case為比較確定值的情況,， 而 if…else…語句更加靈活，常用于范圍判斷(大于,、等于某個(gè)范圍)
  • switch 語句進(jìn)行條件判斷后直接執(zhí)行到程序的條件語句，效率更高。而if…else 語句有幾種條件,，就得判斷多少次,。
  • 當(dāng)分支比較少時(shí),，if… else語句的執(zhí)行效率比 switch語句高,。
  • 當(dāng)分支比較多時(shí),，switch語句的執(zhí)行效率比較高,，而且結(jié)構(gòu)更清晰。

循環(huán)結(jié)構(gòu)

在javascript中,，循環(huán)語句有三種,，while,、do..while,、for循環(huán)。

for循環(huán)

• 語法結(jié)構(gòu)

  for(初始化變量; 條件表達(dá)式; 操作表達(dá)式 ){
      //循環(huán)體
  }
  

  名稱	作用
  初始化變量	通常被用于初始化一個(gè)計(jì)數(shù)器，該表達(dá)式可以使用 var 關(guān)鍵字聲明新的變量,，這個(gè)變量幫我們來記錄次數(shù),。
  條件表達(dá)式	用于確定每一次循環(huán)是否能被執(zhí)行。如果結(jié)果是 true 就繼續(xù)循環(huán),，否則退出循環(huán),。
  操作表達(dá)式	用于確定每一次循環(huán)是否能被執(zhí)行。如果結(jié)果是 true 就繼續(xù)循環(huán),，否則退出循環(huán),。

  執(zhí)行過程：

  1. 初始化變量,，初始化操作在整個(gè) for 循環(huán)只會執(zhí)行一次。

• 執(zhí)行條件表達(dá)式,，如果為true,，則執(zhí)行循環(huán)體語句，否則退出循環(huán),，循環(huán)結(jié)束,。

1. 執(zhí)行操作表達(dá)式，此時(shí)第一輪結(jié)束,。
2. 第二輪開始,，直接去執(zhí)行條件表達(dá)式（不再初始化變量）,，如果為 true ,，則去執(zhí)行循環(huán)體語句，否則退出循環(huán),。
3. 繼續(xù)執(zhí)行操作表達(dá)式,，第二輪結(jié)束,。
4. 后續(xù)跟第二輪一致，直至條件表達(dá)式為假,，結(jié)束整個(gè) for 循環(huán),。

雙重for循環(huán)

• 雙重 for 循環(huán)概述

  循環(huán)嵌套是指在一個(gè)循環(huán)語句中再定義一個(gè)循環(huán)語句的語法結(jié)構(gòu)，例如在for循環(huán)語句中,，可以再嵌套一個(gè)for 循環(huán)，這樣的 for 循環(huán)語句我們稱之為雙重for循環(huán),。

• 雙重 for 循環(huán)語法

  for (外循環(huán)的初始; 外循環(huán)的條件; 外循環(huán)的操作表達(dá)式) { for (內(nèi)循環(huán)的初始; 內(nèi)循環(huán)的條件; 內(nèi)循環(huán)的操作表達(dá)式) { 需執(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個(gè)星星 就 加一次換行
      star += '\n'
  }
  console.log(star);
  

  核心邏輯：

  1.內(nèi)層循環(huán)負(fù)責(zé)一行打印五個(gè)星星

  2.外層循環(huán)負(fù)責(zé)打印五行

• for 循環(huán)小結(jié)

  • for 循環(huán)可以重復(fù)執(zhí)行某些相同代碼
  • for 循環(huán)可以重復(fù)執(zhí)行些許不同的代碼，因?yàn)槲覀冇杏?jì)數(shù)器
  • for 循環(huán)可以重復(fù)執(zhí)行某些操作,，比如算術(shù)運(yùn)算符加法操作
  • 隨著需求增加,，雙重for循環(huán)可以做更多、更好看的效果
  • 雙重 for 循環(huán),，外層循環(huán)一次，內(nèi)層 for 循環(huán)全部執(zhí)行
  • for 循環(huán)是循環(huán)條件和數(shù)字直接相關(guān)的循環(huán)

while循環(huán)

while語句的語法結(jié)構(gòu)如下：

while (條件表達(dá)式) {
    // 循環(huán)體代碼 
}

執(zhí)行思路：

• 1 先執(zhí)行條件表達(dá)式，如果結(jié)果為 true,，則執(zhí)行循環(huán)體代碼,；如果為 false,，則退出循環(huán)，執(zhí)行后面代碼
• 2 執(zhí)行循環(huán)體代碼
• 3 循環(huán)體代碼執(zhí)行完畢后,，程序會繼續(xù)判斷執(zhí)行條件表達(dá)式,，如條件仍為true，則會繼續(xù)執(zhí)行循環(huán)體,，直到循環(huán)條件為 false 時(shí),，整個(gè)循環(huán)過程才會結(jié)束

注意：

• 使用 while 循環(huán)時(shí)一定要注意，它必須要有退出條件,，否則會成為死循環(huán)

1.4 do-while循環(huán)

do... while 語句的語法結(jié)構(gòu)如下：

執(zhí)行思路

• 1 先執(zhí)行一次循環(huán)體代碼

• 2 再執(zhí)行條件表達(dá)式,，如果結(jié)果為 true，則繼續(xù)執(zhí)行循環(huán)體代碼,，如果為 false,，則退出循環(huán)，繼續(xù)執(zhí)行后面代碼

  注意：先再執(zhí)行循環(huán)體,，再判斷,，do…while循環(huán)語句至少會執(zhí)行一次循環(huán)體代碼

continue和break

break:立即跳出整個(gè)循環(huán)，即循環(huán)結(jié)束，開始執(zhí)行循環(huán)后面的內(nèi)容（直接跳到大括號）

continue:立即跳出當(dāng)前循環(huán),，繼續(xù)下一次循環(huán)（跳到i++的地方）

數(shù)組

1.1 數(shù)組的概念

• 數(shù)組可以把一組相關(guān)的數(shù)據(jù)一起存放,，并提供方便的訪問(獲取）方式,。
• 數(shù)組是指一組數(shù)據(jù)的集合,，其中的每個(gè)數(shù)據(jù)被稱作元素，在數(shù)組中可以存放任意類型的元素,。數(shù)組是一種將一組數(shù)據(jù)存儲在單個(gè)變量名下的優(yōu)雅方式,。

1.2 創(chuàng)建數(shù)組

JS 中創(chuàng)建數(shù)組有兩種方式：

• 利用 new 創(chuàng)建數(shù)組

  var 數(shù)組名 = new Array() ；
  var arr = new Array();   // 創(chuàng)建一個(gè)新的空數(shù)組
  

  注意 Array () ,，A 要大寫

• 利用數(shù)組字面量創(chuàng)建數(shù)組

• 數(shù)組元素的類型

  數(shù)組中可以存放任意類型的數(shù)據(jù)，例如字符串,，數(shù)字,，布爾值等。

  var arrStus = ['小白',12,true,28.9];
  

1.3 獲取數(shù)組中的元素

?索引 (下標(biāo)) ：用來訪問數(shù)組元素的序號（數(shù)組下標(biāo)從 0 開始）,。
數(shù)組可以通過索引來訪問,、設(shè)置、修改對應(yīng)的數(shù)組元素,，可以通過“數(shù)組名[索引]”的形式來獲取數(shù)組中的元素,。

注意：如果訪問時(shí)數(shù)組沒有和索引值對應(yīng)的元素，則得到的值是undefined

遍歷數(shù)組

遍歷：遍及所有,，對數(shù)組的每一個(gè)元素都訪問一次就叫遍歷,。

數(shù)組遍歷的基本語法：

for(var i = 0; i < arr.length; i++) {
// 數(shù)組遍歷的固定結(jié)構(gòu)
}

• 數(shù)組的長度

  數(shù)組的長度：默認(rèn)情況下表示數(shù)組中元素的個(gè)數(shù)

  使用“數(shù)組名.length”可以訪問數(shù)組元素的數(shù)量（數(shù)組長度）。

  var arrStus = [1,2,3]; alert(arrStus.length); // 3

  注意：

  • 此處數(shù)組的長度是數(shù)組元素的個(gè)數(shù) ,，不要和數(shù)組的索引號混淆,。

• 當(dāng)我們數(shù)組里面的元素個(gè)數(shù)發(fā)生了變化，這個(gè) length 屬性跟著一起變化

  • 數(shù)組的length屬性可以被修改：

• 如果設(shè)置的length屬性值大于數(shù)組的元素個(gè)數(shù),，則會在數(shù)組末尾出現(xiàn)空白元素,；

  • 如果設(shè)置的length屬性值小于數(shù)組的元素個(gè)數(shù)，則會把超過該值的數(shù)組元素刪除

數(shù)組中新增元素

數(shù)組的賦值

// 格式：數(shù)組名[下標(biāo)/索引] = 值;
// 如果下標(biāo)有對應(yīng)的值,，會把原來的值覆蓋,，如果下標(biāo)不存在，
//會給數(shù)組新增一個(gè)元素,。
var arr = ['red', 'green', 'blue'];
// 把red替換成了yellow
arr[0] = 'yellow';
// 給數(shù)組新增加了一個(gè)pink的值
arr[3] = 'pink';

什么是函數(shù)

把一段相對獨(dú)立的具有特定功能的代碼塊封裝起來,，形成一個(gè)獨(dú)立實(shí)體，就是函數(shù),，起個(gè)名字（函數(shù)名）,，在后續(xù)開發(fā)中可以反復(fù)調(diào)用

函數(shù)的作用就是封裝一段代碼，將來可以重復(fù)使用

函數(shù)的定義

• 函數(shù)聲明

function 函數(shù)名(){
  // 函數(shù)體
}

function 是聲明函數(shù)的關(guān)鍵字,必須小寫

• 函數(shù)表達(dá)式

• 特點(diǎn)：

  函數(shù)聲明的時(shí)候,，函數(shù)體并不會執(zhí)行,，只要當(dāng)函數(shù)被調(diào)用的時(shí)候才會執(zhí)行。
  函數(shù)一般都用來干一件事情,，需用使用動詞+名詞，表示做一件事情 tellStory sayHello等

函數(shù)的調(diào)用

• 調(diào)用函數(shù)的語法：

函數(shù)名();// 通過調(diào)用函數(shù)名來執(zhí)行函數(shù)體代碼

• 特點(diǎn)：

  函數(shù)體只有在調(diào)用的時(shí)候才會執(zhí)行,，調(diào)用需要()進(jìn)行調(diào)用,。
  可以調(diào)用多次(重復(fù)使用)

代碼示例：

// 聲明函數(shù)
function sayHi() {
  console.log('吃了沒,？');
}
// 調(diào)用函數(shù)
sayHi();

// 求1-100之間所有數(shù)的和
function getSum() {
  var sum = 0;
  for (var  i = 0; i < 100; i++) {
    sum += i;
  }
  console.log(sum);
}
// 調(diào)用
getSum();

函數(shù)的封裝

• 函數(shù)的封裝是把一個(gè)或者多個(gè)功能通過函數(shù)的方式封裝起來，對外只提供一個(gè)簡單的函數(shù)接口

• 簡單理解：封裝類似于將電腦配件整合組裝到機(jī)箱中 ( 類似快遞打包）

  例子：封裝計(jì)算1-100累加和

  /* 計(jì)算1-100之間值的函數(shù) */ // 聲明函數(shù) function getSum(){ var sumNum = 0;// 準(zhǔn)備一個(gè)變量,，保存數(shù)字和 for (var i = 1; i <= 100; i++) { sumNum += i;// 把每個(gè)數(shù)值 都累加 到變量中 } alert(sumNum); } // 調(diào)用函數(shù) getSum();

函數(shù)的參數(shù)

• 為什么要有參數(shù)
  ?參數(shù)的作用 : 在函數(shù)內(nèi)部某些值不能固定,，我們可以通過參數(shù)在調(diào)用函數(shù)時(shí)傳遞不同的值進(jìn)去。
  函數(shù)參數(shù)的運(yùn)用：

  // 帶參數(shù)的函數(shù)聲明
  function 函數(shù)名(形參1, 形參2 , 形參3...) { // 可以定義任意多的參數(shù),，用逗號分隔
    // 函數(shù)體
  }
  // 帶參數(shù)的函數(shù)調(diào)用
  函數(shù)名(實(shí)參1, 實(shí)參2, 實(shí)參3...); 
  

  1. 調(diào)用的時(shí)候?qū)崊⒅凳莻鬟f給形參的
  2. 形參簡單理解為：不用聲明的變量
  3. 實(shí)參和形參的多個(gè)參數(shù)之間用逗號（,）分隔

• 語法：

// 函數(shù)內(nèi)部是一個(gè)封閉的環(huán)境,，可以通過參數(shù)的方式，把外部的值傳遞給函數(shù)內(nèi)部
// 帶參數(shù)的函數(shù)聲明
function 函數(shù)名(形參1, 形參2, 形參...){
  // 函數(shù)體
}

// 帶參數(shù)的函數(shù)調(diào)用
函數(shù)名(實(shí)參1, 實(shí)參2, 實(shí)參3);

• 形參和實(shí)參

  1. 形式參數(shù)：在聲明一個(gè)函數(shù)的時(shí)候，為了函數(shù)的功能更加靈活,，有些值是固定不了的,，對于這些固定不了的值。我們可以給函數(shù)設(shè)置參數(shù),。這個(gè)參數(shù)沒有具體的值,，僅僅起到一個(gè)占位置的作用，我們通常稱之為形式參數(shù),，也叫形參,。
     簡單理解(函數(shù)定義時(shí)設(shè)置接收調(diào)用時(shí)傳入)
  2. 實(shí)際參數(shù)：如果函數(shù)在聲明時(shí)，設(shè)置了形參,，那么在函數(shù)調(diào)用的時(shí)候就需要傳入對應(yīng)的參數(shù),，我們把傳入的參數(shù)叫做實(shí)際參數(shù)，也叫實(shí)參,。
     簡單理解(函數(shù)調(diào)用時(shí)傳入小括號內(nèi)的真實(shí)數(shù)據(jù))

注意：在JavaScript中，形參的默認(rèn)值是undefined,。

小結(jié)：

• 函數(shù)可以帶參數(shù)也可以不帶參數(shù)
• 聲明函數(shù)的時(shí)候,，函數(shù)名括號里面的是形參，形參的默認(rèn)值為 undefined
• 調(diào)用函數(shù)的時(shí)候,，函數(shù)名括號里面的是實(shí)參
• 多個(gè)參數(shù)中間用逗號分隔

函數(shù)的返回值

當(dāng)函數(shù)執(zhí)行完的時(shí)候,，并不是所有時(shí)候都要把結(jié)果打印。我們期望函數(shù)給我一些反饋（比如計(jì)算的結(jié)果返回進(jìn)行后續(xù)的運(yùn)算）,，這個(gè)時(shí)候可以讓函數(shù)返回一些東西,。也就是返回值。函數(shù)通過return返回一個(gè)返回值

返回值語法：

函數(shù)的調(diào)用結(jié)果就是返回值,，因此我們可以直接對函數(shù)調(diào)用結(jié)果進(jìn)行操作,。

返回值詳解：
- 在使用 return 語句時(shí)，函數(shù)會停止執(zhí)行,，并返回指定的值

• 如果函數(shù)沒有 return ,，返回的值是 undefined

• 在使用 return 語句時(shí)，函數(shù)會停止執(zhí)行,，并返回指定的值
  如果函數(shù)使用 return語句,，那么跟再return后面的值，就成了函數(shù)的返回值
  如果函數(shù)使用 return語句,，但是return后面沒有任何值,，那么函數(shù)的返回值也是：undefined
  函數(shù)使用return語句后,，這個(gè)函數(shù)會在執(zhí)行完 return 語句之后停止并立即退出，也就是說return后面的所有其他代碼都不會再執(zhí)行,。

  推薦的做法是要么讓函數(shù)始終都返回一個(gè)值,，要么永遠(yuǎn)都不要返回值。

break ,continue ,return 的區(qū)別

• break ：結(jié)束當(dāng)前的循環(huán)體（如 for,、while）
• continue ：跳出本次循環(huán),，繼續(xù)執(zhí)行下次循環(huán)（如 for、while）
• return ：不僅可以退出循環(huán),，還能夠返回 return 語句中的值,，同時(shí)還可以結(jié)束當(dāng)前的函數(shù)體內(nèi)的代碼

arguments的使用

?當(dāng)不確定有多少個(gè)參數(shù)傳遞的時(shí)候，可以用 arguments 來獲取,。JavaScript 中,，arguments實(shí)際上它是當(dāng)前函數(shù)的一個(gè)內(nèi)置對象。所有函數(shù)都內(nèi)置了一個(gè) arguments 對象,，arguments 對象中存儲了傳遞的所有實(shí)參,。arguments展示形式是一個(gè)偽數(shù)組，因此可以進(jìn)行遍歷,。偽數(shù)組具有以下特點(diǎn)：

• 具有 length 屬性

• 按索引方式儲存數(shù)據(jù)

• 不具有數(shù)組的 push , pop 等方法

  注意：在函數(shù)內(nèi)部使用該對象,，用此對象獲取函數(shù)調(diào)用時(shí)傳的實(shí)參。
  函數(shù)內(nèi)部可以調(diào)用另一個(gè)函數(shù),，在同一作用域代碼中,，函數(shù)名即代表封裝的操作，
  使用函數(shù)名加括號即可以將封裝的操作執(zhí)行,。

函數(shù)的兩種聲明方式

• 自定義函數(shù)方式(命名函數(shù))

  利用函數(shù)關(guān)鍵字 function 自定義函數(shù)方式

  // 聲明定義方式 function fn() {...} // 調(diào)用 fn();
  • 因?yàn)橛忻?，所以也被稱為命名函數(shù)
  • 調(diào)用函數(shù)的代碼既可以放到聲明函數(shù)的前面，也可以放在聲明函數(shù)的后面

• 函數(shù)表達(dá)式方式(匿名函數(shù)）

  利用函數(shù)表達(dá)式方式的寫法如下：

  // 這是函數(shù)表達(dá)式寫法,，匿名函數(shù)后面跟分號結(jié)束
  var fn = function(){...},；
  // 調(diào)用的方式，函數(shù)調(diào)用必須寫到函數(shù)體下面
  fn();
  

匿名函數(shù)如何使用：

關(guān)于自執(zhí)行函數(shù)（匿名函數(shù)自調(diào)用）的作用：防止全局變量污染。

• 因?yàn)楹瘮?shù)沒有名字,，所以也被稱為匿名函數(shù)
• 這個(gè)fn 里面存儲的是一個(gè)函數(shù)
• 函數(shù)表達(dá)式方式原理跟聲明變量方式是一致的
• 函數(shù)調(diào)用的代碼必須寫到函數(shù)體后面

自調(diào)用函數(shù)

匿名函數(shù)不能通過直接調(diào)用來執(zhí)行,，因此可以通過匿名函數(shù)的自調(diào)用的方式來執(zhí)行

(function () {
  alert(123);
})();

函數(shù)是一種數(shù)據(jù)類型

• 函數(shù)作為參數(shù)

因?yàn)楹瘮?shù)也是一種類型，可以把函數(shù)作為兩一個(gè)函數(shù)的參數(shù),，在兩一個(gè)函數(shù)中調(diào)用

• 函數(shù)做為返回值

因?yàn)楹瘮?shù)是一種類型,，所以可以把函數(shù)可以作為返回值從函數(shù)內(nèi)部返回，這種用法在后面很常見,。

function fn(b) {
  var a = 10;
  return function () {
    alert(a+b);
  }
}
fn(15)();

調(diào)試

• 過去調(diào)試JavaScript的方式
  • alert()
  • console.log()
• 斷點(diǎn)調(diào)試

斷點(diǎn)調(diào)試是指自己在程序的某一行設(shè)置一個(gè)斷點(diǎn),，調(diào)試時(shí),，程序運(yùn)行到這一行就會停住，然后你可以一步一步往下調(diào)試,，調(diào)試過程中可以看各個(gè)變量當(dāng)前的值,，出錯的話，調(diào)試到出錯的代碼行即顯示錯誤,，停下,。

• 調(diào)試步驟

• 調(diào)試中的相關(guān)操作

Watch: 監(jiān)視，通過watch可以監(jiān)視變量的值的變化,，非常的常用,。
F10: 程序單步執(zhí)行，讓程序一行一行的執(zhí)行,，
這個(gè)時(shí)候,，觀察watch中變量的值的變化。
F8：跳到下一個(gè)斷點(diǎn)處,，如果后面沒有斷點(diǎn)了,，則程序執(zhí)行結(jié)束。

tips: 監(jiān)視變量,，不要監(jiān)視表達(dá)式,，因?yàn)楸O(jiān)視了表達(dá)式，那么這個(gè)表達(dá)式也會執(zhí)行,。

代碼規(guī)范

標(biāo)識符命名規(guī)范

• 變量,、函數(shù)的命名必須要有意義
• 變量的名稱一般用名詞
• 函數(shù)的名稱一般用動詞

操作符規(guī)范

單行注釋規(guī)范

for (var i = 1; i <= 5; i++) {
   if (i == 3) {
       break; // 單行注釋前面注意有個(gè)空格
   }
   console.log('我正在吃第' + i + '個(gè)包子呢');
}

其他規(guī)范

小結(jié)：
1.命名規(guī)范
    2.變量規(guī)范   
    var name = 'zs';
    3.注釋規(guī)范
    // 這里是注釋
    4.空格規(guī)范
    5.換行規(guī)范
    var arr = [1, 2, 3, 4];
    if (a > b) {
          
    }
    for(var i = 0; i < 10; i++) {
          
    }
    function fn() {
          
    }

作用域概述

• 全局作用域
• 局部作用域（函數(shù)作用域）

全局作用域

作用于所有代碼執(zhí)行的環(huán)境(整個(gè) script 標(biāo)簽內(nèi)部)或者一個(gè)獨(dú)立的 js 文件,。

局部作用域

JS沒有塊級作用域

• 塊作用域由 { } 包括,。

• 在其他編程語言中（如 java,、c#等），在 if 語句,、循環(huán)語句中創(chuàng)建的變量,，僅僅只能在本 if 語句,、本循環(huán)語句中使用，如下面的Java代碼：

  java有塊級作用域：

  if(true){
    int num = 123;
    system.out.print(num);  // 123
  }
  system.out.print(num);    // 報(bào)錯
  

  以上java代碼會報(bào)錯,，是因?yàn)榇a中 { } 即一塊作用域,，其中聲明的變量 num，在 “{ }” 之外不能使用,；

  而與之類似的JavaScript代碼,，則不會報(bào)錯：

  Js中沒有塊級作用域（在ES6之前）

  if(true){ var num = 123; console.log(123); //123 } console.log(123); //123

  小結(jié)：
  任何一對花括號（｛和｝）中的語句集都屬于一個(gè)塊，在這之中定義的所有變量在代碼塊外都是不可見的,，我們稱之為塊級作用域,。
  在es6之前沒有塊級作用域的的概念,只有函數(shù)作用域，現(xiàn)階段可以認(rèn)為JavaScript沒有塊級作用域

詞法作用域

變量的作用域是在定義時(shí)決定而不是執(zhí)行時(shí)決定,，也就是說詞法作用域取決于源碼,，通過靜態(tài)分析就能確定，因此詞法作用域也叫做靜態(tài)作用域,。

在 js 中詞法作用域規(guī)則:

• 函數(shù)允許訪問函數(shù)外的數(shù)據(jù).
• 整個(gè)代碼結(jié)構(gòu)中只有函數(shù)可以限定作用域.
• 作用域規(guī)則首先使用提升規(guī)則分析
• 如果當(dāng)前作用規(guī)則中有名字了, 就不考慮外面的名字

變量的作用域

在JavaScript中,，根據(jù)作用域的不同，變量可以分為兩種：

• 全局變量
• 局部變量

全局變量

• 全局變量在代碼的任何位置都可以使用
• 在全局作用域下 var 聲明的變量 是全局變量
• 特殊情況下,，在函數(shù)內(nèi)不使用 var 聲明的變量也是全局變量（不建議使用）

局部變量

在局部作用域下聲明的變量叫做局部變量（在函數(shù)內(nèi)部定義的變量）

• 局部變量只能在該函數(shù)內(nèi)部使用
• 在函數(shù)內(nèi)部 var 聲明的變量是局部變量
• 函數(shù)的形參實(shí)際上就是局部變量

全局變量和局部變量的區(qū)別

• 全局變量：在任何一個(gè)地方都可以使用，只有在瀏覽器關(guān)閉時(shí)才會被銷毀,，因此比較占內(nèi)存
• 局部變量：只在函數(shù)內(nèi)部使用,，當(dāng)其所在的代碼塊被執(zhí)行時(shí)，會被初始化,；當(dāng)代碼塊運(yùn)行結(jié)束后,，就會被銷毀，因此更節(jié)省內(nèi)存空間

作用域鏈

只要是代碼都一個(gè)作用域中,，寫在函數(shù)內(nèi)部的局部作用域,，未寫在任何函數(shù)內(nèi)部即在全局作用域中；如果函數(shù)中還有函數(shù),，那么在這個(gè)作用域中就又可以誕生一個(gè)作用域,；根據(jù)在[內(nèi)部函數(shù)可以訪問外部函數(shù)變量]的這種機(jī)制，用鏈?zhǔn)讲檎覜Q定哪些數(shù)據(jù)能被內(nèi)部函數(shù)訪問,，就稱作作用域鏈

預(yù)解析的相關(guān)概念

• 預(yù)解析：在當(dāng)前作用域下, JS 代碼執(zhí)行之前,，瀏覽器會默認(rèn)把帶有 var 和 function 聲明的變量在內(nèi)存中進(jìn)行提前聲明或者定義。

• 代碼執(zhí)行： 從上到下執(zhí)行JS語句,。

  預(yù)解析會把變量和函數(shù)的聲明在代碼執(zhí)行之前執(zhí)行完成,。

變量預(yù)解析

預(yù)解析也叫做變量,、函數(shù)提升。
變量提升（變量預(yù)解析）： 變量的聲明會被提升到當(dāng)前作用域的最上面,，變量的賦值不會提升,。

結(jié)果：undefined

注意：變量提升只提升聲明,，不提升賦值

• 函數(shù)提升

  JavaScript解析器首先會把當(dāng)前作用域的函數(shù)聲明提前到整個(gè)作用域的最前面

結(jié)果：控制臺打印字符串 --- ”打印“ 

注意：函數(shù)聲明代表函數(shù)整體，所以函數(shù)提升后,，函數(shù)名代表整個(gè)函數(shù),，
但是函數(shù)并沒有被調(diào)用！

函數(shù)表達(dá)式聲明函數(shù)問題

fn();
var  fn = function() {
    console.log('想不到吧');
}

對象的相關(guān)概念

• 什么是對象,？

  在 JavaScript 中，對象是一組無序的相關(guān)屬性和方法的集合,，所有的事物都是對象,，例如字符串、數(shù)值,、數(shù)組,、函數(shù)等。
  （現(xiàn)實(shí)生活中：萬物皆對象,，對象是一個(gè)具體的事物,，一個(gè)具體的事物就會有行為和特征。）
  對象是由屬性和方法組成的,。

  • 屬性：事物的特征,，在對象中用屬性來表示（常用名詞）

  • 方法：事物的行為，在對象中用方法來表示（常用動詞）

• 為什么需要對象,？

  保存一個(gè)值時(shí),，可以使用變量，保存多個(gè)值（一組值）時(shí),，可以使用數(shù)組,。

    如果要保存一個(gè)人的完整信息呢？
  

因此為了讓更好地存儲一組數(shù)據(jù),，對象應(yīng)運(yùn)而生：對象中為每項(xiàng)數(shù)據(jù)設(shè)置了屬性名稱,，可以訪問數(shù)據(jù)更語義化,，數(shù)據(jù)結(jié)構(gòu)清晰，表意明顯,，方便開發(fā)者使用,。

JavaScript中的對象

• 事物的特征在對象中用屬性來表示,。
• 事物的行為在對象中用方法來表示。
  創(chuàng)建對象的三種方式

• 利用字面量創(chuàng)建對象

  使用對象字面量創(chuàng)建對象：

    就是花括號 { } 里面包含了表達(dá)這個(gè)具體事物（對象）的屬性和方法,；{ } 里面采取鍵值對的形式表示 
  

  • 鍵：相當(dāng)于屬性名

  • 值：相當(dāng)于屬性值,，可以是任意類型的值（數(shù)字類型、字符串類型,、布爾類型,，函數(shù)類型等）

    代碼如下：

    var star = { name : 'pink', age : 18, sex : '男', sayHi : function(){ alert('大家好啊~'); } };

    上述代碼中 star即是創(chuàng)建的對象。

• 對象的使用

  • 對象的屬性

    • 對象中存儲具體數(shù)據(jù)的 '鍵值對'中的 '鍵'稱為對象的屬性,，即對象中存儲具體數(shù)據(jù)的項(xiàng)

  • 對象的方法

    • 對象中存儲函數(shù)的 '鍵值對'中的 '鍵'稱為對象的方法,，即對象中存儲函數(shù)的項(xiàng)

  • 訪問對象的屬性

    • 對象里面的屬性調(diào)用 : 對象.屬性名 ，這個(gè)小點(diǎn) . 就理解為“ 的 ”

    • 對象里面屬性的另一種調(diào)用方式 : 對象['屬性名’],，注意方括號里面的屬性必須加引號

      示例代碼如下：

      console.log(star.name)     // 調(diào)用名字屬性
      console.log(star['name'])  // 調(diào)用名字屬性
      

  • 調(diào)用對象的方法

    • 對象里面的方法調(diào)用：對象.方法名() ,，注意這個(gè)方法名字后面一定加括號

      示例代碼如下：

      star.sayHi(); // 調(diào)用 sayHi 方法,注意，一定不要忘記帶后面的括號

  • 變量,、屬性,、函數(shù)、方法總結(jié)

    屬性是對象的一部分,，而變量不是對象的一部分,，
    變量是單獨(dú)存儲數(shù)據(jù)的容器
    

    • 變量：單獨(dú)聲明賦值，單獨(dú)存在

    • 屬性：對象里面的變量稱為屬性,，不需要聲明,，用來描述該對象的特征

      方法是對象的一部分，函數(shù)不是對象的一部分，函數(shù)是單獨(dú)封裝操作的容器

    • 函數(shù)：單獨(dú)存在的,，通過“函數(shù)名()”的方式就可以調(diào)用

    • 方法：對象里面的函數(shù)稱為方法,，方法不需要聲明，使用“對象.方法名()”的方式就可以調(diào)用,，方法用來描述該對象的行為和功能。

• 利用 new Object 創(chuàng)建對象

  • 創(chuàng)建空對象

    var andy = new Obect();

    通過內(nèi)置構(gòu)造函數(shù)Object創(chuàng)建對象,，此時(shí)andy變量已經(jīng)保存了創(chuàng)建出來的空對象

  • 給空對象添加屬性和方法

    • 通過對象操作屬性和方法的方式,，來為對象增加屬性和方法

      示例代碼如下：

    andy.name = 'pink';
    andy.age = 18;
    andy.sex = '男';
    andy.sayHi = function(){
        alert('大家好啊~');
    }
    

    注意：

    • Object() ：第一個(gè)字母大寫
    • new Object() ：需要 new 關(guān)鍵字
    • 使用的格式：對象.屬性 = 值;

• 利用構(gòu)造函數(shù)創(chuàng)建對象

  • 構(gòu)造函數(shù)

    • 構(gòu)造函數(shù)：是一種特殊的函數(shù)，主要用來初始化對象,，即為對象成員變量賦初始值,，它總與 new 運(yùn)算符一起使用。我們可以把對象中一些公共的屬性和方法抽取出來,，然后封裝到這個(gè)函數(shù)里面,。

    • 構(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ù)名(實(shí)參1，實(shí)參2,，實(shí)參3)
      

      以上代碼中,，obj即接收到構(gòu)造函數(shù)創(chuàng)建出來的對象。

    • 注意事項(xiàng)

      1. 構(gòu)造函數(shù)約定首字母大寫,。
      2. 函數(shù)內(nèi)的屬性和方法前面需要添加 this ,，表示當(dāng)前對象的屬性和方法。
      3. 構(gòu)造函數(shù)中不需要 return 返回結(jié)果,。
      4. 當(dāng)我們創(chuàng)建對象的時(shí)候,，必須用 new 來調(diào)用構(gòu)造函數(shù)。

    • 其他

      構(gòu)造函數(shù),，如 Stars(),，抽象了對象的公共部分，封裝到了函數(shù)里面,，它泛指某一大類（class）
      創(chuàng)建對象,，如 new Stars()，特指某一個(gè),，通過 new 關(guān)鍵字創(chuàng)建對象的過程我們也稱為對象實(shí)例化

new關(guān)鍵字

構(gòu)造函數(shù) ,，是一種特殊的函數(shù)。主要用來在創(chuàng)建對象時(shí)初始化對象,， 即為對象成員變量賦初始值,，總與new運(yùn)算符一起使用在創(chuàng)建對象的語句中。

1. 構(gòu)造函數(shù)用于創(chuàng)建一類對象,，首字母要大寫,。
2. 構(gòu)造函數(shù)要和new一起使用才有意義。

new在執(zhí)行時(shí)會做四件事情

this詳解

JavaScript中的this指向問題，有時(shí)候會讓人難以捉摸,，隨著學(xué)習(xí)的深入,，
我們可以逐漸了解
現(xiàn)在我們需要掌握函數(shù)內(nèi)部的this幾個(gè)特點(diǎn)
1. 函數(shù)在定義的時(shí)候this是不確定的，只有在調(diào)用的時(shí)候才可以確定
2. 一般函數(shù)直接執(zhí)行,，內(nèi)部this指向全局window
3. 函數(shù)作為一個(gè)對象的方法,，被該對象所調(diào)用，那么this指向的是該對象
4. 構(gòu)造函數(shù)中的this其實(shí)是一個(gè)隱式對象,，類似一個(gè)初始化的模型,，
5. 所有方法和屬性都掛載到了這個(gè)隱式對象身上，后續(xù)通過new關(guān)鍵字來調(diào)用,，
從而實(shí)現(xiàn)實(shí)例化

對象的使用

• new關(guān)鍵字的作用

  1. 在構(gòu)造函數(shù)代碼開始執(zhí)行之前,，創(chuàng)建一個(gè)空對象；
  2. 修改this的指向,，把this指向創(chuàng)建出來的空對象,；
  3. 執(zhí)行函數(shù)的代碼
  4. 在函數(shù)完成之后，返回this---即創(chuàng)建出來的對象

5.3 遍歷對象

for (變量 in 對象名字) {
    // 在此執(zhí)行代碼
}

for (var k in obj) {
    console.log(k);      // 這里的 k 是屬性名
    console.log(obj[k]); // 這里的 obj[k] 是屬性值
}

簡單類型和復(fù)雜類型的區(qū)別

基本類型又叫做值類型,，復(fù)雜類型又叫做引用類型

值類型：簡單數(shù)據(jù)類型，基本數(shù)據(jù)類型,，在存儲時(shí),，變量中存儲的是值本身，因此叫做值類型,。

引用類型：復(fù)雜數(shù)據(jù)類型,，在存儲是，變量中存儲的僅僅是地址（引用）,，因此叫做引用數(shù)據(jù)類型,。

• 堆和棧

  堆棧空間分配區(qū)別： 　　1,、棧（操作系統(tǒng)）：由操作系統(tǒng)自動分配釋放 ,，存放函數(shù)的參數(shù)值， 　　局部變量的值等,。其操作方式類似于數(shù)據(jù)結(jié)構(gòu)中的棧,； 　　2、堆（操作系統(tǒng)）： 存儲復(fù)雜類型(對象),，一般由程序員分配釋放,， 　　 若程序員不釋放,，由垃圾回收機(jī)制回收，分配方式倒是類似于鏈表,。

  注意：JavaScript中沒有堆和棧的概念,，此處我們用堆和棧的目的方便理解

為什么會有堆內(nèi)存和棧內(nèi)存之分

首先 JavaScript 中的變量分為基本類型和引用類型。

基本類型就是保存在棧內(nèi)存中的簡單數(shù)據(jù)段,，而引用類型指的是那些保存在堆內(nèi)存中的對象,。

1 、基本類型

基本類型有 Undefined,、Null,、Boolean、Number 和String,。這些類型在內(nèi)存中分別占有固定大小的空間，他們的值保存在?？臻g,，我們通過按值來訪問的。

2 ,、引用類型

引用類型,，值大小不固定，棧內(nèi)存中存放地址指向堆內(nèi)存中的對象,。是按引用訪問的,。如下圖所示：棧內(nèi)存中存放的只是該對象的訪問地址， 在堆內(nèi)存中為這個(gè)值分配空間 ,。 由于這種值的大小不固定,，因此不能把它們保存到棧內(nèi)存中。但內(nèi)存地址大小的固定的,，因此可以將內(nèi)存地址保存在棧內(nèi)存中,。 這樣，當(dāng)查詢引用類型的變量時(shí),， 先從棧中讀取內(nèi)存地址,， 然后再通過地址找到堆中的值。對于這種,，我們把它叫做按引用訪問,。

PS：當(dāng)我們看到一個(gè)變量類型是已知的，就分配在棧里面,，比如INT,Double等,。其他未知的類型，比如自定義的類型,，因?yàn)橄到y(tǒng)不知道需要多大,，所以程序自己申請，這樣就分配在堆里面。

為什么會有棧內(nèi)存和堆內(nèi)存之分：

通常與垃圾回收機(jī)制有關(guān),。為了使程序運(yùn)行時(shí)占用的內(nèi)存最小,。

當(dāng)一個(gè)方法執(zhí)行時(shí)，每個(gè)方法都會建立自己的內(nèi)存棧,，在這個(gè)方法內(nèi)定義的變量將會逐個(gè)放入這塊棧內(nèi)存里,，隨著方法的執(zhí)行結(jié)束，這個(gè)方法的內(nèi)存棧也將自然銷毀了,。因此,，所有在方法中定義的變量都是放在棧內(nèi)存中的；

當(dāng)我們在程序中創(chuàng)建一個(gè)對象時(shí),，這個(gè)對象將被保存到運(yùn)行時(shí)數(shù)據(jù)區(qū)中,，以便反復(fù)利用（因?yàn)閷ο蟮膭?chuàng)建成本通常較大），這個(gè)運(yùn)行時(shí)數(shù)據(jù)區(qū)就是堆內(nèi)存,。堆內(nèi)存中的對象不會隨方法的結(jié)束而銷毀,，即使方法結(jié)束后，這個(gè)對象還可能被另一個(gè)引用變量所引用（方法的參數(shù)傳遞時(shí)很常見）,，則這個(gè)對象依然不會被銷毀,，只有當(dāng)一個(gè)對象沒有任何引用變量引用它時(shí)，系統(tǒng)的垃圾回收機(jī)制才會在核實(shí)的時(shí)候回收它,。