(75)Wangdao.com第十三天_JavaScript 包装对象

包装对象

所谓“包装对象”，就是分别与数值、字符串、布尔值相对应的Number、String、Boolean三个原生对象

这三个原生对象可以把原始类型的值变成（包装成）对象

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    123外面必须要加上圆括号，否则后面的点运算符（.）会被解释成小数点

这种自定义方法和属性的机制，只能定义在包装对象的原型上，如果直接对原始类型的变量添加属性，则无效

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 对象

是数值对应的包装对象，可以作为构造函数使用，也可以作为工具函数使用

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 错误

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 错误

不会进行四舍五入，而是类似向下取整

(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 对象

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属性，所以可以像数组那样取值

字符串对象是一个类似数组的对象（很像数组，但不是数组）

除了用作构造函数，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 
```

posted @ 2018-10-12 20:08 耶梦加德阅读(157) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

我即狂澜，且力不可挽

(75)Wangdao.com第十三天_JavaScript 包装对象

公告