前端基礎入門四(JavaScript基礎)

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

目標:

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

我們先來學習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/,如需轉載,請註明出處,否則將追究法律責任。

相關文章