博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
ES6入门之对象的新增方法
阅读量:6481 次
发布时间:2019-06-23

本文共 4909 字,大约阅读时间需要 16 分钟。

1. Object.is()

用来解决在ES5中 两种相等运算符的缺点。用来比较两个值是否严格相等,行为和(===)基本一致。

在ES5中判断两个值是否相等,只能用(==)相等运算符和(===)严格相等运算符,但是这两货都有缺点,前者 两边的值都会转换数据类型,后者 NaN不等于自身还有 +0 == -0。

Object.is('foo', 'foo')  // trueObject.is({}, {})  // false// 在 Object.is()+0 === -0  // trueNaN === NaN // falseObject.is(+0, -0)   // falseObject.is(NaN, NaN) // true 复制代码

2. Object.assign()

用于对象的合并,将源对象的所有可枚举属性,复制到目标对象,现在常用来进行浅拷贝。

const t = {a: 1}const s1 = {b: 2}const s2= {c: 3}Object.assign(t, s2, s2)// t  {a:1, b:2, c:3}// 在上面中第一个参数t是目标对象,s1 s2是源对象复制代码

注意:如果目标对象和源对象有同名属性,或者多个同名,那么在后面的属性会将前面的覆盖。

const t = {a: 1, b: 2}const s1 = {b: 3, c: 4}const s2 = {c: 5}Object.assign(t, s1, s2)t // {a:1, b:3, c:5}复制代码

如果Object.assign的参数只有一个,那么就返回该参数,另外如果该参数不是对象,那么Object.assign会将其转为对象在返回

const t = {a: 2}Object.assign(t)t // {a: 2}Object.assigin(2)// "object"复制代码

另外由于null 和 undefined 无法转换位对象,那么如果他们作为第一个参数就会报错,如果不是在第一个参数则不会有这个问题

Object.assign(undefined)    // 报错Object.assign(null)     //报错这样就不会报错:如下const t = {a: 2}Object.assign(t, undefined)     // trueObject.assign(t, null)      // true复制代码

其他(数值,字符串,布尔值)数值不再第一个也不会报错,但是字符串会以数组的形式被拷入目标对象,两外两个则不会做任何操作。

const a = 'abc'const b = trueconst c = 12const o = Object.assign({}, a, b, c)o // {"0": "a", "1": "b", "2": "c"}// 因为布尔值number 的原始值都在对象的内部属性[[PrimitiveValue]]上面,这个属性不能别Object.assign拷贝复制代码

Obeject.assign 拷贝的属性是有限制的,只能拷贝源对象的自身属性,也不能拷贝不可枚举的属性,另外 Symbol值的属性也能被拷贝

注意点:

1. 浅拷贝

Object.assign 实现的是浅拷贝,也就是说如果源对象的某个属性值是对象,那么目标对象拷贝得到的是这个对象的引用

2. 同名属性的替换

如果遇到同名属性,那Object.assign的处理方法是替换还不是追加

3. 数组的处理

在处理数组的时候,Object.assign是将其是为对象来处理,如果下标相同则是覆盖而不是追加

Object.assign([1, 2, 3], [4, 5])// [4, 5, 3]复制代码
4. 取值函数的处理

Object.assign 只能进行值的复制,如果复制的值是一个函数,那么就等函数求值执行完在进行值的复制

常见用途:

1. 为对象添加属性2. 为对象添加方法3. 克隆对象4. 合并多个对象5. 为属性指定默认值复制代码

3. Object.getOwnPropertyDescriptors()

用来返回指定对象所有自身属性(非继承属性)的描述对象

const o = {    left: 123,    top() {        return 'new'    }}Object.getOwnPropertyDescriptors(o)// {    left:{        configurable: true        enumerable: true        value: 123        writable: true    },    top: {        configurable: true        enumerable: true        value: ƒ top()        writable: true    }}Object.getOwnPropertyDescriptors() 返回一个对象,所有原对象的属性名都是该对象的属性名,对应的属性值就是该属性的描述对象。复制代码

4. __proto__属性,Object.setPrototypeOf(),Object.getPrototypeOf()

4.1. __proto__属性

用来读取或设置当前对象的prototype对象,另外这是一个内部属性。__proto__是调用的 Object.prototype.proto 方法

//es5 写法const o = {    method: function() {}}o.__proto__ = someOtherObj//es6 写法var o = Object.create(someOtherObj)o.method = function(){}复制代码

4.2 Object.setPrototypeOf()

作用和 __proto__相同,用来设置一个对象的prototype对象,返回参数本身

