共计 4320 个字符,预计需要花费 11 分钟才能阅读完成。
1. Object.is()
用来解决在 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
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) // 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. 为属性指定默认值
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 = 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. 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 入门系列
ES6 入门之 let、cont
ES6 入门之变量的解构赋值
ES6 入门之字符串的扩展
ES6 入门之正则的扩展
ES6 入门之数值的扩展
ES6 入门之函数的扩展
ES6 入门之对象的扩展
Git 教程
前端 Git 基础教程