---
學(xué)習(xí)目標(biāo):
- 掌握編程的基本思維
- 掌握編程的基本語法
typora-copy-images-to: media
---
# JavaScript基礎(chǔ)
HTML和CSS? 京東
## 課前娛樂
**眾人皆笑我瘋癲,我笑爾等看不穿**
##課前說明
目標(biāo)：掌握編程的基本思想
掌握J(rèn)avaScript的基礎(chǔ)語法,使用常見API(備注)完成相應(yīng)案例及練習(xí)和作業(yè)
培養(yǎng)獨立解決問題能力
遇到問題先獨立調(diào)試(牛X從規(guī)范和調(diào)試開始)
能夠獨立寫出所有案例代碼
注意：
1. 以大多數(shù)同學(xué)的接受能力為基準(zhǔn)，穩(wěn)準(zhǔn)狠的前行
2. 注重基礎(chǔ)，以最簡單的案例說明問題恬叹，并以企業(yè)項目案例進(jìn)行實踐
3. 課上思考帖渠，課下提問。不需要深究的地方不要鉆牛角尖捆憎。
4. 必須完成作業(yè),基礎(chǔ)堅挺的同學(xué)低調(diào),基礎(chǔ)薄弱同學(xué)多問
一句話送給大家:**當(dāng)你要放棄的時候想想當(dāng)初為什么堅持到現(xiàn)在印衔！**
筆記和代碼是”大家的”,
自己寫的才是自己的.
復(fù)制代碼者,沒有”男朋友”
不寫代碼者,沒有”女朋友”
##階段說明
JavaScript基礎(chǔ)
Web API
JavaScript高級
##第一天重點內(nèi)容
**變量的聲明及使用**
**數(shù)據(jù)類型**
**類型轉(zhuǎn)換**
**運算符**
##課外提示
1.敲代碼用指法,指法配圖尼变，堅持一周者即可熟練
2.碼農(nóng)不需要練就一陽指或者二指禪
3.可以使用金山打字通亥宿，此處并非打廣告,個人建議，天天敲代碼砂沛，不停的反復(fù)的敲練習(xí)和作業(yè)烫扼，速度和基本功的快速提升
奉勸各位:
**保護(hù)好自己的手**
**控制自己的右手**
windows中的常用快捷鍵
##瀏覽器說明
瀏覽器是指可以顯示網(wǎng)頁服務(wù)器或者文件系統(tǒng)的HTML文件內(nèi)容，并讓用戶與這些文件交互的一種軟件碍庵。
通俗的講:可以顯示頁面的一個軟件,
國內(nèi)網(wǎng)民計算機上常見的網(wǎng)頁瀏覽器有映企，QQ瀏覽器悟狱、Internet Explorer、Firefox堰氓、Safari挤渐，Opera、Google Chrome双絮、百度瀏覽器浴麻、搜狗瀏覽器、獵豹瀏覽器囤攀、360瀏覽器软免、UC瀏覽器、傲游瀏覽器焚挠、世界之窗瀏覽器等膏萧，瀏覽器是最經(jīng)常使用到的客戶端程序。
常用的五大瀏覽器：chrome蝌衔，firefox榛泛，Safari，ie噩斟，opera
我們用chrome(谷歌瀏覽器)
## 網(wǎng)頁曹锨、網(wǎng)站和應(yīng)用程序
網(wǎng)頁：單獨的一個頁面
網(wǎng)站：一些列相關(guān)的頁面組成到一起
應(yīng)用程序：可以和用戶產(chǎn)生交互，并實現(xiàn)某種功能亩冬。
## 演示JavaScript的強大
http://impress.github.io/impress.js/
http://naotu.baidu.com/
https://codecombat.com/
https://ide.codemao.cn/
需要翻墻
https://developers.google.com/blockly/
blockly迷宮
https://blockly-games.appspot.com
blockly迷宮不需要翻墻
https://blockly.uieee.com/
## JavaScript介紹
### JavaScript是什么
HTML CSS
JavaScript 編程語言? 流程控制
Netscape在最初將其腳本語言命名為LiveScript艘希，后來Netscape在與Sun合作之后將其改名為JavaScript。JavaScript最初受Java啟發(fā)而開始設(shè)計的硅急，目的之一就是“看上去像Java”覆享，因此語法上有類似之處，一些名稱和命名規(guī)范也借自Java营袜。JavaScript與Java名稱上的近似撒顿，是當(dāng)時Netscape為了營銷考慮與Sun微系統(tǒng)達(dá)成協(xié)議的結(jié)果。Java和JavaScript的關(guān)系就像張雨和張雨生的關(guān)系荚板，只是名字很像凤壁。
?? Java? 服務(wù)器端的編程語言
?? JavaScript? 運行在客戶端(瀏覽器)的編程語言
> JavaScript是一種運行在***客戶端*** 的***腳本語言***
> JavaScript的解釋器被稱為JavaScript引擎，為瀏覽器的一部分跪另，廣泛用于客戶端的腳本語言拧抖，最早是在HTML（標(biāo)準(zhǔn)通用標(biāo)記語言下的一個應(yīng)用）網(wǎng)頁上使用，用來給HTML網(wǎng)頁增加動態(tài)功能免绿。
### JavaScript最初的目的
演示：http://baixiu.uieee.com/admin/login.php
最初的目的是為了處理表單的驗證操作唧席。
### JavaScript現(xiàn)在的意義(應(yīng)用場景)
JavaScript 發(fā)展到現(xiàn)在幾乎無所不能。
1. 網(wǎng)頁特效
2. 服務(wù)端開發(fā)(Node.js)
3. 命令行工具(Node.js)
4. 桌面程序(Electron)
5. App(Cordova)
6. 控制硬件-物聯(lián)網(wǎng)(Ruff)
7. 游戲開發(fā)(cocos2d-js)
### JavaScript和HTML、CSS的區(qū)別
1. HTML：提供網(wǎng)頁的結(jié)構(gòu)淌哟，提供網(wǎng)頁中的內(nèi)容
2. CSS: 用來美化網(wǎng)頁
3. JavaScript: 可以用來控制網(wǎng)頁內(nèi)容迹卢，給網(wǎng)頁增加動態(tài)的效果
## JavaScript的組成
### ECMAScript - JavaScript的核心
ECMA 歐洲計算機制造聯(lián)合會
網(wǎng)景：JavaScript
微軟：JScript
定義了JavaScript的語法規(guī)范
JavaScript的核心，描述了語言的基本語法和數(shù)據(jù)類型徒仓，ECMAScript是一套標(biāo)準(zhǔn)腐碱，定義了一種語言的標(biāo)準(zhǔn)與具體實現(xiàn)無關(guān)
### BOM - 瀏覽器對象模型
一套操作瀏覽器功能的API
通過BOM可以操作瀏覽器窗口，比如：彈出框掉弛、控制瀏覽器跳轉(zhuǎn)症见、獲取分辨率等
### DOM - 文檔對象模型
一套操作頁面元素的API
DOM可以把HTML看做是文檔樹，通過DOM提供的API可以對樹上的節(jié)點進(jìn)行操作
## JavaScript初體驗
CSS：行內(nèi)樣式狰晚、嵌入樣式筒饰、外部樣式
### JavaScript的書寫位置
- 寫在行內(nèi)
```html
```
- 寫在script標(biāo)簽中
```html
alert('Hello World!');
```
- 寫在外部js文件中，在頁面引入
```html
```
- 注意點
***引用外部js文件的script標(biāo)簽中不可以寫JavaScript代碼***
## 計算機組成
### 軟件
- 應(yīng)用軟件：瀏覽器(Chrome/IE/Firefox)壁晒、QQ瓷们、Sublime、Word
- 系統(tǒng)軟件：Windows秒咐、Linux谬晕、mac OSX
### 硬件
- 三大件：CPU、內(nèi)存携取、硬盤? ? -- 主板
- 輸入設(shè)備：鼠標(biāo)攒钳、鍵盤、手寫板雷滋、攝像頭等
- 輸出設(shè)備：顯示器不撑、打印機、投影儀等
## 變量
### 什么是變量
- 什么是變量
變量是計算機內(nèi)存中存儲數(shù)據(jù)的標(biāo)識符晤斩，根據(jù)變量名稱可以獲取到內(nèi)存中存儲的數(shù)據(jù)
- 為什么要使用變量
使用變量可以方便的獲取或者修改內(nèi)存中的數(shù)據(jù)
### 如何使用變量
- var聲明變量
```javascript
var age;
```
- 變量的賦值
```javascript
var age;
age = 18;
```
- 同時聲明多個變量
```javascript
var age, name, sex;
age = 10;
name = 'zs';
```
- 同時聲明多個變量并賦值
```javascript
var age = 10, name = 'zs';
```
### 變量在內(nèi)存中的存儲
```javascript
var age = 18;
```
### 變量的命名規(guī)則和規(guī)范
- 規(guī)則 - 必須遵守的焕檬，不遵守會報錯
- 由字母、數(shù)字澳泵、下劃線实愚、$符號組成，不能以數(shù)字開頭
- 不能是關(guān)鍵字和保留字兔辅，例如：for腊敲、while。
- 區(qū)分大小寫
- 規(guī)范 - 建議遵守的维苔，不遵守不會報錯
- 變量名必須有意義
- 遵守駝峰命名法碰辅。首字母小寫，后面單詞的首字母需要大寫介时。例如：userName乎赴、userPassword
- 下面哪些變量名不合法
```
a
1
age18
18age
name
$name
_sex
&sex
theworld? theWorld
```
### 案例
1. 交換兩個變量的值
2. 不使用臨時變量忍法，交換兩個數(shù)值變量的值
## 數(shù)據(jù)類型
### 簡單數(shù)據(jù)類型
Number、String榕吼、Boolean、Undefined勉失、Null
#### Number類型
- 數(shù)值字面量：數(shù)值的固定值的表示法
110 1024? 60.5
- 進(jìn)制
```
十進(jìn)制
var num = 9;
進(jìn)行算數(shù)計算時羹蚣，八進(jìn)制和十六進(jìn)制表示的數(shù)值最終都將被轉(zhuǎn)換成十進(jìn)制數(shù)值。
十六進(jìn)制
var num = 0xA;
數(shù)字序列范圍：0~9以及A~F
八進(jìn)制
var num1 = 07;? // 對應(yīng)十進(jìn)制的7
var num2 = 019;? // 對應(yīng)十進(jìn)制的19
var num3 = 08;? // 對應(yīng)十進(jìn)制的8
數(shù)字序列范圍：0~7
如果字面值中的數(shù)值超出了范圍乱凿，那么前導(dǎo)零將被忽略顽素，后面的數(shù)值將被當(dāng)作十進(jìn)制數(shù)值解析
```
- 浮點數(shù)
- 浮點數(shù)的精度問題
```
浮點數(shù)
var n = 5e-324;? // 科學(xué)計數(shù)法? 5乘以10的-324次方
浮點數(shù)值的最高精度是 17 位小數(shù)，但在進(jìn)行算術(shù)計算時其精確度遠(yuǎn)遠(yuǎn)不如整數(shù)
var result = 0.1 + 0.2;? ? // 結(jié)果不是 0.3徒蟆，而是：0.30000000000000004
console.log(0.07 * 100);
不要判斷兩個浮點數(shù)是否相等
```
- 數(shù)值范圍
```
最小值：Number.MIN_VALUE胁出，這個值為： 5e-324
最大值：Number.MAX_VALUE，這個值為： 1.7976931348623157e+308
無窮大：Infinity
無窮卸紊蟆：-Infinity
```
- 數(shù)值判斷
- NaN：not a number
- NaN 與任何值都不相等全蝶，包括他本身
- isNaN: is not a number
#### String類型
'abc'? "abc"
- 字符串字面量
'程序猿'，'程序媛', "黑馬程序猿"
?
思考：如何打印以下字符串寺枉。
我是一個"正直"的人
我很喜歡"黑馬'程序猿'"
- 轉(zhuǎn)義符
- 字符串長度
length屬性用來獲取字符串的長度
```javascript
var str = '黑馬程序猿 Hello World';
console.log(str.length);
```
- 字符串拼接
字符串拼接使用 + 連接
```javascript
console.log(11 + 11);
console.log('hello' + ' world');
console.log('100' + '100');
console.log('11' + 11);
console.log('male:' + true);
```
1. 兩邊只要有一個是字符串抑淫，那么+就是字符串拼接功能
2. 兩邊如果都是數(shù)字，那么就是算術(shù)功能姥闪。
#### Boolean類型
- Boolean字面量：? true和false始苇，區(qū)分大小寫
- 計算機內(nèi)部存儲：true為1，false為0
#### Undefined和Null
1. undefined表示一個聲明了沒有賦值的變量筐喳，變量只聲明的時候值默認(rèn)是undefined
2. null表示一個空催式，變量的值如果想為null，必須手動設(shè)置
### 復(fù)雜數(shù)據(jù)類型
?? Object
### 獲取變量的類型
typeof
```javascript
var age = 18;
console.log(typeof age);? // 'number'
```
### 字面量
在源代碼中一個固定值的表示法避归。
數(shù)值字面量：8, 9, 10
字符串字面量：'黑馬程序員', "大前端"
布爾字面量：true荣月，false
## 注釋
### 單行注釋
用來描述下面一個或多行代碼的作用
```javascript
// 這是一個變量
var name = 'hm';
```
### 多行注釋
用來注釋多條代碼
```javascript
/*
var age = 18;
var name = 'zs';
console.log(name, age);
*/
```
## 數(shù)據(jù)類型轉(zhuǎn)換
如何使用谷歌瀏覽器，快速的查看數(shù)據(jù)類型槐脏？
字符串的顏色是黑色的喉童，數(shù)值類型是藍(lán)色的，布爾類型也是藍(lán)色的顿天，undefined和null是灰色的
### 轉(zhuǎn)換成字符串類型
- toString()
```
var num = 5;
console.log(num.toString());
```
- String()
```
String()函數(shù)存在的意義：有些值沒有toString()堂氯，這個時候可以使用String()。比如：undefined和null
```
- 拼接字符串方式
num? +? ""牌废，當(dāng) + 兩邊一個操作符是字符串類型咽白，一個操作符是其它類型的時候，會先把其它類型轉(zhuǎn)換成字符串再進(jìn)行字符串拼接鸟缕，返回字符串
### 轉(zhuǎn)換成數(shù)值類型
- Number()
```
Number()可以把任意值轉(zhuǎn)換成數(shù)值晶框，如果要轉(zhuǎn)換的字符串中有一個不是數(shù)值的字符排抬，返回NaN
```
- parseInt()
```javascript
var num1 = parseInt("12.3abc");? // 返回12，如果第一個字符是數(shù)字會解析知道遇到非數(shù)字結(jié)束
var num2 = parseInt("abc123");? // 返回NaN授段，如果第一個字符不是數(shù)字或者符號就返回NaN
```
- parseFloat()
```
parseFloat()把字符串轉(zhuǎn)換成浮點數(shù)
parseFloat()和parseInt非常相似蹲蒲，不同之處在與
parseFloat會解析第一個. 遇到第二個.或者非數(shù)字結(jié)束
如果解析的內(nèi)容里只有整數(shù)，解析成整數(shù)
```
- +侵贵，-0等運算
```javascript
var str = '500';
console.log(+str);? ? ? // 取正
console.log(-str);? ? ? // 取負(fù)
console.log(str - 0);
```
### 轉(zhuǎn)換成布爾類型
- Boolean()
0? ''(空字符串) null undefined NaN 會轉(zhuǎn)換成false? 其它都會轉(zhuǎn)換成true
## 操作符
運算符? operator
5 + 6
表達(dá)式? 組成 操作數(shù)和操作符届搁，會有一個結(jié)果
### 算術(shù)運算符
```
+ - * / %
```
### 一元運算符
一元運算符：只有一個操作數(shù)的運算符
5 + 6? 兩個操作數(shù)的運算符 二元運算符
++? 自身加1
-- 自身減1
- 前置++
```javascript
var num1 = 5;
++ num1;
var num2 = 6;
console.log(num1 + ++ num2);
```
- 后置++
```javascript
var num1 = 5;
num1 ++;
var num2 = 6
console.log(num1 + num2 ++);
```
- 猜猜看
```javascript
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);
```
**總結(jié)**
**前置++：先加1，后參與運算**
**后置++：先參與運算窍育，后加1**
**上面兩個理解后卡睦，下面兩個自通**
**前置--? ：先減1，后參與運算**
**后置--? ：先參與運算漱抓，后減1**
?
### 邏輯運算符(布爾運算符)
&& 與 兩個操作數(shù)同時為true表锻，結(jié)果為true，否則都是false
|| 或 兩個操作數(shù)有一個為true乞娄，結(jié)果為true瞬逊，否則為false
!? 非? 取反
### 關(guān)系運算符(比較運算符)
<? >? >=? <= == != === !==
```javascript
==與===的區(qū)別：==只進(jìn)行值得比較，===類型和值同時相等补胚，則相等
var result = '55' == 55;? // true
var result = '55' === 55;? // false 值相等码耐，類型不相等
var result = 55 === 55;? ? // true
```
### 賦值運算符
=? +=? -=? *=? /=? %=
```javascript
例如：
var num = 0;
num += 5;? //相當(dāng)于? num = num + 5;
```
### 運算符的優(yōu)先級
優(yōu)先級從高到底
1. ()? 優(yōu)先級最高
2. 一元運算符? ++? --? !
3. 算數(shù)運算符? 先*? /? %? 后 +? -
4. 關(guān)系運算符? >? >=? <? <=
5. 相等運算符? ==? !=? ? ===? ? !==
6. 邏輯運算符 先&&? 后||
7. 賦值運算符
```? ? javascript
// 練習(xí)1：
4 >= 6 || '人' != '阿凡達(dá)' && !(12 * 2 == 144) && true
// 練習(xí)2：
var num = 10;
5 == num / 2 && (2 + 2 * num).toString() === '22'
```
## 表達(dá)式和語句
### 表達(dá)式
>一個表達(dá)式可以產(chǎn)生一個值，有可能是運算溶其、函數(shù)調(diào)用骚腥、有可能是字面量。表達(dá)式可以放在任何需要值的地方瓶逃。
### 語句
>語句可以理解為一個行為束铭，循環(huán)語句和判斷語句就是典型的語句。一個程序有很多個語句組成厢绝，一般情況下;分割一個一個的語句
## 流程控制
>程序的三種基本結(jié)構(gòu)
### 順序結(jié)構(gòu)
從上到下執(zhí)行的代碼就是順序結(jié)構(gòu)
**程序默認(rèn)就是由上到下順序執(zhí)行的**
### 分支結(jié)構(gòu)
根據(jù)不同的情況契沫，執(zhí)行對應(yīng)代碼
### 循環(huán)結(jié)構(gòu)
循環(huán)結(jié)構(gòu)：重復(fù)做一件事情
## 分支結(jié)構(gòu)
### if語句
語法結(jié)構(gòu)
```javascript
if (/* 條件表達(dá)式 */) {
// 執(zhí)行語句
}
if (/* 條件表達(dá)式 */){
// 成立執(zhí)行語句
} else {
// 否則執(zhí)行語句
}
if (/* 條件1 */){
// 成立執(zhí)行語句
} else if (/* 條件2 */){
// 成立執(zhí)行語句
} else if (/* 條件3 */){
// 成立執(zhí)行語句
} else {
// 最后默認(rèn)執(zhí)行語句
}
```
案例：
求兩個數(shù)的最大數(shù)
判斷一個數(shù)是偶數(shù)還是奇數(shù)
分?jǐn)?shù)轉(zhuǎn)換，把百分制轉(zhuǎn)換成ABCDE? <60? E? 60-70 D? 70-80 C? 80-90 B? 90 - 100 A
作業(yè)：
判斷一個年份是閏年還是平年
閏年：能被4整除昔汉，但不能被100整除的年份 或者 能被400整除的年份
判斷一個人的年齡是否滿18歲(是否成年)
### 三元運算符
表達(dá)式1 ? 表達(dá)式2 : 表達(dá)式3
是對if……else語句的一種簡化寫法
案例：
是否年滿18歲
從兩個數(shù)中找最大值
### switch語句
語法格式:
```javascript
switch (expression) {
case 常量1:
語句;
break;
case 常量2:
語句;
break;
case 常量3:
語句;
break;
…
case 常量n:
語句;
break;
default:
語句;
break;
}
```
break可以省略懈万，如果省略，代碼會繼續(xù)執(zhí)行下一個case
switch 語句在比較值時使用的是全等操作符, 因此不會發(fā)生類型轉(zhuǎn)換（例如靶病，字符串'10' 不等于數(shù)值 10）
案例：
顯示星期幾
素質(zhì)教育（把分?jǐn)?shù)變成ABCDE）千萬不要寫100個case喲
### 布爾類型的隱式轉(zhuǎn)換
流程控制語句會把后面的值隱式轉(zhuǎn)換成布爾類型
轉(zhuǎn)換為true? 非空字符串? 非0數(shù)字? true 任何對象
轉(zhuǎn)換成false? 空字符串? 0? false? null? undefined
```javascript
// 結(jié)果是什么会通？
var a = !!'123';
```
### 案例
```javascript
var message;
// 會自動把message轉(zhuǎn)換成false
if (message) {
//todo...
}
```
## 循環(huán)結(jié)構(gòu)
> 在javascript中，循環(huán)語句有三種娄周，while涕侈、do..while、for循環(huán)煤辨。
### while語句
基本語法：
```javascript
// 當(dāng)循環(huán)條件為true時裳涛，執(zhí)行循環(huán)體木张，
// 當(dāng)循環(huán)條件為false時，結(jié)束循環(huán)端三。
while (循環(huán)條件) {
//循環(huán)體
}
```
代碼示例：
```javascript
// 計算1-100之間所有數(shù)的和
// 初始化變量
var i = 1;
var sum = 0;
// 判斷條件
while (i <= 100) {
// 循環(huán)體
sum += i;
// 自增
i++;
}
console.log(sum);
```
案例：
打印100以內(nèi) 7的倍數(shù)
打印100以內(nèi)所有偶數(shù)
打印100以內(nèi)所有偶數(shù)的和
作業(yè)：
打印100以內(nèi)的奇數(shù)
打印100以內(nèi)的奇數(shù)的和
### do...while語句
> do..while循環(huán)和while循環(huán)非常像舷礼，二者經(jīng)常可以相互替代郊闯，但是do..while的特點是不管條件成不成立且轨，都會執(zhí)行一次。
基礎(chǔ)語法：
```javascript
do {
// 循環(huán)體;
} while (循環(huán)條件);
```
代碼示例：
```javascript
// 初始化變量
var i = 1;
var sum = 0;
do {
sum += i;//循環(huán)體
i++;//自增
} while (i <= 100);//循環(huán)條件
```
案例：
```
求100以內(nèi)所有3的倍數(shù)的和
使用do-while循環(huán)：輸出詢問“我愛你虚婿，嫁給我吧？”泳挥，選擇“你喜歡我嗎然痊？(y/n):"，如果輸入為y則打印”我們形影不離“屉符，若輸入為n,則繼續(xù)詢問
```
### for語句
>? while和do...while一般用來解決無法確認(rèn)次數(shù)的循環(huán)剧浸。for循環(huán)一般在循環(huán)次數(shù)確定的時候比較方便
for循環(huán)語法：
```javascript
// for循環(huán)的表達(dá)式之間用的是;號分隔的，千萬不要寫成,
for (初始化表達(dá)式1; 判斷表達(dá)式2; 自增表達(dá)式3) {
// 循環(huán)體4
}
```
執(zhí)行順序：1243? ----? 243? -----243(直到循環(huán)條件變成false)
1. 初始化表達(dá)式
2. 判斷表達(dá)式
3. 自增表達(dá)式
4. 循環(huán)體
案例：
```
打印1-100之間所有數(shù)
求1-100之間所有數(shù)的和
求1-100之間所有數(shù)的平均值
求1-100之間所有偶數(shù)的和
同時求1-100之間所有偶數(shù)和奇數(shù)的和
打印正方形
// 使用拼字符串的方法的原因
// console.log 輸出重復(fù)內(nèi)容的問題
// console.log 默認(rèn)輸出內(nèi)容介紹后有換行
var start = '';
for (var i = 0; i < 10; i++) {
for (var j = 0; j < 10; j++) {
start += '* ';
}
start += '\n';
}
console.log(start);
打印直角三角形
var start = '';
for (var i = 0; i < 10; i++) {
for (var j = i; j < 10; j++) {
start += '* ';
}
start += '\n';
}
console.log(start);
打印9*9乘法表
var str = '';
for (var i = 1; i <= 9; i++) {
for (var j = i; j <=9; j++) {
str += i + ' * ' + j + ' = ' + i * j + '\t';
}
str += '\n';
}
console.log(str);
```
作業(yè)：
```
求1-100之間所有數(shù)的乘積
求1-100之間所有奇數(shù)的和
計算1-100之間能3整除的數(shù)的和
計算1-100之間不能被7整除的數(shù)的和
// 講解思路矗钟。如果不會寫程序唆香，可以先把數(shù)學(xué)公式準(zhǔn)備好
本金10000元存入銀行，年利率是千分之三吨艇，每過1年躬它，將本金和利息相加作為新的本金。計算5年后东涡，獲得的本金是多少冯吓？
有個人想知道，一年之內(nèi)一對兔子能繁殖多少對疮跑？于是就筑了一道圍墻把一對兔子關(guān)在里面组贺。已知一對兔子每個月可以生一對小兔子，而一對兔子從出生后第3個月起每月生一對小兔子祖娘。假如一年內(nèi)沒有發(fā)生死亡現(xiàn)象失尖，那么，一對兔子一年內(nèi)（12個月）能繁殖成多少對渐苏？（兔子的規(guī)律為數(shù)列掀潮，1，1整以，2胧辽，3，5公黑，8邑商，13摄咆，21）
```
### continue和break
> break:立即跳出整個循環(huán)，即循環(huán)結(jié)束人断，開始執(zhí)行循環(huán)后面的內(nèi)容（直接跳到大括號）
>
> continue:立即跳出當(dāng)前循環(huán)吭从，繼續(xù)下一次循環(huán)（跳到i++的地方）
案例：
```javascript
求整數(shù)1～100的累加值，但要求碰到個位為3的數(shù)則停止累加
求整數(shù)1～100的累加值恶迈，但要求跳過所有個位為3的數(shù)
```
作業(yè)：
求1-100之間不能被7整除的整數(shù)的和（用continue）
求200-300之間所有的奇數(shù)的和（用continue）
求200-300之間第一個能被7整數(shù)的數(shù)（break）
### 調(diào)試
- 過去調(diào)試JavaScript的方式
- alert()
- console.log()
- 斷點調(diào)試
>斷點調(diào)試是指自己在程序的某一行設(shè)置一個斷點涩金，調(diào)試時，程序運行到這一行就會停住暇仲，然后你可以一步一步往下調(diào)試步做，調(diào)試過程中可以看各個變量當(dāng)前的值，出錯的話奈附，調(diào)試到出錯的代碼行即顯示錯誤全度，停下。
- 調(diào)試步驟
```javascript
瀏覽器中按F12-->sources-->找到需要調(diào)試的文件-->在程序的某一行設(shè)置斷點
```
- 調(diào)試中的相關(guān)操作
```javascript
Watch: 監(jiān)視斥滤，通過watch可以監(jiān)視變量的值的變化将鸵，非常的常用。
F10: 程序單步執(zhí)行佑颇，讓程序一行一行的執(zhí)行顶掉，這個時候，觀察watch中變量的值的變化挑胸。
F8：跳到下一個斷點處痒筒，如果后面沒有斷點了，則程序執(zhí)行結(jié)束嗜暴。
```
tips: ***監(jiān)視變量凸克，不要監(jiān)視表達(dá)式，因為監(jiān)視了表達(dá)式闷沥，那么這個表達(dá)式也會執(zhí)行萎战。***
1. 代碼調(diào)試的能力非常重要，只有學(xué)會了代碼調(diào)試舆逃，才能學(xué)會自己解決bug的能力蚂维。初學(xué)者不要覺得調(diào)試代碼麻煩就不去調(diào)試，知識點花點功夫肯定學(xué)的會路狮，但是代碼調(diào)試這個東西虫啥，自己不去練，永遠(yuǎn)都學(xué)不會奄妨。
2. 今天學(xué)的代碼調(diào)試非常的簡單涂籽，只要求同學(xué)們記住代碼調(diào)試的這幾個按鈕的作用即可，后面還會學(xué)到很多的代碼調(diào)試技巧砸抛。
## 數(shù)組
### 為什么要學(xué)習(xí)數(shù)組
> 之前學(xué)習(xí)的數(shù)據(jù)類型评雌，只能存儲一個值(比如：Number/String树枫。我們想存儲班級中所有學(xué)生的姓名，此時該如何存儲景东？
###? 數(shù)組的概念
> 所謂數(shù)組砂轻，就是將多個元素（通常是同一類型）按一定順序排列放到一個集合中，那么這個集合我們就稱之為數(shù)組斤吐。
### 數(shù)組的定義
> 數(shù)組是一個有序的列表搔涝，可以在數(shù)組中存放任意的數(shù)據(jù)，并且數(shù)組的長度可以動態(tài)的調(diào)整和措。
通過數(shù)組字面量創(chuàng)建數(shù)組
```javascript
// 創(chuàng)建一個空數(shù)組
var arr1 = [];
// 創(chuàng)建一個包含3個數(shù)值的數(shù)組庄呈，多個數(shù)組項以逗號隔開
var arr2 = [1, 3, 4];
// 創(chuàng)建一個包含2個字符串的數(shù)組
var arr3 = ['a', 'c'];
// 可以通過數(shù)組的length屬性獲取數(shù)組的長度
console.log(arr3.length);
// 可以設(shè)置length屬性改變數(shù)組中元素的個數(shù)
arr3.length = 0;
```
### 獲取數(shù)組元素
數(shù)組的取值
```javascript
// 格式：數(shù)組名[下標(biāo)]? 下標(biāo)又稱索引
// 功能：獲取數(shù)組對應(yīng)下標(biāo)的那個值，如果下標(biāo)不存在派阱，則返回undefined抒痒。
var arr = ['red',, 'green', 'blue'];
arr[0];? ? // red
arr[2]; // blue
arr[3]; // 這個數(shù)組的最大下標(biāo)為2,因此返回undefined
```
### 遍歷數(shù)組
> 遍歷：遍及所有，對數(shù)組的每一個元素都訪問一次就叫遍歷颁褂。
數(shù)組遍歷的基本語法：
```javascript
for(var i = 0; i < arr.length; i++) {
// 數(shù)組遍歷的固定結(jié)構(gòu)
}
```
### 數(shù)組中新增元素
數(shù)組的賦值
```javascript
// 格式：數(shù)組名[下標(biāo)/索引] = 值;
// 如果下標(biāo)有對應(yīng)的值，會把原來的值覆蓋傀广，如果下標(biāo)不存在颁独，會給數(shù)組新增一個元素。
var arr = ["red", "green", "blue"];
// 把red替換成了yellow
arr[0] = "yellow";
// 給數(shù)組新增加了一個pink的值
arr[3] = "pink";
```
### 案例
```
求一組數(shù)中的所有數(shù)的和和平均值
求一組數(shù)中的最大值和最小值伪冰，以及所在位置
將字符串?dāng)?shù)組用|或其他符號分割
要求將數(shù)組中的0項去掉誓酒，將不為0的值存入一個新的數(shù)組，生成新的數(shù)組
翻轉(zhuǎn)數(shù)組
冒泡排序贮聂，從小到大
```
## 函數(shù)
### 為什么要有函數(shù)
> 如果要在多個地方求1-100之間所有數(shù)的和靠柑，應(yīng)該怎么做？
### 什么是函數(shù)
>把一段相對獨立的具有特定功能的代碼塊封裝起來吓懈，形成一個獨立實體歼冰，就是函數(shù)，起個名字（函數(shù)名）耻警，在后續(xù)開發(fā)中可以反復(fù)調(diào)用
>
>函數(shù)的作用就是封裝一段代碼隔嫡，將來可以重復(fù)使用
### 函數(shù)的定義
- 函數(shù)聲明
```javascript
function 函數(shù)名(){
// 函數(shù)體
}
```
- 函數(shù)表達(dá)式
```javascript
var fn = function() {
// 函數(shù)體
}
```
- 特點：
函數(shù)聲明的時候，函數(shù)體并不會執(zhí)行甘穿，只要當(dāng)函數(shù)被調(diào)用的時候才會執(zhí)行腮恩。
函數(shù)一般都用來干一件事情，需用使用動詞+名詞温兼，表示做一件事情 `tellStory` `sayHello`等
### 函數(shù)的調(diào)用
- 調(diào)用函數(shù)的語法：
```javascript
函數(shù)名();
```
- 特點：
函數(shù)體只有在調(diào)用的時候才會執(zhí)行秸滴，調(diào)用需要()進(jìn)行調(diào)用。
可以調(diào)用多次(重復(fù)使用)
代碼示例：
```javascript
// 聲明函數(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ù)
- 為什么要有參數(shù)
```javascript
function getSum() {
var sum = 0;
for (var i = 1; i <= 100; i++) {
sum += i;
}
console.log();
}
// 雖然上面代碼可以重復(fù)調(diào)用荡含，但是只能計算1-100之間的值
// 如果想要計算n-m之間所有數(shù)的和咒唆，應(yīng)該怎么辦呢？
```
- 語法：
```javascript
// 函數(shù)內(nèi)部是一個封閉的環(huán)境内颗，可以通過參數(shù)的方式钧排，把外部的值傳遞給函數(shù)內(nèi)部
// 帶參數(shù)的函數(shù)聲明
function 函數(shù)名(形參1, 形參2, 形參...){
// 函數(shù)體
}
// 帶參數(shù)的函數(shù)調(diào)用
函數(shù)名(實參1, 實參2, 實參3);
```
- 形參和實參
> 1. 形式參數(shù)：在聲明一個函數(shù)的時候，為了函數(shù)的功能更加靈活均澳，有些值是固定不了的恨溜，對于這些固定不了的值。我們可以給函數(shù)設(shè)置參數(shù)找前。這個參數(shù)沒有具體的值糟袁，僅僅起到一個占位置的作用，我們通常稱之為形式參數(shù)躺盛，也叫形參项戴。
> 2. 實際參數(shù)：如果函數(shù)在聲明時，設(shè)置了形參槽惫，那么在函數(shù)調(diào)用的時候就需要傳入對應(yīng)的參數(shù)周叮，我們把傳入的參數(shù)叫做實際參數(shù)，也叫實參界斜。
```javascript
var x = 5, y = 6;
fn(x,y);
function fn(a, b) {
console.log(a + b);
}
//x,y實參仿耽，有具體的值。函數(shù)執(zhí)行的時候會把x,y復(fù)制一份給函數(shù)內(nèi)部的a和b各薇，函數(shù)內(nèi)部的值是復(fù)制的新值项贺，無法修改外部的x,y
```
### 案例
- 求1-n之間所有數(shù)的和
- 求n-m之間所有數(shù)額和
- 圓的面積
- 求2個數(shù)中的最大值
- 求3個數(shù)中的最大值
- 判斷一個數(shù)是否是素數(shù)
### 函數(shù)的返回值
>當(dāng)函數(shù)執(zhí)行完的時候载城，并不是所有時候都要把結(jié)果打印喉磁。我們期望函數(shù)給我一些反饋（比如計算的結(jié)果返回進(jìn)行后續(xù)的運算），這個時候可以讓函數(shù)返回一些東西仗岸。也就是返回值林螃。函數(shù)通過return返回一個返回值
返回值語法：
```javascript
//聲明一個帶返回值的函數(shù)
function 函數(shù)名(形參1, 形參2, 形參...){
//函數(shù)體
return 返回值;
}
//可以通過變量來接收這個返回值
var 變量 = 函數(shù)名(實參1, 實參2, 實參3);
```
函數(shù)的調(diào)用結(jié)果就是返回值奕删，因此我們可以直接對函數(shù)調(diào)用結(jié)果進(jìn)行操作。
返回值詳解：
如果函數(shù)沒有顯示的使用 return語句 疗认，那么函數(shù)有默認(rèn)的返回值：undefined
如果函數(shù)使用 return語句急侥，那么跟再return后面的值，就成了函數(shù)的返回值
如果函數(shù)使用 return語句侮邀，但是return后面沒有任何值坏怪，那么函數(shù)的返回值也是：undefined
函數(shù)使用return語句后，這個函數(shù)會在執(zhí)行完 return 語句之后停止并立即退出绊茧，也就是說return后面的所有其他代碼都不會再執(zhí)行铝宵。
推薦的做法是要么讓函數(shù)始終都返回一個值，要么永遠(yuǎn)都不要返回值。
### 案例
- 求階乘
- 求1!+2!+3!+....+n!
- 求一組數(shù)中的最大值
- 求一組數(shù)中的最小值
### arguments的使用
> JavaScript中鹏秋，arguments對象是比較特別的一個對象尊蚁，實際上是當(dāng)前函數(shù)的一個內(nèi)置屬性。也就是說所有函數(shù)都內(nèi)置了一個arguments對象侣夷，arguments對象中存儲了傳遞的所有的實參横朋。arguments是一個偽數(shù)組，因此及可以進(jìn)行遍歷
- 案例
```javascript
求任意個數(shù)的最大值
求任意個數(shù)的和
```
### 案例
```javascript
求斐波那契數(shù)列Fibonacci中的第n個數(shù)是多少百拓？? ? ? 1 1 2 3 5 8 13 21...
翻轉(zhuǎn)數(shù)組琴锭，返回一個新數(shù)組
對數(shù)組排序，從小到大
輸入一個年份衙传，判斷是否是閏年[閏年：能被4整數(shù)并且不能被100整數(shù)决帖，或者能被400整數(shù)]
輸入某年某月某日，判斷這一天是這一年的第幾天蓖捶？
```
## 函數(shù)其它
### 匿名函數(shù)
> 匿名函數(shù)：沒有名字的函數(shù)
匿名函數(shù)如何使用：
將匿名函數(shù)賦值給一個變量地回，這樣就可以通過變量進(jìn)行調(diào)用
匿名函數(shù)自調(diào)用
關(guān)于自執(zhí)行函數(shù)（匿名函數(shù)自調(diào)用）的作用：防止全局變量污染。
### 自調(diào)用函數(shù)
>匿名函數(shù)不能通過直接調(diào)用來執(zhí)行俊鱼，因此可以通過匿名函數(shù)的自調(diào)用的方式來執(zhí)行
```javascript
(function () {
alert(123);
})();
```
### 函數(shù)是一種數(shù)據(jù)類型
```javascript
function fn() {}
console.log(typeof fn);
```
- 函數(shù)作為參數(shù)
因為函數(shù)也是一種類型刻像，可以把函數(shù)作為兩一個函數(shù)的參數(shù)，在兩一個函數(shù)中調(diào)用
- 函數(shù)做為返回值
因為函數(shù)是一種類型并闲，所以可以把函數(shù)可以作為返回值從函數(shù)內(nèi)部返回绎速，這種用法在后面很常見。
```javascript
function fn(b) {
var a = 10;
return function () {
alert(a+b);
}
}
fn(15)();
```
### 代碼規(guī)范
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() {
}
## 作用域
作用域：變量可以起作用的范圍
### 全局變量和局部變量
- 全局變量
?在任何地方都可以訪問到的變量就是全局變量焙蚓，對應(yīng)全局作用域
- 局部變量
?只在固定的代碼片段內(nèi)可訪問到的變量，最常見的例如函數(shù)內(nèi)部洒宝。對應(yīng)局部作用域(函數(shù)作用域)
```
不使用var聲明的變量是全局變量购公，不推薦使用。
變量退出作用域之后會銷毀雁歌，全局變量關(guān)閉網(wǎng)頁或瀏覽器才會銷毀
```
### 塊級作用域
任何一對花括號（｛和｝）中的語句集都屬于一個塊宏浩，在這之中定義的所有變量在代碼塊外都是不可見的，我們稱之為塊級作用域靠瞎。
**在es5之前沒有塊級作用域的的概念,只有函數(shù)作用域**比庄，現(xiàn)階段可以認(rèn)為JavaScript沒有塊級作用域
### 詞法作用域
變量的作用域是在定義時決定而不是執(zhí)行時決定，也就是說詞法作用域取決于源碼乏盐，通過靜態(tài)分析就能確定佳窑，因此詞法作用域也叫做靜態(tài)作用域。
**在 js 中詞法作用域規(guī)則:**
- 函數(shù)允許訪問函數(shù)外的數(shù)據(jù).
- 整個代碼結(jié)構(gòu)中只有函數(shù)可以限定作用域.
- 作用域規(guī)則首先使用提升規(guī)則分析
- 如果當(dāng)前作用規(guī)則中有名字了, 就不考慮外面的名字
```javascript
var num = 123;
function foo() {
console.log( num );
}
foo();
if ( false ) {
var num = 123;
}
console.log( num ); // undefiend
```
### 作用域鏈
只有函數(shù)可以制造作用域結(jié)構(gòu)父能， 那么只要是代碼神凑，就至少有一個作用域, 即全局作用域。凡是代碼中有函數(shù)，那么這個函數(shù)就構(gòu)成另一個作用域溉委。如果函數(shù)中還有函數(shù)鹃唯，那么在這個作用域中就又可以誕生一個作用域。
將這樣的所有的作用域列出來瓣喊，可以有一個結(jié)構(gòu): 函數(shù)內(nèi)指向函數(shù)外的鏈?zhǔn)浇Y(jié)構(gòu)坡慌。就稱作作用域鏈。
```javascript
// 案例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();
```
## 預(yù)解析
> JavaScript代碼的執(zhí)行是由瀏覽器中的JavaScript解析器來執(zhí)行的藻三。JavaScript解析器執(zhí)行JavaScript代碼的時候洪橘，分為兩個過程：預(yù)解析過程和代碼執(zhí)行過程
預(yù)解析過程：
1. 把變量的聲明提升到當(dāng)前作用域的最前面，只會提升聲明趴酣，不會提升賦值梨树。
2. 把函數(shù)的聲明提升到當(dāng)前作用域的最前面，只會提升聲明岖寞，不會提升調(diào)用抡四。
3. 先提升var，在提升function
JavaScript的執(zhí)行過程
```javascript
var a = 25;
function abc (){
alert(a);//undefined
var a = 10;
}
abc();
// 如果變量和函數(shù)同名的話仗谆，函數(shù)優(yōu)先
console.log(a);
function a() {
console.log('aaaaa');
}
var a = 1;
console.log(a);
```
### 全局解析規(guī)則
### 函數(shù)內(nèi)部解析規(guī)則
### 變量提升
- 變量提升
定義變量的時候指巡，變量的聲明會被提升到作用域的最上面，變量的賦值不會提升隶垮。
- 函數(shù)提升
JavaScript解析器首先會把當(dāng)前作用域的函數(shù)聲明提前到整個作用域的最前面
```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);
}
```
## 對象
### 為什么要有對象
```javascript
function printPerson(name, age, sex....) {
}
// 函數(shù)的參數(shù)如果特別多的話勉耀，可以使用對象簡化
function printPerson(person) {
console.log(person.name);
……
}
```
### 什么是對象
```
現(xiàn)實生活中：萬物皆對象，對象是一個具體的事物蹋偏，一個具體的事物就會有行為和特征便斥。
舉例： 一部車，一個手機
車是一類事物威始，門口停的那輛車才是對象
特征：紅色枢纠、四個輪子
行為：駕駛、剎車
```
### JavaScript中的對象
```
JavaScript中的對象其實就是生活中對象的一個抽象
JavaScript的對象是無序?qū)傩缘募稀?/p>
其屬性可以包含基本值黎棠、對象或函數(shù)晋渺。對象就是一組沒有順序的值。我們可以把JavaScript中的對象想象成鍵值對脓斩，其中值可以是數(shù)據(jù)和函數(shù)木西。
對象的行為和特征
特征---屬性
行為---方法
```
+ 事物的特征在對象中用屬性來表示。
+ 事物的行為在對象中用方法來表示随静。
### 對象字面量
> 字面量：11 'abc'? true? [] {}等
```javascript
var o = {
name: 'zs,
age: 18,
sex: true,
sayHi: function () {
console.log(this.name);
}
};
```
思考：
```javascript
如何把學(xué)生對象户魏、老師對象、英雄對象改寫成字面量的方式
```
### 對象創(chuàng)建方式
- 對象字面量
```javascript
var o = {
name: 'zs',
age: 18,
sex: true,
sayHi: function () {
console.log(this.name);
}
};
```
- new Object()創(chuàng)建對象
```javascript
var person = new Object();
person.name = 'lisi';
person.age = 35;
person.job = 'actor';
person.sayHi = function(){
console.log('Hello,everyBody');
}
```
- 工廠函數(shù)創(chuàng)建對象
```javascript
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');
```
- 自定義構(gòu)造函數(shù)
```javascript
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');
```
### 屬性和方法
如果一個變量屬于一個對象所有，那么該變量就可以稱之為該對象的一個屬性叼丑，屬性一般是名詞关翎，用來描述事物的特征
如果一個函數(shù)屬于一個對象所有，那么該函數(shù)就可以稱之為該對象的一個方法鸠信，方法是動詞纵寝，描述事物的行為和功能
### new關(guān)鍵字
> 構(gòu)造函數(shù) ，是一種特殊的函數(shù)星立。主要用來在創(chuàng)建對象時初始化對象爽茴， 即為對象成員變量賦初始值，總與new運算符一起使用在創(chuàng)建對象的語句中绰垂。
1. 構(gòu)造函數(shù)用于創(chuàng)建一類對象室奏，首字母要大寫。
2. 構(gòu)造函數(shù)要和new一起使用才有意義劲装。
new在執(zhí)行時會做四件事情
```
new會在內(nèi)存中創(chuàng)建一個新的空對象
new 會讓this指向這個新的對象
執(zhí)行構(gòu)造函數(shù)? 目的：給這個新對象加屬性和方法
new會返回這個新對象
```
### this詳解
JavaScript中的this指向問題胧沫，有時候會讓人難以捉摸，隨著學(xué)習(xí)的深入占业，我們可以逐漸了解
現(xiàn)在我們需要掌握函數(shù)內(nèi)部的this幾個特點
1. 函數(shù)在定義的時候this是不確定的绒怨，只有在調(diào)用的時候才可以確定
2. 一般函數(shù)直接執(zhí)行，內(nèi)部this指向全局window
3. 函數(shù)作為一個對象的方法谦疾，被該對象所調(diào)用南蹂，那么this指向的是該對象
4. 構(gòu)造函數(shù)中的this其實是一個隱式對象念恍，類似一個初始化的模型六剥，所有方法和屬性都掛載到了這個隱式對象身上，后續(xù)通過new關(guān)鍵字來調(diào)用峰伙，從而實現(xiàn)實例化
## 對象的使用
### 遍歷對象的屬性
> 通過for..in語法可以遍歷一個對象
```javascript
var obj = {};
for (var i = 0; i < 10; i++) {
obj[i] = i * 2;
}
for(var key in obj) {
console.log(key + "==" + obj[key]);
}
```
### 刪除對象的屬性
```javascript
function fun() {
this.name = 'mm';
}
var obj = new fun();
console.log(obj.name); // mm
delete obj.name;
console.log(obj.name); // undefined
```
### 簡單類型和復(fù)雜類型的區(qū)別
>基本類型又叫做值類型疗疟，復(fù)雜類型又叫做引用類型
>
>值類型：簡單數(shù)據(jù)類型，基本數(shù)據(jù)類型词爬，在存儲時，變量中存儲的是值本身权均，因此叫做值類型顿膨。
>
>引用類型：復(fù)雜數(shù)據(jù)類型，在存儲是叽赊，變量中存儲的僅僅是地址（引用）恋沃，因此叫做引用數(shù)據(jù)類型。
- 堆和棧
```
堆棻刂福空間分配區(qū)別：
1囊咏、棧（操作系統(tǒng)）：由操作系統(tǒng)自動分配釋放 ，存放函數(shù)的參數(shù)值，局部變量的值等梅割。其操作方式類似于數(shù)據(jù)結(jié)構(gòu)中的棧霜第；
2、堆（操作系統(tǒng)）： 存儲復(fù)雜類型(對象)户辞，一般由程序員分配釋放泌类， 若程序員不釋放，由垃圾回收機制回收底燎，分配方式倒是類似于鏈表刃榨。
```
- 注意：JavaScript中沒有堆和棧的概念，此處我們用堆和棧來講解双仍，目的方便理解和方便以后的學(xué)習(xí)枢希。
#### 基本類型在內(nèi)存中的存儲
#### 復(fù)雜類型在內(nèi)存中的存儲
#### 基本類型作為函數(shù)的參數(shù)
#### 復(fù)雜類型作為函數(shù)的參數(shù)
```javascript
// 下面代碼輸出的結(jié)果
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);
```
思考：
```javascript
//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);
```
## 內(nèi)置對象
JavaScript中的對象分為3種：內(nèi)置對象、瀏覽器對象朱沃、自定義對象
JavaScript 提供多個內(nèi)置對象：Math/Array/Number/String/Boolean...
對象只是帶有**屬性**和**方法**的特殊數(shù)據(jù)類型苞轿。
學(xué)習(xí)一個內(nèi)置對象的使用，只要學(xué)會其常用的成員的使用（通過查文檔學(xué)習(xí)）
可以通過MDN/W3C來查詢
內(nèi)置對象的方法很多为流，我們只需要知道內(nèi)置對象提供的常用方法呕屎，使用的時候查詢文檔。
### MDN
Mozilla 開發(fā)者網(wǎng)絡(luò)（MDN）提供有關(guān)開放網(wǎng)絡(luò)技術(shù)（Open Web）的信息敬察，包括 HTML秀睛、CSS 和萬維網(wǎng)及 HTML5 應(yīng)用的 API。
- [MDN](https://developer.mozilla.org/zh-CN/)
- 通過查詢MDN學(xué)習(xí)Math對象的random()方法的使用
### 如何學(xué)習(xí)一個方法莲祸？
1. 方法的功能
2. 參數(shù)的意義和**類型**
3. 返回值意義和**類型**
4. demo進(jìn)行測試
### Math對象
Math對象不是構(gòu)造函數(shù)蹂安，它具有數(shù)學(xué)常數(shù)和函數(shù)的屬性和方法，都是以靜態(tài)成員的方式提供
跟數(shù)學(xué)相關(guān)的運算來找Math中的成員（求絕對值锐帜，取整）
[Math](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Math)
演示：Math.PI田盈、Math.random()、Math.floor()/Math.ceil()缴阎、Math.round()允瞧、Math.abs()? 、Math.max()
```javascript
Math.PI? ? ? ? ? ? ? ? ? // 圓周率
Math.random()? ? ? ? ? // 生成隨機數(shù)
Math.floor()/Math.ceil()? ? // 向下取整/向上取整
Math.round()? ? ? ? ? ? // 取整蛮拔，四舍五入
Math.abs()? ? ? ? ? ? // 絕對值
Math.max()/Math.min()? ? ? // 求最大和最小值
Math.sin()/Math.cos()? ? ? // 正弦/余弦
Math.power()/Math.sqrt()? ? // 求指數(shù)次冪/求平方根
```
#### 案例
- 求10-20之間的隨機數(shù)
- 隨機生成顏色RGB
- 模擬實現(xiàn)max()/min()
### Date對象
創(chuàng)建 `Date` 實例用來處理日期和時間述暂。Date 對象基于1970年1月1日（世界標(biāo)準(zhǔn)時間）起的毫秒數(shù)。
~~~javascript
// 獲取當(dāng)前時間建炫，UTC世界時間畦韭，距1970年1月1日（世界標(biāo)準(zhǔn)時間）起的毫秒數(shù)
var now = new Date();
console.log(now.valueOf());? ? // 獲取距1970年1月1日（世界標(biāo)準(zhǔn)時間）起的毫秒數(shù)
Date構(gòu)造函數(shù)的參數(shù)
1. 毫秒數(shù) 1498099000356? ? ? new Date(1498099000356)
2. 日期格式字符串? '2015-5-1'? new Date('2015-5-1')
3. 年、月肛跌、日……? ? ? ? ? ? new Date(2015, 4, 1)? // 月份從0開始
~~~
- 獲取日期的毫秒形式
```javascript
var now = new Date();
// valueOf用于獲取對象的原始值
console.log(date.valueOf())
// HTML5中提供的方法艺配，有兼容性問題
var now = Date.now();
// 不支持HTML5的瀏覽器察郁，可以用下面這種方式
var now = + new Date();? ? ? ? ? // 調(diào)用 Date對象的valueOf()
```
- 日期格式化方法
```javascript
toString()? ? // 轉(zhuǎn)換成字符串
valueOf()? ? // 獲取毫秒值
// 下面格式化日期的方法，在不同瀏覽器可能表現(xiàn)不一致转唉，一般不用
toDateString()
toTimeString()
toLocaleDateString()
toLocaleTimeString()
```
- 獲取日期指定部分
```javascript
getTime()? ? ? ? // 返回毫秒數(shù)和valueOf()結(jié)果一樣皮钠，valueOf()內(nèi)部調(diào)用的getTime()
getMilliseconds()
getSeconds()? // 返回0-59
getMinutes()? // 返回0-59
getHours()? ? // 返回0-23
getDay()? ? ? // 返回星期幾 0周日? 6周6
getDate()? ? // 返回當(dāng)前月的第幾天
getMonth()? ? // 返回月份，***從0開始***
getFullYear() //返回4位的年份? 如 2016
```
#### 案例
- 寫一個函數(shù)酝掩，格式化日期對象鳞芙，返回yyyy-MM-dd HH:mm:ss的形式
```javascript
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;
}
```
- 計算時間差期虾，返回相差的天/時/分/秒
```javascript
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對象
- 創(chuàng)建數(shù)組對象的兩種方式
- 字面量方式
- new Array()
```javascript
// 1. 使用構(gòu)造函數(shù)創(chuàng)建數(shù)組對象
// 創(chuàng)建了一個空數(shù)組
var arr = new Array();
// 創(chuàng)建了一個數(shù)組原朝，里面存放了3個字符串
var arr = new Array('zs', 'ls', 'ww');
// 創(chuàng)建了一個數(shù)組，里面存放了4個數(shù)字
var arr = new Array(1, 2, 3, 4);
// 2. 使用字面量創(chuàng)建數(shù)組對象
var arr = [1, 2, 3];
// 獲取數(shù)組中元素的個數(shù)
console.log(arr.length);
```
- 檢測一個對象是否是數(shù)組
- instanceof
- Array.isArray()? ? HTML5中提供的方法镶苞，有兼容性問題
函數(shù)的參數(shù)喳坠，如果要求是一個數(shù)組的話，可以用這種方式來進(jìn)行判斷
- toString()/valueOf()
- toString()? ? 把數(shù)組轉(zhuǎn)換成字符串茂蚓，逗號分隔每一項
- valueOf()? ? ? ? 返回數(shù)組對象本身
- 數(shù)組常用方法
演示：push()壕鹉、shift()、unshift()聋涨、reverse()晾浴、sort()、splice()牍白、indexOf()
```javascript
// 1 棧操作(先進(jìn)后出)
push()
pop()? ? //取出數(shù)組中的最后一項脊凰，修改length屬性
// 2 隊列操作(先進(jìn)先出)
push()
shift()? ? ? //取出數(shù)組中的第一個元素，修改length屬性
unshift()? //在數(shù)組最前面插入項茂腥，返回數(shù)組的長度
// 3 排序方法
reverse()? //翻轉(zhuǎn)數(shù)組
sort();? ? //即使是數(shù)組sort也是根據(jù)字符狸涌，從小到大排序
// 帶參數(shù)的sort是如何實現(xiàn)的？
// 4 操作方法
concat()? //把參數(shù)拼接到當(dāng)前數(shù)組
slice()? ? //從當(dāng)前數(shù)組中截取一個新的數(shù)組最岗，不影響原來的數(shù)組帕胆，參數(shù)start從0開始,end從1開始
splice()? //刪除或替換當(dāng)前數(shù)組的某些項目，參數(shù)start, deleteCount, options(要替換的項目)
// 5 位置方法
indexOf()般渡、lastIndexOf()? //如果沒找到返回-1
// 6 迭代方法 不會修改原數(shù)組(可選)
every()懒豹、filter()、forEach()驯用、map()脸秽、some()
// 7 方法將數(shù)組的所有元素連接到一個字符串中。
join()
```
- 清空數(shù)組
```javascript
// 方式1 推薦
arr = [];
// 方式2
arr.length = 0;
// 方式3
arr.splice(0, arr.length);
```
#### 案例
- 將一個字符串?dāng)?shù)組輸出為|分割的形式晨汹，比如“劉備|張飛|關(guān)羽”豹储。使用兩種方式實現(xiàn)
```javascript
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('-'))
```
- 將一個字符串?dāng)?shù)組的元素的順序進(jìn)行反轉(zhuǎn)贷盲。["a", "b", "c", "d"] -> [ "d","c","b","a"]淘这。使用兩種種方式實現(xiàn)剥扣。提示：第i個和第length-i-1個進(jìn)行交換
```javascript
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());
```
- 工資的數(shù)組[1500, 1200, 2000, 2100, 1800],把工資超過2000的刪除
```javascript
// 方式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"]找到數(shù)組中每一個a出現(xiàn)的位置
```javascript
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);
```
- 編寫一個方法去掉一個數(shù)組的重復(fù)元素
```javascript
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));
```
### 基本包裝類型
為了方便操作基本數(shù)據(jù)類型，JavaScript還提供了三個特殊的引用類型：String/Number/Boolean
```javascript
// 下面代碼的問題铝穷？
// s1是基本類型钠怯，基本類型是沒有方法的
var s1 = 'zhangsan';
var s2 = s1.substring(5);
// 當(dāng)調(diào)用s1.substring(5)的時候，先把s1包裝成String類型的臨時對象曙聂，再調(diào)用substring方法晦炊，最后銷毀臨時對象, 相當(dāng)于：
var s1 = new String('zhangsan');
var s2 = s1.substring(5);
s1 = null;
```
```javascript
// 創(chuàng)建基本包裝類型的對象
var num = 18;? ? ? ? ? ? ? //數(shù)值，基本類型
var num = Number('18');? ? //類型轉(zhuǎn)換
var num = new Number(18);? //基本包裝類型宁脊，對象
// Number和Boolean基本包裝類型基本不用断国，使用的話可能會引起歧義。例如：
var b1 = new Boolean(false);
var b2 = b1 && true;? ? ? // 結(jié)果是什么
```
### String對象
- 字符串的不可變
```javascript
var str = 'abc';
str = 'hello';
// 當(dāng)重新給str賦值的時候榆苞，常量'abc'不會被修改稳衬，依然在內(nèi)存中
// 重新給字符串賦值，會重新在內(nèi)存中開辟空間坐漏，這個特點就是字符串的不可變
// 由于字符串的不可變薄疚，在大量拼接字符串的時候會有效率問題
```
- 創(chuàng)建字符串對象
```javascript
var str = new String('Hello World');
// 獲取字符串中字符的個數(shù)
console.log(str.length);
```
- 字符串對象的常用方法
字符串所有的方法，都不會修改字符串本身(字符串是不可變的)赊琳，操作完成會返回一個新的字符串
```javascript
// 1 字符方法
charAt()? ? ? //獲取指定位置處字符
charCodeAt()? //獲取指定位置處字符的ASCII碼
str[0]? ? ? ? //HTML5街夭，IE8+支持 和charAt()等效
// 2 字符串操作方法
concat()? ? ? ? ? //拼接字符串，等效于+躏筏，+更常用
slice()? ? ? ? ? //從start位置開始板丽，截取到end位置，end取不到
substring()? ? //從start位置開始寸士，截取到end位置檐什，end取不到
substr()? ? ? ? ? //從start位置開始，截取length個字符
// 3 位置方法
indexOf()? ? ? //返回指定內(nèi)容在元字符串中的位置
lastIndexOf()? //從后往前找弱卡，只找第一個匹配的
// 4 去除空白
trim()? ? ? ? //只能去除字符串前后的空白
// 5 大小寫轉(zhuǎn)換方法
to(Locale)UpperCase()? //轉(zhuǎn)換大寫
to(Locale)LowerCase()? //轉(zhuǎn)換小寫
// 6 其它
search()
replace()
split()
fromCharCode()
// String.fromCharCode(101, 102, 103);? //把ASCII碼轉(zhuǎn)換成字符串
```
#### 案例
- 截取字符串"我愛中華人民共和國"乃正，中的"中華"
```javascript
var s = "我愛中華人民共和國";
s = s.substr(2,2);
console.log(s);
```
- "abcoefoxyozzopp"查找字符串中所有o出現(xiàn)的位置
```javascript
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替換成!
```javascript
var s = 'abcoefoxyozzopp';
do {
s = s.replace('o', '');
} while (s.indexOf('o') > -1);
console.log(s);
console.log(s.replace(/o/ig, ''));
```
- 判斷一個字符串中出現(xiàn)次數(shù)最多的字符，統(tǒng)計這個次數(shù)
```javascript
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);
```
#### 作業(yè)
```
給定一個字符串如：“abaasdffggghhjjkkgfddsssss3444343”問題如下：
1婶博、?字符串的長度
2瓮具、?取出指定位置的字符，如：0,3,5,9等
3凡人、?查找指定字符是否在以上字符串中存在名党，如：i，c?挠轴，b等
4传睹、?替換指定的字符，如：g替換為22,ss替換為b等操作方法
5岸晦、?截取指定開始位置到結(jié)束位置的字符串欧啤，如：取得1-5的字符串
6睛藻、?找出以上字符串中出現(xiàn)次數(shù)最多的字符和出現(xiàn)的次數(shù)
7、?遍歷字符串邢隧，并將遍歷出的字符兩頭添加符號“@”輸出至當(dāng)前的文檔頁面店印。
```