// 格式Object.setPrototypeOf(object, prototype)// 用法const o = Object.setPrototypeOf({}, null)=== 以下写法function setPrototyoeOf(obj, proto) {    obj.__proto__ = proto    return obj}// 例子let proto = {}let o = {    x: 10}Object.setPrototypeOf(o, proto)proto.y = 20proto.z = 40o.x // 10o.y // 20o.z // 40// 上面 将proto设为 o 对象的原型,所以可以从o 中读取proto 的属性复制代码

注意:如果第一参数不是对象,将自动转换为对象,由于返回的还是第一个参数,所以这个操作不会产生任何效果,另外由于 undefined 和 null 无法转换为对象,所以第一个参数如果是这两个则会报错

Object.setPrototypeOf(1, {}) === 1 // trueObject.setPrototypeOf('foo', {}) === 'foo' // trueObject.setPrototypeOf(true, {}) === true // trueObject.setPrototypeOf(undefined, {})// TypeError: Object.setPrototypeOf called on null or undefinedObject.setPrototypeOf(null, {})// TypeError: Object.setPrototypeOf called on null or undefined复制代码

4.3 Object.getPrototypeOf()

用于读取一个对象的原型对象和Object.setPrototypeOf 配套使用。所有的特性也和 上面一样,第一个参数如果不是对象将转换为对象,undefined和null 会报错

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

5.1 Object.keys()

用于返回一个数组,成员的参数是对象自身的所有可遍历属性的键名

let obj = {    x: 1,    y: 'b'}Object.keys(obj)// ["x", "y"]复制代码

5.2 Object.values()

返回值是一个数组,成员是对象自身的(不含继承的)所有可遍历属性的值。Objet.values只返回对象自身的可遍历属性。

let obj = {    x: 1,    y: 'b'}Object.keys(obj)// [1, "b"]复制代码

另外Object.values遍历的时候如果遇到属性名为数值的属性,那么将按照数值大小,从小到大遍历,如下:

const obj = { 100: 'a', 2: 'b', 7: 'c' };Object.values(obj)// ["b", "c", "a"]复制代码

注意:Object.values 会过滤属性名为 Symbol的属性

Object.values({ [Symbol()]: 123, foo: 'abc' });// ['abc']复制代码

如果Object.values的参数是一个字符串 那么将返回字符串拆解的数组

Object.values('symbol')["s", "y", "m", "b", "o", "l"]复制代码

注意: 如果Object.values 的参数为boolean值或者number,那么返回值是一个空数组,

Object.values(true)[]Object.values(2,null)[]复制代码

5.3 Object.entries()

返回一个数组,成员是对象自身(不含继承的)所有可遍历属性的键值对数组,同样 Symbol 属性的值会被过滤。

const p = { f: 'b', az: 22 };Object.entries(p)// [ ["f", "b"], ["az", 22] ]Object.entries({ [Symbol()]: 456, o: 'c' });// [ [ 'o', 'c'] ]复制代码

Object.entries 可以用来遍历对象的属性

Object.entries 将对象转为真正的Map结构

const obj = { foo: 'bar', baz: 42 };const map = new Map(Object.entries(obj));map // Map { foo: "bar", baz: 42 }复制代码

6. Object.fromEntries()

是Object.entries 的逆操作,将一个键值对数组转为对象。主要是将键值对的数据结构还原为对象,适用于将Map结构转为对象

Object.fromEntries([  ['foo', 'bar'],  ['baz', 42]])// { foo: "bar", baz: 42 }// 例二 将Map结构转为对象const map = new Map().set('foo', true).set('bar', false);Object.fromEntries(map)// { foo: true, bar: false }复制代码

欢迎关注 公众号【小夭同学】

ES6入门系列

Git教程

转载地址:http://oczuo.baihongyu.com/

你可能感兴趣的文章
Bootstrap技术: 模式对话框的使用
查看>>
小知识,用myeclipes找jar
查看>>
in-list expansion
查看>>
设计原则(四):接口隔离原则
查看>>
基于react的滑动图片验证码组件
查看>>
java单例模式深度解析
查看>>
【学习笔记】阿里云Centos7.4下配置Nginx
查看>>
VuePress手把手一小時快速踩坑
查看>>
学习constructor和instanceof的区别
查看>>
Vijos P1881 闪烁的星星
查看>>
ABP理论学习之领域服务
查看>>
Qt 控制watchdog app hacking
查看>>
让所有IE支持HTML5的解决方案
查看>>
RDD之五:Key-Value型Transformation算子
查看>>
percona 5.7.11root初始密码设置
查看>>
Cognitive Security的异常检测技术
查看>>
Impress.js上手 - 抛开PPT、制作Web 3D幻灯片放映
查看>>
生活杂事--度过十一中秋
查看>>
Pyrex也许是一个好东西
查看>>
WINFORM WPF字体颜色相互转换
查看>>