ECMA Script 6_对象的扩展
Posted tianxiaxuange
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了ECMA Script 6_对象的扩展相关的知识，希望对你有一定的参考价值。
1. ES6 允许直接写入变量和函数，作为对象的属性和方法
-
const foo = ‘bar‘; /*****************属性的优化********************/ const baz = {foo: foo}; // 优化为 const baz = {foo}; /*****************属性的优化********************/ function f(x, y) { return {x: x, y: y}; }; // 优化为 function f(x, y) { return {x, y}; }; f(1, 2); // Object {x: 1, y: 2} /*****************方法的简化*******************/ const o = { method: function() { return "Hello!"; }, }; // 优化为 const o = { method() { return "Hello!"; }, };
2. 对象动态添加属性
obj.name = ‘RyenToretto‘;
obj[‘age‘] = 22;
bind方法创造的函数，name 属性返回 ‘bound 原函数的名字‘
Function 构造函数创造的函数，name 属性返回 ‘anonymous‘
对象的方法是一个 Symbol 值，那么name属性返回的是这个 Symbol 值的描述
-
(new Function()).name // "anonymous" var doSomething = function() { // ... }; doSomething.bind().name; // "bound doSomething" /*****************************************************/ const key1 = Symbol(‘description‘); const key2 = Symbol(); let obj = { [key1]() {}, [key2]() {}, }; obj[key1].name // "[description]" obj[key2].name // ""
3. 属性的可枚举性
对象的每个属性，都有一个属性描述对象，该对象有个 enumerable 控制属性是否可遍历
- 有四个操作会忽略 enumerable 为 false 的属性，即不会遍历
- for...in 只遍历对象自身的和继承的可枚举的属性。
- Object.keys() 返回对象自身的所有可枚举的属性的键名。
- JSON.stringify() 只串行化对象自身的可枚举的属性。
- Object.assign() 忽略enumerable为false的属性，只拷贝对象自身的可枚举的属性。
- ES6 规定，所有 Class 的原型的方法都是不可枚举的
Object.getOwnPropertyDescriptor(class {foo() {}}.prototype, ‘foo‘).enumerable // false
4. ES6 一共有 5 种方法可以遍历对象的属性名
遍历次序：
首先遍历所有数值键，按照数值升序排列。
其次遍历所有字符串键，按照加入时间升序排列。
最后遍历所有 Symbol 键，按照加入时间升序排列。
for...in
循环遍历对象自身的和继承的可枚举属性（不含 Symbol 属性）
Object.keys(obj)
返回一个数组，包括对象自身的（不含继承的）所有可枚举属性（不含 Symbol 属性）的键名
Object.getOwnPropertyNames(obj)
返回一个数组，包含对象自身的所有属性（不含 Symbol 属性，但是包括不可枚举属性）的键名
Object.getOwnPropertySymbols(obj)
返回一个数组，包含对象自身的所有 Symbol 属性的键名
Reflect.ownKeys(obj)
包含对象自身的所有键名，不管键名是 Symbol 或字符串，也不管是否可枚举
5. super 关键字
ES6 又新增了另一个类似 this 的关键字 super，指向当前对象的原型对象
表示原型对象时，只能用在对象的方法之中，用在其他地方都会报错
javascript 引擎内部
super.foo 等同于
- Object.getPrototypeOf(this).foo（属性）
- Object.getPrototypeOf(this).foo.call(this)（方法）
- 目前，只有对象方法的简写法可以让 JavaScript 引擎确认，定义的是对象的方法
-
const proto = { foo: ‘hello‘, }; const obj = { foo: ‘world‘, find() { return super.foo; }, }; Object.setPrototypeOf(obj, proto); obj.find(); // "hello"
6. 对象的 扩展运算符 ...
回忆数组的 扩展运算符
-
const [a, ...b] = [1, 2, 3]; // 定义属性的新方式 console.log(a); // 1 console.log(b); // [2, 3]
如今对象的解构赋值
就是利用了 ...指定对象
解构赋值必须是最后一个参数，否则会报错。用于从一个对象取值，相当于将目标对
象自身的所有可遍历的（enumerable）、但尚未被读取的属性和属性值，分配到 ...指定对象 上面。
所有的键和它们的值，都会拷贝到新对象上面
-
let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 }; console.log(x); // 1 console.log(y); // 2 console.log(z); // { a: 3, b: 4 }
是浅拷贝，即 如果对象的某属性，是复合对象，则拷贝的只是一个引用地址而已
扩展运算符的解构赋值，不能复制继承自原型对象的属性
7. 对象的新增方法
Object.is()
背景需求：
ES5 比较两个值是否相等，只有两个运算符：相等运算符（==）和严格相等运算符（===）
它们都有缺点，== 会自动转换数据类型，=== 的NaN不等于自身，以及 +0 === -0。
JavaScript 缺乏一种运算，在所有环境中，只要两个值是一样的，它们就应该相等。
ES6 提出“Same-value equality”（同值相等）算法，用来解决这个问题。
Object.is() 就是部署这个算法的新方法。
它用来比较两个值是否严格相等，与严格比较运算符（===）的行为基本一致
不同之处只有两个： +0 不等于 -0 NaN 等于 NaN
-
+0 === -0 //true NaN === NaN // false Object.is(+0, -0); // false Object.is(NaN, NaN); // true Object.is(‘foo‘, ‘foo‘); // true Object.is({}, {}); // false
Object.assign()
用于对象属性的合并，将 多个源对象（source）的所有可枚举属性，复制到目标对象（target）
-
const target = { a: 1 }; const source1 = { b: 2 }; const source2 = { c: 3 }; Object.assign(target, source1, source2); console.log(target); // {a:1, b:2, c:3}
只能进行值的复制，如果要复制的值是一个取值函数，那么会执行函数，再将返回值复制过去
如果是赋值的是非取值函数，则正常复制
-
const a = { foo(x, y){ console.log(‘哈哈‘); return "呵呵"; }, }; const b = {}; Object.assign(b, a); console.dir(b); console.log(b.foo());
- 如果目标对象与源对象有同名属性，或多个源对象有同名属性，则后面的属性会覆盖前面的属性（处理方法是替换，而不是添加。）
-
const target = { a: 1, b: 1 }; const source1 = { b: 2, c: 2 }; const source2 = { c: 3 }; Object.assign(target, source1, source2); console.log(target); // {a:1, b:2, c:3} - 如果非对象参数出现在源对象的位置（即非首参数），那么这些参数都会转成对象，如果无法转成对象，就会跳过
-
let obj = {a: 1}; Object.assign(obj, undefined) === obj // true Object.assign(obj, null) === obj // true - 字符串会以数组形式，拷贝入目标对象，其他值都不会产生效果（undefined，null，number，boolean）
-
const v1 = ‘abc‘; const v2 = true; // 被忽略 const v3 = 10; // 被忽略 const obj = Object.assign({}, v1, v2, v3); console.log(obj); // { "0": "a", "1": "b", "2": "c" }
- 布尔值、数值、字符串分别转成对应的包装对象时
可以看到它们的原始值都在包装对象的内部属性[[PrimitiveValue]]上面，
这个 内部属性[[PrimitiveValue]] 属性是不会被 Object.assign() 拷贝的
-
Object(true); // {[[PrimitiveValue]]: true} Object(10); // {[[PrimitiveValue]]: 10} Object(‘abc‘); // {0: "a", 1: "b", 2: "c", length: 3, [[PrimitiveValue]]: "abc"}
- 不拷贝 不可枚举的属性（enumerable: false）
- 属性名为 Symbol 值的属性，也会被 Object.assign() 拷贝
注意：
Object.assign() 实行的是浅拷贝，而不是深拷贝。
也就是说，如果源对象某个属性的值是对象，那么目标对象拷贝得到的是这个对象的引用
- Object.assign() 可以用来处理数组，但是会把数组视为对象
-
Object.assign([1, 2, 3], [4, 5]); // [4, 5, 3]
常见用途
- ① 为对象添加属性
-
class Point { constructor(x, y) { Object.assign(this, {x, y}); // 将 x 属性 和 y 属性 添加到 Point类 的对象实例 }; }; - ② 为对象 添加方法
-
Object.assign(Point.prototype, { someMethod(arg1, arg2) { ··· }, anotherMethod() { ··· }, }); - ③ 克隆对象
- 只克隆 原始对象 本身的值
-
function clone(origin) { return Object.assign({}, origin); };
- 克隆，并克隆其原型链
-
function clone(origin) { let originProto = Object.getPrototypeOf(origin); return Object.assign(Object.create(originProto), origin); };
- ④ 合并多个对象
-
const merge = (target, ...sources) => Object.assign(target, ...sources);
const newObj = merge({}, obj1, obj2, obj3); - ⑤ 为属性指定默认值
-
const DEFAULTS = { logLevel: 0, outputFormat: ‘html‘ }; function processContent(options) { options = Object.assign({}, DEFAULTS, options); console.log(options); // ... };
- 注意，由于存在浅拷贝的问题
-
const DEFAULTS = { url: { host: ‘example.com‘, port: 7070 }, }; processContent({ url: {port: 8000} }) // { // url: {port: 8000} // 由于拷贝了整个对象，所以覆盖了原来的 url 对象，导致对象里的内容不一样 // }
Object.getOwnPropertyDescriptors()
3
3
3
3
3
3
3
3
3
NaN
以上是关于ECMA Script 6_对象的扩展的主要内容，如果未能解决你的问题，请参考以下文章