(75)Wangdao.com第十三天_JavaScript 包裝對象

時間 2019-11-08

標籤 wangdao.com wangdao com 第十三天 3天 javascript 包裝對象欄目 JavaScript 简体版

原文原文鏈接

包裝對象正則表達式

所謂「包裝對象」，就是分別與數值、字符串、布爾值相對應的Number、String、Boolean三個原生對象
數組

這三個原生對象能夠把原始類型的值變成（包裝成）對象app

var v1 = new Number(123);
var v2 = new String('abc');
var v3 = new Boolean(true);

typeof v1    // "object"
typeof v2    // "object"
typeof v3    // "object"

v1 === 123    // false
v2 === 'abc'    // false
v3 === true    // false

目的：
- 使得 JavaScript 的對象涵蓋全部的值
- 使得原始類型的值能夠方便地調用某些方法

實例方法 :

- 三種包裝對象各自提供了許多實例方法。這裏介紹兩種它們共同具備、從Object對象繼承的方法：valueOf和toString
.valueOf() 返回包裝對象實例對應的原始類型的值
.toString() 方法返回對應的字符串形式

new Number(123).valueOf();     // 123
new String('abc').valueOf();    // "abc"
new Boolean(true).valueOf();    // true

new Number(123).toString();    // "123"
new String('abc').toString();    // "abc"
new Boolean(true).toString();    // "true"

原始類型與實例對象的自動轉換 :
- 原始類型的值，能夠自動看成包裝對象調用，即調用包裝對象的屬性和方法。
- 這時，JavaScript 引擎會自動將原始類型的值轉爲包裝對象實例，在使用後馬上銷燬實例
- ```
'abc'.length    // 3

// abc是一個字符串，自己不是對象，不能調用length屬性。
// JavaScript 引擎自動將其轉爲包裝對象，在這個對象上調用length屬性。
// 調用結束後，這個臨時對象就會被銷燬。
        //這就叫原始類型與實例對象的自動轉換
```
- 調用結束後，包裝對象實例會自動銷燬。
- 這意味着，下一次調用字符串的屬性時，實際是調用一個新生成的對象，而不是上一次調用時生成的那個對象，因此取不到賦值在上一個對象的屬性。
- 若是要爲字符串添加屬性，只有在它的原型對象String.prototype上定義

自定義方法 :

除了原生的實例方法，包裝對象還能夠自定義方法和屬性，供原始類型的值直接調用

// 好比，咱們能夠新增一個double方法，使得字符串和數字翻倍
String.prototype.double = function () {
    return this.valueOf() + this.valueOf();
};

'abc'.double();    // abcabc

Number.prototype.double = function () {
    return this.valueOf() + this.valueOf();
};

(123).double();    // 246    1外面必需要加上圓括號，不然後面的點運算符（）會被解釋成小數點23.

這種自定義方法和屬性的機制，只能定義在包裝對象的原型上，若是直接對原始類型的變量添加屬性，則無效

Boolean 對象函數

做爲構造函數時，它主要用於生成布爾值的包裝對象實例

false對應的包裝對象實例，布爾運算結果也是true

var b = new Boolean(true);

typeof b;    // "object"
b.valueOf();    // true


if (new Boolean(false)) {
    console.log('true');    // true
} 

if (new Boolean(false).valueOf()) {
    console.log('true');    // 無輸出
}

做爲函數單獨使用，將任意值轉爲布爾值

Boolean(undefined);     // false
Boolean(null);     // false
Boolean(0);     // false
Boolean('');     // false
Boolean(NaN);     // false

Boolean(1);     // true
Boolean('false');     // true
Boolean([]);     // true
Boolean({});    // true
Boolean(function () {});    // true
Boolean(/foo/);    // true

// 上面幾種 true 的狀況，都值得認真記住

使用雙重的否運算符（!）也能夠將任意值轉爲對應的布爾值

!!undefined    // false
!!null    // false
!!0    // false
!!''    // false
!!NaN    // false

!!1    // true
!!'false'    // true
!![]    // true
!!{}    // true
!!function(){}    // true
!!/foo/    // true

Number 對象工具

是數值對應的包裝對象，能夠做爲構造函數使用，也能夠做爲工具函數使用ui

var n = new Number(1);
typeof n    // "object"


Number(true);    // 1

做爲構造函數時，它用於生成值爲數值的對象
做爲工具函數時，它能夠將任何類型的值轉爲數
靜態屬性
- Number.POSITIVE_INFINITY 正的無限，指向Infinity
- Number.NEGATIVE_INFINITY 負的無限，指向-Infinity
- Number.NaN 表示非數值，指向NaN
- Number.MIN_VALUE 表示最小的正數（即最接近0的正數，在64位浮點數體系中爲5e-324），相應的，最接近0的負數爲-Number.MIN_VALUE
- Number.MAX_SAFE_INTEGER 表示可以精確表示的最大整數，即9007199254740991
- Number.MIN_SAFE_INTEGER 表示可以精確表示的最小整數，即-9007199254740991

