JavaScript高級程序設計 - CH5

第五章、引用類型

一共七種引用類型：

• Object： 可經過new和字面量兩種方法來建立。在使用字面量表示法的時候，並不會調用對象的構造函數
• Array： 17種經常使用方法; 同object同樣可經過new和字面量兩種方法來建立。
• Date：
• RegExp：
• Function： 函數名指針，this指針，prototype原型鏈，apply()、call()
• 基本包裝類型(Boolean, Number, String)：
• 單體內置對象(Global, Math)：

1.Object類型

兩種訪問對象屬性的方法:

1. person["name"];
2. person.name;

一般建議使用點表示法
方括號表示方法主要優勢： 經過變量來訪問屬性。

2.Array類型

·[].length屬性不是隻讀的，能夠讀取，修改，擴大/新增，縮小/刪除。

Array對象方法簡介 (17 = 2+2+2+2+2+5+2)

• 棧方法(LIFO): push(), pop()
• 隊列方法(FIFO): push(), shift()
  另外還有unshift()
• 重排序方法： reverse(), sort()
  調用的是toString類型，因此比較的是ascii碼
• 操做方法： concat(), slice()
• 位置方法： indexOf(), lastIndexOf();
  使用的是全等號
• 迭代方法： every(), filter(), some(), forEach(), map()
• 歸併方法： reduce(), reduceRight()

---

經典問題: 檢測對象是不是數組 arr instanceof Array?

本質依賴於構造函數，受到執行環境影響。因此，ES5當中是新增了Array.isArray(arr)方法。

經典問題: 類型判別?

• typeof

null是對象空指針，適合判斷基本類型變量，不適合判斷引用類型（都返回object），好比自定義的對象類型

• instanceof

若是有多個框架，那就存在兩個以上不一樣的全局執行環境，那就會有兩個不一樣版本的Array的構造函數。
並且返回的是true/false

• constructor

高效可是危險Null or Undefined

• Object.prototype.toString.call() 建議使用

---

Array對象方法詳解

方法前面帶*表示不修改原來數組

• *join() 全部元素拼接成一個字符串，返回字符串

['Fire', 'Air', 'Water'].join('-')); //"Fire-Air-Water"

逆方法： String.prototype.split()

• *slice()切片：從已有的數組中返回選定的元素

var animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];
animals.slice(2);// Array ["camel", "duck", "elephant"]
animals.slice(2, 4);//Array ["camel", "duck"]
animals.slice(-2, -1) <==> animals.slice(3, 4) //前提條件：長度爲5

• *concat()鏈接兩個或多個數組,返回新數組

arr1.concat(arr2)

• splice()從數組中添加/刪除項目，返回被刪除的元素

months.splice(1, 0, 'Feb');  // inserts at index 1
months.splice(4, 1, 'May');  // replaces 1 element at index 4

• pop() 刪除數組最後一個元素，返回被刪除的元素。若是數組爲空，則不改變數組，返回undefined
• shift()把數組的第一個元素刪除，返回第一個元素的值。若空數組，不進行任何操做，返回undefined
• push()向數組末尾添加一個或多個元素返回新數組的長度
• unshift()向數組的開頭添加一個或多個元素，返回新數組的長度
• reverse()顛倒元素順序，返回該數組
• sort()根據ascii進行排序，返回該數組

[0,1,5,10,15].sort(); //[0,1,10,15,5]
[0,1,5,10,15].sort( (v1,v2) => { return (v1<=v2)? -1:1; }); //[0,1,5,10,15]

• *toString() 返回數組的字符串形式

toLocalString()

Date類型

var start = Date.now();
// do something
var end = Date.now();
costTime = stop -start;

RegExp類型

var pattern = /[bc]at/gi <==> new RegExp("[bc]at","gi"); //大小寫不敏感，全局匹配bat或者cat
var matches = pattern.exec("bat is not a cat");

Function類型

函數名僅僅是指向函數的指針，不會與某個函數綁定（即變量法的函數引用是能夠被覆蓋的）
注意函數聲明提高（function declaratioin hoisting）和變量提高是有區別的。

//unexpected identifier
alert(sum(1,1));
var sum = function(v1, v2){
    return v1 + v2;
}
//ok
alert(sum1(1,1));
function sum1(v1, v2){
    return v1 + v2;
}

內部對象，this指針和類數組對象arguments

1. 類數組對象arguments

嚴格模式下arguments.callee和arguments.caller無效

1. this指針

注意做用域

window.color = "red";
var o = { color : "blue"};
function sayColor(){
    alert(this.color);
}
sayColor(); //red
o.sayColor() = sayColor();
o.sayColor(); //blue

