JavaScript基礎(chǔ)

學(xué)習(xí)目標(biāo):

掌握編程的基本思維
掌握編程的基本語法

JavaScript基礎(chǔ)

HTML和CSS

網(wǎng)頁镀琉、網(wǎng)站和應(yīng)用程序

網(wǎng)頁：單獨(dú)的一個(gè)頁面
網(wǎng)站：一些列相關(guān)的頁面組成到一起
應(yīng)用程序：可以和用戶產(chǎn)生交互，并實(shí)現(xiàn)某種功能压昼。

演示JavaScript的強(qiáng)大

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è)計(jì)的晕窑，目的之一就是“看上去像Java”，因此語法上有類似之處仇味，一些名稱和命名規(guī)范也借自Java。JavaScript與Java名稱上的近似雹顺，是當(dāng)時(shí)Netscape為了營銷考慮與Sun微系統(tǒng)達(dá)成協(xié)議的結(jié)果丹墨。Java和JavaScript的關(guān)系就像張雨和張雨生的關(guān)系，只是名字很像嬉愧。

? Java 服務(wù)器端的編程語言

? JavaScript 運(yùn)行在客戶端(瀏覽器)的編程語言

JavaScript是一種運(yùn)行在客戶端 的腳本語言
JavaScript的解釋器被稱為JavaScript引擎贩挣，為瀏覽器的一部分，廣泛用于客戶端的腳本語言，最早是在HTML（標(biāo)準(zhǔn)通用標(biāo)記語言下的一個(gè)應(yīng)用）網(wǎng)頁上使用，用來給HTML網(wǎng)頁增加動(dòng)態(tài)功能。

JavaScript最初的目的

演示：http://baixiu.uieee.com/admin/login.php
最初的目的是為了處理表單的驗(yàn)證操作济锄。

JavaScript現(xiàn)在的意義(應(yīng)用場景)

JavaScript 發(fā)展到現(xiàn)在幾乎無所不能。

網(wǎng)頁特效
服務(wù)端開發(fā)(Node.js)
命令行工具(Node.js)
桌面程序(Electron)
App(Cordova)
控制硬件-物聯(lián)網(wǎng)(Ruff)
游戲開發(fā)(cocos2d-js)

JavaScript和HTML见咒、CSS的區(qū)別

HTML：提供網(wǎng)頁的結(jié)構(gòu)，提供網(wǎng)頁中的內(nèi)容
CSS: 用來美化網(wǎng)頁
JavaScript: 可以用來控制網(wǎng)頁內(nèi)容挂疆，給網(wǎng)頁增加動(dòng)態(tài)的效果

JavaScript的組成

ECMAScript - JavaScript的核心

ECMA 歐洲計(jì)算機(jī)制造聯(lián)合會(huì)

網(wǎng)景：JavaScript

微軟：JScript

定義了JavaScript的語法規(guī)范

JavaScript的核心改览，描述了語言的基本語法和數(shù)據(jù)類型，ECMAScript是一套標(biāo)準(zhǔn)缤言，定義了一種語言的標(biāo)準(zhǔn)與具體實(shí)現(xiàn)無關(guān)

BOM - 瀏覽器對(duì)象模型

一套操作瀏覽器功能的API

通過BOM可以操作瀏覽器窗口宝当，比如：彈出框、控制瀏覽器跳轉(zhuǎn)墨闲、獲取分辨率等

DOM - 文檔對(duì)象模型

一套操作頁面元素的API

DOM可以把HTML看做是文檔樹今妄，通過DOM提供的API可以對(duì)樹上的節(jié)點(diǎn)進(jìn)行操作

JavaScript初體驗(yàn)

CSS：行內(nèi)樣式、嵌入樣式鸳碧、外部樣式

JavaScript的書寫位置

寫在行內(nèi)

<input type="button" value="按鈕" onclick="alert('Hello World')" />

寫在script標(biāo)簽中

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

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

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

注意點(diǎn)

引用外部js文件的script標(biāo)簽中不可以寫JavaScript代碼

計(jì)算機(jī)組成

軟件

應(yīng)用軟件：瀏覽器(Chrome/IE/Firefox)犬性、QQ瞻离、Sublime、Word
系統(tǒng)軟件：Windows乒裆、Linux套利、mac OSX

硬件

三大件：CPU、內(nèi)存鹤耍、硬盤 -- 主板
輸入設(shè)備：鼠標(biāo)肉迫、鍵盤、手寫板稿黄、攝像頭等
輸出設(shè)備：顯示器喊衫、打印機(jī)、投影儀等

變量

什么是變量

什么是變量

變量是計(jì)算機(jī)內(nèi)存中存儲(chǔ)數(shù)據(jù)的標(biāo)識(shí)符杆怕，根據(jù)變量名稱可以獲取到內(nèi)存中存儲(chǔ)的數(shù)據(jù)
為什么要使用變量

使用變量可以方便的獲取或者修改內(nèi)存中的數(shù)據(jù)

如何使用變量

var聲明變量

var age;

變量的賦值

var age;
age = 18;

同時(shí)聲明多個(gè)變量

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

同時(shí)聲明多個(gè)變量并賦值

var age = 10, name = 'zs';

變量在內(nèi)存中的存儲(chǔ)

var age = 18;

[圖片上傳失敗...(image-d5872c-1584583393008)]

變量的命名規(guī)則和規(guī)范

規(guī)則 - 必須遵守的族购，不遵守會(huì)報(bào)錯(cuò)
- 由字母、數(shù)字陵珍、下劃線寝杖、$符號(hào)組成，不能以數(shù)字開頭
- 不能是關(guān)鍵字和保留字互纯，例如：for瑟幕、while。
- 區(qū)分大小寫
規(guī)范 - 建議遵守的，不遵守不會(huì)報(bào)錯(cuò)
- 變量名必須有意義
- 遵守駝峰命名法只盹。首字母小寫亿卤，后面單詞的首字母需要大寫。例如：userName鹿霸、userPassword

下面哪些變量名不合法

a     
1
age18
18age
name
$name
_sex
&sex
theworld  theWorld

案例

