<h2 id="3.1">Object对象</h2> ## 概述 JavaScript原生提供一个`Object`对象（注意起首的`O`是大写），所有其他对象都继承自这个对象。`Object`本身也是一个构造函数，可以直接通过它来生成新对象。 ```javascript var o = new Object(); ``` `Object`作为构造函数使用时，可以接受一个参数。如果该参数是一个对象，则直接返回这个对象；如果是一个原始类型的值，则返回该值对应的包装对象。 ```javascript var o1 = {a: 1}; var o2 = new Object(o1); o1 === o2 // true new Object(123) instanceof Number // true ``` > 注意，通过`new Object()`的写法生成新对象，与字面量的写法`o = {}`是等价的。 与其他构造函数一样，如果要在`Object`对象上面部署一个方法，有两种做法。 **（1）部署在Object对象本身** 比如，在Object对象上面定义一个print方法，显示其他对象的内容。 ```javascript Object.print = function(o){ console.log(o) }; var o = new Object(); Object.print(o) // Object ``` **（2）部署在Object.prototype对象** 所有构造函数都有一个prototype属性，指向一个原型对象。凡是定义在Object.prototype对象上面的属性和方法，将被所有实例对象共享。（关于prototype属性的详细解释，参见《面向对象编程》一章。） ```javascript Object.prototype.print = function(){ console.log(this)}; var o = new Object(); o.print() // Object ``` 上面代码在Object.prototype定义了一个print方法，然后生成一个Object的实例o。o直接继承了Object.prototype的属性和方法，可以在自身调用它们，也就是说，o对象的print方法实质上是调用Object.prototype.print方法。。 可以看到，尽管上面两种写法的print方法功能相同，但是用法是不一样的，因此必须区分“构造函数的方法”和“实例对象的方法”。 ## Object对象的方法 ### Object() Object本身当作工具方法使用时，可以将任意值转为对象。其中，原始类型的值转为对应的包装对象（参见《原始类型的包装对象》一节）。 ```javascript Object() // 返回一个空对象 Object(undefined) // 返回一个空对象 Object(null) // 返回一个空对象 Object(1) // 等同于 new Number(1) Object('foo') // 等同于 new String('foo') Object(true) // 等同于 new Boolean(true) Object([]) // 返回原数组 Object({}) // 返回原对象 Object(function(){}) // 返回原函数 ``` 上面代码表示Object函数将各种值，转为对应的对象。 如果Object函数的参数是一个对象，它总是返回原对象。利用这一点，可以写一个判断变量是否为对象的函数。 ```javascript function isObject(value) { return value === Object(value); } ``` ### Object.keys()，Object.getOwnPropertyNames() Object.keys方法和Object.getOwnPropertyNames方法很相似，一般用来遍历对象的属性。它们的参数都是一个对象，都返回一个数组，该数组的成员都是对象自身的（而不是继承的）所有属性名。它们的区别在于，Object.keys方法只返回可枚举的属性（关于可枚举性的详细解释见后文），Object.getOwnPropertyNames方法还返回不可枚举的属性名。 ```javascript var o = { p1: 123, p2: 456 }; Object.keys(o) // ["p1", "p2"] Object.getOwnPropertyNames(o) // ["p1", "p2"] ``` 上面的代码表示，对于一般的对象来说，这两个方法返回的结果是一样的。只有涉及不可枚举属性时，才会有不一样的结果。 ```javascript var a = ["Hello", "World"]; Object.keys(a) // ["0", "1"] Object.getOwnPropertyNames(a) // ["0", "1", "length"] ``` 上面代码中，数组的length属性是不可枚举的属性，所以只出现在Object.getOwnPropertyNames方法的返回结果中。 由于JavaScript没有提供计算对象属性个数的方法，所以可以用这两个方法代替。 ```javascript Object.keys(o).length Object.getOwnPropertyNames(o).length ``` 一般情况下，几乎总是使用Object.keys方法，遍历数组的属性。 ### Object.observe() Object.observe方法用于观察对象属性的变化。 ```javascript var o = {}; Object.observe(o, function(changes) { changes.forEach(function(change) { console.log(change.type, change.name, change.oldValue); }); }); o.foo = 1; // add, 'foo', undefined o.foo = 2; // update, 'foo', 1 delete o.foo; // delete, 'foo', 2 ``` 上面代码表示，通过Object.observe函数，对o对象指定回调函数。一旦o对象的属性出现任何变化，就会调用回调函数，回调函数通过一个参数对象读取o的属性变化的信息。 该方法非常新，只有Chrome浏览器的最新版本才部署。 ### 其他方法 除了上面提到的方法，Object还有不少其他方法，将在后文逐一详细介绍。 **（1）对象属性模型的相关方法** - Object.getOwnPropertyDescriptor()：获取某个属性的attributes对象。 - Object.defineProperty()：通过attributes对象，定义某个属性。 - Object.defineProperties()：通过attributes对象，定义多个属性。 - Object.getOwnPropertyNames()：返回直接定义在某个对象上面的全部属性的名称。 **（2）控制对象状态的方法** - Object.preventExtensions()：防止对象扩展。 - Object.isExtensible()：判断对象是否可扩展。 - Object.seal()：禁止对象配置。 - Object.isSealed()：判断一个对象是否可配置。 - Object.freeze()：冻结一个对象。 - Object.isFrozen()：判断一个对象是否被冻结。 **（3）原型链相关方法** - Object.create()：生成一个新对象，并该对象的原型。 - Object.getPrototypeOf()：获取对象的Prototype对象。 ## Object实例对象的方法 除了`Object`对象本身的方法，还有不少方法是部署在`Object.prototype`对象上的，所有`Object`的实例对象都继承了这些方法。 `Object`实例对象的方法，主要有以下六个。 - `valueOf()`：返回当前对象对应的值。 - `toString()`：返回当前对象对应的字符串形式。 - `toLocaleString()`：返回当前对象对应的本地字符串形式。 - `hasOwnProperty()`：判断某个属性是否为当前对象自身的属性，还是继承自原型对象的属性。 - `isPrototypeOf()`：判断当前对象是否为另一个对象的原型。 - `propertyIsEnumerable()`：判断某个属性是否可枚举。 本节介绍前两个方法，其他方法将在后文相关章节介绍。 ### Object.prototype.valueOf() `valueOf`方法的作用是返回一个对象的“值”，默认情况下返回对象本身。 ```javascript var o = new Object(); o.valueOf() === o // true ``` 上面代码比较`o.valueOf()`与`o`本身，两者是一样的。 `valueOf`方法的主要用途是，JavaScript自动类型转换时会默认调用这个方法（详见《数据类型转换》一节）。 ```javascript var o = new Object(); 1 + o // "1[object Object]" ``` 上面代码将对象`o`与数字`1`相加，这时JavaScript就会默认调用`valueOf()`方法。所以，如果自定义`valueOf`方法，就可以得到想要的结果。 ```javascript var o = new Object(); o.valueOf = function (){ return 2; }; 1 + o // 3 ``` 上面代码自定义了`o`对象的`valueOf`方法，于是`1 + o`就得到了`3`。这种方法就相当于用`o.valueOf`覆盖`Object.prototype.valueOf`。 ### Object.prototype.toString() `toString`方法的作用是返回一个对象的字符串形式，默认情况下返回类型字符串。 ```javascript var o1 = new Object(); o1.toString() // "[object Object]" var o2 = {a:1}; o2.toString() // "[object Object]" ``` 上面代码表示，对于一个对象调用`toString`方法，会返回字符串`[object Object]`，该字符串说明对象的类型。 字符串`[object Object]`本身没有太大的用处，但是通过自定义`toString`方法，可以让对象在自动类型转换时，得到想要的字符串形式。 ```javascript var o = new Object(); o.toString = function () { return 'hello'; }; o + ' ' + 'world' // "hello world" ``` 上面代码表示，当对象用于字符串加法时，会自动调用`toString`方法。由于自定义了`toString`方法，所以返回字符串`hello world`。 数组、字符串、函数、Date对象都分别部署了自己版本的`toString`方法，覆盖了`Object.prototype.toString`方法。 ```javascript [1, 2, 3].toString() // "1,2,3" '123'.toString() // "123" (function () { return 123; }).toString() // "function () { // return 123; // }" (new Date()).toString() // "Tue May 10 2016 09:11:31 GMT+0800 (CST)" ``` ### toString()的应用：判断数据类型 `Object.prototype.toString`方法返回对象的类型字符串，因此可以用来判断一个值的类型。 ```javascript var o = {}; o.toString() // "[object Object]" ``` 上面代码调用空对象的`toString`方法，结果返回一个字符串`object Object`，其中第二个`Object`表示该值的构造函数。这是一个十分有用的判断数据类型的方法。 实例对象可能会自定义`toString`方法，覆盖掉`Object.prototype.toString`方法。通过函数的`call`方法，可以在任意值上调用`Object.prototype.toString`方法，帮助我们判断这个值的类型。 ```javascript Object.prototype.toString.call(value) ``` 不同数据类型的`Object.prototype.toString`方法返回值如下。 - 数值：返回`[object Number]`。 - 字符串：返回`[object String]`。 - 布尔值：返回`[object Boolean]`。 - undefined：返回`[object Undefined]`。 - null：返回`[object Null]`。 - 数组：返回`[object Array]`。 - arguments对象：返回`[object Arguments]`。 - 函数：返回`[object Function]`。 - Error对象：返回`[object Error]`。 - Date对象：返回`[object Date]`。 - RegExp对象：返回`[object RegExp]`。 - 其他对象：返回`[object " + 构造函数的名称 + "]`。 也就是说，`Object.prototype.toString`可以得到一个实例对象的构造函数。 ```javascript Object.prototype.toString.call(2) // "[object Number]" Object.prototype.toString.call('') // "[object String]" Object.prototype.toString.call(true) // "[object Boolean]" Object.prototype.toString.call(undefined) // "[object Undefined]" Object.prototype.toString.call(null) // "[object Null]" Object.prototype.toString.call(Math) // "[object Math]" Object.prototype.toString.call({}) // "[object Object]" Object.prototype.toString.call([]) // "[object Array]" ``` 利用这个特性，可以写出一个比`typeof`运算符更准确的类型判断函数。 ```javascript var type = function (o){ var s = Object.prototype.toString.call(o); return s.match(/\[object (.*?)\]/)[1].toLowerCase(); }; type({}); // "object" type([]); // "array" type(5); // "number" type(null); // "null" type(); // "undefined" type(/abcd/); // "regex" type(new Date()); // "date" ``` 在上面这个`type`函数的基础上，还可以加上专门判断某种类型数据的方法。 ```javascript ['Null', 'Undefined', 'Object', 'Array', 'String', 'Number', 'Boolean', 'Function', 'RegExp', 'NaN', 'Infinite' ].forEach(function (t) { type['is' + t] = function (o) { return type(o) === t.toLowerCase(); }; }); type.isObject({}) // true type.isNumber(NaN) // true type.isRegExp(/abc/) // true ``` ## 对象的属性模型 ECMAScript 5对于对象的属性，提出了一个精确的描述模型。 ### 属性的attributes对象，Object.getOwnPropertyDescriptor() 在JavaScript内部，每个属性都有一个对应的attributes对象，保存该属性的一些元信息。使用`Object.getOwnPropertyDescriptor`方法，可以读取attributes对象。 ```javascript var o = { p: 'a' }; Object.getOwnPropertyDescriptor(o, 'p') // Object { value: "a", // writable: true, // enumerable: true, // configurable: true // } ``` 上面代码表示，使用`Object.getOwnPropertyDescriptor`方法，读取`o`对象的`p`属性的attributes对象。 `attributes`对象包含如下元信息。 - `value`：表示该属性的值，默认为`undefined`。 - `writable`：表示该属性的值（value）是否可以改变，默认为`true`。 - `enumerable`： 表示该属性是否可枚举，默认为`true`。如果设为`false`，会使得某些操作（比如`for...in`循环、`Object.keys()`）跳过该属性。 - `configurable`：表示“可配置性”，默认为true。如果设为false，将阻止某些操作改写该属性，比如，无法删除该属性，也不得改变该属性的attributes对象（value属性除外），也就是说，configurable属性控制了attributes对象的可写性。 - `get`：表示该属性的取值函数（getter），默认为`undefined`。 - `set`：表示该属性的存值函数（setter），默认为`undefined`。 ### Object.defineProperty()，Object.defineProperties() `Object.defineProperty`方法允许通过定义`attributes`对象，来定义或修改一个属性，然后返回修改后的对象。它的格式如下： ```javascript Object.defineProperty(object, propertyName, attributesObject) ``` `Object.defineProperty`方法接受三个参数，第一个是属性所在的对象，第二个是属性名（它应该是一个字符串），第三个是属性的描述对象。比如，新建一个`o`对象，并定义它的`p`属性，写法如下。 ```javascript var o = Object.defineProperty({}, 'p', { value: 123, writable: false, enumerable: true, configurable: false }); o.p // 123 o.p = 246; o.p // 123 // 因为writable为false，所以无法改变该属性的值 ``` 需要注意的是，`Object.defineProperty`方法和后面的`Object.defineProperties`方法，都有性能损耗，会拖慢执行速度，不宜大量使用。 `Object.defineProperty`的一个用途，是设置动态属性名。 ```javascript Object.defineProperty(obj, someFunction(), {value: true}); ``` 如果一次性定义或修改多个属性，可以使用`Object.defineProperties`方法。 ```javascript var o = Object.defineProperties({}, { p1: { value: 123, enumerable: true }, p2: { value: 'abc', enumerable: true }, p3: { get: function () { return this.p1 + this.p2 }, enumerable:true, configurable:true } }); o.p1 // 123 o.p2 // "abc" o.p3 // "123abc" ``` 上面代码中的`p3`属性，定义了取值函数`get`。这时需要注意的是，一旦定义了取值函数`get`（或存值函数`set`），就不能将`writable`设为`true`，或者同时定义`value`属性，否则会报错。 ```javascript var o = {}; Object.defineProperty(o, 'p', { value: 123, get: function() { return 456; } }); // TypeError: Invalid property. // A property cannot both have accessors and be writable or have a value, ``` 上面代码同时定义了`get`属性和`value`属性，结果就报错。 `Object.defineProperty()`和`Object.defineProperties()`的第三个参数，是一个属性对象。它的`writable`、`configurable`、`enumerable`这三个属性的默认值都为`false`。 `writable`属性为`false`，表示对应的属性的值将不得改写。 ```javascript var o = {}; Object.defineProperty(o, 'p', { value: "bar" }); o.p // bar o.p = 'foobar'; o.p // bar Object.defineProperty(o, 'p', { value: 'foobar', }); // TypeError: Cannot redefine property: p ``` 上面代码由于`writable`属性默认为`false`，导致无法对`p`属性重新赋值，但是不会报错（严格模式下会报错）。不过，如果再一次使用`Object.defineProperty`方法对`value`属性赋值，就会报错。 `configurable`属性为`false`，将无法删除该属性，也无法修改`attributes`对象（`value`属性除外）。 ```javascript var o = {}; Object.defineProperty(o, 'p', { value: 'bar', }); delete o.p o.p // "bar" ``` 上面代码中，由于`configurable`属性默认为`false`，导致无法删除某个属性。 `enumerable`属性为`false`，表示对应的属性不会出现在`for...in`循环和`Object.keys`方法中。 ```javascript var o = { p1: 10, p2: 13, }; Object.defineProperty(o, 'p3', { value: 3, }); for (var i in o) { console.log(i, o[i]); } // p1 10 // p2 13 ``` 上面代码中，`p3`属性是用`Object.defineProperty`方法定义的，由于`enumerable`属性默认为`false`，所以不出现在`for...in`循环中。 ### 可枚举性（enumerable） 可枚举性（enumerable）用来控制所描述的属性，是否将被包括在`for...in`循环之中。具体来说，如果一个属性的`enumerable`为`false`，下面三个操作不会取到该属性。 - `for..in`循环 - `Object.keys`方法 - `JSON.stringify`方法 因此，`enumerable`可以用来设置“秘密”属性。 ```javascript var o = {a: 1, b: 2}; o.c = 3; Object.defineProperty(o, 'd', { value: 4, enumerable: false }); o.d // 4 for( var key in o ) console.log( o[key] ); // 1 // 2 // 3 Object.keys(o) // ["a", "b", "c"] JSON.stringify(o // => "{a:1,b:2,c:3}" ``` 上面代码中，`d`属性的`enumerable`为`false`，所以一般的遍历操作都无法获取该属性，使得它有点像“秘密”属性，但还是可以直接获取它的值。 至于`for...in`循环和`Object.keys`方法的区别，在于前者包括对象继承自原型对象的属性，而后者只包括对象本身的属性。如果需要获取对象自身的所有属性，不管enumerable的值，可以使用`Object.getOwnPropertyNames`方法，详见下文。 考虑到`JSON.stringify`方法会排除`enumerable`为`false`的值，有时可以利用这一点，为对象添加注释信息。 ```javascript var car = { id: 123, color: 'red', ownerId: 12 }; var owner = { id: 12, name: 'Jack' }; Object.defineProperty(car, 'ownerInfo', {value: owner, enumerable: false}); car.ownerInfo // {id: 12, name: "Jack"} JSON.stringify(car) // "{"id": 123,"color": "red","ownerId": 12}" ``` 上面代码中，`owner`对象作为注释，加入`car`对象。由于`ownerInfo`属性不可枚举，所以`JSON.stringify`方法最后输出`car`对象时，会忽略`ownerInfo`属性。 这提示我们，如果你不愿意某些属性出现在JSON输出之中，可以把它的`enumerable`属性设为`false`。 ### Object.getOwnPropertyNames() Object.getOwnPropertyNames方法返回直接定义在某个对象上面的全部属性的名称，而不管该属性是否可枚举。 ```javascript var o = Object.defineProperties({}, { p1: { value: 1, enumerable: true }, p2: { value: 2, enumerable: false } }); Object.getOwnPropertyNames(o) // ["p1", "p2"] ``` 一般来说，系统原生的属性（即非用户自定义的属性）都是不可枚举的。 ```javascript // 比如，数组实例自带length属性是不可枚举的 Object.keys([]) // [] Object.getOwnPropertyNames([]) // [ 'length' ] // Object.prototype对象的自带属性也都是不可枚举的 Object.keys(Object.prototype) // [] Object.getOwnPropertyNames(Object.prototype) // ['hasOwnProperty', // 'valueOf', // 'constructor', // 'toLocaleString', // 'isPrototypeOf', // 'propertyIsEnumerable', // 'toString'] ``` 上面代码可以看到，数组的实例对象（`[]`）没有可枚举属性，不可枚举属性有length；Object.prototype对象也没有可枚举属性，但是有不少不可枚举属性。 ### Object.prototype.propertyIsEnumerable() 对象实例的propertyIsEnumerable方法用来判断一个属性是否可枚举。 ```javascript var o = {}; o.p = 123; o.propertyIsEnumerable("p") // true o.propertyIsEnumerable("toString") // false ``` 上面代码中，用户自定义的p属性是可枚举的，而继承自原型对象的toString属性是不可枚举的。 ### 可配置性（configurable） 可配置性（configurable）决定了是否可以修改属性的描述对象。也就是说，当configurable为false的时候，value、writable、enumerable和configurable都不能被修改了。 ```javascript var o = Object.defineProperty({}, 'p', { value: 1, writable: false, enumerable: false, configurable: false }); Object.defineProperty(o,'p', {value: 2}) // TypeError: Cannot redefine property: p Object.defineProperty(o,'p', {writable: true}) // TypeError: Cannot redefine property: p Object.defineProperty(o,'p', {enumerable: true}) // TypeError: Cannot redefine property: p Object.defineProperties(o,'p',{configurable: true}) // TypeError: Cannot redefine property: p ``` 上面代码首先生成对象o，并且定义属性p的configurable为false。然后，逐一改动value、writable、enumerable、configurable，结果都报错。 需要注意的是，writable只有在从false改为true会报错，从true改为false则是允许的。 ```javascript var o = Object.defineProperty({}, 'p', { writable: true }); Object.defineProperty(o,'p', {writable: false}) // 修改成功 ``` 至于value，只要writable和configurable有一个为true，就可以改动。 ```javascript var o1 = Object.defineProperty({}, 'p', { value: 1, writable: true, configurable: false }); Object.defineProperty(o1,'p', {value: 2}) // 修改成功 var o2 = Object.defineProperty({}, 'p', { value: 1, writable: false, configurable: true }); Object.defineProperty(o2,'p', {value: 2}) // 修改成功 ``` 可配置性决定了一个变量是否可以被删除（delete）。 {% highlight javascript %} var o = Object.defineProperties({}, { p1: { value: 1, configurable: true }, p2: { value: 2, configurable: false } }); delete o.p1 // true delete o.p2 // false o.p1 // undefined o.p2 // 2 {% endhighlight %} 上面代码中的对象o有两个属性，p1是可配置的，p2是不可配置的。结果，p2就无法删除。 需要注意的是，当使用var命令声明变量时，变量的configurable为false。 ```javascript var a1 = 1; Object.getOwnPropertyDescriptor(this,'a1') // Object { // value: 1, // writable: true, // enumerable: true, // configurable: false // } ``` 而不使用var命令声明变量时（或者使用属性赋值的方式声明变量），变量的可配置性为true。 ```javascript a2 = 1; Object.getOwnPropertyDescriptor(this,'a2') // Object { // value: 1, // writable: true, // enumerable: true, // configurable: true // } // 或者写成 this.a3 = 1; Object.getOwnPropertyDescriptor(this,'a3') // Object { // value: 1, // writable: true, // enumerable: true, // configurable: true // } ``` 上面代码中的`this.a3 = 1`与`a3 = 1`是等价的写法。this指的是当前的作用域，更多关于this的解释，参见《面向对象编程》一章。 这种差异意味着，如果一个变量是使用var命令生成的，就无法用delete命令删除。也就是说，delete只能删除对象的属性。 ```javascript var a1 = 1; a2 = 1; delete a1 // false delete a2 // true a1 // 1 a2 // ReferenceError: a2 is not defined ``` ### 可写性（writable） 可写性（writable）决定了属性的值（value）是否可以被改变。 `javascript var o = {}; Object.defineProperty(o, "a", { value : 37, writable : false }); o.a // 37 o.a = 25; o.a // 37 ``` 上面代码将o对象的a属性可写性设为false，然后改变这个属性的值，就不会有任何效果。 这实际上将某个属性的值变成了常量。在ES6中，constant命令可以起到这个作用，但在ES5中，只有通过writable达到同样目的。 这里需要注意的是，当对a属性重新赋值的时候，并不会抛出错误，只是静静地失败。但是，如果在严格模式下，这里就会抛出一个错误，即使是对a属性重新赋予一个同样的值。 关于可写性，还有一种特殊情况。就是如果原型对象的某个属性的可写性为false，那么派生对象将无法自定义这个属性。 ```javascript var proto = Object.defineProperty({}, 'foo', { value: 'a', writable: false }); var o = Object.create(proto); o.foo = 'b'; o.foo // 'a' ``` 上面代码中，对象proto的foo属性不可写，结果proto的派生对象o，也不可以再自定义这个属性了。在严格模式下，这样做还会抛出一个错误。但是，有一个规避方法，就是通过覆盖attributes对象，绕过这个限制，原因是这种情况下，原型链会被完全忽视。 ```javascript Object.defineProperty(o, 'foo', { value: 'b' }); o.foo // 'b' ``` ### 存取器（accessor） 除了直接定义以外，属性还可以用存取器（accessor）定义。其中，存值函数称为setter，使用`set`命令；取值函数称为getter，使用`get`命令。 ```javascript var o = { get p() { return 'getter'; }, set p(value) { console.log('setter: ' + value); } }; ``` 上面代码中，`o`对象内部的`get`和`set`命令，分别定义了`p`属性的取值函数和存值函数。定义了这两个函数之后，对`p`属性取值时，取值函数会自动调用；对`p`属性赋值时，存值函数会自动调用。 ```javascript o.p // "getter" o.p = 123 // "setter: 123" ``` 注意，取值函数Getter不能接受参数，存值函数Setter只能接受一个参数（即属性的值）。另外，对象也不能与取值函数同名的属性。比如，上面的对象`o`设置了取值函数`p`以后，就不能再另外定义一个`p`属性。 存取器往往用于，某个属性的值需要依赖对象内部数据的场合。 ```javascript var o ={ $n : 5, get next() { return this.$n++ }, set next(n) { if (n >= this.$n) this.$n = n; else throw '新的值必须大于当前值'; } }; o.next // 5 o.next = 10; o.next // 10 ``` 上面代码中，`next`属性的存值函数和取值函数，都依赖于对内部属性`$n`的操作。 存取器也可以通过`Object.defineProperty`定义。 ```javascript var d = new Date(); Object.defineProperty(d, 'month', { get: function () { return d.getMonth(); }, set: function (v) { d.setMonth(v); } }); ``` 上面代码为`Date`的实例对象`d`，定义了一个可读写的`month`属性。 存取器也可以使用`Object.create`方法定义。 ```javascript var o = Object.create(Object.prototype, { foo: { get: function () { return 'getter'; }, set: function (value) { console.log('setter: '+value); } } }); ``` 如果使用上面这种写法，属性`foo`必须定义一个属性描述对象。该对象的`get`和`set`属性，分别是`foo`的取值函数和存值函数。 利用存取器，可以实现数据对象与DOM对象的双向绑定。 ```javascript Object.defineProperty(user, 'name', { get: function () { return document.getElementById('foo').value; }, set: function (newValue) { document.getElementById('foo').value = newValue; }, configurable: true }); ``` 上面代码使用存取函数，将DOM对象`foo`与数据对象`user`的`name`属性，实现了绑定。两者之中只要有一个对象发生变化，就能在另一个对象上实时反映出来。 ### 对象的拷贝 有时，我们需要将一个对象的所有属性，拷贝到另一个对象。ES5没有提供这个方法，必须自己实现。 ```javascript var extend = function (to, from) { for (var property in from) { to[property] = from[property]; } return to; } extend({}, {a: 1}) // {a: 1} ``` 上面这个方法的问题在于，如果遇到存取器定义的属性，会只拷贝值。 ```javascript extend({}, { get a(){ return 1 } }) // {a: 1} ``` 为了解决这个问题，我们可以通过`Object.defineProperty`方法来拷贝属性。 ```javascript var extend = function (to, from) { for (var property in from) { Object.defineProperty(to, property, Object.getOwnPropertyDescriptor(from, property)); } return to; } extend({}, { get a(){ return 1 } }) // { get a(){ return 1 } }) ``` 这段代码还是有问题，拷贝某些属性时会失效。 ```javascript extend(document.body.style, { backgroundColor: "red" }); ``` 上面代码的目的是，设置`document.body.style.backgroundColor`属性为`red`，但是实际上网页的背景色并不会变红。但是，如果用第一种简单拷贝的方法，反而能够达到目的。这提示我们，可以把两种方法结合起来，对于简单属性，就直接拷贝，对于那些通过描述对象设置的属性，则使用`Object.defineProperty`方法拷贝。 ```javascript var extend = function (to, from) { for (var property in from) { var descriptor = Object.getOwnPropertyDescriptor(from, property); if (descriptor && ( !descriptor.writable || !descriptor.configurable || !descriptor.enumerable || descriptor.get || descriptor.set)) { Object.defineProperty(to, property, descriptor); } else { to[property] = from[property]; } } } ``` 上面的这段代码，可以很好地拷贝任意属性。 ## 控制对象状态 JavaScript提供了三种方法，精确控制一个对象的读写状态，防止对象被改变。最弱一层的保护是preventExtensions，其次是seal，最强的freeze。 ### Object.preventExtensions方法 Object.preventExtensions方法可以使得一个对象无法再添加新的属性。 ```javascript var o = new Object(); Object.preventExtensions(o); Object.defineProperty(o, "p", { value: "hello" }); // TypeError: Cannot define property:p, object is not extensible. o.p = 1; o.p // undefined ``` 如果是在严格模式下，则会抛出一个错误。 ```javascript (function () { 'use strict'; o.p = '1' }()); // TypeError: Can't add property bar, object is not extensible ``` 不过，对于使用了preventExtensions方法的对象，可以用delete命令删除它的现有属性。 ```javascript var o = new Object(); o.p = 1; Object.preventExtensions(o); delete o.p; o.p // undefined ``` ### Object.isExtensible方法 Object.isExtensible方法用于检查一个对象是否使用了preventExtensions方法。也就是说，该方法可以用来检查是否可以为一个对象添加属性。 ```javascript var o = new Object(); Object.isExtensible(o) // true Object.preventExtensions(o); Object.isExtensible(o) // false ``` 上面代码新生成了一个o对象，对该对象使用Object.isExtensible方法，返回true，表示可以添加新属性。对该对象使用Object.preventExtensions方法以后，再使用Object.isExtensible方法，返回false，表示已经不能添加新属性了。 ### Object.seal方法 Object.seal方法使得一个对象既无法添加新属性，也无法删除旧属性。 ```javascript var o = { p:"hello" }; Object.seal(o); delete o.p; o.p // "hello" o.x = 'world'; o.x // undefined ``` Object.seal还把现有属性的attributes对象的configurable属性设为false，使得attributes对象不再能改变。 ```javascript var o = { p: 'a' }; // seal方法之前 Object.getOwnPropertyDescriptor(o, 'p') // Object {value: "a", writable: true, enumerable: true, configurable: true} Object.seal(o); // seal方法之后 Object.getOwnPropertyDescriptor(o, 'p') // Object {value: "a", writable: true, enumerable: true, configurable: false} Object.defineProperty(o, 'p', { enumerable: false }) // TypeError: Cannot redefine property: p ``` 从上面代码可以看到，使用seal方法之后，attributes对象的configurable就变成了false，然后如果想改变enumerable就会报错。 可写性（writable）有点特别。如果writable为false，使用Object.seal方法以后，将无法将其变成true；但是，如果writable为true，依然可以将其变成false。 ```javascript var o1 = Object.defineProperty({}, 'p', {writable: false}); Object.seal(o1); Object.defineProperty(o1,'p',{writable:true}) // Uncaught TypeError: Cannot redefine property: p var o2 = Object.defineProperty({}, 'p', {writable: true}); Object.seal(o2); Object.defineProperty(o2,'p',{writable:false}) Object.getOwnPropertyDescriptor(o2, 'p') /* { value: '', writable: false, enumerable: true, configurable: false } */ ``` 上面代码中，同样是使用了Object.seal方法，如果writable原为false，改变这个设置将报错；如果原为true，则不会有问题。 至于属性对象的value是否可改变，是由writable决定的。 ```javascript var o = { p: 'a' }; Object.seal(o); o.p = 'b'; o.p // 'b' ``` 上面代码中，Object.seal方法对p属性的value无效，是因为此时p属性的writable为true。 ### Object.isSealed方法 Object.isSealed方法用于检查一个对象是否使用了Object.seal方法。 ```javascript var o = { p: 'a' }; Object.seal(o); Object.isSealed(o) // true ``` 另外，这时isExtensible方法也返回false。 ```javascript var o = { p: 'a' }; Object.seal(o); Object.isExtensible(o) // false ``` ### Object.freeze方法 Object.freeze方法可以使得一个对象无法添加新属性、无法删除旧属性、也无法改变属性的值，使得这个对象实际上变成了常量。 ```javascript var o = {p:"hello"}; Object.freeze(o); o.p = "world"; o.p // hello o.t = "hello"; o.t // undefined ``` 上面代码中，对现有属性重新赋值（o.p = "world"）或者添加一个新属性，并不会报错，只是默默地失败。但是，如果是在严格模式下，就会报错。 ```javascript var o = {p:"hello"}; Object.freeze(o); // 对现有属性重新赋值 (function () { 'use strict'; o.p = "world";}()) // TypeError: Cannot assign to read only property 'p' of #<Object> // 添加不存在的属性 (function () { 'use strict'; o.t = 123;}()) // TypeError: Can't add property t, object is not extensible ``` ### Object.isFrozen方法 Object.isFrozen方法用于检查一个对象是否使用了Object.freeze()方法。 ```javascript var o = {p:"hello"}; Object.freeze(o); Object.isFrozen(o) // true ``` ### 局限性 需要注意的是，使用上面这些方法锁定对象的可写性，但是依然可以通过改变该对象的原型对象，来为它增加属性。 ```javascript var o = new Object(); Object.preventExtensions(o); var proto = Object.getPrototypeOf(o); proto.t = "hello"; o.t // hello ``` 一种解决方案是，把原型也冻结住。 ```javascript var o = Object.seal( Object.create(Object.freeze({x:1}), {y: {value: 2, writable: true}}) ); Object.getPrototypeOf(o).t = "hello"; o.hello // undefined ``` <h2 id="3.2">Array对象</h2> ## 概述 `Array`是JavaScript的内置对象，同时也是一个构造函数，可以用它生成新的数组。 作为构造函数时，`Array`可以接受参数，但是不同的参数，会使得`Array`产生不同的行为。 ```javascript // 无参数时，返回一个空数组 new Array() // [] // 单个正整数参数，表示返回的新数组的长度 new Array(1) // [undefined × 1] new Array(2) // [undefined x 2] // 单个非正整数参数（比如字符串、布尔值、对象等）， // 则该参数是返回的新数组的成员 new Array('abc') // ['abc'] new Array([1]) // [Array[1]] // 多参数时，所有参数都是返回的新数组的成员 new Array(1, 2) // [1, 2] ``` 从上面代码可以看到，`Array`作为构造函数，行为很不一致。因此，不建议使用它生成新数组，直接使用数组的字面量是更好的方法。 ```javascript // bad var arr = new Array(1, 2); // good var arr = [1, 2]; ``` 另外，`Array`作为构造函数时，如果参数是一个正整数，返回的空数组虽然可以取到`length`属性，但是取不到键名。 ```javascript Array(3).length // 3 Array(3)[0] // undefined Array(3)[1] // undefined Array(3)[2] // undefined 0 in Array(3) // false 1 in Array(3) // false 2 in Array(3) // false ``` 上面代码中，`Array(3)`是一个长度为3的空数组。虽然可以取到每个位置的键值，但是所有的键名都取不到。 JavaScript语言的设计规格，就是这么规定的，虽然不是一个大问题，但是还是必须小心。这也是不推荐使用`Array`构造函数的一个理由。 ## Array对象的静态方法 ### isArray方法 Array.isArray方法用来判断一个值是否为数组。它可以弥补typeof运算符的不足。 ```javascript var a = [1, 2, 3]; typeof a // "object" Array.isArray(a) // true ``` 上面代码表示，`typeof`运算符只能显示数组的类型是Object，而Array.isArray方法可以对数组返回true。 ## Array实例的方法 以下这些Array实例对象的方法，都是数组实例才能使用。如果不想创建实例，只是想单纯调用这些方法，可以写成`[].method.call`(调用对象，参数) 的形式，或者`Array.prototype.method.call`(调用对象，参数)的形式。 ### valueOf方法，toString方法 `valueOf`方法返回数组本身。 ```javascript var a = [1, 2, 3]; a.valueOf() // [1, 2, 3] ``` toString 方法返回数组的字符串形式。 ```javascript var a = [1, 2, 3]; a.toString() // "1,2,3" var a = [1, 2, 3, [4, 5, 6]]; a.toString() // "1,2,3,4,5,6" ``` ### push()，pop() `push`方法用于在数组的末端添加一个或多个元素，并返回添加新元素后的数组长度。注意，该方法会改变原数组。 ```javascript var a = []; a.push(1) // 1 a.push('a') // 2 a.push(true, {}) // 4 a // [1, 'a', true, {}] ``` 上面代码使用`push`方法，先后往数组中添加了四个成员。 如果需要合并两个数组，可以这样写。 ```javascript var a = [1, 2, 3]; var b = [4, 5, 6]; Array.prototype.push.apply(a, b) // 或者 a.push.apply(a, b) // 上面两种写法等同于 a.push(4, 5, 6) a // [1, 2, 3, 4, 5, 6] ``` `push`方法还可以用于向对象添加元素，添加后的对象变成类似数组的对象，即新加入元素的键对应数组的索引，并且对象有一个`length`属性。 ```javascript var a = {a: 1}; [].push.call(a, 2); a // {a:1, 0:2, length: 1} [].push.call(a, [3]); a // {a:1, 0:2, 1:[3], length: 2} ``` `pop`方法用于删除数组的最后一个元素，并返回该元素。注意，该方法会改变原数组。 ```javascript var a = ['a', 'b', 'c']; a.pop() // 'c' a // ['a', 'b'] ``` 对空数组使用`pop`方法，不会报错，而是返回`undefined`。 ```javascript [].pop() // undefined ``` `push`和`pop`结合使用，就构成了“后进先出”的栈结构（stack）。 ### join()，concat() `join`方法以参数作为分隔符，将所有数组成员组成一个字符串返回。如果不提供参数，默认用逗号分隔。 ```javascript var a = [1, 2, 3, 4]; a.join(' ') // '1 2 3 4' a.join(' | ') // "1 | 2 | 3 | 4" a.join() // "1,2,3,4" ``` 通过`call`方法，`join`方法（即Array.prototype.join）也可以用于字符串。 ```javascript Array.prototype.join.call('hello', '-') // "h-e-l-l-o" ``` `concat`方法用于多个数组的合并。它将新数组的成员，添加到原数组的尾部，然后返回一个新数组，原数组不变。 ```javascript ['hello'].concat(['world']) // ["hello", "world"] ['hello'].concat(['world'], ['!']) // ["hello", "world", "!"] ``` 除了接受数组作为参数，`concat`也可以接受其他类型的值作为参数。它们会作为新的元素，添加数组尾部。 ```javascript [1, 2, 3].concat(4, 5, 6) // [1, 2, 3, 4, 5, 6] [1, 2, 3].concat(4, [5, 6]) ``` 如果不提供参数，`concat`方法返回当前数组的一个浅拷贝。所谓“浅拷贝”，指的是如果数组成员包括复合类型的值（比如对象），则新数组拷贝的是该值的引用。 ```javascript var obj = { a:1 }; var oldArray = [obj]; var newArray = oldArray.concat(); obj.a = 2; newArray[0].a // 2 ``` 上面代码中，原数组包含一个对象，concat方法生成的新数组包含这个对象的引用。所以，改变原对象以后，新数组跟着改变。事实上，只要原数组的成员中包含对象，concat方法不管有没有参数，总是返回该对象的引用。 concat方法也可以用于将对象合并为数组，但是必须借助call方法。 ```javascript [].concat.call({ a: 1 }, { b: 2 }) // [{ a: 1 }, { b: 2 }] [].concat.call({ a: 1 }, [2]) // [{a:1}, 2] // 等同于 [2].concat({a:1}) ``` ### shift()，unshift() `shift`方法用于删除数组的第一个元素，并返回该元素。注意，该方法会改变原数组。 ```javascript var a = ['a', 'b', 'c']; a.shift() // 'a' a // ['b', 'c'] ``` `shift`方法可以遍历并清空一个数组。 ```javascript var list = [1, 2, 3, 4, 5, 6]; var item; while (item = list.shift()) { console.log(item); } list // [] ``` `push`和`shift`结合使用，就构成了“先进先出”的队列结构（queue）。 `unshift`方法用于在数组的第一个位置添加元素，并返回添加新元素后的数组长度。注意，该方法会改变原数组。 ```javascript var a = ['a', 'b', 'c']; a.unshift('x'); // 4 a // ['x', 'a', 'b', 'c'] ``` ### reverse() `reverse`方法用于颠倒数组中元素的顺序，使用这个方法以后，返回改变后的原数组。 ```javascript var a = ['a', 'b', 'c']; a.reverse() // ["c", "b", "a"] a // ["c", "b", "a"] ``` ### slice() `slice`方法用于提取原数组的一部分，返回一个新数组，原数组不变。 它的第一个参数为起始位置（从0开始），第二个参数为终止位置（但该位置的元素本身不包括在内）。如果省略第二个参数，则一直返回到原数组的最后一个成员。 ```javascript // 格式 arr.slice(start_index, upto_index); // 用法 var a = ['a', 'b', 'c']; a.slice(0) // ["a", "b", "c"] a.slice(1) // ["b", "c"] a.slice(1, 2) // ["b"] a.slice(2, 6) // ["c"] ``` 如果`slice`方法的参数是负数，则表示倒数计算的字符串位置。 ```javascript var a = ['a', 'b', 'c']; a.slice(-2) // ["b", "c"] a.slice(-2, -1) // ["b"] ``` 如果参数值大于数组成员的个数，或者第二个参数小于第一个参数，则返回空数组。 ```javascript var a = ['a', 'b', 'c']; a.slice(4) // [] a.slice(2, 1) // [] ``` `slice`方法的一个重要应用，是将类似数组的对象转为真正的数组。 ```javascript Array.prototype.slice.call({ 0: 'a', 1: 'b', length: 2 }) // ['a', 'b'] Array.prototype.slice.call(document.querySelectorAll("div")); Array.prototype.slice.call(arguments); ``` 上面代码的参数都不是数组，但是通过`call`方法，在它们上面调用`slice`方法，就可以把它们转为真正的数组。 ### splice() `splice`方法用于删除原数组的一部分成员，并可以在被删除的位置添加入新的数组成员，返回值是被删除的元素。注意，该方法会改变原数组。 `splice`的第一个参数是删除的起始位置，第二个参数是被删除的元素个数。如果后面还有更多的参数，则表示这些就是要被插入数组的新元素。 ```javascript // 格式 arr.splice(index, count_to_remove, addElement1, addElement2, ...); // 用法 var a = ['a', 'b', 'c', 'd', 'e', 'f']; a.splice(4, 2) // ["e", "f"] a // ["a", "b", "c", "d"] ``` 上面代码从原数组位置4开始，删除了两个数组成员。 ```javascript var a = ['a', 'b', 'c', 'd', 'e', 'f']; a.splice(4, 2, 1, 2) // ["e", "f"] a // ["a", "b", "c", "d", 1, 2] ``` 上面代码除了删除成员，还插入了两个新成员。 如果只是单纯地插入元素，`splice`方法的第二个参数可以设为0。 ```javascript var a = [1, 1, 1]; a.splice(1, 0, 2) // [] a // [1, 2, 1, 1] ``` 如果只提供第一个参数，则实际上等同于将原数组在指定位置拆分成两个数组。 ```javascript var a = [1, 2, 3, 4]; a.splice(2) // [3, 4] a // [1, 2] ``` ### sort() `sort`方法对数组成员进行排序，默认是按照字典顺序排序。排序后，原数组将被改变。 ```javascript ['d', 'c', 'b', 'a'].sort() // ['a', 'b', 'c', 'd'] [4, 3, 2, 1].sort() // [1, 2, 3, 4] [11, 101].sort() // [101, 11] [10111,1101,111].sort() // [10111, 1101, 111] ``` 上面代码的最后两个例子，需要特殊注意。sort方法不是按照大小排序，而是按照对应字符串的字典顺序排序，所以101排在11的前面。 如果想让sort方法按照自定义方式排序，可以传入一个函数作为参数，表示按照自定义方法进行排序。该函数本身又接受两个参数，表示进行比较的两个元素。如果返回值大于0，表示第一个元素排在第二个元素后面；其他情况下，都是第一个元素排在第二个元素前面。 ```javascript [10111,1101,111].sort(function (a,b){ return a - b; }) // [111, 1101, 10111] [ { name: "张三", age: 30 }, { name: "李四", age: 24 }, { name: "王五", age: 28 } ].sort(function(o1, o2) { return o1.age - o2.age; }) // [ // { name: "李四", age: 24 }, // { name: "王五", age: 28 }, // { name: "张三", age: 30 } // ] ``` ## ECMAScript 5 新加入的数组方法 ECMAScript 5新增了9个数组实例的方法，分别是map、forEach、filter、every、some、reduce、reduceRight、indexOf和lastIndexOf。其中，前7个与函数式（functional）操作有关。 这些方法可以在数组上使用，也可以在字符串和类似数组的对象上使用，这是它们不同于传统数组方法的一个地方。 在用法上，这些方法的参数是一个函数，这个作为参数的函数本身又接受三个参数：数组的当前元素elem、该元素的位置index和整个数组arr（详见下面的实例）。另外，上下文对象（context）可以作为第二个参数，传入forEach(), every(), some(), filter(), map()方法，用来绑定函数运行时的上下文。 对于不支持这些方法的老式浏览器（主要是IE 8及以下版本），可以使用函数库[es5-shim](https://github.com/kriskowal/es5-shim)，或者[Underscore](http://underscorejs.org/#filter)和[Lo-Dash](http://lodash.com/docs#filter)。 ### Array.prototype.map() `map`方法对数组的所有成员依次调用一个函数，根据函数结果返回一个新数组。 ```javascript var numbers = [1, 2, 3]; numbers.map(function (n) { return n + 1 }); // [2, 3, 4] numbers // [1, 2, 3] ``` 上面代码中，`numbers`数组的所有成员都加上1，组成一个新数组返回，原数组没有变化。 `map`方法接受一个函数作为参数。该函数调用时，`map`方法会将其传入三个参数，分别是当前成员、当前位置和数组本身。 ```javascript [1, 2, 3].map(function(elem, index, arr) { return elem * elem; }); // [1, 4, 9] ``` 上面代码中，map方法的回调函数的三个参数之中，`elem`为当前成员的值，`index`为当前成员的位置，`arr`为原数组（`[1, 2, 3]`）。 `map`方法不仅可以用于数组，还可以用于字符串，用来遍历字符串的每个字符。但是，不能直接使用，而要通过函数的`call`方法间接使用，或者先将字符串转为数组，然后使用。 ```javascript var upper = function (x) { return x.toUpperCase() }; [].map.call('abc', upper) // [ 'A', 'B', 'C' ] // 或者 'abc'.split('').map(upper) // [ 'A', 'B', 'C' ] ``` 其他类似数组的对象（比如`document.querySelectorAll`方法返回DOM节点集合），也可以用上面的方法遍历。 `map`方法还可以接受第二个参数，表示回调函数执行时`this`所指向的对象。 ```javascript var arr = ['a', 'b', 'c']; [1, 2].map(function(e){ return this[e]; }, arr) // ['b', 'c'] ``` 上面代码通过`map`方法的第二个参数，将回调函数内部的`this`对象，指向`arr`数组。 `map`方法通过键名，遍历数组的所有成员。所以，只要数组的某个成员取不到键名，`map`方法就会跳过它。 ```javascript var f = function(n){ return n + 1 }; [1, undefined, 2].map(f) // [2, NaN, 3] [1, null, 2].map(f) // [2, 1, 3] [1, , 2].map(f) // [2, undefined, 3] ``` 上面代码中，数组的成员依次包含`undefined`、`null`和空位。前两种情况，`map`方法都不会跳过它们，因为可以取到`undefined`和`null`的键名。第三种情况，`map`方法实际上跳过第二个位置，因为取不到它的键名。 ```javascript 1 in [1, , 2] // false ``` 上面代码说明，第二个位置的空位是取不到键名的，因此`map`方法会跳过它。 下面的例子会更清楚地说明这一点。 ```javascript [undefined, undefined].map(function (){ console.log('enter...'); return 1; }) // enter... // enter... // [1, 1] Array(2).map(function (){ console.log('enter...'); return 1; }) // [undefined x 2] ``` 上面代码中，`Array(2)`生成的空数组是取不到键名的，因此`map`方法根本没有执行，直接返回了`Array(2)`生成的空数组。 ### Array.prototype.forEach() 数组实例的`forEach`方法与`map`方法很相似，也是遍历数组的所有成员，执行某种操作，但是`forEach`方法没有返回值，一般只用来操作数据。如果需要有返回值，一般使用`map`方法。 ```javascript function log(element, index, array) { console.log('[' + index + '] = ' + element); } [2, 5, 9].forEach(log); // [0] = 2 // [1] = 5 // [2] = 9 ``` 从上面代码可以看到，`forEach`方法和`map`方法的参数格式是一样的，第一个参数都是一个函数。该函数接受三个参数，分别是当前元素、当前元素的位置（从0开始）、整个数组。 `forEach`方法会跳过数组的空位。 ```javascript var log = function(n) { console.log(n + 1); }; [1, undefined, 2].forEach(log) // 2 // NaN // 3 [1, null, 2].forEach(log) // 2 // 1 // 3 [1, , 2].forEach(log) // 2 // 3 ``` 上面代码中，`forEach`方法不会跳过`undefined`和`null`，但会跳过空位。 `forEach`方法也可以接受第二个参数，用来绑定回调函数的this关键字。 ```javascript var out = []; [1, 2, 3].forEach(function(elem) { this.push(elem * elem); }, out); out // [1, 4, 9] ``` 上面代码中，空数组`out`是`forEach`方法的第二个参数，结果，回调函数内部的`this`关键字就指向`out`。 ### filter方法 `filter`方法依次对所有数组成员调用一个测试函数，返回结果为`true`的成员组成一个新数组返回。该方法不会改变原数组。 ```javascript [1, 2, 3, 4, 5].filter(function (elem) { return (elem > 3); }) // [4, 5] ``` 上面代码将大于`3`的原数组成员，作为一个新数组返回。 再看一个例子。 ```javascript var arr = [0, 1, 'a', false]; arr.filter(Boolean) // [1, "a"] ``` 上面例子中，通过`filter`方法，返回数组`arr`里面所有布尔值为`true`的成员。 `filter`方法的参数函数可以接受三个参数，第一个参数是当前数组成员的值，这是必需的，后两个参数是可选的，分别是当前数组成员的位置和整个数组。 ```javascript [1, 2, 3, 4, 5].filter(function (elem, index, arr) { return index % 2 === 0; }); // [1, 3, 5] ``` 上面代码返回原数组偶数位置的成员组成的新数组。 `filter`方法还可以接受第二个参数，指定测试函数所在的上下文对象（即`this`对象）。 ```javascript var Obj = function () { this.MAX = 3; }; var myFilter = function (item) { if (item > this.MAX) { return true; } }; var arr = [2, 8, 3, 4, 1, 3, 2, 9]; arr.filter(myFilter, new Obj()) // [8, 4, 9] ``` 上面代码中，测试函数`myFilter`内部有`this`对象，它可以被`filter`方法的第二个参数绑定。上例中，`myFilter`的`this`绑定了`Obj`对象的实例，返回大于`3`的成员。 ### some()，every() 这两个方法类似“断言”（assert），用来判断数组成员是否符合某种条件。 `some`方法对所有元素调用一个测试函数，只要有一个元素通过该测试，就返回`true`，否则返回`false`。 ```javascript var arr = [1, 2, 3, 4, 5]; arr.some(function (elem, index, arr) { return elem >= 3; }); // true ``` 上面代码表示，如果存在大于等于3的数组成员，就返回`true`。 `every`方法对所有元素调用一个测试函数，只有所有元素通过该测试，才返回`true`，否则返回`false`。 ```javascript var arr = [1, 2, 3, 4, 5]; arr.every(function (elem, index, arr) { return elem >= 3; }); // false ``` 上面代码表示，只有所有数组成员大于等于3，才返回true。 从上面的代码可以看到，`some`和`every`的使用方法与`map`和`forEach`一致，参数完全一模一样。也就是说，它们也可以使用第二个参数，用来绑定函数中的this关键字。 ### reduce方法，reduceRight方法 reduce方法和reduceRight方法的作用，是依次处理数组的每个元素，最终累计为一个值。这两个方法的差别在于，reduce对数组元素的处理顺序是从左到右（从第一个成员到最后一个成员），reduceRight则是从右到左（从最后一个成员到第一个成员），其他地方完全一样。 reduce方法的第一个参数是一个处理函数。该函数接受四个参数，分别是： 1. 初始变量，默认为数组的第一个元素值。函数第一次执行后的返回值作为函数第二次执行的初始变量，依次类推。 2. 当前变量，如果指定了reduce函数或者reduceRight函数的第二个参数，则该变量为数组的第一个元素的值，否则，为第二个元素的值。 3. 当前变量对应的元素在数组中的序号（从0开始）。 4. 原数组。 这四个参数之中，只有前两个是必须的，后两个则是可选的。 ```javascript [1, 2, 3, 4, 5].reduce(function(x, y){ console.log(x,y) return x+y; }); // 1 2 // 3 3 // 6 4 // 10 5 //最后结果：15 ``` 上面代码未指定reduce函数的第二个参数，因此，第一轮中，x为1，y为2。然后，第二轮开始，x为上一轮的返回值，y为3。依次执行，直到遍历完数组中所有元素。所以最终结果为15。 利用reduce方法，可以写一个数组求和的sum方法。 ```javascript Array.prototype.sum = function (){ return this.reduce(function (partial, value){ return partial + value; }) }; [3,4,5,6,10].sum() // 28 ``` 如果要对初始变量指定初值，可以把它放在reduce方法的第二个参数。 ```javascript [1, 2, 3, 4, 5].reduce(function(x, y){ return x+y; }, 10); // 25 ``` 上面代码指定参数x的初值为10，所以数组元素从10开始累加，最终结果为25。 由于reduce方法依次处理每个元素，所以实际上还可以用它来搜索某个元素。比如，下面代码是找出长度最长的数组元素。 ```javascript function findLongest(entries) { return entries.reduce(function (longest, entry) { return entry.length > longest.length ? entry : longest; }, ''); } ``` ### indexOf 和 lastIndexOf `indexOf`方法返回给定元素在数组中第一次出现的位置，如果没有出现则返回`-1`。 ```javascript var a = ['a', 'b', 'c']; a.indexOf('b') // 1 a.indexOf('y') // -1 ``` indexOf方法还可以接受第二个参数，表示搜索的开始位置。 ```javascript ['a', 'b', 'c'].indexOf('a', 1) // -1 ``` 上面代码从位置1开始搜索字符`a`，结果为-1，表示没有搜索到。 `lastIndexOf`方法返回给定元素在数组中最后一次出现的位置，如果没有出现则返回-1。 ```javascript var a = [2, 5, 9, 2]; a.lastIndexOf(2) // 3 a.lastIndexOf(7) // -1 ``` 注意，如果数组中包含NaN，这两个方法不适用。 ```javascript [NaN].indexOf(NaN) // -1 [NaN].lastIndexOf(NaN) // -1 ``` 这是因为这两个方法内部，使用严格相等运算符（===）进行比较，而NaN是唯一一个不等于自身的值。 ### 链式使用 上面这些数组方法之中，有不少返回的还是数组，所以可以链式使用。 ```javascript var users = [{name:"tom", email:"tom@example.com"}, {name:"peter", email:"peter@example.com"}]; users .map(function (user){ return user.email; }) .filter(function (email) { return /^t/.test(email); }) .forEach(alert); // 弹出tom@example.com ``` <h2 id="3.3">包装对象和Boolean对象</h2> ## 包装对象 ### 定义 在JavaScript中，“一切皆对象”，数组和函数本质上都是对象，就连三种原始类型的值——数值、字符串、布尔值——在一定条件下，也会自动转为对象，也就是原始类型的“包装对象”。 所谓“包装对象”，就是分别与数值、字符串、布尔值相对应的Number、String、Boolean三个原生对象。这三个原生对象可以把原始类型的值变成（包装成）对象。 ```javascript var v1 = new Number(123); var v2 = new String('abc'); var v3 = new Boolean(true); ``` 上面代码根据原始类型的值，生成了三个对象，与原始值的类型不同。这用`typeof`运算符就可以看出来。 ```javascript typeof v1 // "object" typeof v2 // "object" typeof v3 // "object" v1 === 123 // false v2 === 'abc' // false v3 === true // false ``` JavaScript设计包装对象的最大目的，首先是使得JavaScript的“对象”涵盖所有的值。其次，使得原始类型的值可以方便地调用特定方法。 ### 包装对象的构造函数 Number、String和Boolean这三个原生对象，既可以当作构造函数使用（即加上new关键字，生成包装对象实例），也可以当作工具方法使用（即不加new关键字，直接调用），这相当于生成实例后再调用valueOf方法，常常用于将任意类型的值转为某种原始类型的值。 ```javascript Number(123) // 123 String("abc") // "abc" Boolean(true) // true ``` 工具方法的详细介绍参见第二章的《数据类型转换》一节。 ### 包装对象实例的方法 包装对象实例可以使用Object对象提供的原生方法，主要是 valueOf 方法和 toString 方法。 **（1）valueOf方法** valueOf方法返回包装对象实例对应的原始类型的值。 ```javascript new Number(123).valueOf() // 123 new String("abc").valueOf() // "abc" new Boolean("true").valueOf() // true ``` **（2）toString方法** toString方法返回该实例对应的原始类型值的字符串形式。 ```javascript new Number(123).toString() // "123" new String("abc").toString() // "abc" new Boolean("true").toString() // "true" ``` ### 原始类型的自动转换 原始类型的值，可以自动当作对象调用，即调用各种对象的方法和参数。这时，JavaScript引擎会自动将原始类型的值转为包装对象，在使用后立刻销毁。 比如，字符串可以调用`length`属性，返回字符串的长度。 ```javascript 'abc'.length // 3 ``` 上面代码中，`abc`是一个字符串，本身不是对象，不能调用`length`属性。JavaScript引擎自动将其转为包装对象，在这个对象上调用`length`属性。调用结束后，这个临时对象就会被销毁。这就叫原始类型的自动转换。 ```javascript var str = 'abc'; str.length // 3 // 等同于 var strObj = new String(str) // String { // 0: "a", 1: "b", 2: "c", length: 3, [[PrimitiveValue]]: "abc" // } strObj.length // 3 ``` 上面代码中，字符串`abc`的包装对象有每个位置的值、有`length`属性、还有一个内部属性`[[PrimitiveValue]]`保存字符串的原始值。这个`[[PrimitiveValue]]`内部属性，外部是无法调用，仅供`ValueOf`或`toString`这样的方法内部调用。 这个临时对象是只读的，无法修改。所以，字符串无法添加新属性。 ```javascript var s = 'Hello World'; s.x = 123; s.x // undefined ``` 上面代码为字符串`s`添加了一个`x`属性，结果无效，总是返回`undefined`。 另一方面，调用结束后，临时对象会自动销毁。这意味着，下一次调用字符串的属性时，实际是调用一个新生成的对象，而不是上一次调用时生成的那个对象，所以取不到赋值在上一个对象的属性。如果想要为字符串添加属性，只有在它的原型对象`String.prototype`上定义（参见《面向对象编程》一章）。 这种原始类型值可以直接调用的方法还有很多（详见后文对各包装对象的介绍），除了前面介绍过的valueOf和toString方法，还包括三个包装对象各自定义在实例上的方法。。 ```javascript 'abc'.charAt === String.prototype.charAt // true ``` 上面代码表示，字符串abc的charAt方法，实际上就是定义在String对象实例上的方法（关于prototype对象的介绍参见《面向对象编程》一章）。 如果包装对象与原始类型值进行混合运算，包装对象会转化为原始类型（实际是调用自身的valueOf方法）。 ```javascript new Number(123) + 123 // 246 new String("abc") + "abc" // "abcabc" ``` ### 自定义方法 三种包装对象还可以在原型上添加自定义方法和属性，供原始类型的值直接调用。 比如，我们可以新增一个double方法，使得字符串和数字翻倍。 ```javascript 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外面必须要加上圆括号，否则后面的点运算符（.）会被解释成小数点。 但是，这种自定义方法和属性的机制，只能定义在包装对象的原型上，如果直接对原始类型的变量添加属性，则无效。 ```javascript var s = "abc"; s.p = 123; s.p // undefined ``` 上面代码直接对支付串abc添加属性，结果无效。 ## Boolean对象 ### 概述 Boolean对象是JavaScript的三个包装对象之一。作为构造函数，它主要用于生成布尔值的包装对象的实例。 ```javascript var b = new Boolean(true); typeof b // "object" b.valueOf() // true ``` 上面代码的变量b是一个Boolean对象的实例，它的类型是对象，值为布尔值true。这种写法太繁琐，几乎无人使用，直接对变量赋值更简单清晰。 ```javascript var b = true; ``` ### Boolean实例对象的布尔值 特别要注意的是，所有对象的布尔运算结果都是true。因此，false对应的包装对象实例，布尔运算结果也是true。 ```javascript if (new Boolean(false)) { console.log("true"); } // true if (new Boolean(false).valueOf()) { console.log("true"); } // 无输出 ``` 上面代码的第一个例子之所以得到true，是因为false对应的包装对象实例是一个对象，进行逻辑运算时，被自动转化成布尔值true（所有对象对应的布尔值都是true）。而实例的valueOf方法，则返回实例对应的原始类型值，本例为false。 ### Boolean函数的类型转换作用 Boolean对象除了可以作为构造函数，还可以单独使用，将任意值转为布尔值。这时Boolean就是一个单纯的工具方法。 ```javascript 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的情况，都值得认真记住。 使用not运算符（!）也可以达到同样效果。 ```javascript !!undefined // false !!null // false !!0 // false !!'' // false !!NaN // false !!1 // true !!'false' // true !![] // true !!{} // true !!function(){} // true !!/foo/ // true ``` 综上所述，如果要获得一个变量对应的布尔值，有多种写法。 ```javascript var a = "hello world"; new Boolean(a).valueOf() // true Boolean(a) // true !!a // true ``` 最后，对于一些特殊值，Boolean对象前面加不加new，会得到完全相反的结果，必须小心。 ```javascript if (Boolean(false)) console.log('true'); // 无输出 if (new Boolean(false)) console.log('true'); // true if (Boolean(null)) console.log('true'); // 无输出 if (new Boolean(null)) console.log('true'); // true ``` <h2 id="3.4">Number对象</h2> ## 概述 Number对象是数值对应的包装对象，可以作为构造函数使用，也可以作为工具函数使用。 作为构造函数时，它用于生成值为数值的对象。 ```javascript var n = new Number(1); typeof n // "object" ``` 上面代码中，`Number`对象作为构造函数使用，返回一个值为1的对象。 作为工具函数时，它可以将任何类型的值转为数值。 ```javascript Number(true) // 1 ``` 上面代码将布尔值`true`转为数值1。Number对象的工具方法，详细介绍参见上一章的《数据类型转换》一节。 ## Number对象的属性 Number对象拥有以下一些属性。 - `Number.POSITIVE_INFINITY`：正的无限，指向`Infinity`。 - `Number.NEGATIVE_INFINITY`：负的无限，指向`-Infinity`。 - `Number.NaN`：表示非数值，指向`NaN`。 - `Number.MAX_VALUE`：表示最大的正数，相应的，最小的负数为`-Number.MAX_VALUE`。 - `Number.MIN_VALUE`：表示最小的正数（即最接近0的正数，在64位浮点数体系中为`5e-324`），相应的，最接近0的负数为`-Number.MIN_VALUE`。 - `Number.MAX_SAFE_INTEGER`：表示能够精确表示的最大整数，即`9007199254740991`。 - `Number.MIN_SAFE_INTEGER`：表示能够精确表示的最小整数，即`-9007199254740991`。 ```javascript Number.POSITIVE_INFINITY // Infinity Number.NEGATIVE_INFINITY // -Infinity Number.NaN // NaN Number.MAX_VALUE // 1.7976931348623157e+308 Number.MAX_VALUE < Infinity // true Number.MIN_VALUE // 5e-324 Number.MIN_VALUE > 0 // true Number.MAX_SAFE_INTEGER // 9007199254740991 Number.MIN_SAFE_INTEGER // -9007199254740991 ``` ## Number对象实例的方法 `Number`对象有4个实例方法，都跟将数值转换成指定格式有关。 ### Number.prototype.toString() `Number`对象部署了自己的`toString`方法，用来将一个数值转为字符串形式。 ```javascript (10).toString() // "10" ``` `toString`方法可以接受一个参数，表示输出的进制。如何省略这个参数，默认将数值先转为十进制，再输出字符串；否则，就根据参数指定的进制，将一个数字转化成某个进制的字符串。 ```javascript (10).toString(2) // "1010" (10).toString(8) // "12" (10).toString(16) // "a" ``` 上面代码中，之所以要把10放在括号里，是为了表明10是一个单独的数值，后面的点表示调用对象属性。如果不加括号，这个点会被JavaScript引擎解释成小数点，从而报错。 ```javascript 10.toString(2) // SyntaxError: Unexpected token ILLEGAL ``` 只要能够让JavaScript引擎不混淆小数点和对象的点运算符，各种写法都能用。除了为`10`加上括号，还可以在`10`后面加两个点，JavaScript会把第一个点理解成小数点（即`10.0`），把第二个点理解成调用对象属性，从而得到正确结果。 ```javascript 10..toString(2) // "1010" // 其他方法还包括 10 .toString(2) // "1010" 10.0.toString(2) // "1010" ``` 这实际上意味着，可以直接对一个小数使用`toString`方法。 ```javascript 10.5.toString() // "10.5" 10.5.toString(2) // "1010.1" 10.5.toString(8) // "12.4" 10.5.toString(16) // "a.8" ``` 通过方括号运算符也可以调用`toString`方法。 ```javascript 10['toString'](2) // "1010" ``` 将其他进制的数，转回十进制，需要使用`parseInt`方法。 ### Number.prototype.toFixed() `toFixed`方法用于将一个数转为指定位数的小数，返回这个小数对应的字符串。 ```javascript (10).toFixed(2) // "10.00" 10.005.toFixed(2) // "10.01" ``` 上面代码分别将`10`和`10.005`转成2位小数的格式。其中，`10`必须放在括号里，否则后面的点运算符会被处理小数点，而不是表示调用对象的方法；而`10.005`就不用放在括号里，因为第一个点被解释为小数点，第二个点就只能解释为点运算符。 `toFixed`方法的参数为指定的小数位数，有效范围为0到20，超出这个范围将抛出RangeError错误。 ### Number.prototype.toExponential() `toExponential`方法用于将一个数转为科学计数法形式。 ```javascript (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(1) // "1.23e+3" ``` `toExponential`方法的参数表示小数点后有效数字的位数，范围为0到20，超出这个范围，会抛出一个RangeError。 ### Number.prototype.toPrecision() `toPrecision`方法用于将一个数转为指定位数的有效数字。 ```javascript (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" ``` `toPrecision`方法的参数为有效数字的位数，范围是1到21，超出这个范围会抛出RangeError错误。 `toPrecision`方法用于四舍五入时不太可靠，跟浮点数不是精确储存有关。 ```javascript (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`的实例继承。 ```javascript Number.prototype.add = function (x) { return this + x; }; ``` 上面代码为`Number`对象实例定义了一个`add`方法。 在数值上调用某个方法，数值会自动转为`Number`的实例对象，所以就得到了下面的结果。 ```javascript 8['add'](2) // 10 ``` 上面代码中，调用方法之所以写成`8['add']`，而不是`8.add`，是因为数值后面的点，会被解释为小数点，而不是点运算符。将数值放在圆括号中，就可以使用点运算符调用方法了。 ```javascript (8).add(2) // 10 ``` 由于add方法返回的还是数值，所以可以链式运算。 ```javascript Number.prototype.subtract = function (x) { return this - x; }; (8).add(2).subtract(4) // 6 ``` 上面代码在`Number`对象的实例上部署了`subtract`方法，它可以与`add`方法链式调用。 我们还可以部署更复杂的方法。 ```javascript 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] ``` 上面代码在`Number`对象的原型上部署了`iterate`方法，可以将一个数值自动遍历为一个数组。 需要注意的是，数值的自定义方法，只能定义在它的原型对象`Number.prototype`上面，数值本身是无法自定义属性的。 ```javascript var n = 1; n.x = 1; n.x // undefined ``` 上面代码中，`n`是一个原始类型的数值。直接在它上面新增一个属性x，不会报错，但毫无作用，总是返回undefined。这是因为一旦被调用属性，n就自动转为Number的实例对象，调用结束后，该对象自动销毁。所以，下一次调用n的属性时，实际取到的是另一个对象，属性x当然就读不出来。 <h2 id="3.5">String对象</h2> ## 概述 String对象是JavaScript原生提供的三个包装对象之一，用来生成字符串的包装对象实例。 ```javascript var s = new String('abc'); typeof s // "object" s.valueOf() // "abc" ``` 上面代码生成的变量`s`，就是String对象的实例，类型为对象，值为原来的字符串。实际上，String对象的实例是一个类似数组的对象。 ```javascript new String("abc") // String {0: "a", 1: "b", 2: "c"} ``` 除了用作构造函数，String还可以当作工具方法使用，将任意类型的值转为字符串。 ```javascript String(true) // "true" String(5) // "5" ``` 上面代码将布尔值ture和数值5，分别转换为字符串。 ## String.fromCharCode() String对象直接提供的方法，主要是fromCharCode()。该方法根据Unicode编码，生成一个字符串。 ```javascript String.fromCharCode(104, 101, 108, 108, 111) // "hello" ``` 注意，该方法不支持编号大于0xFFFF的字符。 ```javascript String.fromCharCode(0x20BB7) // "ஷ" ``` 上面代码返回字符的编号是0x0BB7，而不是0x20BB7。这种情况下，只能使用四字节的UTF-16编号，得到正确结果。 ```javascript String.fromCharCode(0xD842, 0xDFB7) // "𠮷" ``` ## 实例对象的属性和方法 ### length属性 该属性返回字符串的长度。 ```javascript "abc".length // 3 ``` ### charAt()，charCodeAt() `charAt`方法返回给定位置的字符，参数是从0开始编号的位置。 ```javascript var s = new String('abc'); s.charAt(1) // "b" s.charAt(s.length-1) // "c" ``` 这个方法完全可以用数组下标替代。 ```javascript 'abc'[1] // "b" ``` `charCodeAt`方法返回给定位置字符的Unicode编号（十进制表示）。 ```javascript 'abc'.charCodeAt(1) // 98 ``` 上面代码返回第二个位置的字符`b`的Unicode编号“98”。 如果没有任何参数，`charCodeAt`返回首字符的Unicode编号。 ```javascript 'abc'.charCodeAt() // 97 ``` 上面代码中，首字符`a`的Unicode编号是97。 需要注意的是，charCodeAt方法返回的Unicode编码不大于65536（0xFFFF），也就是说，只返回两个字节。因此如果遇到Unicode大于65536的字符（根据UTF-16的编码规则，第一个字节在U+D800到U+DBFF之间），就必需连续使用两次charCodeAt，不仅读入charCodeAt(i)，还要读入charCodeAt(i+1)，将两个16字节放在一起，才能得到准确的字符。 如果给定位置为负数，或大于等于字符串的长度，则这两个方法返回NaN。 ### concat方法 字符串的`concat`方法用于连接两个字符串。 ```javascript var s1 = 'abc'; var s2 = 'def'; s1.concat(s2) // "abcdef" s1 // "abc" ``` 使用该方法后，原字符串不受影响，返回一个新字符串。 该方法可以接受多个参数。 ```javascript 'a'.concat('b', 'c') // "abc" ``` 如果参数不是字符串，`concat`方法会将其先转为字符串，然后再连接。 ```javascript var one = 1; var two = 2; var three = '3'; ''.concat(one, two, three) // "123" one + two + three // "33" ``` 上面代码中，`concat`方法将参数先转成字符串再连接，所以返回的是一个三个字符的字符串。而加号运算符在两个运算数都是数值时，不会转换类型，所以返回的是一个两个字符的字符串。 ### substring()，substr()，slice() 这三个方法都用来返回一个字符串的子串，而不会改变原字符串。它们都可以接受一个或两个参数，区别只是参数含义的不同。 **（1）substring方法** substring方法的第一个参数表示子字符串的开始位置，第二个位置表示结束结果。因此，第二个参数应该大于第一个参数。如果出现第一个参数大于第二个参数的情况，substring方法会自动更换两个参数的位置。 ```javascript var a = 'The Three Musketeers'; a.substring(4, 9) // 'Three' a.substring(9, 4) // 'Three' ``` 上面代码中，调换substring方法的两个参数，都得到同样的结果。 **（2）substr()** `substr`方法的第一个参数是子字符串的开始位置，第二个参数是子字符串的长度。 ```javascript var b = 'The Three Musketeers'; b.substr(4, 9) // 'Three Mus' b.substr(9, 4) // ' Mus' ``` **（3）slice()** `slice`方法用于取出子字符串。它的第一个参数是子字符串的开始位置，第二个参数是子字符串的结束位置。如果省略第二个参数，则表示一直到字符串结束。 ```javascript 'JavaScript'.slice(4) // "Script" 'JavaScript'.slice(0, 4) // "Java" ``` 如果参数是负值，表示从结尾开始，倒数计算的位置。 ```javascript 'JavaScript'.slice(-6) // "Script" 'JavaScript'.slice(0, -6) // "Java" ``` 与`substring`方法不同的是，如果第一个参数大于第二个参数，slice方法并不会自动调换参数位置，而是返回一个空字符串。这种处理比较符合直觉，推荐使用`slice`替代`substring`。 ```javascript var s = 'The Three Musketeers'; s.slice(4, 9) // 'Three' s.slice(9, 4) // '' ``` **（4）总结：第一个参数的含义** 对这三个方法来说，第一个参数都是子字符串的开始位置，如果省略第二个参数，则表示子字符串一直持续到原字符串结束。 ```javascript "Hello World".slice(3) // "lo World" "Hello World".substr(3) // "lo World" "Hello World".substring(3) // "lo World" ``` **（5）总结：第二个参数的含义** 如果提供第二个参数，对于slice和substring方法，表示子字符串的结束位置；对于substr，表示子字符串的长度。 ```javascript "Hello World".slice(3,7) // "lo W" "Hello World".substring(3,7) // "lo W" "Hello World".substr(3,7) // "lo Worl" ``` **（6）总结：负的参数** 如果参数为负，对于slice方法，表示字符位置从尾部开始计算。 ```javascript "Hello World".slice(-3) // "rld" "Hello World".slice(4,-3) // "o Wo" ``` 对于substring方法，会自动将负数转为0。 ```javascript "Hello World".substring(-3) // "Hello World" "Hello World".substring(4,-3) // "Hell" ``` 对于substr方法，负数出现在第一个参数，表示从尾部开始计算的字符位置；负数出现在第二个参数，将被转为0。 ```javascript "Hello World".substr(-3) // "rld" "Hello World".substr(4,-3) // "" ``` ### indexOf()，lastIndexOf() 这两个方法用于确定一个字符串在另一个字符串中的位置，如果返回-1，就表示不匹配。两者的区别在于，`indexOf`从字符串头部开始匹配，`lastIndexOf`从尾部开始匹配。 ```javascript 'hello world'.indexOf('o') // 4 'JavaScript'.indexOf('script') // -1 'hello world'.lastIndexOf('o') // 7 ``` 它们还可以接受第二个参数，对于`indexOf`方法，第二个位置表示从该位置开始向后匹配；对于`lastIndexOf`，第二个表示从该位置起向前匹配。 ```javascript 'hello world'.indexOf('o', 6) // 7 'hello world'.lastIndexOf('o', 6) // 4 ``` ### trim() `trim`方法用于去除字符串两端的空格。 ```javascript ' hello world '.trim() // "hello world" ``` 该方法返回一个新字符串，不改变原字符串。 ### toLowerCase()，toUpperCase() `toLowerCase`用于将一个字符串转为小写，`toUpperCase`则是转为大写。 ```javascript 'Hello World'.toLowerCase() // "hello world" 'Hello World'.toUpperCase() // "HELLO WORLD" ``` ### localeCompare方法 该方法用于比较两个字符串。它返回一个数字，如果小于0，表示第一个字符串小于第二个字符串；如果等于0，表示两者相等；如果大于0，表示第一个字符串大于第二个字符串。 ```javascript 'apple'.localeCompare('banana') // -1 'apple'.localeCompare('apple') // 0 ``` ### 搜索和替换 与搜索和替换相关的有4个方法，它们都允许使用正则表达式。 - **match**：用于确定原字符串是否匹配某个子字符串，返回匹配的子字符串数组。 - **search**：等同于match，但是返回值不一样。 - **replace**：用于替换匹配的字符串。 - **split**：将字符串按照给定规则分割，返回一个由分割出来的各部分组成的新数组。 下面是这4个方法的简单介绍。它们都可以使用正则对象，涉及正则对象的部分见《Regex对象》一节。 **（1）match方法** match方法返回一个数组，成员为匹配的第一个字符串。如果没有找到匹配，则返回null。返回数组还有index属性和input属性，分别表示匹配字符串开始的位置（从0开始）和原始字符串。 ```javascript var matches = "cat, bat, sat, fat".match("at"); matches // ["at"] matches.index // 1 matches.input // "cat, bat, sat, fat" ``` **（2）search方法** search方法的用法等同于match，但是返回值为匹配的第一个位置。如果没有找到匹配，则返回-1。 ```javascript "cat, bat, sat, fat".search("at") // 1 ``` **（3）replace方法** replace方法用于替换匹配的子字符串，一般情况下只替换第一个匹配（除非使用带有g修饰符的正则表达式）。 ```javascript "aaa".replace("a", "b") // "baa" ``` **（4）split方法** split方法按照给定规则分割字符串，返回一个由分割出来的各部分组成的新数组。 ```javascript "a|b|c".split("|") // ["a", "b", "c"] ``` 如果分割规则为空字符串，则返回数组的成员是原字符串的每一个字符。 ```javascript "a|b|c".split("") // ["a", "|", "b", "|", "c"] ``` 如果省略分割规则，则返回数组的唯一成员就是原字符串。 ```javascript "a|b|c".split() // ["a|b|c"] ``` 如果满足分割规则的两个部分紧邻着（即中间没有其他字符），则返回数组之中会有一个空字符串。 ```javascript "a||c".split("|") // ["a", "", "c"] ``` 如果满足分割规则的部分处于字符串的开头或结尾（即它的前面或后面没有其他字符），则返回数组的第一个或最后一个成员是一个空字符串。 ```javascript "|b|c".split("|") // ["", "b", "c"] "a|b|".split("|") // ["a", "b", ""] ``` split方法还可以接受第二个参数，限定返回数组的最大成员数。 ```javascript "a|b|c".split("|", 0) // [] "a|b|c".split("|", 1) // ["a"] "a|b|c".split("|", 2) // ["a", "b"] "a|b|c".split("|", 3) // ["a", "b", "c"] "a|b|c".split("|", 4) // ["a", "b", "c"] ``` <h2 id="3.6">Math对象</h2> `Math`是JavaScript的内置对象，提供一系列数学常数和数学方法。该对象不是构造函数，不能生成实例，所有的属性和方法都必须在Math对象上调用。 ```javascript new Math() // TypeError: object is not a function ``` 上面代码表示，`Math`不能当作构造函数用。 ## 属性 `Math`对象提供以下一些只读的数学常数。 - `Math.E`：常数e。 - `Math.LN2`：2的自然对数。 - `Math.LN10`：10的自然对数。 - `Math.LOG2E`：以2为底的e的对数。 - `Math.LOG10E`：以10为底的e的对数。 - `Math.PI`：常数Pi。 - `Math.SQRT1_2`：0.5的平方根。 - `Math.SQRT2`：2的平方根。 这些常数的值如下。 ```javascript Math.E // 2.718281828459045 Math.LN2 // 0.6931471805599453 Math.LN10 // 2.302585092994046 Math.LOG2E // 1.4426950408889634 Math.LOG10E // 0.4342944819032518 Math.PI // 3.141592653589793 Math.SQRT1_2 // 0.7071067811865476 Math.SQRT2 // 1.4142135623730951 ``` ## 方法 `Math`对象提供以下一些数学方法。 - `Math.abs()`：绝对值 - `Math.ceil()`：向上取整 - `Math.floor()`：向下取整 - `Math.max()`：最大值 - `Math.min()`：最小值 - `Math.pow()`：指数运算 - `Math.sqrt()`：平方根 - `Math.log()`：自然对数 - `Math.exp()`：e的指数 - `Math.round()`：四舍五入 - `Math.random()`：随机数 `Math.abs`方法返回参数值的绝对值。 ```javascript Math.abs(1) // 1 Math.abs(-1) // 1 ``` `Math.max`方法和`Math.min`方法都可以接受多个参数，`Math.max`返回其中最大的参数，`Math.min`返回最小的参数。 ```javascript Math.max(2, -1, 5) // 5 Math.min(2, -1, 5) // -1 ``` `Math.floor`方法接受一个参数，返回小于该参数的最大整数。 ```javascript Math.floor(3.2) // 3 Math.floor(-3.2) // -4 ``` `Math.ceil`方法接受一个参数，返回大于该参数的最小整数。 ```javascript Math.ceil(3.2) // 4 Math.ceil(-3.2) // -3 ``` 如果需要一个总是返回某个数值整数部分的函数，可以自己实现。 ```javascript function ToInteger(x) { x = Number(x); return x < 0 ? Math.ceil(x) : Math.floor(x); } ToInteger(3.2) // 3 ToInteger(3.5) // 3 ToInteger(3.8) // 3 ToInteger(-3.2) // -3 ToInteger(-3.5) // -3 ToInteger(-3.8) // -3 ``` 上面代码中，不管正数或负数，`ToInteger`函数总是返回一个数值的整数部分。 `Math.round`方法用于四舍五入。 ```javascript Math.round(0.1) // 0 Math.round(0.5) // 1 Math.round(0.6) // 1 // 等同于 Math.ceil(x + 0.5) ``` 注意，它对负数的处理，主要是对`0.5`的处理。 ```javascript Math.round(-1.1) // -1 Math.round(-1.5) // -1 Math.round(-1.6) // -2 ``` `Math.pow`方法返回以第一个参数为底数、第二个参数为幂的指数值。 ```javascript Math.pow(2, 2) // 4 Math.pow(2, 3) // 8 ``` 下面是计算圆面积的方法。 ```javascript var radius = 20; var area = Math.PI * Math.pow(radius, 2); ``` `Math.sqrt`方法返回参数值的平方根。如果参数是一个负值，则返回NaN。 ```javascript Math.sqrt(4) // 2 Math.sqrt(-4) // NaN ``` `Math.log`方法返回以e为底的自然对数值。 ```javascript Math.log(Math.E) // 1 Math.log(10) // 2.302585092994046 ``` 如果要计算以10为底的对数，可以先用`Math.log`求出自然对数，然后除以`Math.LN10`；求以2为底的对数，可以除以`Math.LN2`。 ```javascript Math.log(100)/Math.LN10 // 2 Math.log(8)/Math.LN2 // 3 ``` `Math.exp`方法返回常数e的参数次方。 ```javascript Math.exp(1) // 2.718281828459045 Math.exp(3) // 20.085536923187668 ``` ### Math.random() `Math.random()`返回0到1之间的一个伪随机数，可能等于0，但是一定小于1。 ```javascript Math.random() // 0.7151307314634323 ``` 任意范围的随机数生成函数如下。 ```javascript function getRandomArbitrary(min, max) { return Math.random() * (max - min) + min; } getRandomArbitrary(1.5, 6.5) // 2.4942810038223864 ``` 任意范围的随机整数生成函数如下。 ```javascript function getRandomInt(min, max) { return Math.floor(Math.random() * (max - min + 1)) + min; } getRandomInt(1, 6) // 5 ``` 返回随机字符的例子如下。 ```javascript function random_str(length) { var ALPHABET = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'; ALPHABET += 'abcdefghijklmnopqrstuvwxyz'; ALPHABET += '0123456789-_'; var str = ''; for (var i=0; i < length; ++i) { var rand = Math.floor(Math.random() * ALPHABET.length); str += ALPHABET.substring(rand, rand + 1); } return str; } random_str(6) // "NdQKOr" ``` 上面代码中，`random_str`函数接受一个整数作为参数，返回变量`ALPHABET`内的随机字符所组成的指定长度的字符串。 ### 三角函数方法 `Math`对象还提供一系列三角函数方法。 - `Math.sin()`：返回参数的正弦 - `Math.cos()`：返回参数的余弦 - `Math.tan()`：返回参数的正切 - `Math.asin()`：返回参数的反正弦（弧度值） - `Math.acos()`：返回参数的反余弦（弧度值） - `Math.atan()`：返回参数的反正切（弧度值） ```javascript Math.sin(0) // 0 Math.cos(0) // 1 Math.tan(0) // 0 Math.asin(1) // 1.5707963267948966 Math.acos(1) // 0 Math.atan(1) // 0.7853981633974483 ``` <h2 id="3.7">Date对象</h2> ## 概述 `Date`对象是JavaScript提供的日期和时间的操作接口。它可以表示的时间范围是，1970年1月1日00:00:00前后的各1亿天（单位为毫秒）。 `Date`对象可以作为普通函数直接调用，返回一个代表当前时间的字符串。 ```javascript Date() // "Tue Dec 01 2015 09:34:43 GMT+0800 (CST)" ``` 注意，即使带有参数，`Date`作为普通函数使用时，返回的还是当前时间。 ```javascript Date(2000, 1, 1) // "Tue Dec 01 2015 09:34:43 GMT+0800 (CST)" ``` 上面代码说明，无论有没有参数，直接调用`Date`总是返回当前时间。 ## new Date() `Date`还可以当作构造函数使用。对它使用`new`命令，会返回一个`Date`对象的实例。如果不加参数，生成的就是代表当前时间的对象。 ```javascript var today = new Date(); ``` 这个`Date`实例对应的字符串值，就是当前时间。 ```javascript today // "Tue Dec 01 2015 09:34:43 GMT+0800 (CST)" // 等同于 today.toString() // "Tue Dec 01 2015 09:34:43 GMT+0800 (CST)" ``` 作为构造函数时，`Date`对象可以接受多种格式的参数。 **（1）new Date(milliseconds)** Date对象接受从1970年1月1日00:00:00 UTC开始计算的毫秒数作为参数。这意味着如果将Unix时间戳（单位为秒）作为参数，必须将Unix时间戳乘以1000。 ```javascript new Date(1378218728000) // Tue Sep 03 2013 22:32:08 GMT+0800 (CST) // 1970年1月2日的零时 var Jan02_1970 = new Date(3600 * 24 * 1000); // Fri Jan 02 1970 08:00:00 GMT+0800 (CST) // 1969年12月31日的零时 var Dec31_1969 = new Date(-3600 * 24 * 1000); // Wed Dec 31 1969 08:00:00 GMT+0800 (CST) ``` 上面最后一个例子说明，Date构造函数的参数可以是一个负数，表示1970年1月1日之前的时间。Date对象能够表示的日期范围是1970年1月1日前后各一亿天。 **（2）new Date(datestring)** Date对象还接受一个日期字符串作为参数，返回所对应的时间。 ```javascript new Date('January 6, 2013'); // Sun Jan 06 2013 00:00:00 GMT+0800 (CST) ``` 日期字符串的完整格式是“month day, year hours:minutes:seconds”，比如“December 25, 1995 13:30:00”。如果省略了小时、分钟或秒数，这些值会被设为0。 但是，其他格式的日期字符串，也可以被解析。事实上，所有可以被`Date.parse()`方法解析的日期字符串，都可以当作`Date`对象的参数。 ```javascript new Date('2013-2-15') new Date('2013/2/15') new Date('02/15/2013') new Date('2013-FEB-15') new Date('FEB, 15, 2013') new Date('FEB 15, 2013') new Date('Feberuary, 15, 2013') new Date('Feberuary 15, 2013') new Date('15 Feb 2013') new Date('15, Feberuary, 2013') // Fri Feb 15 2013 00:00:00 GMT+0800 (CST) ``` 上面多种日期字符串的写法，返回的都是同一个时间。 注意，在ES5之中，如果日期采用连词线（`-`）格式分隔，且具有前导0，JavaScript会认为这是一个ISO格式的日期字符串，导致返回的时间是以UTC时区计算的。 ```javascript new Date('2014-01-01') // Wed Jan 01 2014 08:00:00 GMT+0800 (CST) new Date('2014-1-1') // Wed Jan 01 2014 00:00:00 GMT+0800 (CST) ``` 上面代码中，日期字符串有没有前导0，返回的结果是不一样的。如果没有前导0，JavaScript引擎假设用户处于本地时区，所以本例返回0点0分。如果有前导0（即如果你以ISO格式表示日期），就假设用户处于格林尼治国际标准时的时区，所以返回8点0分。但是，ES6改变了这种做法，规定凡是没有指定时区的日期字符串，一律认定用户处于本地时区。 对于其他格式的日期字符串，一律视为非ISO格式，采用本地时区作为计时标准。 ```javascript new Date('2014-12-11') // Thu Dec 11 2014 08:00:00 GMT+0800 (CST) new Date('2014/12/11') // Thu Dec 11 2014 00:00:00 GMT+0800 (CST) ``` 上面代码中，第一个日期字符串是ISO格式，第二个不是。 **（3）new Date(year, month [, day, hours, minutes, seconds, ms])** Date对象还可以接受多个整数作为参数，依次表示年、月、日、小时、分钟、秒和毫秒。如果采用这种格式，最少需要提供两个参数（年和月），其他参数都是可选的，默认等于0。因为如果只使用“年”这一个参数，Date对象会将其解释为毫秒数。 ```javascript new Date(2013) // Thu Jan 01 1970 08:00:02 GMT+0800 (CST) ``` 上面代码中，2013被解释为毫秒数，而不是年份。 其他情况下，被省略的参数默认都是0。 ```javascript new Date(2013, 0) // Tue Jan 01 2013 00:00:00 GMT+0800 (CST) new Date(2013, 0, 1) // Tue Jan 01 2013 00:00:00 GMT+0800 (CST) new Date(2013, 0, 1, 0) // Tue Jan 01 2013 00:00:00 GMT+0800 (CST) new Date(2013, 0, 1, 0, 0, 0, 0) // Tue Jan 01 2013 00:00:00 GMT+0800 (CST) ``` 上面代码（除了第一行）返回的是2013年1月1日零点的时间，可以看到月份从0开始计算，因此1月是0，12月是11。但是，月份里面的天数从1开始计算。 这些参数如果超出了正常范围，会被自动折算。比如，如果月设为15，就折算为下一年的4月。 ```javascript new Date(2013, 15) // Tue Apr 01 2014 00:00:00 GMT+0800 (CST) new Date(2013,0,0) // Mon Dec 31 2012 00:00:00 GMT+0800 (CST) ``` 参数还可以使用负数，表示扣去的时间。 ```javascript new Date(2013, -1) // Sat Dec 01 2012 00:00:00 GMT+0800 (CST) new Date(2013, 0, -1) // Sun Dec 30 2012 00:00:00 GMT+0800 (CST) ``` 上面代码分别对月和日使用了负数，表示从基准日扣去相应的时间。 年的情况有所不同，如果为0，表示1900年；如果为1，就表示1901年；如果为负数，则表示公元前。 ```javascript new Date(0, 0) // Mon Jan 01 1900 00:00:00 GMT+0800 (CST) new Date(1, 0) // Tue Jan 01 1901 00:00:00 GMT+0800 (CST) new Date(-1, 0) // Fri Jan 01 -1 00:00:00 GMT+0800 (CST) ``` ### 日期的运算 类型转换时，Date对象的实例如果转为数值，则等于对应的毫秒数；如果转为字符串，则等于对应的日期字符串。所以，两个日期对象进行减法运算，返回的就是它们间隔的毫秒数；进行加法运算，返回的就是连接后的两个字符串。 ```javascript var d1 = new Date(2000, 2, 1); var d2 = new Date(2000, 3, 1); d2 - d1 // 2678400000 d2 + d1 // "Sat Apr 01 2000 00:00:00 GMT+0800 (CST)Wed Mar 01 2000 00:00:00 GMT+0800 (CST)" ``` ## Date对象的静态方法 ### Date.now() `Date.now`方法返回当前距离1970年1月1日 00:00:00 UTC的毫秒数（Unix时间戳乘以1000）。 ```javascript Date.now() // 1364026285194 ``` 如果需要比毫秒更精确的时间，可以使用`window.performance.now()`。它提供页面加载到命令运行时的已经过去的时间，可以精确到千分之一毫秒。 ```javascript window.performance.now() // 21311140.415 ``` ### Date.parse() `Date.parse`方法用来解析日期字符串，返回距离1970年1月1日 00:00:00的毫秒数。 标准的日期字符串的格式，应该完全或者部分符合RFC 2822和ISO 8061，即`YYYY-MM-DDTHH:mm:ss.sssZ`格式，其中最后的`Z`表示时区。但是，其他格式也可以被解析，请看下面的例子。 ```javascript Date.parse('Aug 9, 1995') // 返回807897600000，以下省略返回值 Date.parse('January 26, 2011 13:51:50') Date.parse('Mon, 25 Dec 1995 13:30:00 GMT') Date.parse('Mon, 25 Dec 1995 13:30:00 +0430') Date.parse('2011-10-10') Date.parse('2011-10-10T14:48:00') ``` 如果解析失败，返回`NaN`。 ```javascript Date.parse('xxx') // NaN ``` ### Date.UTC() 默认情况下，Date对象返回的都是当前时区的时间。`Date.UTC`方法可以返回UTC时间（世界标准时间）。该方法接受年、月、日等变量作为参数，返回当前距离1970年1月1日 00:00:00 UTC的毫秒数。 ```javascript // 格式 Date.UTC(year, month[, date[, hrs[, min[, sec[, ms]]]]]) // 用法 Date.UTC(2011, 0, 1, 2, 3, 4, 567) // 1293847384567 ``` 该方法的参数用法与`Date`构造函数完全一致，比如月从0开始计算。 ## Date实例对象的方法 Date的实例对象，有几十个自己的方法，分为以下三类。 - to类：从Date对象返回一个字符串，表示指定的时间。 - get类：获取Date对象的日期和时间。 - set类：设置Date对象的日期和时间。 ### to类方法 **（1）Date.prototype.toString()** `toString`方法返回一个完整的日期字符串。 ```javascript var d = new Date(2013, 0, 1); d.toString() // "Tue Jan 01 2013 00:00:00 GMT+0800 (CST)" d // "Tue Jan 01 2013 00:00:00 GMT+0800 (CST)" ``` 因为`toString`是默认的调用方法，所以如果直接读取Date对象实例，就相当于调用这个方法。 **（2）Date.prototype.toUTCString()** `toUTCString`方法返回对应的UTC时间，也就是比北京时间晚8个小时。 ```javascript var d = new Date(2013, 0, 1); d.toUTCString() // "Mon, 31 Dec 2012 16:00:00 GMT" d.toString() // "Tue Jan 01 2013 00:00:00 GMT+0800 (CST)" ``` **（3）Date.prototype.toISOString()** `toISOString`方法返回对应时间的ISO8601写法。 ```javascript var d = new Date(2013, 0, 1); d.toString() // "Tue Jan 01 2013 00:00:00 GMT+0800 (CST)" d.toISOString() // "2012-12-31T16:00:00.000Z" ``` 注意，`toISOString`方法返回的总是UTC时区的时间。 **（4）Date.prototype.toJSON()** `toJSON`方法返回一个符合JSON格式的ISO格式的日期字符串，与`toISOString`方法的返回结果完全相同。 ```javascript var d = new Date(2013, 0, 1); d.toJSON() // "2012-12-31T16:00:00.000Z" d.toISOString() // "2012-12-31T16:00:00.000Z" ``` **（5）Date.prototype.toDateString()** `toDateString`方法返回日期字符串。 ```javascript var d = new Date(2013, 0, 1); d.toDateString() // "Tue Jan 01 2013" ``` **（6）Date.prototype.toTimeString()** `toTimeString`方法返回时间字符串。 ```javascript var d = new Date(2013, 0, 1); d.toTimeString() // "00:00:00 GMT+0800 (CST)" ``` **（7）Date.prototype.toLocalDateString()** `toLocalDateString`方法返回一个字符串，代表日期的当地写法。 ```javascript var d = new Date(2013, 0, 1); d.toLocaleDateString() // 中文版浏览器为"2013年1月1日" // 英文版浏览器为"1/1/2013" ``` **（8）Date.prototype.toLocalTimeString()** `toLocalTimeString`方法返回一个字符串，代表时间的当地写法。 ```javascript var d = new Date(2013, 0, 1); d.toLocaleTimeString() // 中文版浏览器为"上午12:00:00" // 英文版浏览器为"12:00:00 AM" ``` ### get类方法 Date对象提供了一系列`get*`方法，用来获取实例对象某个方面的值。 - `getTime()`：返回距离1970年1月1日00:00:00的毫秒数，等同于`valueOf`方法。 - `getDate()`：返回实例对象对应每个月的几号（从1开始）。 - `getDay()`：返回星期几，星期日为0，星期一为1，以此类推。 - `getYear()`：返回距离1900的年数。 - `getFullYear()`：返回四位的年份。 - `getMonth()`：返回月份（0表示1月，11表示12月）。 - `getHours()`：返回小时（0-23）。 - `getMilliseconds()`：返回毫秒（0-999）。 - `getMinutes()`：返回分钟（0-59）。 - `getSeconds()`：返回秒（0-59）。 - `getTimezoneOffset()`：返回当前时间与UTC的时区差异，以分钟表示，返回结果考虑到了夏令时因素。 所有这些`get*`方法返回的都是整数，不同方法返回值的范围不一样。 - 分钟和秒：0 到 59 - 小时：0 到 23 - 星期：0（星期天）到 6（星期六） - 日期：1 到 31 - 月份：0（一月）到 11（十二月） - 年份：距离1900年的年数 ```javascript var d = new Date('January 6, 2013'); d.getDate() // 6 d.getMonth() // 0 d.getYear() // 113 d.getFullYear() // 2013 d.getTimezoneOffset() // -480 ``` 上面代码中，最后一行返回`-480`，表示UTC比当前时间晚480分钟，即8个小时。 下面是一个例子，计算本年度还剩下多少天。 ```javascript function leftDays() { var today = new Date(); var endYear = new Date(today.getFullYear(), 11, 31, 23, 59, 59, 999); var msPerDay = 24 * 60 * 60 * 1000; return Math.round((endYear.getTime() - today.getTime()) / msPerDay); } ``` 上面这些`get*`方法返回的都是当前时区的时间，`Date`对象还提供了这些方法对应的UTC版本，用来返回UTC时间。 - `getUTCDate()` - `getUTCFullYear()` - `getUTCMonth()` - `getUTCDay()` - `getUTCHours()` - `getUTCMinutes()` - `getUTCSeconds()` - `getUTCMilliseconds()` ```javascript var d = new Date('January 6, 2013'); d.getDate() // 6 d.getUTCDate() // 5 ``` 上面代码中，实例对象`d`表示当前时区（东八时区）的1月6日0点0分0秒，这个时间对于当前时区来说是1月6日，所以`getDate`方法返回6，对于UTC时区来说是1月5日，所以`getUTCDate`方法返回5。 ### set类方法 Date对象提供了一系列`set*`方法，用来设置实例对象的各个方面。 - `setDate(date)`：设置实例对象对应的每个月的几号（1-31），返回改变后毫秒时间戳。 - `setYear(year)`: 设置距离1900年的年数。 - `setFullYear(year [, month, date])`：设置四位年份。 - `setHours(hour [, min, sec, ms])`：设置小时（0-23）。 - `setMilliseconds()`：设置毫秒（0-999）。 - `setMinutes(min [, sec, ms])`：设置分钟（0-59）。 - `setMonth(month [, date])`：设置月份（0-11）。 - `setSeconds(sec [, ms])`：设置秒（0-59）。 - `setTime(milliseconds)`：设置毫秒时间戳。 这些方法基本是跟`get*`方法一一对应的，但是没有`setDay`方法，因为星期几是计算出来的，而不是设置的。另外，需要注意的是，凡是涉及到设置月份，都是从0开始算的，即`0`是1月，`11`是12月。 ```javascript var d = new Date ('January 6, 2013'); d // Sun Jan 06 2013 00:00:00 GMT+0800 (CST) d.setDate(9) // 1357660800000 d // Wed Jan 09 2013 00:00:00 GMT+0800 (CST) ``` `set*`方法的参数都会自动折算。以`setDate`为例，如果参数超过当月的最大天数，则向下一个月顺延，如果参数是负数，表示从上个月的最后一天开始减去的天数。 ```javascript var d1 = new Date('January 6, 2013'); d1.setDate(32) // 1359648000000 d1 // Fri Feb 01 2013 00:00:00 GMT+0800 (CST) var d2 = new Date ('January 6, 2013'); d.setDate(-1) // 1356796800000 d // Sun Dec 30 2012 00:00:00 GMT+0800 (CST) ``` `set`类方法和`get`类方法，可以结合使用，得到相对时间。 ```javascript var d = new Date(); // 将日期向后推1000天 d.setDate( d.getDate() + 1000 ); // 将时间设为6小时后 d.setHours(d.getHours() + 6); // 将年份设为去年 d.setFullYear(d.getFullYear() - 1); ``` `set*`系列方法除了`setTime()`和`setYear()`，都有对应的UTC版本，即设置UTC时区的时间。 - `setUTCDate()` - `setUTCFullYear()` - `setUTCHours()` - `setUTCMilliseconds()` - `setUTCMinutes()` - `setUTCMonth()` - `setUTCSeconds()` ```javascript var d = new Date('January 6, 2013'); d.getUTCHours() // 16 d.setUTCHours(22) // 1357423200000 d // Sun Jan 06 2013 06:00:00 GMT+0800 (CST) ``` 上面代码中，本地时区（东八时区）的1月6日0点0分，是UTC时区的前一天下午16点。设为UTC时区的22点以后，就变为本地时区的上午6点。 ### Date.prototype.valueOf() `valueOf`方法返回实例对象距离1970年1月1日00:00:00 UTC对应的毫秒数，该方法等同于`getTime`方法。 ```javascript var d = new Date(); d.valueOf() // 1362790014817 d.getTime() // 1362790014817 ``` 该方法可以用于计算精确时间。 ```javascript var start = new Date(); doSomething(); var end = new Date(); var elapsed = end.getTime() - start.getTime(); ``` <h2 id="3.8">RegExp对象</h2> ## 概述 正则表达式（regular expression）是一种表达文本模式（即字符串结构）的方法，有点像字符串的模板，常常用作按照“给定模式”匹配文本的工具。比如，正则表达式给出一个Email地址的模式，然后用它来确定一个字符串是否为Email地址。JavaScript的正则表达式体系是参照Perl 5建立的。 新建正则表达式有两种方法。一种是使用字面量，以斜杠表示开始和结束。 ```javascript var regex = /xyz/; ``` 另一种是使用RegExp构造函数。 ```javascript var regex = new RegExp('xyz'); ``` 上面两种写法是等价的，都新建了一个内容为`xyz`的正则表达式对象。它们的主要区别是，第一种方法在编译时新建正则表达式，第二种方法在运行时新建正则表达式。 RegExp构造函数还可以接受第二个参数，表示修饰符（详细解释见下文）。 ```javascript var regex = new RegExp('xyz', "i"); // 等价于 var regex = /xyz/i; ``` 上面代码中，正则表达式`/xyz/`有一个修饰符`i`。 这两种写法——字面量和构造函数——在运行时有一个细微的区别。采用字面量的写法，正则对象在代码载入时（即编译时）生成；采用构造函数的方法，正则对象在代码运行时生成。考虑到书写的便利和直观，实际应用中，基本上都采用字面量的写法。 正则对象生成以后，有两种使用方式： - 正则对象的方法：将字符串作为参数，比如`regex.test(string)`。 - 字符串对象的方法：将正则对象作为参数，比如`string.match(regex)`。 这两种使用方式下面都会介绍。 ## 正则对象的属性和方法 ### 属性 正则对象的属性分成两类。 一类是修饰符相关，返回一个布尔值，表示对应的修饰符是否设置。 - **ignoreCase**：返回一个布尔值，表示是否设置了i修饰符，该属性只读。 - **global**：返回一个布尔值，表示是否设置了g修饰符，该属性只读。 - **multiline**：返回一个布尔值，表示是否设置了m修饰符，该属性只读。 ```javascript var r = /abc/igm; r.ignoreCase // true r.global // true r.multiline // true ``` 另一类是与修饰符无关的属性，主要是下面两个。 - `lastIndex`：返回下一次开始搜索的位置。该属性可读写，但是只在设置了`g`修饰符时有意义。 - `source`：返回正则表达式的字符串形式（不包括反斜杠），该属性只读。 ```javascript var r = /abc/igm; r.lastIndex // 0 r.source // "abc" ``` ### test() 正则对象的`test`方法返回一个布尔值，表示当前模式是否能匹配参数字符串。 ```javascript /cat/.test('cats and dogs') // true ``` 上面代码验证参数字符串之中是否包含`cat`，结果返回`true`。 如果正则表达式带有`g`修饰符，则每一次`test`方法都从上一次结束的位置开始向后匹配。 ```javascript var r = /x/g; var s = '_x_x'; r.lastIndex // 0 r.test(s) // true r.lastIndex // 2 r.test(s) // true r.lastIndex // 4 r.test(s) // false ``` 上面代码的正则对象使用了`g`修饰符，表示要记录搜索位置。接着，三次使用`test`方法，每一次开始搜索的位置都是上一次匹配的后一个位置。 带有`g`修饰符时，可以通过正则对象的`lastIndex`属性指定开始搜索的位置。 ```javascript var r = /x/g; var s = '_x_x'; r.lastIndex = 4; r.test(s) // false ``` 上面代码指定从字符串的第五个位置开始搜索，这个位置是没有字符的，所以返回`false`。 如果正则模式是一个空字符串，则匹配所有字符串。 ```javascript new RegExp('').test('abc') // true ``` ### exec() 正则对象的`exec`方法，可以返回匹配结果。如果发现匹配，就返回一个数组，成员是每一个匹配成功的子字符串，否则返回`null`。 ```javascript var s = '_x_x'; var r1 = /x/; var r2 = /y/; r1.exec(s) // ["x"] r2.exec(s) // null ``` 上面代码中，正则对象`r1`匹配成功，返回一个数组，成员是匹配结果；正则对象`r2`匹配失败，返回`null`。 如果正则表示式包含圆括号（即含有“组匹配”），则返回的数组会包括多个成员。第一个成员是整个匹配成功的结果，后面的成员就是圆括号对应的匹配成功的组。也就是说，第二个成员对应第一个括号，第三个成员对应第二个括号，以此类推。整个数组的`length`属性等于组匹配的数量再加1。 ```javascript var s = '_x_x'; var r = /_(x)/; r.exec(s) // ["_x", "x"] ``` 上面代码的`exec`方法，返回一个数组。第一个成员是整个匹配的结果，第二个成员是圆括号匹配的结果。 `exec`方法的返回数组还包含以下两个属性： - `input`：整个原字符串。 - `index`：整个模式匹配成功的开始位置（从0开始计数）。 ```javascript var r = /a(b+)a/; var arr = r.exec('_abbba_aba_'); arr // ["abbba", "bbb"] arr.index // 1 arr.input // "_abbba_aba_" ``` 上面代码中的`index`属性等于1，是因为从原字符串的第二个位置开始匹配成功。 如果正则表达式加上`g`修饰符，则可以使用多次`exec`方法，下一次搜索的位置从上一次匹配成功结束的位置开始。 ```javascript var r = /a(b+)a/g; var a1 = r.exec('_abbba_aba_'); a1 // ['abbba', 'bbb'] a1.index // 1 r.lastIndex // 6 var a2 = r.exec('_abbba_aba_'); a2 // ['aba', 'b'] a2.index // 7 r.lastIndex // 10 var a3 = r.exec('_abbba_aba_'); a3 // null a3.index // TypeError: Cannot read property 'index' of null r.lastIndex // 0 var a4 = r.exec('_abbba_aba_'); a4 // ['abbba', 'bbb'] a4.index // 1 r.lastIndex // 6 ``` 上面代码连续用了四次`exec`方法，前三次都是从上一次匹配结束的位置向后匹配。当第三次匹配结束以后，整个字符串已经到达尾部，正则对象的`lastIndex`属性重置为`0`，意味着第四次匹配将从头开始。 利用`g`修饰符允许多次匹配的特点，可以用一个循环完成全部匹配。 ```javascript var r = /a(b+)a/g; var s = '_abbba_aba_'; while(true) { var match = r.exec(s); if (!match) break; console.log(match[1]); } // bbb // b ``` 正则对象的`lastIndex`属性不仅可读，还可写。一旦手动设置了`lastIndex`的值，就会从指定位置开始匹配。但是，这只在设置了`g`修饰符的情况下，才会有效。 ```javascript var r = /a/; r.lastIndex = 7; // 无效 var match = r.exec('xaxa'); match.index // 1 r.lastIndex // 7 ``` 上面代码设置了`lastIndex`属性，但是因为正则表达式没有`g`修饰符，所以是无效的。每次匹配都是从字符串的头部开始。 如果有`g`修饰符，`lastIndex`属性就会生效。 ```javascript var r = /a/g; r.lastIndex = 2; var match = r.exec('xaxa'); match.index // 3 r.lastIndex // 4 ``` 上面代码中，`lastIndex`属性指定从字符的第三个位置开始匹配。成功后，下一次匹配就是从第五个位置开始。 如果正则对象是一个空字符串，则`exec`方法会匹配成功，但返回的也是空字符串。 ```javascript var r1 = new RegExp(''); var a1 = r1.exec('abc'); a1 // [''] a1.index // 0 r1.lastIndex // 0 var r2 = new RegExp('()'); var a2 = r2.exec('abc'); a2 // ['', ''] a2.index // 0 r2.lastIndex // 0 ``` ## 字符串对象的方法 字符串对象的方法之中，有4种与正则对象有关。 - `match()`：返回一个数组，成员是所有匹配的子字符串。 - `search()`：按照给定的正则表达式进行搜索，返回一个整数，表示匹配开始的位置。 - `replace()`：按照给定的正则表达式进行替换，返回替换后的字符串。 - `split()`：按照给定规则进行字符串分割，返回一个数组，包含分割后的各个成员。 下面逐一介绍。 ### String.prototype.match() 字符串对象的`match`方法对字符串进行正则匹配，返回匹配结果。 ```javascript var s = '_x_x'; var r1 = /x/; var r2 = /y/; s.match(r1) // ["x"] s.match(r2) // null ``` 从上面代码可以看到，字符串的`match`方法与正则对象的`exec`方法非常类似：匹配成功返回一个数组，匹配失败返回`null`。 如果正则表达式带有`g`修饰符，则该方法与正则对象的`exec`方法行为不同，会一次性返回所有匹配成功的结果。 ```javascript var s = "abba"; var r = /a/g; s.match(r) // ["a", "a"] r.exec(s) // ["a"] ``` 设置正则表达式的`lastIndex`属性，对`match`方法无效，匹配总是从字符串的第一个字符开始。 ```javascript var r = /a|b/g; r.lastIndex = 7; 'xaxb'.match(r) // ['a', 'b'] r.lastIndex // 0 ``` 上面代码表示，设置`lastIndex`属性是无效的。 ### String.prototype.search() 字符串对象的`search`方法，返回第一个满足条件的匹配结果在整个字符串中的位置。如果没有任何匹配，则返回`-1`。 ```javascript '_x_x'.search(/x/) // 1 ``` 上面代码中，第一个匹配结果出现在字符串的第二个字符。 该方法会忽略`g`修饰符。 ```javascript var r = /x/g; r.lastIndex = 2; // 无效 '_x_x'.search(r) // 1 ``` 上面代码中，正则表达式使用`g`修饰符之后，使用`lastIndex`属性指定开始匹配的位置，结果无效，还是从字符串的第一个字符开始匹配。 ### String.prototype.replace() 字符串对象的`replace`方法可以替换匹配的值。它接受两个参数，第一个是搜索模式，第二个是替换的内容。 ```javascript str.replace(search, replacement) ``` 搜索模式如果不加g修饰符，就替换第一个匹配成功的值，否则替换所有匹配成功的值。 ```javascript 'aaa'.replace('a', 'b') // "baa" 'aaa'.replace(/a/, 'b') // "baa" 'aaa'.replace(/a/g, 'b') // "bbb" ``` 上面代码中，最后一个正则表达式使用了`g`修饰符，导致所有的`b`都被替换掉了。 `replace`方法的一个应用，就是消除字符串首尾两端的空格。 ```javascript var str = ' #id div.class '; str.replace(/^\s+|\s+$/g, '') // "#id div.class" ``` replace方法的第二个参数可以使用美元符号$，用来指代所替换的内容。 - `$&` 指代匹配的子字符串。 - ``$` `` 指代匹配结果前面的文本。 - `$'` 指代匹配结果后面的文本。 - `$n` 指代匹配成功的第`n`组内容，`n`是从1开始的自然数。 - `$$` 指代美元符号`$`。 ```javascript 'hello world'.replace(/(\w+)\s(\w+)/, '$2 $1') // "world hello" 'abc'.replace('b', '[$`-$&-$\']') // "a[a-b-c]c" ``` `replace`方法的第二个参数还可以是一个函数，将匹配内容替换为函数返回值。 ```javascript '3 and 5'.replace(/[0-9]+/g, function(match){ return 2 * match; }) // "6 and 10" var a = 'The quick brown fox jumped over the lazy dog.'; var pattern = /quick|brown|lazy/ig; a.replace(pattern, function replacer(match) { return match.toUpperCase(); }); // The QUICK BROWN fox jumped over the LAZY dog. ``` 作为`replace`方法第二个参数的替换函数，可以接受多个参数。 它的第一个参数是捕捉到的内容，第二个参数是捕捉到的组匹配（有多少个组匹配，就有多少个对应的参数）。此外，最后还可以添加两个参数，倒数第二个参数是捕捉到的内容在整个字符串中的位置（比如从第五个位置开始），最后一个参数是原字符串。下面是一个网页模板替换的例子。 ```javascript var prices = { 'pr_1': '$1.99', 'pr_2': '$9.99', 'pr_3': '$5.00' }; var template = '/* ... */'; // 这里可以放网页模块字符串 template.replace( /(<span id=")(.*?)(">)(<\/span>)/g, function(match, $1, $2, $3, $4){ return $1 + $2 + $3 + prices[$2] + $4; } ); ``` 上面代码的捕捉模式中，有四个括号，所以会产生四个组匹配，在匹配函数中用`$1`到`$4`表示。匹配函数的作用是将价格插入模板中。 ### String.prototype.split() 字符串对象的`split`方法按照正则规则分割字符串，返回一个由分割后的各个部分组成的数组。 ```javascript str.split(separator, [limit]) ``` 该方法接受两个参数，第一个参数是分隔规则，第二个参数是返回数组的最大成员数。 ```javascript 'a, b,c, d'.split(',') // [ 'a', ' b', 'c', ' d' ] 'a, b,c, d'.split(/, */) // [ 'a', 'b', 'c', 'd' ] 'a, b,c, d'.split(/, */, 2) [ 'a', 'b' ] ``` 上面代码使用正则表达式，去除了子字符串的逗号后面的空格。 ```javascript "aaa*a*".split(/a*/) // [ '', '*', '*' ] "aaa**a*".split(/a*/) // ["", "*", "*", "*"] ``` 上面代码的分割规则是出现0次或多次的`a`，所以第一个分隔符是“aaa”，第二个分割符是“a”，将两个字符串分成三个部分和四个部分。出现0次的`a`，意味着只要没有`a`就可以分割，实际上就是按字符分割。 如果正则表达式带有括号，则括号匹配的部分也会作为数组成员返回。 ```javascript "aaa*a*".split(/(a*)/) // [ '', 'aaa', '*', 'a', '*' ] ``` 上面代码的正则表达式使用了括号，第一个组匹配是“aaa”，第二个组匹配是“a”，它们都作为数组成员返回。 ## 匹配规则 正则表达式对字符串的匹配有很复杂的规则。下面一一介绍这些规则。 ### 字面量字符和元字符 大部分字符在正则表达式中，就是字面的含义，比如`/a/`匹配`a`，`/b/`匹配`b`。如果在正则表达式之中，某个字符只表示它字面的含义（就像前面的`a`和`b`），那么它们就叫做“字面量字符”（literal characters）。 ```javascript /dog/.test("old dog") // true ``` 上面代码中正则表达式的`dog`，就是字面量字符，所以`/dog/`匹配“old dog”，因为它就表示“d”、“o”、“g”三个字母连在一起。 除了字面量字符以外，还有一部分字符有特殊含义，不代表字面的意思。它们叫做“元字符”（metacharacters），主要有以下几个。 **（1）点字符（.)** 点字符（`.`）匹配除回车（`\r`）、换行(`\n`) 、行分隔符（`\u2028`）和段分隔符（`\u2029`）以外的所有字符。 ```javascript /c.t/ ``` 上面代码中，`c.t`匹配`c`和`t`之间包含任意一个字符的情况，只要这三个字符在同一行，比如`cat`、`c2t`、`c-t`等等，但是不匹配`coot`。 **（2）位置字符** 位置字符用来提示字符所处的位置，主要有两个字符。 - `^` 表示字符串的开始位置 - `$` 表示字符串的结束位置 ```javascript // test必须出现在开始位置 /^test/.test('test123') // true // test必须出现在结束位置 /test$/.test('new test') // true // 从开始位置到结束位置只有test /^test$/.test('test') // true /^test$/.test('test test') // false ``` **（3）选择符（|）** 竖线符号（`|`）在正则表达式中表示“或关系”（OR），即`cat|dog`表示匹配`cat`或`dog`。 ```javascript /11|22/.test('911') // true ``` 上面代码中，必须匹配`11`或`22`。 多个选择符可以联合使用。 ```javascript // 匹配fred、barney、betty之中的一个 /fred|barney|betty/ ``` 选择符会包括它前后的多个字符，比如`/ab|cd/`指的是匹配“ab”或者“cd”，而不是指匹配“b”或者“c”。如果想修改这个行为，可以使用圆括号。 ```javascript /a( |\t)b/.test('a\tb') // true ``` 上面代码指的是，“a”和“b”之间有一个空格或者一个制表符。 ### 重复类 模式的精确匹配次数，使用大括号（`{}`）表示。`{n}`表示恰好重复n次，`{n,}`表示至少重复n次，`{n,m}`表示重复不少于n次，不多于m次。 ```javascript /lo{2}k/.test('look') // true /lo{2, 5}k/.test('looook') // true ``` 上面代码中，第一个模式指定`o`连续出现2次，第二个模式指定`o`连续出现2次到5次之间。 ### 量词符 量词符用来设定某个模式出现的次数。 - `?` 问号表示某个模式出现0次或1次，等同于`{0, 1}`。 - `*` 星号表示某个模式出现0次或多次，等同于`{0,}`。 - `+` 加号表示某个模式出现1次或多次，等同于`{1,}`。 ```javascript // t出现0次或1次 /t?est/.test('test') // true /t?est/.test('est') // true // t出现1次或多次 /t+est/.test('test") // true /t+est/.test('ttest') // true /t+est/.test('est') // false // t出现0次或多次 /t*est/.test('test') // true /t*est/.test('ttest') // true /t*est/.test('tttest') // true /t*est/.test('est') // true ``` ### 贪婪模式 上一小节的三个量词符，默认情况下都是最大可能匹配，即匹配直到下一个字符不满足匹配规则为止。这被称为贪婪模式。 ```javascript var s = 'aaa'; s.match(/a+/) // ["aaa"] ``` 上面代码中，模式是`/a+/`，表示匹配1个`a`或多个`a`，那么到底会匹配几个`a`呢？因为默认是贪婪模式，会一直匹配到字符`a`不出现为止，所以匹配结果是3个`a`。 如果想将贪婪模式改为非贪婪模式，可以在量词符后面加一个问号。 ```javascript var s = 'aaa'; s.match(/a+?/) // ["a"] ``` 上面代码中，模式结尾添加了一个问号`/a+?/`，这时就改为非贪婪模式，一旦条件满足，就不再往下匹配。 除了非贪婪模式的加号，还有非贪婪模式的星号（`*`）和加号（`+`）。 - `*?`：表示某个模式出现0次或多次，匹配时采用非贪婪模式。 - `+?`：表示某个模式出现1次或多次，匹配时采用非贪婪模式。 ### 字符类 字符类（class）表示有一系列字符可供选择，只要匹配其中一个就可以了。所有可供选择的字符都放在方括号内，比如`[xyz]` 表示`x`、`y`、`z`之中任选一个匹配。 ```javascript /[abc]/.test('hello world') // false /[abc]/.test('apple') // true ``` 上面代码表示，字符串“hello world”不包含`a`、`b`、`c`这三个字母中的任一个，而字符串“apple”包含字母`a`。 有两个字符在字符类中有特殊含义。 **（1）脱字符（&#94;）** 如果方括号内的第一个字符是`[^]`，则表示除了字符类之中的字符，其他字符都可以匹配。比如，`[^xyz]`表示除了`x`、`y`、`z`之外都可以匹配。 ```javascript /[^abc]/.test('hello world') // true /[^abc]/.test('bbc') // false ``` 上面代码表示，字符串“hello world”不包含字母`a`、`b`、`c`中的任一个，所以返回`true`；字符串“bbc”不包含`a`、`b`、`c`以外的字母，所以返回`false`。 如果方括号内没有其他字符，即只有`[^]`，就表示匹配一切字符，其中包括换行符，而点号（`.`）是不包括换行符的。 ```javascript var s = 'Please yes\nmake my day!'; s.match(/yes.*day/) // null s.match(/yes[^]*day/) // [ 'yes\nmake my day'] ``` 上面代码中，字符串`s`含有一个换行符，点号不包括换行符，所以第一个正则表达式匹配失败；第二个正则表达式`[^]`包含一切字符，所以匹配成功。 > 注意，脱字符只有在字符类的第一个位置才有特殊含义，否则就是字面含义。 **（2）连字符（-）** 某些情况下，对于连续序列的字符，连字符（`-`）用来提供简写形式，表示字符的连续范围。比如，`[abc]`可以写成`[a-c]`，`[0123456789]`可以写成`[0-9]`，同理`[A-Z]`表示26个大写字母。 ```javascript /a-z/.test('b') // false /[a-z]/.test('b') // true ``` 上面代码中，当连字号（dash）不出现在方括号之中，就不具备简写的作用，只代表字面的含义，所以不匹配字符`b`。只有当连字号用在方括号之中，才表示连续的字符序列。 以下都是合法的字符类简写形式。 ```javascript [0-9.,] [0-9a-fA-F] [a-zA-Z0-9-] [1-31] ``` 上面代码中最后一个字符类`[1-31]`，不代表1到31，只代表1到3。 > 注意，字符类的连字符必须在头尾两个字符中间，才有特殊含义，否则就是字面含义。比如，`[-9]`就表示匹配连字符和9，而不是匹配0到9。 连字符还可以用来指定Unicode字符的范围。 ```javascript var str = "\u0130\u0131\u0132"; /[\u0128-\uFFFF]/.test(str) // true ``` 另外，不要过分使用连字符，设定一个很大的范围，否则很可能选中意料之外的字符。最典型的例子就是`[A-z]`，表面上它是选中从大写的`A`到小写的`z`之间52个字母，但是由于在ASCII编码之中，大写字母与小写字母之间还有其他字符，结果就会出现意料之外的结果。 ```javascript /[A-z]/.test('\\') // true ``` 上面代码中，由于反斜杠（`\\`）的ASCII码在大写字母与小写字母之间，结果会被选中。 ### 转义符 正则表达式中那些有特殊含义的字符，如果要匹配它们本身，就需要在它们前面要加上反斜杠。比如要匹配加号，就要写成`\\+`。 ```javascript /1+1/.test('1+1') // false /1\+1/.test('1+1') // true ``` 上面代码中，第一个正则表达式直接用加号匹配，结果加号解释成量词，导致不匹配。第二个正则表达式使用反斜杠对加号转义，就能匹配成功。 正则模式中，需要用斜杠转义的，一共有12个字符：`^`、`.`、`[`、`$`、`(`、`)`、`|`、`*`、`+`、`?`、`{`和`\\`。需要特别注意的是，如果使用`RegExp`方法生成正则对象，转义需要使用两个斜杠，因为字符串内部会先转义一次。 ```javascript (new RegExp('1\+1')).test('1+1') // false (new RegExp('1\\+1')).test('1+1') // true ``` 上面代码中，`RegExp`作为构造函数，参数是一个字符串。但是，在字符串内部，反斜杠也是转义字符，所以它会先被反斜杠转义一次，然后再被正则表达式转义一次，因此需要两个反斜杠转义。 ### 修饰符 修饰符（modifier）表示模式的附加规则，放在正则模式的最尾部。 修饰符可以单个使用，也可以多个一起使用。 ```javascript // 单个修饰符 var regex = /test/i; // 多个修饰符 var regex = /test/ig; ``` **（1）g修饰符** 默认情况下，第一次匹配成功后，正则对象就停止向下匹配了。`g`修饰符表示全局匹配（global），加上它以后，正则对象将匹配全部符合条件的结果，主要用于搜索和替换。 ```javascript var regex = /b/; var str = 'abba'; regex.test(str); // true regex.test(str); // true regex.test(str); // true ``` 上面代码中，正则模式不含`g`修饰符，每次都是从字符串头部开始匹配。所以，连续做了三次匹配，都返回`true`。 ```javascript var regex = /b/g; var str = 'abba'; regex.test(str); // true regex.test(str); // true regex.test(str); // false ``` 上面代码中，正则模式含有`g`修饰符，每次都是从上一次匹配成功处，开始向后匹配。因为字符串“abba”只有两个“b”，所以前两次匹配结果为`true`，第三次匹配结果为`false`。 **（2）i修饰符** 默认情况下，正则对象区分字母的大小写，加上`i`修饰符以后表示忽略大小写（ignorecase）。 ```javascript /abc/.test('ABC') // false /abc/i.test('ABC') // true ``` 上面代码表示，加了`i`修饰符以后，不考虑大小写，所以模式`abc`匹配字符串`ABC`。 **（3）m修饰符** `m`修饰符表示多行模式（multiline），会修改`^`和`$`的行为。默认情况下（即不加`m`修饰符时），`^`和`$`匹配字符串的开始处和结尾处，加上`m`修饰符以后，`^`和`$`还会匹配行首和行尾，即`^`和`$`会识别换行符（`\n`）。 ```javascript /world$/.test('hello world\n') // false /world$/m.test('hello world\n') // true ``` 上面的代码中，字符串结尾处有一个换行符。如果不加`m`修饰符，匹配不成功，因为字符串的结尾不是“world”；加上以后，`$`可以匹配行尾。 ```javascript /^b/m.test('a\nb') // true ``` 上面代码要求匹配行首的`b`，如果不加`m`修饰符，就相当于`b`只能处在字符串的开始处。 ### 预定义模式 预定义模式指的是某些常见模式的简写方式。 - `\d` 匹配0-9之间的任一数字，相当于`[0-9]`。 - `\D` 匹配所有0-9以外的字符，相当于`[^0-9]`。 - `\w` 匹配任意的字母、数字和下划线，相当于`[A-Za-z0-9_]`。 - `\W` 除所有字母、数字和下划线以外的字符，相当于`[^A-Za-z0-9_]`。 - `\s` 匹配空格（包括制表符、空格符、断行符等），相等于`[\t\r\n\v\f]`。 - `\S` 匹配非空格的字符，相当于`[^\t\r\n\v\f]`。 - `\b` 匹配词的边界。 - `\B` 匹配非词边界，即在词的内部。 下面是一些例子。 ```javascript // \s的例子 /\s\w*/.exec('hello world') // [" world"] // \b的例子 /\bworld/.test('hello world') // true /\bworld/.test('hello-world') // true /\bworld/.test('helloworld') // false // \B的例子 /\Bworld/.test('hello-world') // false /\Bworld/.test('helloworld') // true ``` 上面代码中，`\s`表示空格，所以匹配结果会包括空格。`\b`表示词的边界，所以“world”的词首必须独立（词尾是否独立未指定），才会匹配。同理，`\B`表示非词的边界，只有“world”的词首不独立，才会匹配。 通常，正则表达式遇到换行符（`\n`）就会停止匹配。 ```javascript var html = "<b>Hello</b>\n<i>world!</i>"; /.*/.exec(html)[0] // "<b>Hello</b>" ``` 上面代码中，字符串`html`包含一个换行符，结果点字符（`.`）不匹配换行符，导致匹配结果可能不符合原意。这时使用`\s`字符类，就能包括换行符。 ```javascript var html = "<b>Hello</b>\n<i>world!</i>"; /[\S\s]*/.exec(html)[0] // "<b>Hello</b>\n<i>world!</i>" // 另一种写法（用到了非捕获组） /(?:.|\s)*/.exec(html)[0] // "<b>Hello</b>\n<i>world!</i>" ``` 上面代码中，`[\S\s]`指代一切字符。 ### 特殊字符 正则表达式对一些不能打印的特殊字符，提供了表达方法。 - `\cX` 表示`Ctrl-[X]`，其中的`X`是A-Z之中任一个英文字母，用来匹配控制字符。 - `[\b]` 匹配退格键(U+0008)，不要与`\b`混淆。 - `\n` 匹配换行键。 - `\r` 匹配回车键。 - `\t` 匹配制表符tab（U+0009）。 - `\v` 匹配垂直制表符（U+000B）。 - `\f` 匹配换页符（U+000C）。 - `\0` 匹配null字符（U+0000）。 - `\xhh` 匹配一个以两位十六进制数表示的字符。 - `\uhhhh` 匹配一个以四位十六进制数表示的unicode字符。 ### 组匹配 **（1）概述** 正则表达式的括号表示分组匹配，括号中的模式可以用来匹配分组的内容。 ```javascript /fred+/.test('fredd') // true /(fred)+/.test('fredfred') // true ``` 上面代码中，第一个模式没有括号，结果`+`只表示重复字母`d`，第二个模式有括号，结果`+`就表示匹配“fred”这个词。 下面是另外一个分组捕获的例子。 ```javascript var m = 'abcabc'.match(/(.)b(.)/); m // ['abc', 'a', 'c'] ``` 上面代码中，正则表达式`/(.)b(.)/`一共使用两个括号，第一个括号捕获`a`，第二个括号捕获`c`。 注意，使用组匹配时，不宜同时使用`g`修饰符，否则`match`方法不会捕获分组的内容。 ```javascript var m = 'abcabc'.match(/(.)b(.)/g); m // ['abc', 'abc'] ``` 上面代码使用带`g`修饰符的正则表达式，结果`match`方法只捕获了匹配整个表达式的部分。 在正则表达式内部，可以用`\n`引用括号匹配的内容，`n`是从1开始的自然数，表示对应顺序的括号。 ```javascript /(.)b(.)\1b\2/.test("abcabc") // true ``` 上面的代码中，`\1`表示前一个括号匹配的内容（即“a”），`\2`表示第二个括号匹配的内容（即“b”）。 下面是另外一个例子。 ```javascript /y(..)(.)\2\1/.test('yabccab') // true ``` 括号还可以嵌套。 ```javascript /y((..)\2)\1/.test('yabababab') // true ``` 上面代码中，`\1`指向外层括号，`\2`指向内层括号。 组匹配非常有用，下面是一个匹配网页标签的例子。 ```javascript var tagName = /<([^>]+)>[^<]*<\/\1>/; tagName.exec("<b>bold</b>")[1] // 'b' ``` 上面代码中，圆括号匹配尖括号之中的标签，而`\1`就表示对应的闭合标签。 上面代码略加修改，就能捕获带有属性的标签。 ```javascript var html = '<b class="hello">Hello</b><i>world</i>'; var tag = /<(\w+)([^>]*)>(.*?)<\/\1>/g; var match = tag.exec(html); match[1] // "b" match[2] // "class="hello"" match[3] // "Hello" match = tag.exec(html); match[1] // "i" match[2] // "" match[3] // "world" ``` **（2）非捕获组** `(?:x)`称为非捕获组（Non-capturing group），表示不返回该组匹配的内容，即匹配的结果中不计入这个括号。 非捕获组的作用请考虑这样一个场景，假定需要匹配`foo`或者`foofoo`，正则表达式就应该写成`/(foo){1, 2}/`，但是这样会占用一个组匹配。这时，就可以使用非捕获组，将正则表达式改为`/(?:foo){1, 2}/`，它的作用与前一个正则是一样的，但是不会单独输出括号内部的内容。 请看下面的例子。 ```javascript var m = 'abc'.match(/(?:.)b(.)/); m // ["abc", "c"] ``` 上面代码中的模式，一共使用了两个括号。其中第一个括号是非捕获组，所以最后返回的结果中没有第一个括号，只有第二个括号匹配的内容。 下面是用来分解网址的正则表达式。 ```javascript // 正常匹配 var url = /(http|ftp):\/\/([^/\r\n]+)(\/[^\r\n]*)?/; url.exec('http://google.com/'); // ["http://google.com/", "http", "google.com", "/"] // 非捕获组匹配 var url = /(?:http|ftp):\/\/([^/\r\n]+)(\/[^\r\n]*)?/; url.exec('http://google.com/'); // ["http://google.com/", "google.com", "/"] ``` 上面的代码中，前一个正则表达式是正常匹配，第一个括号返回网络协议；后一个正则表达式是非捕获匹配，返回结果中不包括网络协议。 **（3）先行断言** `x(?=y)`称为先行断言（Positive look-ahead），`x`只有在`y`前面才匹配，`y`不会被计入返回结果。比如，要匹配后面跟着百分号的数字，可以写成`/\d+(?=%)/`。 “先行断言”中，括号里的部分是不会返回的。 ```javascript var m = 'abc'.match(/b(?=c)/); m // ["b"] ``` 上面的代码使用了先行断言，`b`在`c`前面所以被匹配，但是括号对应的`c`不会被返回。 再看一个例子。 ```javascript /Jack (?=Sprat|Frost)/.test('Jack Frost') // true ``` **（4）先行否定断言** `x(?!y)`称为先行否定断言（Negative look-ahead），`x`只有不在`y`前面才匹配，`y`不会被计入返回结果。比如，要匹配后面跟的不是百分号的数字，就要写成`/\d+(?!%)/`。 ```javascript /\d+(?!\.)/.exec('3.14') // ["14"] ``` 上面代码中，正则表达式指定，只有不在小数点前面的数字才会被匹配，因此返回的结果就是`14`。 “先行否定断言”中，括号里的部分是不会返回的。 ```javascript var m = 'abd'.match(/b(?!c)/); m // ['b'] ``` 上面的代码使用了后行断言，`b`不在`c`前面所以被匹配，而且括号对应的`d`不会被返回。 <h2 id="3.9">JSON对象</h2> ## JSON格式 JSON格式（JavaScript Object Notation的缩写）是一种用于数据交换的文本格式，2001年由Douglas Crockford提出，目的是取代繁琐笨重的XML格式。 相比XML格式，JSON格式有两个显著的优点：书写简单，一目了然；符合JavaScript原生语法，可以由解释引擎直接处理，不用另外添加代码。所以，JSON迅速被接受，已经成为各大网站交换数据的标准格式，并被写入ECMAScript 5，成为标准的一部分。 简单说，JSON格式就是一种表示一系列的“值”的方法，这些值包含在数组或对象之中，是它们的成员。对于这一系列的“值”，有如下几点格式规定： 1. 数组或对象的每个成员的值，可以是简单值，也可以是复合值。 2. 简单值分为四种：字符串、数值（必须以十进制表示）、布尔值和null（NaN, Infinity, -Infinity和undefined都会被转为null）。 3. 复合值分为两种：符合JSON格式的对象和符合JSON格式的数组。 4. 数组或对象最后一个成员的后面，不能加逗号。 5. 数组或对象之中的字符串必须使用双引号，不能使用单引号。 6. 对象的成员名称必须使用双引号。 以下是合格的JSON值。 ```javascript ["one", "two", "three"] { "one": 1, "two": 2, "three": 3 } {"names": ["张三", "李四"] } [ { "name": "张三"}, {"name": "李四"} ] ``` 以下是不合格的JSON值。 ```javascript { name: "张三", 'age': 32 } // 属性名必须使用双引号 [32, 64, 128, 0xFFF] // 不能使用十六进制值 { "name": "张三", age: undefined } // 不能使用undefined { "name": "张三", "birthday": new Date('Fri, 26 Aug 2011 07:13:10 GMT'), "getName": function() { return this.name; } } // 不能使用函数和日期对象 ``` > 需要注意的是，空数组和空对象都是合格的JSON值，null本身也是一个合格的JSON值。 ## JSON对象 ES5新增了JSON对象，用来处理JSON格式数据。它有两个方法：JSON.stringify和JSON.parse。 ### JSON.stringify() `JSON.stringify`方法用于将一个值转为字符串。该字符串符合JSON格式，并且可以被JSON.parse方法还原。 ```javascript JSON.stringify('abc') // ""abc"" JSON.stringify(1) // "1" JSON.stringify(false) // "false" JSON.stringify([]) // "[]" JSON.stringify({}) // "{}" JSON.stringify([1, "false", false]) // '[1,"false",false]' JSON.stringify({ name: "张三" }) // '{"name":"张三"}' ``` 上面代码将各种类型的值，转成JSON字符串。需要注意的是，对于原始类型的字符串，转换结果会带双引号，即字符串`abc`会被转成`"abc"`，这是因为将来还原的时候，双引号可以让JavaScript引擎知道，abc是一个字符串，而不是一个变量名。 如果原始对象中，有一个成员的值是`undefined`、函数或XML对象，这个成员会被省略。如果数组的成员是undefined、函数或XML对象，则这些值被转成null。 ```javascript JSON.stringify({ f: function(){}, a: [ function(){}, undefined ] }); // "{"a": [null,null]}" ``` 上面代码中，原始对象的`f`属性是一个函数，`JSON.stringify`方法返回的字符串会将这个属性省略。而`a`属性是一个数组，成员分别为函数和undefined，它们都被转成了`null`。 正则对象会被转成空对象。 ```javascript JSON.stringify(/foo/) // "{}" ``` JSON.stringify方法会忽略对象的不可遍历属性。 ```javascript var obj = {}; Object.defineProperties(obj, { 'foo': { value: 1, enumerable: true }, 'bar': { value: 2, enumerable: false } }); JSON.stringify(obj); // {"foo":1} ``` 上面代码中，bar是obj对象的不可遍历属性，JSON.stringify方法会忽略这个属性。 JSON.stringify方法还可以接受一个数组参数，指定需要转成字符串的属性。 ```javascript var obj = { 'prop1': 'value1', 'prop2': 'value2', 'prop3': 'value3' }; var selectedProperties = ['prop1', 'prop2']; JSON.stringify(obj, selectedProperties) // "{"prop1":"value1","prop2":"value2"}" ``` 上面代码中，`JSON.stringify`方法的第二个参数指定，只转`prop1`和`prop2`两个属性。 `JSON.stringify`方法还可以接受一个函数作为参数，用来更改默认的字符串化的行为。 ```javascript function f(key, value) { if (typeof value === "number") { value = 2 * value; } return value; } JSON.stringify({ a: 1, b: 2 }, f) // '{"a": 2,"b": 4}' ``` 上面代码中的`f`函数，接受两个参数，分别是被转换的对象的键名和键值。如果键值是数值，就将它乘以2，否则就原样返回。 注意，这个处理函数是递归处理所有的键。 ```javascript var o = {a: {b: 1}}; function f(key, value) { console.log("["+ key +"]:" + value); return value; } JSON.stringify(o, f) // []:[object Object] // [a]:[object Object] // [b]:1 // '{"a":{"b":1}}' ``` 上面代码中，对象`o`一共会被`f`函数处理三次。第一次键名为空，键值是整个对象`o`；第二次键名为`a`，键值是`{b: 1}`；第三次键名为`b`，键值为1。 递归处理中，每一次处理的对象，都是前一次返回的值。 ```javascript var o = {a: 1}; function f(key, value){ if (typeof value === "object"){ return {b: 2}; } return value * 2; } JSON.stringify(o,f) // "{"b": 4}" ``` 上面代码中，`f`函数修改了对象`o`，接着`JSON.stringify`方法就递归处理修改后的对象`o`。 如果处理函数返回`undefined`或没有返回值，则该属性会被忽略。 ```javascript function f(key, value) { if (typeof(value) == "string") { return undefined; } return value; } JSON.stringify({ a:"abc", b:123 }, f) // '{"b": 123}' ``` 上面代码中，`a`属性经过处理后，返回`undefined`，于是该属性被忽略了。 `JSON.stringify`还可以接受第三个参数，用于增加返回的JSON字符串的可读性。如果是数字，表示每个属性前面添加的空格（最多不超过10个）；如果是字符串（不超过10个字符），则该字符串会添加在每行前面。 ```javascript JSON.stringify({ p1: 1, p2: 2 }, null, 2); /* "{ "p1": 1, "p2": 2 }" */ JSON.stringify({ p1:1, p2:2 }, null, "|-"); /* "{ |-"p1": 1, |-"p2": 2 }" */ ``` 如果`JSON.stringify`方法处理的对象，包含一个`toJSON`方法，则它会使用这个方法得到一个值，然后再将这个值转成字符串，而忽略其他成员。 ```javascript JSON.stringify({ toJSON: function() { return "Cool" } }) // "Cool"" var o = { foo: 'foo', toJSON: function() { return 'bar'; } }; var json = JSON.stringify({x: o}); // '{"x":"bar"}' ``` `Date`对象就部署了一个自己的`toJSON`方法。 ```javascript JSON.stringify(new Date("2011-07-29")) // "2011-07-29T00:00:00.000Z" ``` `toJSON`方法的一个应用是，可以将正则对象自动转为字符串。 ```javascript RegExp.prototype.toJSON = RegExp.prototype.toString; JSON.stringify(/foo/) // "/foo/" ``` 上面代码，在正则对象的原型上面部署了`toJSON`方法，将其指向`toString`方法，因此遇到转换成`JSON`时，正则对象就先调用`toJSON`方法转为字符串，然后再被`JSON.stingify`方法处理。 ### JSON.parse() JSON.parse方法用于将JSON字符串转化成对象。 ```javascript JSON.parse('{}') // {} JSON.parse('true') // true JSON.parse('"foo"') // "foo" JSON.parse('[1, 5, "false"]') // [1, 5, "false"] JSON.parse('null') // null var o = JSON.parse('{"name":"张三"}'); o.name // 张三 ``` 如果传入的字符串不是有效的JSON格式，JSON.parse方法将报错。 ```javascript JSON.parse("'String'") // illegal single quotes // SyntaxError: Unexpected token ILLEGAL ``` 上面代码中，双引号字符串中是一个单引号字符串，因为单引号字符串不符合JSON格式，所以报错。 为了处理解析错误，可以将JSON.parse方法放在try...catch代码块中。 JSON.parse方法可以接受一个处理函数，用法与JSON.stringify方法类似。 ```javascript function f(key, value) { if ( key === ""){ return value; } if ( key === "a" ) { return value + 10; } } var o = JSON.parse('{"a":1,"b":2}', f); o.a // 11 o.b // undefined ```