Function的prototype屬性、內部方法

fn.length屬性表示fn但願接收的參數的個數
prototype屬性
保存全部實例方法的真正所在，換言之甚至toString(),valueOf()等方法都在prototype之下。
在建立自定義引用類型以及實現繼承時，prototype極爲重要。而且它是不可枚舉的，所以for-in沒法發現。
內部方法
每一個fn都包含apply()和call()，apply()固定接收兩個參數，做用域和arguments， call()接收多個參數，第一個是做用域。
這兩個函數能夠用來傳參數，可是真正的做用是擴充做用域：如此對象和方法不須要有任何的耦合關係

window.color = "red";
var o = { color : "blue"};
function sayColor(){
    alert(this.color);
}
sayColor.call(this); //red
sayColor.call(window); //red
sayColor.call(o); //blue

基本包裝類型(Boolean, Number, String)

咱們知道，基本類型值不是對象，所以邏輯上應該是沒有方法的。可是實際當中Boolean, Number, String這三種在訪問/讀取的時候，會進入一種「讀取模式」：建立實例 =》實例上調用方法 =》銷燬實例
這種讀取模式是隱性的，而且不建議顯示調用。由於會讓人分不清是在處理基本類型仍是引用類型。

• 直接調用基本包裝類型的構造函數，返回實例都屬於object

  var value = Number("25");
  alert(typeof value);// number
  var value2 = new Number("25");
  alert(typeof value2);// object

• new Object()這個構造函數是會根據參數返回相應的基本包裝類型的實例。說白了就是工廠模式唄

  var obj = new Object("test");
  alert(obj instanceof String) //true

Boolean基本包裝對象

很爛很爛很爛，不要去用

Number基本包裝對象

num.toFixed(2); //精確兩位小數
num.toExponential(2) //科學計數法保留兩位小數
num.toPrecision（2） //看哪一種格式方便，自動返回fixed仍是指數形式

String基本包裝對象

• 字符方法：str.charAt(2); str[2]
• 操做方法：str.concat(); str.slice(), str.substring, str.substr()
  後面三個都是返回一個新串串。均可以接受兩個參數，slice()和substring()是[start,end]，而substr是[start,length]
• 位置方法：str.indexOf(); str.lastIndexOf()
  若是接受第二個參數，表示從第幾位開始查起
• trim方法： 去除開頭結尾的空格
• 大小寫轉換方法： toUpperCase(); toLowerCase()
  少數語言（好比土耳其語）會爲Unicode來應用特殊的轉換規則，因此最好用toLocalUpperCase()

• 模式匹配方法： str.match(pattern); str.replace(), str.split(),str.includes()

  var mathces = pattern.exec(str) <==> str.match(pattern);
  var str = "cat,bat,fat"; //pattern必定要用全局模式g
  alert( str.replace(/(.at)/g, "word ($1)") ); //word (cat), word (bat), word (fat)

• padding方法: str.padStart(), str.padEnd();

  const fullNumber = '2034399002125581';
  const last4Digits = fullNumber.slice(-4);
  const maskedNumber = last4Digits.padStart(fullNumber.length, '*'); //"************5581"

單體內置對象(Global, Math)

由ECMAScript實現提供的、不依賴於宿主環境的對象。

Global對象

• URI編碼方法： encodeURI(), encodeURIComponent()

//http://www.w3school.com.cn/My%20first/
encodeURI("http://www.w3school.com.cn/My first/")
// http%3A%2F%2Fwww.w3school.com.cn%2FMy%20first%2F
encodeURIComponent("http://www.w3school.com.cn/My first/"

• eval()方法，執行字符串代碼

var msg = "hello world";
eval("alert(msg)");

• window對象
  web瀏覽器都是把Global對象做爲window對象的一部分來實現的。所以，在全局做用域中聲明的全部變量和函數，都成爲了window對象的屬性

Math對象

• Math對象的屬性

Math.E常量e，Math.PI常量圓周率

• min(), max()接受多參數

// 這個技巧的關鍵是把Math對象做爲第一個參數，從而正確地設置this指針，而後吧values數組做爲參數
var values = [1,2,3,4,5];
var max = Math.max.apply(Math, values);

• 舍入方法

Math.ceil(); // 向上取整
Math.floor(); // 向下取整
Math.round(); // 四捨五入整數

• 隨機數random()

本質是返回(0,1)的一個隨機數
值 = Math.floor( Math.random() * 可能值的總數 + 第一個可能的值 );

• 其餘方法

Math.abs(num);
Math.pow(num,power); //num^power
三角函數、反三角函數等