卖坚果的怪叔叔 卖坚果的怪叔叔
  • 首页
  • 生活
  • 技术
  • 记录
  • 工具箱
  • 关于我
首页 › 技术 › ES6入门之对象的新增方法

ES6入门之对象的新增方法

坚果大叔
2019-05-21 17:56:22技术阅读 2,623

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

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

Object.is('foo', 'foo')  // true
Object.is({}, {})  // false

// 在 Object.is()

+0 === -0  // true
NaN === NaN // false

Object.is(+0, -0)   // false
Object.is(NaN, NaN) // true 

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

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)     // true
Object.assign(t, null)      // true

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

const a = 'abc'
const b = true
const c = 12

const 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. 为属性指定默认值

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

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.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 = 20
proto.z = 40

o.x // 10
o.y // 20
o.z // 40

// 上面 将proto设为 o 对象的原型,所以可以从o 中读取proto 的属性

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

Object.setPrototypeOf(1, {}) === 1 // true
Object.setPrototypeOf('foo', {}) === 'foo' // true
Object.setPrototypeOf(true, {}) === true // true

Object.setPrototypeOf(undefined, {})
// TypeError: Object.setPrototypeOf called on null or undefined

Object.setPrototypeOf(null, {})
// TypeError: Object.setPrototypeOf called on null or undefined

4.3 Object.getPrototypeOf()

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

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 }

是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 }

对象
赞赏 赞(0)
本文系作者 @坚果大叔 原创发布在 卖坚果的怪叔叔。未经许可,禁止转载。
Node.js EventEmitter 和 Buffer
上一篇
重学 JS 之在 HTML 中使用 JavaScript
下一篇
在小程序中查看

这是个😊,挣点服务器费用😜

热门文章
Sort函数小Tips!
uni 小程序 vendor 体积过大。
JS生成随机验证码校验(前端)
Ant-design-vue Table 自定义列斑马纹效果
简单三步,让你玩转微信自动邀请加群!!!
三度胃镜有感
专题标签
agent (1) CSS (15) dom (1) Es6入门系列 (14) Git (3) html (1) iview (1) JavaScript (9) js (4) Lif (1) Node (4) pyecharts (1) Python (10) ref (1) scriptable (1) Skill (1) vsCode (1) vue (4) wordpress (2) 三月 (1) 上海 (1) 假期 (1) 其他分享 (3) 前端两三问 (15) 古镇 (1) 外滩 (1) 对象 (1) 小程序 (5) 年度总结 (6) 年终总结 (1) 微信机器人 (4) 打字机 (1) 技术 (1) 日常问题 (8) 日常问题记录 (1) 春天 (2) 服务器 (2) 海族馆 (1) 生活 (8) 网上国网 (1) 记录 (3) 通勤 (1) 重学JavaScript (11) 面试题 (10) 🌸 (1)
什么是Agent?
2026-08-15 23:49:12
429 0 2
什么是 Skill?
2026-08-12 21:32:42
348 1 0
失业在家,我给小朋友做了一个练字小程序!
2026-08-07 16:21:52
690 10 1
上线8年,15万用户的小程序,一共赚了多少钱?
2026-05-30 18:01:24
4,683 4 0
  • 0
博主

一位佛系的前端开发者,略通摄影,乐于尝试新事物,热衷于美食。

友链
故事胶片
公众号
坚果大叔 执行上下文 卖坚果的怪叔叔 Dacking
Copyright © 2017-2026 卖坚果的怪叔叔

开往-友链接力

萌ICP备20230818号

苏ICP备18048410号-3
  • 首页
  • 生活
  • 技术
  • 记录
  • 工具箱
  • 关于我
# CSS # # JavaScript # # vue # # 微信 # # 生活 #
坚果大叔
345
文章
171
评论
432
喜欢