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

智雲程式設計發表於2019-05-20
前端JavaScript

目標:

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

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

重點內容

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

JavaScript介紹

JavaScript是什麼

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

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

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

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

JavaScript和HTML、CSS的區別

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

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

Boolean型別

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

Undefined和Null

  1. undefined表示一個宣告瞭沒有賦值的變數，變數只宣告的時候值預設是undefined
  2. 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: 監視變數，不要監視表示式，因為監視了表示式，那麼這個表示式也會執行。

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

陣列

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

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

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

通過陣列字面量建立陣列 

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

獲取陣列元素
陣列的取值 

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

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

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

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

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

函式

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

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

函式的定義

  • 函式宣告

    function 函式名(){ 

    // 函式體

    }

  • 函式表示式

    var fn = function() { 

    // 函式體

    }

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

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

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

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

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

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

語法： 

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

形參和實參

  1. 形式引數：在宣告一個函式的時候，為了函式的功能更加靈活，有些值是固定不了的，對於這些固定不了的值。我們可以給函式設定引數。這個引數沒有具體的值，僅僅起到一個佔位置的作用，我們通常稱之為形式引數，也叫形參。
  2. 實際引數：如果函式在宣告時，設定了形參，那麼在函式呼叫的時候就需要傳入對應的引數，我們把傳入的引數叫做實際引數，也叫實參。 
var x = 5, y = 6;
fn(x,y); 
function fn(a, b) {
  console.log(a + b);
}
//x,y實參，有具體的值。函式執行的時候會把x,y複製一份給函式內部的a和b，函式內部的值是複製的新值，無法修改外部的x,y

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

返回值語法： 

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

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

返回值詳解： 

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

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

函式其它

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

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

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

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

函式是一種資料型別 

function fn() {}
console.log(typeof fn);
  • 函式作為引數

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

  • 函式做為返回值

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

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

程式碼規範 

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

作用域

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

  • 全域性變數
    在任何地方都可以訪問到的變數就是全域性變數，對應全域性作用域

  • 區域性變數
    只在固定的程式碼片段內可訪問到的變數，最常見的例如函式內部。對應區域性作用域(函式作用域)

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

塊級作用域

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

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

在 js 中詞法作用域規則:

  • 函式允許訪問函式外的資料.
  • 整個程式碼結構中只有函式可以限定作用域.
  • 作用域規則首先使用提升規則分析
  • 如果當前作用規則中有名字了, 就不考慮外面的名字 
var num = 123;
function foo() {
  console.log( num );
}
foo();
if ( false ) {
    var num = 123;
}
console.log( num ); // undefiend

作用域鏈

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

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

預解析

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

預解析過程：

  1. 把變數的宣告提升到當前作用域的最前面，只會提升宣告，不會提升賦值。
  2. 把函式的宣告提升到當前作用域的最前面，只會提升宣告，不會提升呼叫。
  3. 先提升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運算子一起使用在建立物件的語句中。

  1. 建構函式用於建立一類物件，首字母要大寫。
  2. 建構函式要和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來查詢
內建物件的方法很多，我們只需要知道內建物件提供的常用方法，使用的時候查詢文件。

如何學習一個方法？

  1. 方法的功能
  2. 引數的意義和型別
  3. 返回值意義和型別
  4. 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最新技術，與企業需求同步。好友都在裡面學習交流，每天都會有大牛定時講解前端技術!

點選： 加入


來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/69901074/viewspace-2645003/，如需轉載，請註明出處，否則將追究法律責任。

相關文章