JavaScript - 常用Object

JavaScript Object基对象常用方法总结

构造函数

let obj = new Object();

静态方法

Object.assign()

介绍：合并对象

Object.assign(target, ...sources)

target 需要应用源对象属性的目标对象，修改后将作为返回值。

sources 一个或多个包含要应用的属性的源对象。

注意：只是合并对象，不是深拷贝，如下

const obj1 = { a: 0, b: { c: 0 } };
const obj2 = Object.assign({}, obj1);
console.log(obj2); // { a: 0, b: { c: 0 } }

obj1.a = 1;
console.log(obj1); // { a: 1, b: { c: 0 } }
console.log(obj2); // { a: 0, b: { c: 0 } }

obj2.a = 2;
console.log(obj1); // { a: 1, b: { c: 0 } }
console.log(obj2); // { a: 2, b: { c: 0 } }

//深层次拷贝失败
obj2.b.c = 3;
console.log(obj1); // { a: 1, b: { c: 3 } }
console.log(obj2); // { a: 2, b: { c: 3 } }

// 深拷贝
const obj3 = { a: 0, b: { c: 0 } };
const obj4 = JSON.parse(JSON.stringify(obj3));
obj3.a = 4;
obj3.b.c = 4;
console.log(obj4); // { a: 0, b: { c: 0 } }

Object.entries()（常用）

介绍：返回一个数组，包含给定对象自有的可枚举字符串键属性的键值对

const object1 = {
  a: 'somestring',
  b: 42,
};

for (const [key, value] of Object.entries(object1)) {
  console.log(`${key}: ${value}`);
}

// Expected output:
// "a: somestring"
// "b: 42"

Object.keys()（常用）

作用：静态方法返回一个由给定对象自身的可枚举的字符串键属性名组成的数组。就是返回对象的健，排列成数组

const object1 = {
  a: 'somestring',
  b: 42,
  c: false,
};

console.log(Object.keys(object1));
// Expected output: Array ["a", "b", "c"]

Object.values() （常用）

作用：静态方法返回一个给定对象的自有可枚举字符串键属性值组成的数组。返回对象的value值，组成数组。

const object1 = {
  a: 'somestring',
  b: 42,
  c: false,
};

console.log(Object.values(object1));
// Expected output: Array ["somestring", 42, false]

Object.fromEntries() （常用）

介绍：将键值对列表转换为一个对象。和entries对应。

const entries = new Map([
  ['foo', 'bar'],
  ['baz', 42],
]);

const obj = Object.fromEntries(entries);

console.log(obj);
// Expected output: Object { foo: "bar", baz: 42 }

Object.freeze()

介绍：<font style="color:rgb(27, 27, 27);">Object.freeze()</font> 静态方法可以使一个对象被冻结。冻结对象可以防止扩展，并使现有的属性不可写入和不可配置

const obj = {
  prop: 42,
};

Object.freeze(obj);

obj.prop = 33;
// Throws an error in strict mode 

console.log(obj.prop);
//修改不生效 ，输出: 42

注意：这个方式可以用ts取去限制，这里是用来纯js的方式

Object.getPrototypeOf()

作用：返回指定对象的原型（即内部 <font style="color:rgb(27, 27, 27);">[[Prototype]]</font> 属性的值）。

const prototype1 = {};
const object1 = Object.create(prototype1);

console.log(Object.getPrototypeOf(object1) === prototype1);
// Expected output: true

var obj = {};
console.log(
  Object.getPrototypeOf(obj) === obj.__proto__
)
//output  true

Object.hasOwn()（常用）

作用：检测对象上是否存在 指定属性。

Object.hasOwn() 旨在取代 Object.prototype.hasOwnProperty()。两种方式都可以用，建议用hasOwn去判断。

const object1 = {
  prop: 'exists',
};

console.log(Object.hasOwn(object1, 'prop'));
// Expected output: true

console.log(Object.hasOwn(object1, 'toString'));
// Expected output: false

console.log(Object.hasOwn(object1, 'undeclaredPropertyValue'));
// Expected output: false

也可以简单粗暴一点

const obj = {}; obj.props === true 如果不存在 就是undefined Object.hasOwn()比较优雅

Object.is()（常用）

作用：浅比较两个值是否相等

console.log(Object.is('1', 1));
// Expected output: false

console.log(Object.is(NaN, NaN));
// Expected output: true

console.log(Object.is(-0, 0));
// Expected output: false

//不同引用 返回false
const obj1 = {};
const obj2 = {};
console.log(Object.is(obj1, obj2));
// Expected output: false 不同的引用

//相同引用 返回true

注意： React-useEffect 依赖项 就是用的Object.is去做比较。因为设计到很多坑点。详情参考：基本hooks useEffect解析。

实例方法

hasOwnProperty()

作用：表示对象自有属性（而不是继承来的属性）中是否具有指定的属性。 就是判断是否有指定的key

:::color1
备注： 在支持 Object.hasOwn 的浏览器中，建议使用 Object.hasOwn()，而非 hasOwnProperty()。

:::

const object1 = {};
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

<font style="color:rgb(27, 27, 27);">isPrototypeOf()</font>

用于检查一个对象的prototype 是否存在与另一个对象的原型链中

function Human() {}

let human = new Human()

console.log(
  Human.prototype.isPrototypeOf(human)
);//true

console.log(
  Object.prototype.isPrototypeOf(human)
);//true

所以：由此可以推理出，Object是任何对象的原型。

instanceof 补充

用来判断对象是否属于某个对象的实例

function Human() {}

let human = new Human()

console.log(human instanceof Human);//true
console.log(human instanceof Object);//true
console.log(human instanceof Array);//false

console.log([1,2,3] instanceof Array);//true

参考文档：

Object() 构造函数 - JavaScript | MDN