目標:

掌握程式設計的基本思維
掌握程式設計的基本語法

我們先來學習JavaScript基礎，後續會講解JavaScript高階。

重點內容

變數的宣告及使用
資料型別
型別轉換
運算子

JavaScript介紹

JavaScript是什麼

JavaScript是一種執行在客戶端的指令碼語言

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

JavaScript現在的意義(應用場景)
JavaScript 發展到現在幾乎無所不能。

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

JavaScript和HTML、CSS的區別

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

JavaScript的組成

ECMAScript - JavaScript的核心
ECMA 歐洲計算機制造聯合會
網景：JavaScript
微軟：JScript
定義了JavaScript的語法規範
JavaScript的核心，描述了語言的基本語法和資料型別，ECMAScript是一套標準，定義了一種語言的標準與具體實現無關

BOM - 瀏覽器物件模型
一套操作瀏覽器功能的API
透過BOM可以操作瀏覽器視窗，比如：彈出框、控制瀏覽器跳轉、獲取解析度等

DOM - 文件物件模型
一套操作頁面元素的API
DOM可以把HTML看做是文件樹，透過DOM提供的API可以對樹上的節點進行操作

JavaScript的書寫位置
寫在行內

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

寫在script標籤中

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

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

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

變數

什麼是變數
變數是計算機記憶體中儲存資料的識別符號，根據變數名稱可以獲取到記憶體中儲存的資料
為什麼要使用變數
使用變數可以方便的獲取或者修改記憶體中的資料

如何使用變數

var宣告變數

var age;

變數的賦值

 var age;age = 18;

同時宣告多個變數

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

同時宣告多個變數並賦值

var age = 10, name = 'zs';

變數在記憶體中的儲存

var age = 18;

變數的命名規則和規範

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

資料型別

簡單資料型別

Number、String、Boolean、Undefined、Null

Number型別

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

進位制

十進位制

  var num = 9;
  進行算數計算時，八進位制和十六進位制表示的數值最終都將被轉換成十進位制數值。

十六進位制

  var num = 0xA;
  數字序列範圍：0~9以及A~F

八進位制

  var num1 = 07;   // 對應十進位制的7
  var num2 = 019;  // 對應十進位制的19
  var num3 = 08;   // 對應十進位制的8
  數字序列範圍：0~7
  如果字面值中的數值超出了範圍，那麼前導零將被忽略，後面的數值將被當作十進位制數值解析

浮點數
- 浮點數的精度問題
  
  浮點數
```
var n = 5e-324; // 科學計數法 5乘以10的-324次方
```
  浮點數值的最高精度是 17 位小數，但在進行算術計算時其精確度遠遠不如整數
  var result = 0.1 + 0.2; // 結果不是 0.3，而是：0.30000000000000004
  console.log(0.07 * 100);
  不要判斷兩個浮點數是否相等
數值範圍

最小值：Number.MIN_VALUE，這個值為： 5e-324
最大值：Number.MAX_VALUE，這個值為： 1.7976931348623157e+308
無窮大：Infinity
無窮小：-Infinity
數值判斷
- NaN：not a number
  - NaN 與任何值都不相等，包括他本身
- isNaN: is not a number

String型別
字串長度

length屬性用來獲取字串的長度

var str = '程式猿 Hello World';
console.log(str.length);

字串拼接

字串拼接使用 + 連線

console.log(11 + 11);
console.log('hello' + ' world');
console.log('100' + '100');
console.log('11' + 11);
console.log('male:' + true);

兩邊只要有一個是字串，那麼+就是字串拼接功能
兩邊如果都是數字，那麼就是算術功能。

Boolean型別

Boolean字面量： true和false，區分大小寫
計算機內部儲存：true為1，false為0

Undefined和Null

undefined表示一個宣告瞭沒有賦值的變數，變數只宣告的時候值預設是undefined
null表示一個空，變數的值如果想為null，必須手動設定

複雜資料型別

Object

獲取變數的型別

typeof

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

字面量

在原始碼中一個固定值的表示法。

數值字面量：8, 9, 10

字串字面量：'程式設計師', "大前端"

布林字面量：true，false

