熬夜整理的 Object 对象的静态方法、实例属性和实例方法,用于理解 Object 对象的静态方法和实例方法的区别,以及 Object 对象的静态方法和实例方法的使用。
Object 对象的静态方法
Object.assign()
Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。
Object.assign(target, ...sources)
参数 | 说明 |
---|---|
target | 目标对象 |
sources | 源对象 |
const target = {
a: 1, b: 2 };
const source = {
b: 4, c: 5 };
const returnedTarget = Object.assign(target, source);
console.log(target);
// expected output: Object { a: 1, b: 4, c: 5 }
console.log(returnedTarget);
// expected output: Object { a: 1, b: 4, c: 5 }
Object.create()
Object.create() 方法创建一个新对象,使用现有的对象来提供新创建的对象的 __proto__
。
Object.create(proto, [propertiesObject])
参数 | 说明 |
---|---|
proto | 新创建对象的原型对象。 |
propertiesObject | 可选。如果没有指定为 undefined ,则应该是一个对象,其自身可枚举属性对应于要添加到新创建对象的属性描述符。 |
const obj = {
a: 1 };
const copy = Object.create(Object.getPrototypeOf(obj), Object.getOwnPropertyDescriptors(obj));
console.log(copy.a); // 1
Object.defineProperties()
Object.defineProperties() 方法直接在一个对象上定义新的属性或修改现有属性,并返回该对象。
Object.defineProperties(obj, props)
参数 | 说明 |
---|---|
obj | 要定义属性的对象。 |
props | 要定义或修改的属性描述符。 |
const object1 = {
};
Object.defineProperties(object1, {
property1: {
value: 42,
writable: true
},
property2: {
}
});
console.log(object1.property1); // expected output: 42
Object.defineProperty()
Object.defineProperty() 方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性,并返回这个对象。
Object.defineProperty(obj, prop, descriptor)
参数 | 说明 |
---|---|
obj | 要在其上定义属性的对象。 |
prop | 要定义或修改的属性的名称。 |
descriptor | 要定义或修改的属性描述符。 |
const object1 = {
};
Object.defineProperty(object1, 'property1', {
value: 42,
writable: false
});
object1.property1 = 77;
console.log(object1.property1); // expected output: 42
这里的重点是descriptor
,它是一个对象,用于描述属性的特征,它的属性有:
属性 | 说明 |
---|---|
configurable | 当且仅当该属性的 configurable 为 true 时,该属性的描述符才能够被改变,同时该属性也能从对应的对象上被删除。默认为 false 。 |
enumerable | 当且仅当该属性的 enumerable 为 true 时,该属性才能够出现在对象的枚举属性中。默认为 false 。 |
value | 该属性对应的值。可以是任何有效的 JavaScript 值(数值,对象,函数等)。默认为 undefined 。 |
writable | 当且仅当该属性的 writable 为 true 时,属性的值,也就是上面的 value ,才能被赋值运算符改变。默认为 false 。 |
get | 一个给属性提供 getter 的方法,如果没有 getter 则为 undefined 。当访问该属性时,该方法会被执行,方法执行时没有参数传入,但是会传入 this 对象(由于继承关系,这里的 this 并不一定是定义该属性的对象)。默认为 undefined 。 |
set | 一个给属性提供 setter 的方法,如果没有 setter 则为 undefined 。当属性值修改时,触发执行该方法。该方法将接受唯一参数,即该属性新的参数值。默认为 undefined 。 |
const object1 = {
};
Object.defineProperty(object1, 'property1', {
get: function() {
return 42;
}
});
console.log(object1.property1); // expected output: 42
写一个vue
的都懂,就不多说了。
Object.entries()
Object.entries() 方法返回一个给定对象自身可枚举属性的键值对数组,其排列与使用 for...in
循环遍历该对象时返回的顺序一致(区别在于 for-in
循环也枚举原型链中的属性)。
Object.entries(obj)
参数 | 说明 |
---|---|
obj | 要返回其枚举自身属性的对象。 |
const object1 = {
a: 'somestring',
b: 42
};
for (const [key, value] of Object.entries(object1)) {
console.log(`${key}: ${value}`);
}
// expected output:
// "a: somestring"
// "b: 42"
// order is not guaranteed
Object.freeze()
Object.freeze() 方法可以冻结一个对象。一个被冻结的对象再也不能被修改;冻结了一个对象则不能向这个对象添加新的属性,不能删除已有属性,不能修改该对象已有属性的可枚举性,不能修改已有属性的可配置性,不能修改已有属性的可写性,不能修改已有属性的值。此外,冻结一个对象后该对象的原型也不能被修改。freeze() 返回和传入的参数相同的对象。
Object.freeze(obj)
参数 | 说明 |
---|---|
obj | 要冻结的对象。 |
const obj = {
prop: 42
};
const obj2 = Object.freeze(obj);
obj2.prop = 33;
// Throws an error in strict mode
console.log(obj2.prop);
// expected output: 42
Object.fromEntries()
Object.fromEntries() 方法是 Object.entries() 的逆操作,用于将一个键值对数组转为对象。
Object.fromEntries(iterable)
参数 | 说明 |
---|---|
iterable | 一个可迭代对象,它的所有键值对都会被当作新对象的键值对。 |
const entries = new Map([
['foo', 'bar'],
['baz', 42]
]);
const obj = Object.fromEntries(entries);
console.log(obj);
// expected output: Object { foo: "bar", baz: 42 }
Object.getOwnPropertyDescriptor()
Object.getOwnPropertyDescriptor() 方法会返回一个给定对象自身属性(非继承属性)的描述符。
Object.getOwnPropertyDescriptor(obj, prop)
参数 | 说明 |
---|---|
obj | 要查询的对象。 |
prop | 要查询的对象的属性名称。 |
const object1 = {
property1: 42
};
const descriptor1 = Object.getOwnPropertyDescriptor(object1, 'property1');
console.log(descriptor1.configurable);
// expected output: true
console.log(descriptor1.value);
// expected output: 42
Object.getOwnPropertyDescriptors()
Object.getOwnPropertyDescriptors() 方法会返回指定对象所有自身属性(非继承属性)的描述对象。
Object.getOwnPropertyDescriptors(obj)
参数 | 说明 |
---|---|
obj | 要返回其自身属性的对象。 |
const object1 = {
property1: 42
};
const descriptors1 = Object.getOwnPropertyDescriptors(object1);
console.log(descriptors1.property1.value);
// expected output: 42
console.log(descriptors1.property1.writable);
// expected output: true
Object.getOwnPropertyNames()
Object.getOwnPropertyNames() 方法返回一个由指定对象的所有自身属性的属性名(包括不可枚举属性但不包括 Symbol 值作为名称的属性)组成的数组。
Object.getOwnPropertyNames(obj)
参数 | 说明 |
---|---|
obj | 要返回其自身属性的对象。 |
const object1 = {
a: 1,
b: 2,
c: 3
};
console.log(Object.getOwnPropertyNames(object1));
// expected output: Array ["a", "b", "c"]
Object.getOwnPropertySymbols()
Object.getOwnPropertySymbols() 方法返回一个给定对象自身的所有 Symbol 属性的数组。
Object.getOwnPropertySymbols(obj)
参数 | 说明 |
---|---|
obj | 要返回其自身 Symbol 属性的对象。 |
const object1 = {
};
const a = Symbol('a');
const b = Symbol.for('b');
object1[a] = 'localSymbol';
object1[b] = 'globalSymbol';
const objectSymbols = Object.getOwnPropertySymbols(object1);
console.log(objectSymbols.length);
// expected output: 2
console.log(objectSymbols[0]);
// expected output: Symbol(a)
console.log(objectSymbols[1]);
// expected output: Symbol(b)
Object.getPrototypeOf()
Object.getPrototypeOf() 方法返回指定对象的原型(内部[[Prototype]]属性的值)。
Object.getPrototypeOf(obj)
参数 | 说明 |
---|---|
obj | 要获取其原型的对象。 |
function Rectangle() {
// ...
}
const rec = new Rectangle();
console.log(Object.getPrototypeOf(rec) === Rectangle.prototype);
// expected output: true
Object.is()
Object.is() 方法判断两个值是否是相同的值。
Object.is(value1, value2)
参数 | 说明 |
---|---|
value1 | 任意类型的值。 |
value2 | 任意类型的值。 |
console.log(Object.is('foo', 'foo'));
// expected output: true
console.log(Object.is(window, window));
// expected output: true
console.log(Object.is('foo', 'bar'));
// expected output: false
console.log(Object.is([], []));
// expected output: false
const foo = {
a: 1 };
const bar = {
a: 1 };
console.log(Object.is(foo, foo));
// expected output: true
console.log(Object.is(foo, bar));
// expected output: false
console.log(Object.is(null, null));
// expected output: true
// Special Cases
console.log(Object.is(0, -0));
// expected output: false
console.log(Object.is(-0, -0));
// expected output: true
console.log(Object.is(NaN, 0 / 0));
// expected output: true
Object.isExtensible()
Object.isExtensible() 方法判断一个对象是否是可扩展的(是否可以在它上面添加新的属性)。
Object.isExtensible(obj)
参数 | 说明 |
---|---|
obj | 要检查的对象。 |
const object1 = {
};
console.log(Object.isExtensible(object1));
// expected output: true
Object.preventExtensions(object1);
console.log(Object.isExtensible(object1));
// expected output: false
Object.isFrozen()
Object.isFrozen() 方法判断一个对象是否被冻结。
Object.isFrozen(obj)
参数 | 说明 |
---|---|
obj | 要检查的对象。 |
const object1 = {
property1: 42
};
console.log(Object.isFrozen(object1));
// expected output: false
Object.freeze(object1);
console.log(Object.isFrozen(object1));
// expected output: true
Object.isSealed()
Object.isSealed() 方法判断一个对象是否被密封。
Object.isSealed(obj)
参数 | 说明 |
---|---|
obj | 要检查的对象。 |
const object1 = {
property1: 42
};
console.log(Object.isSealed(object1));
// expected output: false
Object.seal(object1);
console.log(Object.isSealed(object1));
// expected output: true
Object.keys()
Object.keys() 方法返回一个由一个给定对象的自身可枚举属性组成的数组,数组中属性名的排列顺序和使用 for...in 循环遍历该对象时返回的顺序一致(两者的主要区别是 for-in 循环也枚举原型链中的属性)。
Object.keys(obj)
参数 | 说明 |
---|---|
obj | 要返回其枚举自身属性的对象。 |
const object1 = {
a: 'somestring',
b: 42,
c: false
};
console.log(Object.keys(object1));
// expected output: Array ["a", "b", "c"]
Object.preventExtensions()
Object.preventExtensions() 方法让一个对象变的不可扩展,也就是永远不能再添加新的属性。
Object.preventExtensions(obj)
参数 | 说明 |
---|---|
obj | 要让其变的不可扩展的对象。 |
const object1 = {
};
console.log(Object.isExtensible(object1));
// expected output: true
Object.preventExtensions(object1);
console.log(Object.isExtensible(object1));
// expected output: false
Object.seal()
Object.seal() 方法封闭一个对象,阻止添加新属性并将所有现有属性标记为不可配置。当前属性的值只要可写就可以改变。
Object.seal(obj)
参数 | 说明 |
---|---|
obj | 要封闭的对象。 |
const object1 = {
property1: 42
};
console.log(Object.isSealed(object1));
// expected output: false
Object.seal(object1);
console.log(Object.isSealed(object1));
// expected output: true
Object.setPrototypeOf()
Object.setPrototypeOf() 方法设置一个指定的对象的原型(内部[[Prototype]]属性)到另一个对象或 null。
Object.setPrototypeOf(obj, prototype)
参数 | 说明 |
---|---|
obj | 要设置其原型的对象。 |
prototype | 新的原型对象或 null。 |
const object1 = {
};
Object.setPrototypeOf(object1, Array.prototype);
console.log(object1);
// expected output: Array []
Object.values()
Object.values() 方法返回一个给定对象自身的所有可枚举属性值的数组,值的顺序与使用 for...in 循环遍历该对象时返回的顺序一致(区别在于 for-in 循环也枚举原型链中的属性)。
Object.values(obj)
参数 | 说明 |
---|---|
obj | 要返回其枚举自身属性的对象。 |
const object1 = {
a: 'somestring',
b: 42,
c: false
};
console.log(Object.values(object1));
// expected output: Array ["somestring", 42, false]
Object.hasOwn()
Object.hasOwn() 方法判断一个对象是否含有指定的自身属性。
Object.hasOwn(obj, prop)
参数 | 说明 |
---|---|
obj | 要检查的对象。 |
prop | 要检查的属性名。 |
const object1 = {
property1: 42
};
console.log(Object.hasOwn(object1, 'property1'));
// expected output: true
console.log(Object.hasOwn(object1, 'toString'));
// expected output: false
console.log(Object.hasOwn(object1, 'hasOwnProperty'));
// expected output: false
Object.hasOwn()
方法是 ES2021 新增的方法,旨意是为了替代hasOwnProperty()
方法,因为hasOwnProperty()
方法在某些情况下会被原型链上的属性覆盖,而Object.hasOwn()
方法不会。
Object 实例属性
Object.prototype.constructor
Object.prototype.constructor 属性返回对创建此对象的 Object 函数的引用。
Object.prototype.constructor
const object1 = {
};
console.log(object1.constructor === Object);
// expected output: true
Object.prototype.proto
Object.prototype.proto 属性允许你访问一个对象的原型。
Object.prototype.__proto__
const object1 = {
};
console.log(object1.__proto__ === Object.prototype);
// expected output: true
该属性不是标准的
JavaScript
属性,但是在浏览器中是非常常见的,因为它是访问原型的默认方法。在其他JavaScript
环境中,它可能不可用。
Object 实例方法
Object.prototype.hasOwnProperty()
Object.prototype.hasOwnProperty() 方法会返回一个布尔值,指示对象自身属性中是否具有指定的属性(也就是,是否有指定的键)。
obj.hasOwnProperty(prop)
参数 | 说明 |
---|---|
prop | 要检测的属性名。 |
const object1 = new Object();
object1.property1 = 42;
console.log(object1.hasOwnProperty('property1'));
// expected output: true
console.log(object1.hasOwnProperty('toString'));
// expected output: false
console.log(object1.hasOwnProperty('hasOwnProperty'));
// expected output: false
Object.prototype.isPrototypeOf()
Object.prototype.isPrototypeOf() 方法用于测试一个对象是否存在于另一个对象的原型链上。
obj.isPrototypeOf(object)
参数 | 说明 |
---|---|
object | 指定的对象。 |
function object1() {
}
function object2() {
}
object1.prototype = Object.create(object2.prototype);
const object3 = new object1();
console.log(object1.prototype.isPrototypeOf(object3));
// expected output: true
console.log(object2.prototype.isPrototypeOf(object3));
// expected output: true
Object.prototype.propertyIsEnumerable()
Object.prototype.propertyIsEnumerable() 方法返回一个布尔值,表示指定的属性是否可枚举。
obj.propertyIsEnumerable(prop)
参数 | 说明 |
---|---|
prop | 要检测的属性名。 |
const object1 = {
};
object1.property1 = 42;
console.log(object1.propertyIsEnumerable('property1'));
// expected output: true
console.log(object1.propertyIsEnumerable('toString'));
// expected output: false
Object.prototype.toLocaleString()
Object.prototype.toLocaleString() 方法返回一个表示该对象的字符串。该字符串与执行环境的地区对应。
obj.toLocaleString()
const object1 = {
[Symbol.toPrimitive](hint) {
if (hint == 'string') {
return 'object';
} else {
return 42;
}
}
};
console.log(object1.toLocaleString());
// expected output: "object"
Object.prototype.toString()
Object.prototype.toString() 方法返回一个表示该对象的字符串。
obj.toString()
const object1 = {
[Symbol.toPrimitive](hint) {
if (hint == 'string') {
return 'object';
} else {
return 42;
}
}
};
console.log(object1.toString());
// expected output: "42"
Object.prototype.valueOf()
Object.prototype.valueOf() 方法返回指定对象的原始值。
obj.valueOf()
const object1 = {
[Symbol.toPrimitive](hint) {
if (hint == 'string') {
return 'object';
} else {
return 42;
}
}
};
console.log(object1.valueOf());
// expected output: 42
Object 创建方式
这是场外话,不完全是Object
的内容,但是我觉得很重要,所以我把它放在这里。
创建Object
的方式有多少种,这里我也都归纳一下。
1. 使用new
关键字
const obj = new Object();
2. 使用Object.create()
方法
const obj = Object.create(null);
3. 使用Object.assign()
方法
const obj = Object.assign({
});
4. 使用字面量
const obj = {
};
5. 使用Object.defineProperty()
方法
Object.defineProperty(window, 'obj', {
value: {
},
writable: true,
enumerable: true,
configurable: true,
});
console.log(obj);
6. 使用Object.defineProperties()
方法
Object.defineProperties(window, {
obj: {
value: {
},
writable: true,
enumerable: true,
configurable: true,
},
});
console.log(obj);
7. 使用Object.fromEntries()
方法
const obj = Object.fromEntries([['a', 1], ['b', 2]]);
总结
上面就是Object
的所有方法和属性,这些方法和属性都是Object
的原型方法和属性,所以我们可以直接使用Object
的原型方法和属性。
如果有遗漏的,欢迎大家指出,我会及时修改。