对象的扩展 · 前端笔记

[TOC] ## 属性的简洁表示法 E6允许直接写入变量和函数作为对象的属性和方法。 ``` var foo = 'bar' var baz = {foo} baz // {foo: 'bar'} ``` ES6允许在对象中只写属性名，不写属性值。这时，属性值等于属性名所代表的变量。 ``` function f(x, y) { return {x, y} } //等同于 function f(x, y) { return {x:x, y:y} } ``` 除了属性简写外，方法也可以简写。 ``` var o = { method() { return 'Hello!' } } // 等同于 var o { method: function() { return 'Hello!' } } ``` ## 属性名表达式 JavaScript有两种方法定义对象的属性。 ``` // 方法一 obj.foo = true // 方法二 obj['a' + 'b'] = 123 ``` 如果使用对象字面量定义对象，ES5只允许使用方法一。 ``` var obj = { foo: true abc: 123 } ``` ES6允许字面量定义对象时使用方法二。 ``` let key = 'foo' let obj = { [key]: rue, ['a' + 'b']: 123 } ``` ## Object.is\(\) 用来比较两个值是否严格相等。有严格比较运算符===基本一致，不同之处有两个： * +0不等于-0 * NaN等于自身 ``` +0 === -0 // true NaN === NaN // false Object.is(+0, -0) // false Object.is(NaN, NaN) // true ``` ## Object.assign\(\) 将源对象的所以可枚举属性复制到目标对象。至少需要两个对象作为参数。 ``` var target = {a: 1} var source1 = {b: 2} var source2 = {c: 3} Object.assign(target, source1, source2) target // {a:1, b:2, c:3} ``` 如果目标对象和源对象有同名属性，或多个源对象有同名属性，后面的属性会覆盖前面的属性。 Object.assign只复制自身属性，不可枚举的属性和继承的属性不会复制。对于嵌套的属性，会替换而不是添加。 ``` var target = {a: {b: 'c', d: 'e'}} var source = {a: {b: 'hello'}} Object.assgin(target, source) //{a: {b: 'hello'}} ``` ## 属性的可枚举性 Object.getOwnPropertyDescriptor可获取属性的描述对象。enumrable属性是可枚举性，若值为false，表示某些操作会忽略当前属性。 ES5有3个操作会忽略enumrable为false的属性。 * for ... in 循环 * Object.keys\(\) * JSON.stringify\(\) ES6新增了2个操作。 * Object.assign\(\) * Reflect.enumerate\(\) ES6规定，所以Class的原型的方法都是不可枚举的。 ## 属性的遍历 ES6有6种方法可以遍历对象的属性。 for...in Object.keys\(obj\) Object.getOwnPropertyNames\(obj\) Object.getOwnPropertySymbols\(obj\) Reflect.ownKeys\(obj\) Reflect.enumerate\(obj\) 它们遵循同样的属性遍历次序规则。 * 首先遍历所有属性名为数值的属性，按照数字排序 * 其次遍历所有属性名为字符串的属性，按照生成时间排序 * 最后遍历所有属性名为Symbol值的属性，按照生成时间排序 ## \_\_proto\_\_属性，Object.setPrototypeOf\(\)，Object.getPrototypeOf\(\) Object.setPrototypeOf方法的作用与 \_\_proto\_\_相同，用于设置一个对象的prototype对象。它是ES6正式推荐的设置原型对象的方法。 ``` var o = Object.setPrototypeOf({}, null) ``` Object.getPrototypeOf用于读取一个对象的prototype对象。 ## 对象的扩展运算符 ~~~ const [a, ...b] = [1, 2, 3]; a // 1 b // [2, 3] ~~~ ES2017 将这个运算符引入了对象。（1）解构赋值对象的解构赋值用于从一个对象取值，相当于将所有可遍历的、但尚未被读取的属性，分配到指定的对象上面。所有的键和它们的值，都会拷贝到新对象上面。 ~~~ let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 }; x // 1 y // 2 z // { a: 3, b: 4 } ~~~ 上面代码中，变量z是解构赋值所在的对象。它获取等号右边的所有尚未读取的键（a和b），将它们连同值一起拷贝过来。由于解构赋值要求等号右边是一个对象，所以如果等号右边是undefined或null，就会报错，因为它们无法转为对象。 ~~~ let { x, y, ...z } = null; // 运行时错误 let { x, y, ...z } = undefined; // 运行时错误 ~~~ 解构赋值必须是最后一个参数，否则会报错。 ~~~ let { ...x, y, z } = obj; // 句法错误 let { x, ...y, ...z } = obj; // 句法错误 ~~~ 上面代码中，解构赋值不是最后一个参数，所以会报错。注意，解构赋值的拷贝是浅拷贝，即如果一个键的值是复合类型的值（数组、对象、函数）、那么解构赋值拷贝的是这个值的引用，而不是这个值的副本。 ~~~ let obj = { a: { b: 1 } }; let { ...x } = obj; obj.a.b = 2; x.a.b // 2 ~~~ 上面代码中，x是解构赋值所在的对象，拷贝了对象obj的a属性。a属性引用了一个对象，修改这个对象的值，会影响到解构赋值对它的引用。另外，扩展运算符的解构赋值，不能复制继承自原型对象的属性。 ~~~ let o1 = { a: 1 }; let o2 = { b: 2 }; o2.__proto__ = o1; let { ...o3 } = o2; o3 // { b: 2 } o3.a // undefined ~~~ 上面代码中，对象o3复制了o2，但是只复制了o2自身的属性，没有复制它的原型对象o1的属性。下面是另一个例子。 ~~~ const o = Object.create({ x: 1, y: 2 }); o.z = 3; let { x, ...{ y, z } } = o; x // 1 y // undefined z // 3 ~~~ 上面代码中，变量x是单纯的解构赋值，所以可以读取对象o继承的属性；变量y和z是扩展运算符的解构赋值，只能读取对象o自身的属性，所以变量z可以赋值成功，变量y取不到值。解构赋值的一个用处，是扩展某个函数的参数，引入其他操作。 ~~~ function baseFunction({ a, b }) { // ... } function wrapperFunction({ x, y, ...restConfig }) { // 使用x和y参数进行操作 // 其余参数传给原始函数 return baseFunction(restConfig); } ~~~ 上面代码中，原始函数baseFunction接受a和b作为参数，函数wrapperFunction在baseFunction的基础上进行了扩展，能够接受多余的参数，并且保留原始函数的行为。（2）扩展运算符扩展运算符（...）用于取出参数对象的所有可遍历属性，拷贝到当前对象之中。 ~~~ let z = { a: 3, b: 4 }; let n = { ...z }; n // { a: 3, b: 4 } ~~~ 这等同于使用Object.assign方法。 ~~~ let aClone = { ...a }; // 等同于 let aClone = Object.assign({}, a); ~~~ 上面的例子只是拷贝了对象实例的属性，如果想完整克隆一个对象，还拷贝对象原型的属性，可以采用下面的写法。 ~~~ // 写法一 const clone1 = { __proto__: Object.getPrototypeOf(obj), ...obj }; // 写法二 const clone2 = Object.assign( Object.create(Object.getPrototypeOf(obj)), obj ); // 写法三 const clone3 = Object.create( Object.getPrototypeOf(obj), Object.getOwnPropertyDescriptors(obj) ) ~~~ 上面代码中，写法一的__proto__属性在非浏览器的环境不一定部署，因此推荐使用写法二和写法三。扩展运算符可以用于合并两个对象。 ~~~ let ab = { ...a, ...b }; // 等同于 let ab = Object.assign({}, a, b); ~~~ 如果用户自定义的属性，放在扩展运算符后面，则扩展运算符内部的同名属性会被覆盖掉。 ~~~ let aWithOverrides = { ...a, x: 1, y: 2 }; // 等同于 let aWithOverrides = { ...a, ...{ x: 1, y: 2 } }; // 等同于 let x = 1, y = 2, aWithOverrides = { ...a, x, y }; // 等同于 let aWithOverrides = Object.assign({}, a, { x: 1, y: 2 }); ~~~ 上面代码中，a对象的x属性和y属性，拷贝到新对象后会被覆盖掉。这用来修改现有对象部分的属性就很方便了。 ~~~ let newVersion = { ...previousVersion, name: 'New Name' // Override the name property }; ~~~ 上面代码中，newVersion对象自定义了name属性，其他属性全部复制自previousVersion对象。如果把自定义属性放在扩展运算符前面，就变成了设置新对象的默认属性值。 ~~~ let aWithDefaults = { x: 1, y: 2, ...a }; // 等同于 let aWithDefaults = Object.assign({}, { x: 1, y: 2 }, a); // 等同于 let aWithDefaults = Object.assign({ x: 1, y: 2 }, a); ~~~ 与数组的扩展运算符一样，对象的扩展运算符后面可以跟表达式。 ~~~ const obj = { ...(x > 1 ? {a: 1} : {}), b: 2, }; ~~~ 如果扩展运算符后面是一个空对象，则没有任何效果。 ~~~ {...{}, a: 1} // { a: 1 } ~~~ 如果扩展运算符的参数是null或undefined，这两个值会被忽略，不会报错。 ~~~ let emptyObject = { ...null, ...undefined }; // 不报错扩展运算符的参数对象之中，如果有取值函数get，这个函数是会执行的。 // 并不会抛出错误，因为 x 属性只是被定义，但没执行 let aWithXGetter = { ...a, get x() { throw new Error('not throw yet'); } }; // 会抛出错误，因为 x 属性被执行了 let runtimeError = { ...a, ...{ get x() { throw new Error('throw now'); } } }; ~~~