四個實例方法 都跟將數值轉換成指定格式有關

Number.prototype.toString()
- Number對象部署的本身的toString方法，用來將一個數值轉爲字符串形式
- 能夠接受一個參數，表示輸出的進制。
- 若是省略這個參數，默認將數值先轉爲十進制，再輸出字符串；
- 不然，就根據參數指定的進制，將一個數字轉化成某個進制的字符串
  - ```
  // 10必定要放在括號裏，這樣代表後面的點表示調用對象屬性。
  // 若是不加括號，這個點會被 JavaScript 引擎解釋成小數點，從而報錯
  
  (10).toString();    // "10"
  
  (10).toString(2);     // "1010"
  (10).toString(8);     // "12"
  (10).toString(16);     // "a"
```
- 經過方括號運算符也能夠調用toString方法
  - ```
  10['toString'](2);    // "1010"
```
Number.prototype.toFixed() 先將一個數轉爲指定位數的小數，而後返回這個小數對應的字符串
- - ```
  (10).toFixed(2);    // "10.00"
  (10.005).toFixed(2);    // "10.01"
  11.11111.toFixed(2);    // "11.11"
```
  參數爲小數位數，有效範圍爲0到20，超出這個範圍將拋出 RangeError 錯誤this

Number.prototype.toExponential() 用於將一個數轉爲科學計數法形式

(10).toExponential();      // "1e+1"
(10).toExponential(1);     // "1.0e+1"
(10).toExponential(2);     // "1.00e+1"

(1234).toExponential();    // "1.234e+3"
(1234).toExponential(1);     // "1.2e+3"
(1234).toExponential(2);     // "1.23e+3"

小數點後有效數字的位數，範圍爲0到20，超出這個範圍，會拋出一個 RangeError 錯誤編碼

Number.prototype.toPrecision() 將一個數轉爲指定位數的有效數字

(12.34).toPrecision(1);     // "1e+1"
(12.34).toPrecision(2);     // "12"
(12.34).toPrecision(3);     // "12.3"
(12.34).toPrecision(4);     // "12.34"
(12.34).toPrecision(5);     // "12.340"

有效數字的位數，範圍是1到21，超出這個範圍會拋出 RangeError 錯誤spa

不會進行四捨五入，而是相似向下取整

(12.35).toPrecision(3);     // "12.3"
(12.25).toPrecision(3);     // "12.3"
(12.15).toPrecision(3);     // "12.2"
(12.45).toPrecision(3);     // "12.4"

自定義方法

與其餘對象同樣，Number.prototype對象上面能夠自定義方法，被Number的實例繼承。
在數值上調用某個方法，數值會自動轉爲Number的實例對象

若是方法返回的仍是數值，還能夠進行鏈式運算

Number.prototype.add = function (x) {
    return this + x;
};

Number.prototype.subtract = function (x) {
    return this - x;
};

8['add'](2);    // 10
(8).add(2).subtract(4);    // 6

部署更復雜的方法

// 在Number對象的原型上部署了iterate方法，將一個數值自動遍歷建立一個數組
Number.prototype.iterate = function () {
    var result = [];
    for (var i = 0; i <= this; i++) {
        result.push(i);
    }
    return result;    // 返回建立的數組
};

(8).iterate()    // [0, 1, 2, 3, 4, 5, 6, 7, 8]

String 對象prototype

var s1 = 'abc';
var s2 = new String('abc');

typeof s1;   // "string"
typeof s2;    // "object"

s2.valueOf();    // "abc"

new String('abc'); // String {0: "a", 1: "b", 2: "c", length: 3} (new String('abc'))[1]; // "b" 有數值鍵（0、1、2）和length屬性，因此能夠像數組那樣取值012length

字符串對象是一個相似數組的對象（很像數組，但不是數組）

除了用做構造函數，String對象還能夠看成工具方法使用，將任意類型的值轉爲字符串