註釋

單行註釋

用來描述下面一個或多行程式碼的作用

// 這是一個變數
var name = 'hm';

多行註釋
用來註釋多條程式碼

/*
var age = 18;
var name = 'zs';
console.log(name, age);
*/

資料型別轉換

如何使用谷歌瀏覽器，快速的檢視資料型別？

字串的顏色是黑色的，數值型別是藍色的，布林型別也是藍色的，undefined和null是灰色的

轉換成字串型別

toString()

var num = 5;
console.log(num.toString());

String()

String()函式存在的意義：有些值沒有toString()，這個時候可以使用String()。比如：undefined和null

拼接字串方式
num + ""，當 + 兩邊一個運算子是字串型別，一個運算子是其它型別的時候，會先把其它型別轉換成字串再進行字串拼接，返回字串

轉換成數值型別

Number()
Number()可以把任意值轉換成數值，如果要轉換的字串中有一個不是數值的字元，返回NaN
parseInt()

var num1 = parseInt("12.3abc");  // 返回12，如果第一個字元是數字會解析知道遇到非數字結束
var num2 = parseInt("abc123");   // 返回NaN，如果第一個字元不是數字或者符號就返回NaN

parseFloat()
parseFloat()把字串轉換成浮點數
parseFloat()和parseInt非常相似，不同之處在與

parseFloat會解析第一個. 遇到第二個.或者非數字結束
如果解析的內容裡只有整數，解析成整數

+，-0等運算

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

轉換成布林型別

Boolean()

0 ''(空字串) null undefined NaN 會轉換成false 其它都會轉換成true

運算子

運算子 operator

5 + 6

表示式組成運算元和運算子，會有一個結果

算術運算子

一元運算子

一元運算子：只有一個運算元的運算子

5 + 6 兩個運算元的運算子二元運算子

++ 自身加1

-- 自身減1

前置++

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

後置++

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

總結

前置++：先加1，後參與運算

後置++：先參與運算，後加1

上面兩個理解後，下面兩個自通

前置-- ：先減1，後參與運算

後置-- ：先參與運算，後減1

邏輯運算子(布林運算子)

&& 與兩個運算元同時為true，結果為true，否則都是false
|| 或兩個運算元有一個為true，結果為true，否則為false
! 非取反

關係運算子(比較運算子)

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

==與===的區別：==只進行值得比較，===型別和值同時相等，則相等
var result = '55' == 55;      // true
var result = '55' === 55;     // false 值相等，型別不相等
var result = 55 === 55;     // true

賦值運算子

= += -= *= /= %=

例如：
var num = 0;
num += 5;    //相當於  num = num + 5;

運算子的優先順序

優先順序從高到底

1\. ()  優先順序最高
2\. 一元運算子  ++   --   !
3\. 算數運算子  先*  /  %   後 +   -
4\. 關係運算子  >   >=   <   <=
5. 相等運算子   ==   !=    ===    !==
6. 邏輯運算子 先&&   後||
7. 賦值運算子

表示式和語句

表示式
一個表示式可以產生一個值，有可能是運算、函式呼叫、有可能是字面量。表示式可以放在任何需要值的地方
語句
語句可以理解為一個行為，迴圈語句和判斷語句就是典型的語句。一個程式有很多個語句組成，一般情況下;分割一個一個的語句

流程控制

程式的三種基本結構

順序結構

從上到下執行的程式碼就是順序結構
程式預設就是由上到下順序執行的

分支結構

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

迴圈結構

迴圈結構：重複做一件事情

分支結構

if語句
語法結構

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

switch語句
語法格式:

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

break可以省略，如果省略，程式碼會繼續執行下一個case
switch 語句在比較值時使用的是全等運算子, 因此不會發生型別轉換（例如，字串'10' 不等於數值 10）

布林型別的隱式轉換

流程控制語句會把後面的值隱式轉換成布林型別

轉換為true   非空字串  非0數字  true 任何物件
轉換成false  空字串  0  false  null  undefined
// 結果是什麼？
var a = !!'123';

迴圈結構

在javascript中，迴圈語句有三種，while、do..while、for迴圈。
while語句
基本語法：

