首页 > 其他 > 详细

ES6 学习(10) ---对象的扩展

时间:2020-04-09 23:27:59      阅读:69      评论:0      收藏:0      [点我收藏+]

1、Object.is(), // ES6 新增用来比较两个值是否完全相等

  一般比较值是否相等,我们通常使用 == 和 === 运算符,但是对于 -0 和 +0 的相等判断并不准确,同时还有 NaN 并不等于本身,因此ES6,新增Object.is() 方法用于判断两值是否完全相等,大部分情况同 === 运算符

 1 +0 === -0 //true
 2 NaN === NaN // false
 3 
 4 Object.is(+0, -0) // false
 5 Object.is(NaN, NaN) // true
 6 
 7 Object.is(‘foo‘, ‘foo‘)
 8 // true
 9 Object.is({}, {}) // 栈中地址不同
10 // false

 

2、Object.assign() // 用于对象的合并,将源对象的所有枚举属性复制到目标对象。如果有同名属性那么后面的就会覆盖前面的;

1 const target = { a: 1, b: 1 };
2 
3 const source1 = { b: 2, c: 2 };
4 const source2 = { c: 3 };
5 
6 Object.assign(target, source1, source2);
7 target // {a:1, b:2, c:3}

  Object.assign() 只能拷贝到可枚举属性,同时如果对象名为Symbol类型也会拷贝合并

注意:

  1、此方法只是浅拷贝,并不是深拷贝,因此对象中属性值是引用类型,那么拷贝的也只是引用;

  2、同名属性会替换;

  3、如果是数组的话,由于数组的下标相当于对象属性,因此数组合并的话会替换index的值;Object.assign( [1, 2, 3], [4, 5] ) // [4, 5, 3]

  4、取值函数的处理: 如果是取值函数的话,并不会复制取值函数,而是拿到值后将这个值复制过去

1 const source = {
2   get foo() { return 1 }
3 };
4 const target = {};
5 
6 Object.assign(target, source)
7 // { foo: 1 }

 

3、Object.getOwnPropertyDescriptors() // 获取一个对象下所有的自身属性(非继承属性)的描述对象

  ES5 中 Object.getOwnPropertyDescriptor() 只是获取某一个自身属性

 1 const obj = {
 2   foo: 123,
 3   get bar() { return ‘abc‘ }
 4 };
 5 
 6 Object.getOwnPropertyDescriptors(obj)
 7 // { foo:
 8 //    { value: 123,
 9 //      writable: true,
10 //      enumerable: true,
11 //      configurable: true },
12 //   bar:
13 //    { get: [Function: get bar],
14 //      set: undefined,
15 //      enumerable: true,
16 //      configurable: true } }

 

4、__proto__属性,Object.setPrototypeof(), Object.getPrototypeof() 

 __proto__ 用于读写对象的原型(prototype), 本质上算是一个内部属性,并不是一个对外的API,尽量避免使用此属性用于对象原型上的读写

 Object.setPrototypeof() 用于设置对象原型对象,如果传入的参数并不是一个对象,那么就会转换成对象,如果是undefined和null不能转成对象那么就会报错

 1 let proto = {};
 2 let obj = { x: 10 };
 3 Object.setPrototypeOf(obj, proto);
 4 
 5 proto.y = 20;
 6 proto.z = 40;
 7 
 8 obj.x // 10
 9 obj.y // 20
10 obj.z // 40

 Object.getPrototypeof() 用于读取对象原型对象, 

 

5、Object.keys(), Object.values(), Object.entries() 

  ES5 中Object.keys() 返回对象所有可遍历属性的键名所组成的数组;

  ES7 中新增了与其配套的Object.values() Object.entries() 的方法,一般配合 for...of 使用

  Object.values() 返回对象属性值所组成的数组,返回的数组成员的顺序与 属性遍历的 部分排列规则一致。

  Object.values() 只返回对象自身可遍历属性

  Object.entries() 返回对象自身可遍历属性的键值对数组,(如果属性名是Symbol类型的并不会遍历到)

const obj = { foo: ‘123‘, baz: 42 };
Object.entries(obj)
// [ ["foo", "123"], ["baz", 42] ]
 1 // 基本用途是遍历对象的属性
 2 let obj = { one: 1, two: 2 };
 3 for (let [k, v] of Object.entries(obj)) {
 4   console.log(
 5     `${JSON.stringify(k)}: ${JSON.stringify(v)}`
 6   );
 7 }
 8 // "one": 1
 9 // "two": 2
10 
11 // Object.entries方法的另一个用处是,将对象转为真正的Map结构。
12 
13 const obj = { foo: ‘bar‘, baz: 42 };
14 const map = new Map(Object.entries(obj));
15 map // Map { foo: "bar", baz: 42 }

 

6、Object.fromEnties() // 此方法是Object.entries() 的逆操作,即:将键值对数组转换成对象

1 Object.fromEntries([
2   [‘foo‘, ‘bar‘],
3   [‘baz‘, 42]
4 ])
5 // { foo: "bar", baz: 42 }

  一般也可以将Map对象转换成对象

 1 // 例一
 2 const entries = new Map([
 3   [‘foo‘, ‘bar‘],
 4   [‘baz‘, 42]
 5 ]);
 6 
 7 Object.fromEntries(entries)
 8 // { foo: "bar", baz: 42 }
 9 
10 // 例二
11 const map = new Map().set(‘foo‘, true).set(‘bar‘, false);
12 Object.fromEntries(map)
13 // { foo: true, bar: false }

 

ES6 学习(10) ---对象的扩展

原文:https://www.cnblogs.com/newttt/p/12669551.html

(1)
(1)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!