靜態方法
- String.fromCharCode()
  - 參數是一個或多個數值，表明 Unicode 碼點，返回值是這些碼點組成的字符串
  - 參數爲空，就返回空字符串；不然，返回參數對應的 Unicode 字符串
  - 該方法不支持 Unicode 碼點大於0xFFFF的字符，即傳入的參數不能大於0xFFFF（即十進制的 65535 )
  - 參數0x20BB7大於0xFFFF，致使返回結果出錯。。。注意：是結果出錯，而不是報錯
  - 碼點大於0xFFFF的字符佔用四個字節，而 JavaScript 默認支持兩個字節的字符。這種狀況下，必須把0x20BB7拆成兩個字符表示
    - String.fromCharCode(0xD842, 0xDFB7); // "𠮷" //上面代碼中，0x20BB7拆成兩個字符0xD842和0xDFB7 // （即兩個兩字節字符，合成一個四字節字符），就能獲得正確的結果。 // 碼點大於0xFFFF的字符的四字節表示法，由 UTF-16 編碼方法決定
實例屬性
- String.prototype.length 返回字符串的長度
  - ```
  'abc'.length;    // 3
```
實例方法
- String.prototype.charAt()
  - 返回指定位置的字符，參數是從0開始編號的位置
  - 這個方法徹底能夠用數組下標替代
  - 若是參數爲負數，或大於等於字符串的長度，charAt返回空字符串
```
var s = new String('abc');

s.charAt(1);    // "b"
s.charAt(s.length - 1);    // "c"

'abc'.charAt(1);    // "b"
'abc'[1];    // "b"

'abc'.charAt(-1);    // ""
'abc'.charAt(3);    // ""
```
- String.prototype.charCodeAt()
  - charCodeAt方法返回字符串指定位置的 Unicode 碼點（十進制表示），至關於String.fromCharCode()的逆操做
  - 能夠理解爲獲取字符串指定位置的字符的Unicode編碼
  - 若是沒有任何參數，charCodeAt返回首字符的 Unicode 碼點。
  - charCodeAt方法返回的 Unicode 碼點不會大於65536（0xFFFF），也就是說，只返回兩個字節的字符的碼點。
    - 'abc'.charCodeAt(1); // 98 'abc'.charCodeAt(); // 97 'abc'.charCodeAt(-1); // NaN 'abc'.charCodeAt(4); // NaN
  - 若是遇到碼點大於 65536 的字符（四個字節的字符），必需連續使用兩次charCodeAt，不只讀入charCodeAt(i)，還要讀入charCodeAt(i+1)，將兩個值放在一塊兒，才能獲得準確的字符
- String.prototype.concat()
  - 用於鏈接兩個字符串，返回一個新字符串，不改變原字符串
  - 若是參數不是字符串，concat方法會將其先轉爲字符串，而後再鏈接
```
var s1 = 'abc';
var s2 = 'def';

s1.concat(s2);    // "abcdef"
s1    // "abc"

'a'.concat('b', 'c');    // "abc"

var one = 1;
var two = 2;
var three = '3';

''.concat(one, two, three);    // "123"
one + two + three    // "33"
```
- String.prototype.slice()
  - 用於從原字符串取出子字符串並返回，不改變原字符串
  - 第一個參數是子字符串的開始位置，
  - 第二個參數是子字符串的結束位置（不含該位置）
  - 若是省略第二個參數，則表示子字符串一直到原字符串結束
  - 若是參數是負值，表示從結尾開始倒數計算的位置，即該負值加上字符串長度
  - 若是第一個參數大於第二個參數，slice方法返回一個空字符串
  - ```
  'JavaScript'.slice(0, 4);    // "Java"
  'JavaScript'.slice(4);    // "Script"
  'JavaScript'.slice(-6);    // "Script"
  'JavaScript'.slice(0, -6);    // "Java"
  'JavaScript'.slice(-2, -1);    // "p"
  'JavaScript'.slice(2, 1);    // ""
```
- String.prototype.substring()
  - 用於從原字符串取出子字符串並返回，不改變原字符串
  - 第一個參數表示子字符串的開始位置，第二個位置表示結束位置
  - 若是省略第二個參數，則表示子字符串一直到原字符串的結束
  - 若是第一個參數大於第二個參數，substring方法會自動更換兩個參數的位置
  - 若是參數是負數，substring方法會自動將負數轉爲0
  - ```
  'JavaScript'.substring(0, 4);    // "Java"
  
  'JavaScript'.substring(4);    // "Script"
  
  'JavaScript'.substring(10, 4);    // "Script"
  // 等同於
  'JavaScript'.substring(4, 10);    // "Script"
  
  'Javascript'.substring(-3);    // "JavaScript"
  'JavaScript'.substring(4, -3);    // "Java"
```
- String.prototype.substr()
  - 用於從原字符串取出子字符串並返回，不改變原字符串
  - 第一個參數是子字符串的開始位置（從0開始計算），第二個參數是子字符串的長度
  - 若是省略第二個參數，則表示子字符串一直到原字符串的結束
  - 若是第一個參數是負數，表示倒數計算的字符位置。
  - 若是第二個參數是負數，將被自動轉爲0，所以會返回空字符串
    - 'JavaScript'.substr(4, 6); // "Script" 'JavaScript'.substr(4); // "Script" 'JavaScript'.substr(-6); // "Script" 'JavaScript'.substr(4, -1); // ""