// 當迴圈條件為true時，執行迴圈體，
// 當迴圈條件為false時，結束迴圈。
while (迴圈條件) {
  //迴圈體
}

程式碼示例：

// 計算1-100之間所有數的和
// 初始化變數
var i = 1;
var sum = 0;
// 判斷條件
while (i <= 100) {
  // 迴圈體
  sum += i;
  // 自增
  i++;
}
console.log(sum);

do...while語句
do..while迴圈和while迴圈非常像，二者經常可以相互替代，但是do..while的特點是不管條件成不成立，都會執行一次。
基礎語法：

do {
  // 迴圈體;
} while (迴圈條件);

程式碼示例：

// 初始化變數
var i = 1;
var sum = 0;
do {
  sum += i;//迴圈體
  i++;//自增
} while (i <= 100);//迴圈條件

for語句
while和do...while一般用來解決無法確認次數的迴圈。for迴圈一般在迴圈次數確定的時候比較方便
for迴圈語法：

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

continue和break
break:立即跳出整個迴圈，即迴圈結束，開始執行迴圈後面的內容（直接跳到大括號）

continue:立即跳出當前迴圈，繼續下一次迴圈（跳到i++的地方）

除錯

過去除錯JavaScript的方式
- alert()
- console.log()
斷點除錯

斷點除錯是指自己在程式的某一行設定一個斷點，除錯時，程式執行到這一行就會停住，然後你可以一步一步往下除錯，除錯過程中可以看各個變數當前的值，出錯的話，除錯到出錯的程式碼行即顯示錯誤，停下。

除錯步驟

瀏覽器中按F12-->sources-->找到需要除錯的檔案-->在程式的某一行設定斷點
除錯中的相關操作

Watch: 監視，透過watch可以監視變數的值的變化，非常的常用。
F10: 程式單步執行，讓程式一行一行的執行，這個時候，觀察watch中變數的值的變化。
F8：跳到下一個斷點處，如果後面沒有斷點了，則程式執行結束。

tips: 監視變數，不要監視表示式，因為監視了表示式，那麼這個表示式也會執行。

程式碼除錯的能力非常重要，只有學會了程式碼除錯，才能學會自己解決bug的能力。初學者不要覺得除錯程式碼麻煩就不去除錯，知識點花點功夫肯定學的會，但是程式碼除錯這個東西，自己不去練，永遠都學不會。

陣列