交換兩個(gè)變量的值
不使用臨時(shí)變量排吴，交換兩個(gè)數(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ì)算時(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;   // 對(duì)應(yīng)十進(jìn)制的7
    var num2 = 019;  // 對(duì)應(yīng)十進(jìn)制的19
    var num3 = 08;   // 對(duì)應(yīng)十進(jìn)制的8
    數(shù)字序列范圍：0~7
    如果字面值中的數(shù)值超出了范圍，那么前導(dǎo)零將被忽略睦袖，后面的數(shù)值將被當(dāng)作十進(jìn)制數(shù)值解析

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

浮點(diǎn)數(shù)
    var n = 5e-324;   // 科學(xué)計(jì)數(shù)法  5乘以10的-324次方  
浮點(diǎn)數(shù)值的最高精度是 17 位小數(shù)珊肃，但在進(jìn)行算術(shù)計(jì)算時(shí)其精確度遠(yuǎn)遠(yuǎn)不如整數(shù)
   var result = 0.1 + 0.2;    // 結(jié)果不是 0.3，而是：0.30000000000000004
   console.log(0.07 * 100);
   不要判斷兩個(gè)浮點(diǎn)數(shù)是否相等

數(shù)值范圍

最小值：Number.MIN_VALUE馅笙，這個(gè)值為： 5e-324
最大值：Number.MAX_VALUE伦乔，這個(gè)值為： 1.7976931348623157e+308
無窮大：Infinity
無窮小：-Infinity

數(shù)值判斷
- NaN：not a number
  - NaN 與任何值都不相等董习，包括他本身
- isNaN: is not a number

String類型

'abc' "abc"

字符串字面量

'程序猿'烈和，'程序媛', "黑馬程序猿"

?

思考：如何打印以下字符串。
我是一個(gè)"正直"的人
我很喜歡"黑馬'程序猿'"
轉(zhuǎn)義符

字符串長度

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. 兩邊只要有一個(gè)是字符串皿淋，那么+就是字符串拼接功能
2. 兩邊如果都是數(shù)字招刹，那么就是算術(shù)功能。

Boolean類型

Boolean字面量： true和false窝趣，區(qū)分大小寫
計(jì)算機(jī)內(nèi)部存儲(chǔ)：true為1疯暑，false為0

Undefined和Null

undefined表示一個(gè)聲明了沒有賦值的變量，變量只聲明的時(shí)候值默認(rèn)是undefined
null表示一個(gè)空哑舒，變量的值如果想為null妇拯，必須手動(dòng)設(shè)置

復(fù)雜數(shù)據(jù)類型

? Object

獲取變量的類型

typeof

var age = 18;
console.log(typeof age);  // 'number'

字面量

在源代碼中一個(gè)固定值的表示法。

數(shù)值字面量：8, 9, 10

字符串字面量：'黑馬程序員', "大前端"

布爾字面量：true散址，false

注釋

單行注釋

用來描述下面一個(gè)或多行代碼的作用

// 這是一個(gè)變量
var name = 'hm';

多行注釋

用來注釋多條代碼

/*
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()吏祸，這個(gè)時(shí)候可以使用String()对蒲。比如：undefined和null

拼接字符串方式

num + ""钩蚊，當(dāng) + 兩邊一個(gè)操作符是字符串類型，一個(gè)操作符是其它類型的時(shí)候蹈矮，會(huì)先把其它類型轉(zhuǎn)換成字符串再進(jìn)行字符串拼接砰逻，返回字符串

轉(zhuǎn)換成數(shù)值類型

Number()

Number()可以把任意值轉(zhuǎn)換成數(shù)值，如果要轉(zhuǎn)換的字符串中有一個(gè)不是數(shù)值的字符泛鸟，返回NaN

parseInt()

var num1 = parseInt("12.3abc");  // 返回12蝠咆，如果第一個(gè)字符是數(shù)字會(huì)解析知道遇到非數(shù)字結(jié)束
var num2 = parseInt("abc123");   // 返回NaN，如果第一個(gè)字符不是數(shù)字或者符號(hào)就返回NaN

parseFloat()

parseFloat()把字符串轉(zhuǎn)換成浮點(diǎn)數(shù)
parseFloat()和parseInt非常相似北滥，不同之處在與
  parseFloat會(huì)解析第一個(gè). 遇到第二個(gè).或者非數(shù)字結(jié)束
  如果解析的內(nèi)容里只有整數(shù)刚操，解析成整數(shù)

+，-0等運(yùn)算

var str = '500';
console.log(+str);        // 取正
console.log(-str);        // 取負(fù)
console.log(str - 0);

轉(zhuǎn)換成布爾類型

Boolean()

0 ''(空字符串) null undefined NaN 會(huì)轉(zhuǎn)換成false 其它都會(huì)轉(zhuǎn)換成true

操作符

運(yùn)算符 operator

5 + 6

表達(dá)式組成操作數(shù)和操作符再芋，會(huì)有一個(gè)結(jié)果

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

+ - * / %

一元運(yùn)算符

一元運(yùn)算符：只有一個(gè)操作數(shù)的運(yùn)算符

5 + 6 兩個(gè)操作數(shù)的運(yùn)算符二元運(yùn)算符

++ 自身加1

-- 自身減1

前置++

var num1 = 5;
++ num1; 

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

邏輯運(yùn)算符(布爾運(yùn)算符)

&& 與 兩個(gè)操作數(shù)同時(shí)為true菊霜，結(jié)果為true，否則都是false
|| 或 兩個(gè)操作數(shù)有一個(gè)為true济赎，結(jié)果為true鉴逞，否則為false
!  非  取反

關(guān)系運(yùn)算符(比較運(yùn)算符)

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

==與===的區(qū)別：==只進(jìn)行值得比較，===類型和值同時(shí)相等司训，則相等

var result = '55' == 55;    // true
var result = '55' === 55;   // false 值相等构捡，類型不相等
var result = 55 === 55;     // true

賦值運(yùn)算符

= += -= *= /= %=

例如：
var num = 0;
num += 5;   //相當(dāng)于  num = num + 5;

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

優(yōu)先級(jí)從高到底
    1. ()  優(yōu)先級(jí)最高
    2. 一元運(yùn)算符  ++   --   !
    3. 算數(shù)運(yùn)算符  先*  /  %   后 +   -
    4. 關(guān)系運(yùn)算符  >   >=   <   <=
    5. 相等運(yùn)算符   ==   !=    ===    !==
    6. 邏輯運(yùn)算符 先&&   后||
    7. 賦值運(yùn)算符

// 練習(xí)1：
4 >= 6 || '人' != '阿凡達(dá)' && !(12 * 2 == 144) && true
// 練習(xí)2：
var num = 10;
5 == num / 2 && (2 + 2 * num).toString() === '22'

表達(dá)式和語句

表達(dá)式

一個(gè)表達(dá)式可以產(chǎn)生一個(gè)值，有可能是運(yùn)算豁遭、函數(shù)調(diào)用叭喜、有可能是字面量。表達(dá)式可以放在任何需要值的地方蓖谢。

語句

語句可以理解為一個(gè)行為，循環(huán)語句和判斷語句就是典型的語句譬涡。一個(gè)程序有很多個(gè)語句組成闪幽，一般情況下;分割一個(gè)一個(gè)的語句

流程控制

程序的三種基本結(jié)構(gòu)

順序結(jié)構(gòu)

從上到下執(zhí)行的代碼就是順序結(jié)構(gòu)

程序默認(rèn)就是由上到下順序執(zhí)行的

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

根據(jù)不同的情況，執(zhí)行對(duì)應(yīng)代碼

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

循環(huán)結(jié)構(gòu)：重復(fù)做一件事情

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

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í)行語句
}

案例：
求兩個(gè)數(shù)的最大數(shù)
判斷一個(gè)數(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è)：
判斷一個(gè)年份是閏年還是平年
閏年：能被4整除盯腌，但不能被100整除的年份或者能被400整除的年份
判斷一個(gè)人的年齡是否滿18歲(是否成年)

三元運(yùn)算符

表達(dá)式1 ? 表達(dá)式2 : 表達(dá)式3
是對(duì)if……else語句的一種簡化寫法

案例：
是否年滿18歲
從兩個(gè)數(shù)中找最大值

switch語句

語法格式:

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

break可以省略，如果省略陨瘩，代碼會(huì)繼續(xù)執(zhí)行下一個(gè)case
switch 語句在比較值時(shí)使用的是全等操作符, 因此不會(huì)發(fā)生類型轉(zhuǎn)換（例如腕够，字符串'10' 不等于數(shù)值 10）

案例：
顯示星期幾
素質(zhì)教育（把分?jǐn)?shù)變成ABCDE）千萬不要寫100個(gè)case喲

布爾類型的隱式轉(zhuǎn)換

流程控制語句會(huì)把后面的值隱式轉(zhuǎn)換成布爾類型

轉(zhuǎn)換為true   非空字符串  非0數(shù)字  true 任何對(duì)象
轉(zhuǎn)換成false  空字符串  0  false  null  undefined

// 結(jié)果是什么？
var a = !!'123';

案例

var message;
// 會(huì)自動(dòng)把message轉(zhuǎn)換成false
if (message) {     
  // todo...
}

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

在javascript中舌劳，循環(huán)語句有三種帚湘，while、do..while甚淡、for循環(huán)大诸。

while語句

基本語法：

// 當(dāng)循環(huán)條件為true時(shí)，執(zhí)行循環(huán)體，
// 當(dāng)循環(huán)條件為false時(shí)资柔，結(jié)束循環(huán)焙贷。
while (循環(huán)條件) {
  //循環(huán)體
}

代碼示例：

// 計(jì)算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的特點(diǎn)是不管條件成不成立，都會(huì)執(zhí)行一次羹与。

基礎(chǔ)語法：

do {
  // 循環(huán)體;
} while (循環(huán)條件);

代碼示例：

// 初始化變量
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ù)確定的時(shí)候比較方便

for循環(huán)語法：

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

執(zhí)行順序：1243 ---- 243 -----243(直到循環(huán)條件變成false)

初始化表達(dá)式
判斷表達(dá)式
自增表達(dá)式
循環(huán)體

案例：

打印1-100之間所有數(shù)
求1-100之間所有數(shù)的和
求1-100之間所有數(shù)的平均值
求1-100之間所有偶數(shù)的和
同時(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ù)的和
計(jì)算1-100之間能3整除的數(shù)的和
計(jì)算1-100之間不能被7整除的數(shù)的和
// 講解思路妄辩。如果不會(huì)寫程序惑灵，可以先把數(shù)學(xué)公式準(zhǔn)備好
本金10000元存入銀行，年利率是千分之三眼耀，每過1年英支，將本金和利息相加作為新的本金。計(jì)算5年后哮伟，獲得的本金是多少干花？
有個(gè)人想知道，一年之內(nèi)一對(duì)兔子能繁殖多少對(duì)楞黄？于是就筑了一道圍墻把一對(duì)兔子關(guān)在里面池凄。已知一對(duì)兔子每個(gè)月可以生一對(duì)小兔子，而一對(duì)兔子從出生后第3個(gè)月起每月生一對(duì)小兔子鬼廓。假如一年內(nèi)沒有發(fā)生死亡現(xiàn)象肿仑，那么，一對(duì)兔子一年內(nèi)（12個(gè)月）能繁殖成多少對(duì)碎税？（兔子的規(guī)律為數(shù)列尤慰，1，1雷蹂，2伟端，3，5萎河，8荔泳，13蕉饼，21）

continue和break

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

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

案例：

求整數(shù)1～100的累加值，但要求碰到個(gè)位為3的數(shù)則停止累加
求整數(shù)1～100的累加值支子，但要求跳過所有個(gè)位為3的數(shù)

作業(yè)：

求1-100之間不能被7整除的整數(shù)的和（用continue）
求200-300之間所有的奇數(shù)的和（用continue）
求200-300之間第一個(gè)能被7整數(shù)的數(shù)（break）

調(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)行到這一行就會(huì)停住值朋，然后你可以一步一步往下調(diào)試叹侄，調(diào)試過程中可以看各個(gè)變量當(dāng)前的值，出錯(cuò)的話昨登，調(diào)試到出錯(cuò)的代碼行即顯示錯(cuò)誤趾代，停下。

調(diào)試步驟

瀏覽器中按F12-->sources-->找到需要調(diào)試的文件-->在程序的某一行設(shè)置斷點(diǎn)

調(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á)式也會(huì)執(zhí)行囤采。

代碼調(diào)試的能力非常重要，只有學(xué)會(huì)了代碼調(diào)試惩淳，才能學(xué)會(huì)自己解決bug的能力。初學(xué)者不要覺得調(diào)試代碼麻煩就不去調(diào)試乓搬，知識(shí)點(diǎn)花點(diǎn)功夫肯定學(xué)的會(huì)思犁，但是代碼調(diào)試這個(gè)東西，自己不去練进肯，永遠(yuǎn)都學(xué)不會(huì)激蹲。
今天學(xué)的代碼調(diào)試非常的簡單，只要求同學(xué)們記住代碼調(diào)試的這幾個(gè)按鈕的作用即可江掩，后面還會(huì)學(xué)到很多的代碼調(diào)試技巧学辱。

數(shù)組

為什么要學(xué)習(xí)數(shù)組

之前學(xué)習(xí)的數(shù)據(jù)類型乘瓤，只能存儲(chǔ)一個(gè)值(比如：Number/String。我們想存儲(chǔ)班級(jí)中所有學(xué)生的姓名策泣，此時(shí)該如何存儲(chǔ)衙傀？

數(shù)組的概念

所謂數(shù)組，就是將多個(gè)元素（通常是同一類型）按一定順序排列放到一個(gè)集合中萨咕，那么這個(gè)集合我們就稱之為數(shù)組统抬。

數(shù)組的定義

數(shù)組是一個(gè)有序的列表，可以在數(shù)組中存放任意的數(shù)據(jù)危队，并且數(shù)組的長度可以動(dòng)態(tài)的調(diào)整聪建。

通過數(shù)組字面量創(chuàng)建數(shù)組

// 創(chuàng)建一個(gè)空數(shù)組
var arr1 = []; 
// 創(chuàng)建一個(gè)包含3個(gè)數(shù)值的數(shù)組，多個(gè)數(shù)組項(xiàng)以逗號(hào)隔開
var arr2 = [1, 3, 4]; 
// 創(chuàng)建一個(gè)包含2個(gè)字符串的數(shù)組
var arr3 = ['a', 'c']; 

// 可以通過數(shù)組的length屬性獲取數(shù)組的長度
console.log(arr3.length);
// 可以設(shè)置length屬性改變數(shù)組中元素的個(gè)數(shù)
arr3.length = 0;

獲取數(shù)組元素

數(shù)組的取值

// 格式：數(shù)組名[下標(biāo)]   下標(biāo)又稱索引
// 功能：獲取數(shù)組對(duì)應(yīng)下標(biāo)的那個(gè)值茫陆，如果下標(biāo)不存在金麸，則返回undefined。
var arr = ['red',, 'green', 'blue'];
arr[0]; // red
arr[2]; // blue
arr[3]; // 這個(gè)數(shù)組的最大下標(biāo)為2,因此返回undefined

遍歷數(shù)組

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

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

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

數(shù)組中新增元素

數(shù)組的賦值

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

案例

求一組數(shù)中的所有數(shù)的和和平均值
求一組數(shù)中的最大值和最小值讨盒，以及所在位置
將字符串?dāng)?shù)組用|或其他符號(hào)分割
要求將數(shù)組中的0項(xiàng)去掉解取，將不為0的值存入一個(gè)新的數(shù)組，生成新的數(shù)組
翻轉(zhuǎn)數(shù)組
冒泡排序返顺，從小到大

函數(shù)

為什么要有函數(shù)

如果要在多個(gè)地方求1-100之間所有數(shù)的和禀苦，應(yīng)該怎么做？

什么是函數(shù)

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

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

函數(shù)的定義

函數(shù)聲明

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

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

var fn = function() {
  // 函數(shù)體
}

特點(diǎn)：

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

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

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

函數(shù)名();

特點(diǎn)：

函數(shù)體只有在調(diào)用的時(shí)候才會(huì)執(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ù)

為什么要有參數(shù)

function getSum() {
  var sum = 0;
  for (var i = 1; i <= 100; i++) {
    sum += i;
  }
  console.log();
}

// 雖然上面代碼可以重復(fù)調(diào)用倡缠，但是只能計(jì)算1-100之間的值
// 如果想要計(jì)算n-m之間所有數(shù)的和哨免，應(yīng)該怎么辦呢？

語法：

// 函數(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ù)的功能更加靈活桅滋，有些值是固定不了的慧耍，對(duì)于這些固定不了的值。我們可以給函數(shù)設(shè)置參數(shù)丐谋。這個(gè)參數(shù)沒有具體的值芍碧，僅僅起到一個(gè)占位置的作用，我們通常稱之為形式參數(shù)号俐，也叫形參泌豆。
2. 實(shí)際參數(shù)：如果函數(shù)在聲明時(shí)，設(shè)置了形參吏饿，那么在函數(shù)調(diào)用的時(shí)候就需要傳入對(duì)應(yīng)的參數(shù)踪危，我們把傳入的參數(shù)叫做實(shí)際參數(shù)，也叫實(shí)參猪落。

var x = 5, y = 6;
fn(x,y); 
function fn(a, b) {
  console.log(a + b);
}
//x,y實(shí)參贞远，有具體的值。函數(shù)執(zhí)行的時(shí)候會(huì)把x,y復(fù)制一份給函數(shù)內(nèi)部的a和b笨忌，函數(shù)內(nèi)部的值是復(fù)制的新值蓝仲，無法修改外部的x,y

案例

求1-n之間所有數(shù)的和
求n-m之間所有數(shù)額和
圓的面積
求2個(gè)數(shù)中的最大值
求3個(gè)數(shù)中的最大值
判斷一個(gè)數(shù)是否是素?cái)?shù)

函數(shù)的返回值

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

返回值語法：

//聲明一個(gè)帶返回值的函數(shù)
function 函數(shù)名(形參1, 形參2, 形參...){
  //函數(shù)體
  return 返回值;
}

//可以通過變量來接收這個(gè)返回值
var 變量 = 函數(shù)名(實(shí)參1, 實(shí)參2, 實(shí)參3);

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

返回值詳解：
如果函數(shù)沒有顯示的使用 return語句维费，那么函數(shù)有默認(rèn)的返回值：undefined
如果函數(shù)使用 return語句果元，那么跟再return后面的值，就成了函數(shù)的返回值
如果函數(shù)使用 return語句犀盟，但是return后面沒有任何值噪漾，那么函數(shù)的返回值也是：undefined
函數(shù)使用return語句后，這個(gè)函數(shù)會(huì)在執(zhí)行完 return 語句之后停止并立即退出且蓬，也就是說return后面的所有其他代碼都不會(huì)再執(zhí)行。

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

案例

求階乘
求1!+2!+3!+....+n!
求一組數(shù)中的最大值
求一組數(shù)中的最小值

arguments的使用

JavaScript中诈胜，arguments對(duì)象是比較特別的一個(gè)對(duì)象，實(shí)際上是當(dāng)前函數(shù)的一個(gè)內(nèi)置屬性冯事。也就是說所有函數(shù)都內(nèi)置了一個(gè)arguments對(duì)象焦匈，arguments對(duì)象中存儲(chǔ)了傳遞的所有的實(shí)參。arguments是一個(gè)偽數(shù)組昵仅，因此及可以進(jìn)行遍歷

案例

求任意個(gè)數(shù)的最大值
求任意個(gè)數(shù)的和

案例

求斐波那契數(shù)列Fibonacci中的第n個(gè)數(shù)是多少缓熟？      1 1 2 3 5 8 13 21...
翻轉(zhuǎn)數(shù)組，返回一個(gè)新數(shù)組
對(duì)數(shù)組排序摔笤，從小到大
輸入一個(gè)年份够滑，判斷是否是閏年[閏年：能被4整數(shù)并且不能被100整數(shù)，或者能被400整數(shù)]
輸入某年某月某日吕世，判斷這一天是這一年的第幾天彰触？

函數(shù)其它

匿名函數(shù)

匿名函數(shù)：沒有名字的函數(shù)

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

將匿名函數(shù)賦值給一個(gè)變量，這樣就可以通過變量進(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í)行

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

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

function fn() {}
console.log(typeof fn);

函數(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)();

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

作用域

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

全局變量和局部變量

全局變量

?在任何地方都可以訪問到的變量就是全局變量味廊，對(duì)應(yīng)全局作用域
局部變量

?只在固定的代碼片段內(nèi)可訪問到的變量，最常見的例如函數(shù)內(nèi)部尝抖。對(duì)應(yīng)局部作用域(函數(shù)作用域)

不使用var聲明的變量是全局變量毡们，不推薦使用。
變量退出作用域之后會(huì)銷毀昧辽，全局變量關(guān)閉網(wǎng)頁或?yàn)g覽器才會(huì)銷毀

塊級(jí)作用域

任何一對(duì)花括號(hào)（｛和｝）中的語句集都屬于一個(gè)塊衙熔，在這之中定義的所有變量在代碼塊外都是不可見的，我們稱之為塊級(jí)作用域搅荞。
在es5之前沒有塊級(jí)作用域的的概念,只有函數(shù)作用域红氯，現(xiàn)階段可以認(rèn)為JavaScript沒有塊級(jí)作用域

詞法作用域

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

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

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

var num = 123;
function foo() {
  console.log( num );
}
foo();

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

作用域鏈

只有函數(shù)可以制造作用域結(jié)構(gòu)茉贡， 那么只要是代碼塞栅，就至少有一個(gè)作用域, 即全局作用域。凡是代碼中有函數(shù)腔丧，那么這個(gè)函數(shù)就構(gòu)成另一個(gè)作用域放椰。如果函數(shù)中還有函數(shù)作烟，那么在這個(gè)作用域中就又可以誕生一個(gè)作用域。

將這樣的所有的作用域列出來砾医，可以有一個(gè)結(jié)構(gòu): 函數(shù)內(nèi)指向函數(shù)外的鏈?zhǔn)浇Y(jié)構(gòu)拿撩。就稱作作用域鏈。

// 案例1：
function f1() {
    function f2() {
    }
}

var num = 456;
function f3() {
    function f4() {    
    }
}

[圖片上傳失敗...(image-73b2c3-1584583393008)]

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

[圖片上傳失敗...(image-c2aa20-1584583393008)]

預(yù)解析

JavaScript代碼的執(zhí)行是由瀏覽器中的JavaScript解析器來執(zhí)行的如蚜。JavaScript解析器執(zhí)行JavaScript代碼的時(shí)候压恒，分為兩個(gè)過程：預(yù)解析過程和代碼執(zhí)行過程

預(yù)解析過程：

把變量的聲明提升到當(dāng)前作用域的最前面，只會(huì)提升聲明错邦，不會(huì)提升賦值探赫。
把函數(shù)的聲明提升到當(dāng)前作用域的最前面，只會(huì)提升聲明兴猩，不會(huì)提升調(diào)用期吓。
先提升var，在提升function

JavaScript的執(zhí)行過程

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í)候讨勤，變量的聲明會(huì)被提升到作用域的最上面，變量的賦值不會(huì)提升晨另。
函數(shù)提升

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

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

對(duì)象

為什么要有對(duì)象

function printPerson(name, age, sex....) {
}
// 函數(shù)的參數(shù)如果特別多的話刨晴，可以使用對(duì)象簡化
function printPerson(person) {
  console.log(person.name);
  ……
}

什么是對(duì)象

現(xiàn)實(shí)生活中：萬物皆對(duì)象，對(duì)象是一個(gè)具體的事物路翻，一個(gè)具體的事物就會(huì)有行為和特征狈癞。
舉例： 一部車，一個(gè)手機(jī)
車是一類事物茂契，門口停的那輛車才是對(duì)象
    特征：紅色蝶桶、四個(gè)輪子
    行為：駕駛、剎車

JavaScript中的對(duì)象

JavaScript中的對(duì)象其實(shí)就是生活中對(duì)象的一個(gè)抽象
JavaScript的對(duì)象是無序?qū)傩缘募稀?    其屬性可以包含基本值掉冶、對(duì)象或函數(shù)真竖。對(duì)象就是一組沒有順序的值。我們可以把JavaScript中的對(duì)象想象成鍵值對(duì)厌小，其中值可以是數(shù)據(jù)和函數(shù)恢共。
對(duì)象的行為和特征
    特征---屬性
    行為---方法

事物的特征在對(duì)象中用屬性來表示。
事物的行為在對(duì)象中用方法來表示璧亚。

對(duì)象字面量

字面量：11 'abc' true [] {}等

var o = {
  name: 'zs,
  age: 18,
  sex: true,
  sayHi: function () {
    console.log(this.name);
  }
};

思考：

如何把學(xué)生對(duì)象讨韭、老師對(duì)象、英雄對(duì)象改寫成字面量的方式

對(duì)象創(chuàng)建方式

對(duì)象字面量

var o = {
  name: 'zs',
  age: 18,
  sex: true,
  sayHi: function () {
    console.log(this.name);
  }
};

new Object()創(chuàng)建對(duì)象

var person = new Object();
  person.name = 'lisi';
  person.age = 35;
  person.job = 'actor';
  person.sayHi = function(){
  console.log('Hello,everyBody');
}

工廠函數(shù)創(chuàng)建對(duì)象

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

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

屬性和方法

如果一個(gè)變量屬于一個(gè)對(duì)象所有，那么該變量就可以稱之為該對(duì)象的一個(gè)屬性拐袜，屬性一般是名詞吉嚣，用來描述事物的特征
如果一個(gè)函數(shù)屬于一個(gè)對(duì)象所有，那么該函數(shù)就可以稱之為該對(duì)象的一個(gè)方法蹬铺，方法是動(dòng)詞，描述事物的行為和功能

new關(guān)鍵字

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

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

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

new會(huì)在內(nèi)存中創(chuàng)建一個(gè)新的空對(duì)象
new 會(huì)讓this指向這個(gè)新的對(duì)象
執(zhí)行構(gòu)造函數(shù)  目的：給這個(gè)新對(duì)象加屬性和方法
new會(huì)返回這個(gè)新對(duì)象

this詳解

JavaScript中的this指向問題嗜侮，有時(shí)候會(huì)讓人難以捉摸等曼，隨著學(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è)對(duì)象的方法，被該對(duì)象所調(diào)用箍鼓，那么this指向的是該對(duì)象
    4. 構(gòu)造函數(shù)中的this其實(shí)是一個(gè)隱式對(duì)象，類似一個(gè)初始化的模型呵曹，所有方法和屬性都掛載到了這個(gè)隱式對(duì)象身上款咖，后續(xù)通過new關(guān)鍵字來調(diào)用，從而實(shí)現(xiàn)實(shí)例化

對(duì)象的使用

遍歷對(duì)象的屬性

通過for..in語法可以遍歷一個(gè)對(duì)象

var obj = {};
for (var i = 0; i < 10; i++) {
  obj[i] = i * 2;
}
for(var key in obj) {
  console.log(key + "==" + obj[key]);
}

刪除對(duì)象的屬性

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ù)類型，在存儲(chǔ)時(shí)跨新，變量中存儲(chǔ)的是值本身富腊，因此叫做值類型。

引用類型：復(fù)雜數(shù)據(jù)類型玻蝌，在存儲(chǔ)是蟹肘，變量中存儲(chǔ)的僅僅是地址（引用），因此叫做引用數(shù)據(jù)類型俯树。

堆和棧

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

注意：JavaScript中沒有堆和棧的概念巢掺，此處我們用堆和棧來講解句伶，目的方便理解和方便以后的學(xué)習(xí)。

基本類型在內(nèi)存中的存儲(chǔ)

復(fù)雜類型在內(nèi)存中的存儲(chǔ)

基本類型作為函數(shù)的參數(shù)

復(fù)雜類型作為函數(shù)的參數(shù)

// 下面代碼輸出的結(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);

思考：

//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)置對(duì)象

JavaScript中的對(duì)象分為3種：內(nèi)置對(duì)象陆淀、瀏覽器對(duì)象考余、自定義對(duì)象

JavaScript 提供多個(gè)內(nèi)置對(duì)象：Math/Array/Number/String/Boolean...

對(duì)象只是帶有屬性和方法的特殊數(shù)據(jù)類型。

學(xué)習(xí)一個(gè)內(nèi)置對(duì)象的使用轧苫，只要學(xué)會(huì)其常用的成員的使用（通過查文檔學(xué)習(xí)）

可以通過MDN/W3C來查詢

內(nèi)置對(duì)象的方法很多楚堤，我們只需要知道內(nèi)置對(duì)象提供的常用方法，使用的時(shí)候查詢文檔含懊。

MDN

Mozilla 開發(fā)者網(wǎng)絡(luò)（MDN）提供有關(guān)開放網(wǎng)絡(luò)技術(shù)（Open Web）的信息身冬，包括 HTML、CSS 和萬維網(wǎng)及 HTML5 應(yīng)用的 API绢要。

MDN
通過查詢MDN學(xué)習(xí)Math對(duì)象的random()方法的使用

如何學(xué)習(xí)一個(gè)方法吏恭？

方法的功能
參數(shù)的意義和類型
返回值意義和類型
demo進(jìn)行測試

Math對(duì)象

Math對(duì)象不是構(gòu)造函數(shù)，它具有數(shù)學(xué)常數(shù)和函數(shù)的屬性和方法重罪，都是以靜態(tài)成員的方式提供

跟數(shù)學(xué)相關(guān)的運(yùn)算來找Math中的成員（求絕對(duì)值樱哼，取整）

Math

演示：Math.PI、Math.random()剿配、Math.floor()/Math.ceil()搅幅、Math.round()、Math.abs() 呼胚、Math.max()

Math.PI                     // 圓周率
Math.random()               // 生成隨機(jī)數(shù)
Math.floor()/Math.ceil()     // 向下取整/向上取整
Math.round()                // 取整茄唐，四舍五入
Math.abs()                  // 絕對(duì)值
Math.max()/Math.min()        // 求最大和最小值

Math.sin()/Math.cos()        // 正弦/余弦
Math.power()/Math.sqrt()     // 求指數(shù)次冪/求平方根

案例

求10-20之間的隨機(jī)數(shù)
隨機(jī)生成顏色RGB
模擬實(shí)現(xiàn)max()/min()

Date對(duì)象

創(chuàng)建 Date 實(shí)例用來處理日期和時(shí)間。Date 對(duì)象基于1970年1月1日（世界標(biāo)準(zhǔn)時(shí)間）起的毫秒數(shù)蝇更。

// 獲取當(dāng)前時(shí)間沪编，UTC世界時(shí)間，距1970年1月1日（世界標(biāo)準(zhǔn)時(shí)間）起的毫秒數(shù)
var now = new Date();
console.log(now.valueOf()); // 獲取距1970年1月1日（世界標(biāo)準(zhǔn)時(shí)間）起的毫秒數(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開始

獲取日期的毫秒形式

var now = new Date();
// valueOf用于獲取對(duì)象的原始值
console.log(date.valueOf()) 

// HTML5中提供的方法，有兼容性問題
var now = Date.now();   

// 不支持HTML5的瀏覽器厨幻，可以用下面這種方式
var now = + new Date();         // 調(diào)用 Date對(duì)象的valueOf()

日期格式化方法

toString()      // 轉(zhuǎn)換成字符串
valueOf()       // 獲取毫秒值
// 下面格式化日期的方法相嵌，在不同瀏覽器可能表現(xiàn)不一致腿时，一般不用
toDateString()
toTimeString()
toLocaleDateString()
toLocaleTimeString()

獲取日期指定部分

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

案例

寫一個(gè)函數(shù)批糟，格式化日期對(duì)象，返回yyyy-MM-dd HH:mm:ss的形式

function formatDate(d) {
  //如果date不是日期對(duì)象看铆，返回
  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;
}

計(jì)算時(shí)間差徽鼎，返回相差的天/時(shí)/分/秒

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對(duì)象

創(chuàng)建數(shù)組對(duì)象的兩種方式
- 字面量方式
- new Array()

// 1. 使用構(gòu)造函數(shù)創(chuàng)建數(shù)組對(duì)象
// 創(chuàng)建了一個(gè)空數(shù)組
var arr = new Array();
// 創(chuàng)建了一個(gè)數(shù)組，里面存放了3個(gè)字符串
var arr = new Array('zs', 'ls', 'ww');
// 創(chuàng)建了一個(gè)數(shù)組弹惦，里面存放了4個(gè)數(shù)字
var arr = new Array(1, 2, 3, 4);


// 2. 使用字面量創(chuàng)建數(shù)組對(duì)象
var arr = [1, 2, 3];

// 獲取數(shù)組中元素的個(gè)數(shù)
console.log(arr.length);

檢測一個(gè)對(duì)象是否是數(shù)組
- instanceof
- Array.isArray() HTML5中提供的方法纬傲，有兼容性問題
函數(shù)的參數(shù)，如果要求是一個(gè)數(shù)組的話肤频，可以用這種方式來進(jìn)行判斷
toString()/valueOf()
- toString() 把數(shù)組轉(zhuǎn)換成字符串，逗號(hào)分隔每一項(xiàng)
- valueOf() 返回?cái)?shù)組對(duì)象本身
數(shù)組常用方法

演示：push()算墨、shift()宵荒、unshift()、reverse()净嘀、sort()报咳、splice()、indexOf()

// 1 棧操作(先進(jìn)后出)
push()
pop()       //取出數(shù)組中的最后一項(xiàng)挖藏，修改length屬性
// 2 隊(duì)列操作(先進(jìn)先出)
push()
shift()     //取出數(shù)組中的第一個(gè)元素暑刃，修改length屬性
unshift()   //在數(shù)組最前面插入項(xiàng)，返回?cái)?shù)組的長度
// 3 排序方法
reverse()   //翻轉(zhuǎn)數(shù)組
sort();     //即使是數(shù)組sort也是根據(jù)字符膜眠，從小到大排序
// 帶參數(shù)的sort是如何實(shí)現(xiàn)的岩臣？
// 4 操作方法
concat()    //把參數(shù)拼接到當(dāng)前數(shù)組
slice()     //從當(dāng)前數(shù)組中截取一個(gè)新的數(shù)組，不影響原來的數(shù)組宵膨，參數(shù)start從0開始,end從1開始
splice()    //刪除或替換當(dāng)前數(shù)組的某些項(xiàng)目架谎，參數(shù)start, deleteCount, options(要替換的項(xiàng)目)
// 5 位置方法
indexOf()、lastIndexOf()   //如果沒找到返回-1
// 6 迭代方法 不會(huì)修改原數(shù)組(可選)
every()辟躏、filter()谷扣、forEach()、map()捎琐、some()
// 7 方法將數(shù)組的所有元素連接到一個(gè)字符串中会涎。
join()

清空數(shù)組

// 方式1 推薦 
arr = [];
// 方式2 
arr.length = 0;
// 方式3
arr.splice(0, arr.length);

案例

將一個(gè)字符串?dāng)?shù)組輸出為|分割的形式，比如“劉備|張飛|關(guān)羽”瑞凑。使用兩種方式實(shí)現(xiàn)

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

將一個(gè)字符串?dāng)?shù)組的元素的順序進(jìn)行反轉(zhuǎn)末秃。["a", "b", "c", "d"] -> [ "d","c","b","a"]。使用兩種種方式實(shí)現(xiàn)拨黔。提示：第i個(gè)和第length-i-1個(gè)進(jìn)行交換

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的刪除

// 方式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ù)組中每一個(gè)a出現(xiàn)的位置

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

編寫一個(gè)方法去掉一個(gè)數(shù)組的重復(fù)元素

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還提供了三個(gè)特殊的引用類型：String/Number/Boolean

// 下面代碼的問題绰沥？
// s1是基本類型，基本類型是沒有方法的
var s1 = 'zhangsan';
var s2 = s1.substring(5);

// 當(dāng)調(diào)用s1.substring(5)的時(shí)候贺待，先把s1包裝成String類型的臨時(shí)對(duì)象徽曲，再調(diào)用substring方法，最后銷毀臨時(shí)對(duì)象, 相當(dāng)于：
var s1 = new String('zhangsan');
var s2 = s1.substring(5);
s1 = null;

// 創(chuàng)建基本包裝類型的對(duì)象
var num = 18;               //數(shù)值麸塞，基本類型
var num = Number('18');     //類型轉(zhuǎn)換
var num = new Number(18);   //基本包裝類型秃臣，對(duì)象
// Number和Boolean基本包裝類型基本不用，使用的話可能會(huì)引起歧義哪工。例如：
var b1 = new Boolean(false);
var b2 = b1 && true;        // 結(jié)果是什么

String對(duì)象

字符串的不可變

var str = 'abc';
str = 'hello';
// 當(dāng)重新給str賦值的時(shí)候奥此，常量'abc'不會(huì)被修改，依然在內(nèi)存中
// 重新給字符串賦值雁比，會(huì)重新在內(nèi)存中開辟空間稚虎，這個(gè)特點(diǎn)就是字符串的不可變
// 由于字符串的不可變，在大量拼接字符串的時(shí)候會(huì)有效率問題

創(chuàng)建字符串對(duì)象

var str = new String('Hello World');

// 獲取字符串中字符的個(gè)數(shù)
console.log(str.length);

字符串對(duì)象的常用方法

字符串所有的方法偎捎，都不會(huì)修改字符串本身(字符串是不可變的)蠢终，操作完成會(huì)返回一個(gè)新的字符串

// 1 字符方法
charAt()        //獲取指定位置處字符
charCodeAt()    //獲取指定位置處字符的ASCII碼
str[0]          //HTML5，IE8+支持 和charAt()等效
// 2 字符串操作方法
concat()        //拼接字符串茴她，等效于+寻拂，+更常用
slice()         //從start位置開始，截取到end位置丈牢，end取不到
substring()     //從start位置開始祭钉，截取到end位置，end取不到
substr()        //從start位置開始己沛，截取length個(gè)字符
// 3 位置方法
indexOf()       //返回指定內(nèi)容在元字符串中的位置
lastIndexOf()   //從后往前找慌核，只找第一個(gè)匹配的
// 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)換成字符串

案例

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

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

"abcoefoxyozzopp"查找字符串中所有o出現(xiàn)的位置

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

判斷一個(gè)字符串中出現(xiàn)次數(shù)最多的字符泛粹，統(tǒng)計(jì)這個(gè)次數(shù)

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

給定一個(gè)字符串如：“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矾利、 遍歷字符串姑裂，并將遍歷出的字符兩頭添加符號(hào)“@”輸出至當(dāng)前的文檔頁面。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者

人面猴
序言：七十年代末男旗，一起剝皮案震驚了整個(gè)濱河市舶斧，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌察皇，老刑警劉巖茴厉，帶你破解...
沈念sama閱讀 216,402評(píng)論 6贊 499
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場離奇詭異什荣，居然都是意外死亡矾缓，警方通過查閱死者的電腦和手機(jī)，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 92,377評(píng)論 3贊 392
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進(jìn)店門稻爬，熙熙樓的掌柜王于貴愁眉苦臉地迎上來嗜闻，“玉大人，你說我怎么就攤上這事桅锄∨⒎” “怎么了？”我有些...
開封第一講書人閱讀 162,483評(píng)論 0贊 353
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵竞滓，是天一觀的道長。經(jīng)常有香客問我吹缔，道長商佑，這世上最難降的妖魔是什么？我笑而不...
開封第一講書人閱讀 58,165評(píng)論 1贊 292
?港島之戀（遺憾婚禮）
正文為了忘掉前任厢塘，我火速辦了婚禮茶没，結(jié)果婚禮上，老公的妹妹穿的比我還像新娘晚碾。我一直安慰自己抓半，他們只是感情好，可當(dāng)我...
茶點(diǎn)故事閱讀 67,176評(píng)論 6贊 388
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布格嘁。她就那樣靜靜地躺著笛求，像睡著了一般。火紅的嫁衣襯著肌膚如雪糕簿。梳的紋絲不亂的頭發(fā)上探入，一...
開封第一講書人閱讀 51,146評(píng)論 1贊 297
城市分裂傳說
那天，我揣著相機(jī)與錄音懂诗，去河邊找鬼蜂嗽。笑死，一個(gè)胖子當(dāng)著我的面吹牛殃恒，可吹牛的內(nèi)容都是我干的植旧。我是一名探鬼主播辱揭，決...
沈念sama閱讀 40,032評(píng)論 3贊 417
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼病附！你這毒婦竟也來了问窃？” 一聲冷哼從身側(cè)響起，我...
開封第一講書人閱讀 38,896評(píng)論 0贊 274
萬榮殺人案實(shí)錄
序言：老撾萬榮一對(duì)情侶失蹤胖喳，失蹤者是張志新（化名）和其女友劉穎泡躯，沒想到半個(gè)月后，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體丽焊，經(jīng)...
沈念sama閱讀 45,311評(píng)論 1贊 310
?護(hù)林員之死
正文獨(dú)居荒郊野嶺守林人離奇死亡较剃，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點(diǎn)故事閱讀 37,536評(píng)論 2贊 332
?白月光啟示錄
正文我和宋清朗相戀三年，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了技健。大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片写穴。...
茶點(diǎn)故事閱讀 39,696評(píng)論 1贊 348
活死人
序言：一個(gè)原本活蹦亂跳的男人離奇死亡，死狀恐怖雌贱，靈堂內(nèi)的尸體忽然破棺而出啊送，到底是詐尸還是另有隱情，我是刑警寧澤欣孤，帶...
沈念sama閱讀 35,413評(píng)論 5贊 343
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布馋没，位于F島的核電站，受9級(jí)特大地震影響降传，放射性物質(zhì)發(fā)生泄漏篷朵。R本人自食惡果不足惜，卻給世界環(huán)境...
茶點(diǎn)故事閱讀 41,008評(píng)論 3贊 325
男人毒藥：我在死后第九天來索命
文/蒙蒙一婆排、第九天我趴在偏房一處隱蔽的房頂上張望声旺。院中可真熱鬧，春花似錦段只、人聲如沸腮猖。這莊子的主人今日做“春日...
開封第一講書人閱讀 31,659評(píng)論 0贊 22
一樁弒父案赞枕，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽澈缺。三九已至，卻和暖如春炕婶，著一層夾襖步出監(jiān)牢的瞬間谍椅，已是汗流浹背。一陣腳步聲響...
開封第一講書人閱讀 32,815評(píng)論 1贊 269
情欲美人皮
我被黑心中介騙來泰國打工古话，沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留雏吭，地道東北人。一個(gè)月前我還...
沈念sama閱讀 47,698評(píng)論 2贊 368
代替公主和親
正文我出身青樓陪踩，卻偏偏與公主長得像杖们，于是被迫代替她去往敵國和親悉抵。傳聞我的和親對(duì)象是個(gè)殘疾皇子，可洞房花燭夜當(dāng)晚...
茶點(diǎn)故事閱讀 44,592評(píng)論 2贊 353