- String.prototype.indexOf()
  - 用於肯定一個字符串在另外一個字符串中第一次出現的位置，返回結果是匹配開始的位置。若是返回-1，就表示不匹配
  - 第二個參數，表示開始匹配的位置
- String.prototype.lastIndexOf()
  - 主要的區別是lastIndexOf從尾部開始匹配
- String.prototype.trim()
  - 用於去除字符串兩端的空格，返回一個新字符串，不改變原字符串
  - 去除的不只是空格，還包括製表符（\t、\v）、換行符（\n）和回車符（\r）
    - ' hello world '.trim(); // "hello world" '\r\nabc \t'.trim(); // 'abc'
- String.prototype.toLowerCase()
  - 將一個字符串所有轉爲小寫。返回一個新字符串，不改變原字符串
- String.prototype.toUpperCase()
  - 將一個字符串所有轉爲大寫。返回一個新字符串，不改變原字符串
  - ```
  'Hello World'.toLowerCase();    // "hello world"
  
  'Hello World'.toUpperCase();    // "HELLO WORLD"
```
- String.prototype.match()
  - 用於肯定原字符串是否匹配某個子字符串，返回一個數組，成員爲匹配的第一個字符串。
  - 若是沒有找到匹配，則返回null
  - 用於肯定原字符串是否匹配某個子字符串，返回一個數組，成員爲匹配的第一個字符串。若是沒有找到匹配，則返回null
  - match方法還可使用正則表達式做爲參數
    - 'cat, bat, sat, fat'.match('at'); // ["at"] 'cat, bat, sat, fat'.match('xt'); // null var matches = 'cat, bat, sat, fat'.match('at'); matches.index; // 1 matches.input; // "cat, bat, sat, fat"
- String.prototype.search()
  - 用法基本等同於match，可是返回值爲匹配的第一個位置。若是沒有找到匹配，則返回-1
    - 'cat, bat, sat, fat'.search('at'); // 1
- String.prototype.replace()
  - 用於替換匹配的子字符串，通常狀況下只替換第一個匹配（除非使用帶有g修飾符的正則表達式）
    - 'aaa'.replace('a', 'b'); // "baa"
- String.prototype.split()
  - 按照給定規則分割字符串，返回一個由分割出來的子字符串組成的數組
  - 第一個參數，分割規則
  - 第二個參數，限定返回數組的最大成員數
  - 分割規則爲空字符串，則返回數組的成員是原字符串的每個字符
  - 省略參數，則返回數組的惟一成員就是原字符串
  - 若是知足分割規則的兩個部分緊鄰着（即兩個分割符中間沒有其餘字符），則返回數組之中會有一個空字符串
  - 若是知足分割規則的部分處於字符串的開頭或結尾（即它的前面或後面沒有其餘字符），則返回數組的第一個或最後一個成員是一個空字符串
    - 'a|b|c'.split('|'); // ["a", "b", "c"] 'abc'.split(''); // ["a", "b", "c"] 'abc'.split(); // ["abc"] 'a c'.split(''); // ['a', '', 'c'] ' bc'.split(''); // ["", "b", "c"] 'ab '.split(''); // ["a", "b", ""] 'abc'.split('', 0); // [] 'abc'.split('', 1); // ["a"] 'abc'.split('', 2); // ["a", "b"] 'abc'.split('', 3); // ["a", "b", "c"] 'abc'.split('', 4); // ["a", "b", "c"]
- String.prototype.localeCompare()
  - 用於比較兩個字符串。它返回一個整數
  - 若是返回值小於0，表示第一個字符串小於第二個字符串；
  - 若是返回值等於0，表示二者相等；
  - 若是返回值大於0，表示第一個字符串大於第二個字符串。
  - 該方法的最大特色，就是會考慮天然語言的順序
    - 由於 JavaScript 採用的是 Unicode 碼點比較，B的碼點是66，而a的碼點是97
    - 還能夠有第二個參數，指定所使用的語言（默認是英語），而後根據該語言的規則進行比較
      - 'ä'.localeCompare('z', 'de'); // -1 'ä'.localeCompare('z', 'sv'); // 1
  - ```
  'B' > 'a'    // false    B的碼點是66，而a的碼點是97
  'B'.localeCompare('a');    // 1    考慮到語言規則 b 大於 a
  
  'apple'.localeCompare('banana');    // -1
  'apple'.localeCompare('apple');    // 0 
```

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。