為什麼要學習陣列
之前學習的資料型別，只能儲存一個值(比如：Number/String。我們想儲存班級中所有學生的姓名，此時該如何儲存？

陣列的概念
所謂陣列，就是將多個元素（通常是同一型別）按一定順序排列放到一個集合中，那麼這個集合我們就稱之為陣列。

陣列的定義
陣列是一個有序的列表，可以在陣列中存放任意的資料，並且陣列的長度可以動態的調整。

透過陣列字面量建立陣列

// 建立一個空陣列
var arr1 = []; 
// 建立一個包含3個數值的陣列，多個陣列項以逗號隔開
var arr2 = [1, 3, 4]; 
// 建立一個包含2個字串的陣列
var arr3 = ['a', 'c']; 
// 可以透過陣列的length屬性獲取陣列的長度
console.log(arr3.length);
// 可以設定length屬性改變陣列中元素的個數
arr3.length = 0;

獲取陣列元素
陣列的取值

// 格式：陣列名[下標]    下標又稱索引
// 功能：獲取陣列對應下標的那個值，如果下標不存在，則返回undefined。
var arr = ['red',, 'green', 'blue'];
arr[0];    // red
arr[2]; // blue
arr[3]; // 這個陣列的最大下標為2,因此返回undefined

遍歷陣列
遍歷：遍及所有，對陣列的每一個元素都訪問一次就叫遍歷。
陣列遍歷的基本語法：

for(var i = 0; i < arr.length; i++) {
    // 陣列遍歷的固定結構
}

陣列中新增元素
陣列的賦值

// 格式：陣列名[下標/索引] = 值;
// 如果下標有對應的值，會把原來的值覆蓋，如果下標不存在，會給陣列新增一個元素。
var arr = ["red", "green", "blue"];
// 把red替換成了yellow
arr[0] = "yellow";
// 給陣列新增加了一個pink的值
arr[3] = "pink";

函式

為什麼要有函式
如果要在多個地方求1-100之間所有數的和，應該怎麼做？

什麼是函式
把一段相對獨立的具有特定功能的程式碼塊封裝起來，形成一個獨立實體，就是函式，起個名字（函式名），在後續開發中可以反覆呼叫
函式的作用就是封裝一段程式碼，將來可以重複使用

函式的定義

函式宣告

function 函式名(){
```
// 函式體
```
}
函式表示式

var fn = function() {
```
// 函式體
```
}
特點：
函式宣告的時候，函式體並不會執行，只要當函式被呼叫的時候才會執行。
函式一般都用來幹一件事情，需用使用動詞+名詞，表示做一件事情 tellStory sayHello等

函式的呼叫
呼叫函式的語法：
函式名();

特點：
函式體只有在呼叫的時候才會執行，呼叫需要()進行呼叫。
可以呼叫多次(重複使用)
程式碼示例：

// 宣告函式
function sayHi() {
  console.log("吃了沒？");
}
// 呼叫函式
sayHi();
// 求1-100之間所有數的和
function getSum() {
  var sum = 0;
  for (var  i = 0; i < 100; i++) {
    sum += i;
  }
  console.log(sum);
}
// 呼叫
getSum();

函式的引數
為什麼要有引數

function getSum() {
  var sum = 0;
  for (var i = 1; i <= 100; i++) {
    sum += i;
  }
  console.log();
}
// 雖然上面程式碼可以重複呼叫，但是隻能計算1-100之間的值
// 如果想要計算n-m之間所有數的和，應該怎麼辦呢？

語法：

// 函式內部是一個封閉的環境，可以透過引數的方式，把外部的值傳遞給函式內部
// 帶引數的函式宣告
function 函式名(形參1, 形參2, 形參...){
  // 函式體
}
// 帶引數的函式呼叫
函式名(實參1, 實參2, 實參3);

形參和實參

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

var x = 5, y = 6;
fn(x,y); 
function fn(a, b) {
  console.log(a + b);
}
//x,y實參，有具體的值。函式執行的時候會把x,y複製一份給函式內部的a和b，函式內部的值是複製的新值，無法修改外部的x,y

函式的返回值
當函式執行完的時候，並不是所有時候都要把結果列印。我們期望函式給我一些反饋（比如計算的結果返回進行後續的運算），這個時候可以讓函式返回一些東西。也就是返回值。函式透過return返回一個返回值

返回值語法：

//宣告一個帶返回值的函式
function 函式名(形參1, 形參2, 形參...){
  //函式體
  return 返回值;
}
//可以透過變數來接收這個返回值
var 變數 = 函式名(實參1, 實參2, 實參3);

函式的呼叫結果就是返回值，因此我們可以直接對函式呼叫結果進行操作。

返回值詳解：

如果函式沒有顯示的使用 return語句 ，那麼函式有預設的返回值：undefined
如果函式使用 return語句，那麼跟再return後面的值，就成了函式的返回值
如果函式使用 return語句，但是return後面沒有任何值，那麼函式的返回值也是：undefined
函式使用return語句後，這個函式會在執行完 return 語句之後停止並立即退出，也就是說return後面的所有其他程式碼都不會再執行。

arguments的使用
JavaScript中，arguments物件是比較特別的一個物件，實際上是當前函式的一個內建屬性。也就是說所有函式都內建了一個arguments物件，arguments物件中儲存了傳遞的所有的實參。arguments是一個偽陣列，因此及可以進行遍歷

函式其它

匿名函式
匿名函式：沒有名字的函式
匿名函式如何使用：

將匿名函式賦值給一個變數，這樣就可以透過變數進行呼叫
匿名函式自呼叫

關於自執行函式（匿名函式自呼叫）的作用：防止全域性變數汙染。
自呼叫函式
匿名函式不能透過直接呼叫來執行，因此可以透過匿名函式的自呼叫的方式來執行

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

函式是一種資料型別

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

函式作為引數

因為函式也是一種型別，可以把函式作為兩一個函式的引數，在兩一個函式中呼叫

函式做為返回值

因為函式是一種型別，所以可以把函式可以作為返回值從函式內部返回，這種用法在後面很常見。

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

程式碼規範

1.命名規範    
2.變數規範   
    var name = 'zs';    
3.註釋規範
    // 這裡是註釋
4.空格規範
5.換行規範
    var arr = [1, 2, 3, 4];
    if (a > b) {
    }
    for(var i = 0; i < 10; i++) {
    }
    function fn() {
    }

作用域

作用域：變數可以起作用的範圍
全域性變數和區域性變數

全域性變數
在任何地方都可以訪問到的變數就是全域性變數，對應全域性作用域
區域性變數
只在固定的程式碼片段內可訪問到的變數，最常見的例如函式內部。對應區域性作用域(函式作用域)

不使用var宣告的變數是全域性變數，不推薦使用。
變數退出作用域之後會銷燬，全域性變數關閉網頁或瀏覽器才會銷燬

塊級作用域

任何一對花括號（｛和｝）中的語句集都屬於一個塊，在這之中定義的所有變數在程式碼塊外都是不可見的，我們稱之為塊級作用域。
在es5之前沒有塊級作用域的的概念,只有函式作用域，現階段可以認為JavaScript沒有塊級作用域

詞法作用域
變數的作用域是在定義時決定而不是執行時決定，也就是說詞法作用域取決於原始碼，透過靜態分析就能確定，因此詞法作用域也叫做靜態作用域。

在 js 中詞法作用域規則:

函式允許訪問函式外的資料.
整個程式碼結構中只有函式可以限定作用域.
作用域規則首先使用提升規則分析
如果當前作用規則中有名字了, 就不考慮外面的名字

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

作用域鏈

只有函式可以製造作用域結構，那麼只要是程式碼，就至少有一個作用域, 即全域性作用域。凡是程式碼中有函式，那麼這個函式就構成另一個作用域。如果函式中還有函式，那麼在這個作用域中就又可以誕生一個作用域。
將這樣的所有的作用域列出來，可以有一個結構: 函式內指向函式外的鏈式結構。就稱作作用域鏈。

// 案例1：
function f1() {
    function f2() {
    }
}
var num = 456;
function f3() {
    function f4() {    
    }
}

預解析

JavaScript程式碼的執行是由瀏覽器中的JavaScript解析器來執行的。JavaScript解析器執行JavaScript程式碼的時候，分為兩個過程：預解析過程和程式碼執行過程

預解析過程：

把變數的宣告提升到當前作用域的最前面，只會提升宣告，不會提升賦值。
把函式的宣告提升到當前作用域的最前面，只會提升宣告，不會提升呼叫。
先提升var，在提升function

JavaScript的執行過程

var a = 25;
function abc (){
  alert(a);//undefined
  var a = 10;
}
abc();
// 如果變數和函式同名的話，函式優先
console.log(a);
function a() {
  console.log('aaaaa');
}
var a = 1;
console.log(a);

全域性解析規則

函式內部解析規則

變數提升

變數提升
定義變數的時候，變數的宣告會被提升到作用域的最上面，變數的賦值不會提升。
函式提升
JavaScript解析器首先會把當前作用域的函式宣告提前到整個作用域的最前面

// 1、-----------------------------------
var num = 10;
fun();
function fun() {
  console.log(num);
  var num = 20;
}
//2、-----------------------------------
var a = 18;
f1();
function f1() {
  var b = 9;
  console.log(a);
  console.log(b);
  var a = '123';
}
// 3、-----------------------------------
f1();
console.log(c);
console.log(b);
console.log(a);
function f1() {
  var a = b = c = 9;
  console.log(a);
  console.log(b);
  console.log(c);
}

物件

為什麼要有物件

function printPerson(name, age, sex....) {
}
// 函式的引數如果特別多的話，可以使用物件簡化
function printPerson(person) {
  console.log(person.name);
  ……
}

什麼是物件
現實生活中：萬物皆物件，物件是一個具體的事物，一個具體的事物就會有行為和特徵。
舉例：一部車，一個手機
車是一類事物，門口停的那輛車才是物件

特徵：紅色、四個輪子
行為：駕駛、剎車

JavaScript中的物件

JavaScript中的物件其實就是生活中物件的一個抽象
JavaScript的物件是無序屬性的集合。
    其屬性可以包含基本值、物件或函式。物件就是一組沒有順序的值。我們可以把JavaScript中的物件想象成鍵值對，其中值可以是資料和函式。
物件的行為和特徵
    特徵---屬性
    行為---方法

事物的特徵在物件中用屬性來表示。
事物的行為在物件中用方法來表示。

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

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

物件建立方式

物件字面量

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

new Object()建立物件

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

工廠函式建立物件

function createPerson(name, age, job) {
  var person = new Object();
  person.name = name;
  person.age = age;
  person.job = job;
  person.sayHi = function(){
    console.log('Hello,everyBody');
  }
  return person;
}
var p1 = createPerson('張三', 22, 'actor');

自定義建構函式

function Person(name,age,job){
  this.name = name;
  this.age = age;
  this.job = job;
  this.sayHi = function(){
      console.log('Hello,everyBody');
  }
}
var p1 = new Person('張三', 22, 'actor');

屬性和方法

如果一個變數屬於一個物件所有，那麼該變數就可以稱之為該物件的一個屬性，屬性一般是名詞，用來描述事物的特徵
如果一個函式屬於一個物件所有，那麼該函式就可以稱之為該物件的一個方法，方法是動詞，描述事物的行為和功能

new關鍵字

建構函式，是一種特殊的函式。主要用來在建立物件時初始化物件，即為物件成員變數賦初始值，總與new運算子一起使用在建立物件的語句中。

建構函式用於建立一類物件，首字母要大寫。
建構函式要和new一起使用才有意義。

new在執行時會做四件事情

new會在記憶體中建立一個新的空物件
new 會讓this指向這個新的物件
執行建構函式  目的：給這個新物件加屬性和方法
new會返回這個新物件

this詳解

JavaScript中的this指向問題，有時候會讓人難以捉摸，隨著學習的深入，我們可以逐漸瞭解
現在我們需要掌握函式內部的this幾個特點
    1. 函式在定義的時候this是不確定的，只有在呼叫的時候才可以確定
    2. 一般函式直接執行，內部this指向全域性window
    3. 函式作為一個物件的方法，被該物件所呼叫，那麼this指向的是該物件
    4. 建構函式中的this其實是一個隱式物件，類似一個初始化的模型，所有方法和屬性都掛載到了這個隱式物件身上，後續透過new關鍵字來呼叫，從而實現例項化

物件的使用

遍歷物件的屬性
透過for..in語法可以遍歷一個物件

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

刪除物件的屬性

function fun() { 
  this.name = 'mm';
}
var obj = new fun(); 
console.log(obj.name); // mm 
delete obj.name;
console.log(obj.name); // undefined

簡單型別和複雜型別的區別

基本型別又叫做值型別，複雜型別又叫做引用型別

值型別：簡單資料型別，基本資料型別，在儲存時，變數中儲存的是值本身，因此叫做值型別。

引用型別：複雜資料型別，在儲存是，變數中儲存的僅僅是地址（引用），因此叫做引用資料型別。

堆和棧
堆疊空間分配區別：
　　1、棧（作業系統）：由作業系統自動分配釋放，存放函式的引數值，區域性變數的值等。其操作方式類似於資料結構中的棧；
　　2、堆（作業系統）：儲存複雜型別(物件)，一般由程式設計師分配釋放，若程式設計師不釋放，由垃圾回收機制回收，分配。方式倒是類似於連結串列。
注意：JavaScript中沒有堆和棧的概念，此處我們用堆和棧來講解，目的方便理解和方便以後的學習。

內建物件

JavaScript中的物件分為3種：內建物件、瀏覽器物件、自定義物件
JavaScript 提供多個內建物件：Math/Array/Number/String/Boolean...
物件只是帶有屬性和方法的特殊資料型別。
學習一個內建物件的使用，只要學會其常用的成員的使用（透過查文件學習）
可以透過MDN/W3C來查詢
內建物件的方法很多，我們只需要知道內建物件提供的常用方法，使用的時候查詢文件。

如何學習一個方法？

方法的功能
引數的意義和型別
返回值意義和型別
demo進行測試

Math物件
Math物件不是建構函式，它具有數學常數和函式的屬性和方法，都是以靜態成員的方式提供
跟數學相關的運算來找Math中的成員（求絕對值，取整）
Math
演示：Math.PI、Math.random()、Math.floor()/Math.ceil()、Math.round()、Math.abs() 、Math.max()

Math.PI                        // 圓周率
Math.random()                // 生成隨機數
Math.floor()/Math.ceil()     // 向下取整/向上取整
Math.round()                // 取整，四捨五入
Math.abs()                    // 絕對值
Math.max()/Math.min()         // 求最大和最小值
Math.sin()/Math.cos()         // 正弦/餘弦
Math.power()/Math.sqrt()     // 求指數次冪/求平方根

Date物件
建立 Date 例項用來處理日期和時間。Date 物件基於1970年1月1日（世界標準時間）起的毫秒數。

// 獲取當前時間，UTC世界時間，距1970年1月1日（世界標準時間）起的毫秒數
var now = new Date();
console.log(now.valueOf());    // 獲取距1970年1月1日（世界標準時間）起的毫秒數
Date建構函式的引數
1. 毫秒數 1498099000356        new Date(1498099000356)
2. 日期格式字串  '2015-5-1'     new Date('2015-5-1')
3. 年、月、日……                  new Date(2015, 4, 1)   // 月份從0開始

獲取日期的毫秒形式

var now = new Date();
// valueOf用於獲取物件的原始值
console.log(date.valueOf())    
// HTML5中提供的方法，有相容性問題
var now = Date.now();    
// 不支援HTML5的瀏覽器，可以用下面這種方式
var now = + new Date();            // 呼叫 Date物件的valueOf()

日期格式化方法

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

獲取日期指定部分

getTime()        // 返回毫秒數和valueOf()結果一樣，valueOf()內部呼叫的getTime()
getMilliseconds() 
getSeconds()  // 返回0-59
getMinutes()  // 返回0-59
getHours()    // 返回0-23
getDay()      // 返回星期幾 0週日   6周6
getDate()     // 返回當前月的第幾天
getMonth()    // 返回月份，***從0開始***
getFullYear() //返回4位的年份  如 2016

Array物件

建立陣列物件的兩種方式

字面量方式
new Array()

// 1\. 使用建構函式建立陣列物件
// 建立了一個空陣列
var arr = new Array();
// 建立了一個陣列，裡面存放了3個字串
var arr = new Array('zs', 'ls', 'ww');
// 建立了一個陣列，裡面存放了4個數字
var arr = new Array(1, 2, 3, 4);
// 2\. 使用字面量建立陣列物件
var arr = [1, 2, 3];
// 獲取陣列中元素的個數
console.log(arr.length);

檢測一個物件是否是陣列
- instanceof
- Array.isArray() HTML5中提供的方法，有相容性問題

函式的引數，如果要求是一個陣列的話，可以用這種方式來進行判斷

toString()/valueOf()
- toString() 把陣列轉換成字串，逗號分隔每一項
- valueOf() 返回陣列物件本身
陣列常用方法
演示：push()、shift()、unshift()、reverse()、sort()、splice()、indexOf()

// 1 棧操作(先進後出)
push()
pop()         //取出陣列中的最後一項，修改length屬性
// 2 佇列操作(先進先出)
push()
shift()        //取出陣列中的第一個元素，修改length屬性
unshift()     //在陣列最前面插入項，返回陣列的長度
// 3 排序方法
reverse()    //翻轉陣列
sort();     //即使是陣列sort也是根據字元，從小到大排序
// 帶引數的sort是如何實現的？
// 4 操作方法
concat()      //把引數拼接到當前陣列
slice()     //從當前陣列中擷取一個新的陣列，不影響原來的陣列，引數start從0開始,end從1開始
splice()    //刪除或替換當前陣列的某些專案，引數start, deleteCount, options(要替換的專案)
// 5 位置方法
indexOf()、lastIndexOf()   //如果沒找到返回-1
// 6 迭代方法 不會修改原陣列(可選)
every()、filter()、forEach()、map()、some()
// 7 方法將陣列的所有元素連線到一個字串中。
join()

清空陣列

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

基本包裝型別

為了方便操作基本資料型別，JavaScript還提供了三個特殊的引用型別：String/Number/Boolean

// 下面程式碼的問題？
// s1是基本型別，基本型別是沒有方法的
var s1 = 'zhangsan';
var s2 = s1.substring(5);
// 當呼叫s1.substring(5)的時候，先把s1包裝成String型別的臨時物件，再呼叫substring方法，最後銷燬臨時物件, 相當於：
var s1 = new String('zhangsan');
var s2 = s1.substring(5);
s1 = null;

// 建立基本包裝型別的物件
var num = 18;                  //數值，基本型別
var num = Number('18');     //型別轉換
var num = new Number(18);     //基本包裝型別，物件
// Number和Boolean基本包裝型別基本不用，使用的話可能會引起歧義。例如：
var b1 = new Boolean(false);
var b2 = b1 && true;        // 結果是什麼

String物件

字串的不可變

var str = 'abc';
str = 'hello';
// 當重新給str賦值的時候，常量'abc'不會被修改，依然在記憶體中
// 重新給字串賦值，會重新在記憶體中開闢空間，這個特點就是字串的不可變
// 由於字串的不可變，在大量拼接字串的時候會有效率問題

建立字串物件

var str = new String('Hello World');
// 獲取字串中字元的個數
console.log(str.length);

字串物件的常用方法

字串所有的方法，都不會修改字串本身(字串是不可變的)，操作完成會返回一個新的字串

// 1 字元方法
charAt()        //獲取指定位置處字元
charCodeAt()      //獲取指定位置處字元的ASCII碼
str[0]           //HTML5，IE8+支援 和charAt()等效
// 2 字串操作方法
concat()           //拼接字串，等效於+，+更常用
slice()            //從start位置開始，擷取到end位置，end取不到
substring()     //從start位置開始，擷取到end位置，end取不到
substr()           //從start位置開始，擷取length個字元
// 3 位置方法
indexOf()       //返回指定內容在元字串中的位置
lastIndexOf()     //從後往前找，只找第一個匹配的
// 4 去除空白   
trim()          //只能去除字串前後的空白
// 5 大小寫轉換方法
to(Locale)UpperCase()     //轉換大寫
to(Locale)LowerCase()     //轉換小寫
// 6 其它
search()
replace()
split()
fromCharCode()
// String.fromCharCode(101, 102, 103);     //把ASCII碼轉換成字串

自己是個做了幾年開發的老碼農，希望本文對你有用！這裡推薦一下我的前端學習交流圈：767273102 ，裡面都是學習前端的，從最基礎的HTML+CSS+JS【炫酷特效，遊戲，外掛封裝，設計模式】到移動端HTML5的專案實戰的學習資料都有整理，送給每一位前端小夥伴。2019最新技術，與企業需求同步。好友都在裡面學習交流，每天都會有大牛定時講解前端技術!

點選：加入

前端基礎入門四（JavaScript基礎）

目標:

重點內容

JavaScript介紹

JavaScript是什麼

變數

變數的命名規則和規範

資料型別

簡單資料型別

複雜資料型別

獲取變數的型別

註釋

單行註釋

資料型別轉換

轉換成字串型別

轉換成數值型別

轉換成布林型別

運算子

算術運算子

一元運算子

邏輯運算子(布林運算子)

關係運算子(比較運算子)

賦值運算子

運算子的優先順序

表示式和語句

流程控制

順序結構

分支結構

迴圈結構

分支結構

布林型別的隱式轉換

迴圈結構

陣列

函式

函式其它

程式碼規範

作用域

作用域鏈

預解析

全域性解析規則

物件

物件建立方式

物件的使用

簡單型別和複雜型別的區別

內建物件

如何學習一個方法？

Array物件

基本包裝型別

String物件

相關文章