JS中Object的方法汇总，包括assign、create、prototype等等

已于 2022-05-03 21:29:31 修改
阅读量2.2k 收藏 11
点赞数 3
分类专栏： JS 文章标签： 前端 javascript es6
于 2022-04-22 20:14:13 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/BWater_monster/article/details/124140824
版权

JavaScript Object

JS的Object到底是啥东西呢？它有啥东西呢？
我们简单知道的，就是new一个Object实例对象，那这个实例对象又何Object又有什么关系呢？

先打印一下看看

console.dir(Object);

在这里插入图片描述

1、prototype

为啥要先说这个呢？——原型
这prototype里面的内容就是：new出来的对象的原型链上（__proto__）的内容
另一篇文章：{}对象的原型对象

2、assign(obj1, obj2)

官方解释：将所有可枚举属性的值从一个或多个源对象分配到目标对象。它将返回目标对象。

理解：两个参数对象，把obj2合到obj1上，相同的属性会覆盖掉，更改obj1的内容，返回更改后的obj1。

let obj1 = {
 name: 'obj1',
  age: 18,
}
let obj2 = {
  age: 24,
  phone: 114
}
console.dir(Object.assign(obj1,obj2));
console.log(obj1);

在这里插入图片描述

2、create(obj)

官方解释：创建一个新对象，使用现有的对象来提供新创建的对象的__proto__

理解：参数是个对象，创建了个新对象，新对象有个[[Prototype]]，里面的内容就是参数对象，这里在结合另一篇文章：{}对象的原型对象去瞅瞅

let obj1 = {
 name: 'obj1',
 age: 18,
}
console.dir(Object.create(obj1));

在这里插入图片描述

这里我又发现了另一个问题，另一篇文章：{}对象的原型对象里的{}，如果是create()出来的，那参数应该是啥？？？？换句话说，空对象的[[Prototype]]是谁？？？
let {} = Object.create(?????这里应该是啥)

3、defineProperties(obj, props)

官方解释：直接在一个对象上定义新的属性或修改现有属性，并返回该对象。

理解：定义一个对象的属性，通过设置某些值（第二个参数props里面）（或称之为描述符），使得这个对象的值具有自己的特点

第二个参数的值（描述符）有：

  • value: 这个属性的值，默认undefined
  • configurable：这个属性的描述符可不可以被修改和这个属性可不可以被删除，默认false
  • enumerable：该属性可不可以出现在对象的枚举属性中，默认false
  • writable：该属性的值（value）可不可以被修改，默认false
  • get：返回该属性的值，不可与value同用，默认undefined
  • set：设置该属性的值，默认undefined

就是说，默认全是false，什么情况下才会用这些东西呢？反之我是没用到过

1、基础使value

let obj = {};
Object.defineProperties(obj, {
  'property0': {
    value: 'Hello World', // 这个property0的值
  }
});
console.log(obj);//{property0: 'Hello World'}

给obj加了个属性：property0，值为’Hello World’

2、configurable

let obj = {};
Object.defineProperties(obj, {
  'property0': {
    value: 'Hello World',
    configurable:true,
  },
  'property1': {
    value: true,
  }
});

delete obj.property0;
delete obj.property1;
console.log(obj); // {property1: true}

属性property0可以被删除，property1不行。因为property0的configurable是true，至于文档说的可修改该属性的描述符没试

3、enumerable

let obj = {};
Object.defineProperties(obj, {
  'property0': {
    value: 'Hello World',
    configurable:true,
    enumerable:true
  },
  'property1': {
    value: true,
  },
  'property2': {
    value: [1,2,3],
    enumerable:true
  }
});

for (i in obj){
  console.log(i); // property0 property2
}

property0 property2两个属性可以被枚举到（我单纯的理解能被for…in到的就是可枚举的）

4、writable

let obj = {};
Object.defineProperties(obj, {
  'property0': {
    value: 'Hello World',
    configurable:true,
    enumerable:true
  },
  'property1': {
    value: true,
  },
  'property2': {
    value: [1,2,3],
    enumerable:true
  },
  'property3': {
    value: "ABCDEFG",
    writable:true
  },
});

Object.assign(obj, {
  property0:"yes", //TypeError: Cannot assign to read only property 'property0' of object
  property3:'lol'
})

console.log(obj); //{property0: 'Hello World', property2: Array(3), property1: true, property3: 'lol'}

property0不能被修改，会报错的。property3可以

5、get和set

let obj = {};
let property4Get = "LOL"
Object.defineProperties(obj, {
  'property0': {
    value: 'Hello World',
    configurable:true,
    enumerable:true
  },
  'property1': {
    value: true,
  },
  'property2': {
    value: [1,2,3],
    enumerable:true
  },
  'property3': {
    value: "ABCDEFG",
    writable:true
  },
  "property4":{
    get(){
      return "这是get方法返的" + property4Get
    },
    set(value){
      property4Get = value
    }
  }
});
console.log(obj.property4); //这是get方法返的LOL
obj.property4 = "LOLOLOL"
console.log(obj.property4); //这是get方法返的LOLOLOL

不能和value同用，property4直接用和直接改就行，见上边代码

4、defineProperty(obj, prop, descriptor)

和defineProperties一样都是去新建或修改对象的属性。但defineProperty是单个的去设置属性：defineProperty(obj, “property0属性名”, {描述符})

5、entries(obj)

官方解释：返回一个给定对象自身可枚举属性的键值对数组

理解：把对象的属性和值分解成一个二维数组，每一项的数组里有两个值，一个key，一个value

let obj = {
  name:'obj',
  age:18,
  eat: function(){},
  '3': "three",
  '1': 'one'
}

console.log(Object.entries(obj));

在这里插入图片描述

PS：它有一个自己的排序规则吧。
然后，如同参数是一个字符串，会把字符串也分解成二维数组
然后分解的结果还可用for of或者forEach或者map进行“键值”遍历

console.log(Object.entries('obj'));
/*
(3) [Array(2), Array(2), Array(2)]
0: (2) ['0', 'o']
1: (2) ['1', 'b']
2: (2) ['2', 'j']
*/

let obj = Object.entries('obj')

for (const [key, value] of obj){
  console.log("for..of:"+key+':'+value);
}

obj.forEach(([key,value]) => {
  console.log("foreach:"+key+':'+value);
});

obj.map(([key,value])=>{
  console.log("map:"+key+':'+value);
})

6、freeze(obj)

官方解释：可以冻结一个对象。一个被冻结的对象再也不能被修改；冻结了一个对象则不能向这个对象添加新的属性，不能删除已有属性，不能修改该对象已有属性的可枚举性、可配置性、可写性，以及不能修改已有属性的值。此外，冻结一个对象后该对象的原型也不能被修改。

理解：这个好理解，这个对象就“冻结了”，不能动

// 未冻结
let obj = {
 name: 'obj',
 age: 18,
 eat : function(){}
};
// Object.freeze(obj)

obj.sex = 'nan'
delete obj.age
Object.defineProperty(obj, 'school', { value: "wudaokou" });
Object.assign(obj,{"ooo":"OOO"})

console.log(obj); //{name: 'obj', sex: 'nan', ooo: 'OOO', school: 'wudaokou', eat: ƒ}

// 冻结
let obj = {
 name: 'obj',
 age: 18,
 eat : function(){}
};
Object.freeze(obj)

obj.sex = 'nan'
delete obj.age
Object.defineProperty(obj, 'school', { value: "wudaokou" });//TypeError: Cannot define property school, object is not extensible
Object.assign(obj,{"ooo":"OOO"})//TypeError: Cannot add property ooo, object is not extensible

console.log(obj); //{name: 'obj', age: 18, eat: ƒ}

7、fromEntries(可迭代的参数)

官方解释：把键值对列表转换为一个对象

理解：就是entries的反过来，支持的参数有数组（二维的），map对象（不知道是个啥，以后再瞅瞅）

const obj1 = Object.fromEntries([ ['0', 'a'], ['1', 'b'], ['2', 'c'] ]);
const obj2= Object.fromEntries(new Map([ ['foo', 'bar'], ['baz', 42] ]))
console.log(obj1);
console.log(obj2);

在这里插入图片描述

8、getOwnPropertyDescriptor(obj,“属性名”)

官方解释：返回指定对象上一个自有属性对应的属性描述符。（自有属性指的是直接赋予该对象的属性，不需要从原型链上进行查找的属性）

理解：获取对象里某个属性的描述符，描述符概念查看上文 3、defineProperties

const obj = {
 name:'obj1',
 age: 18
}
let descriptor = Object.getOwnPropertyDescriptor(obj,"name")
console.log(descriptor);

在这里插入图片描述

9、getOwnPropertyDescriptors(obj)

官方解释：用来获取一个对象的所有自身属性的描述符。

理解：上文的getOwnPropertyDescriptor是获取一个属性的描述符，这里是获取全部

const obj = {
  name: 'obj1',
  age: 18
}
let descriptor = Object.getOwnPropertyDescriptors(obj)
console.log(descriptor);

在这里插入图片描述

10、getOwnPropertyNames(obj)

官方解释：返回一个由指定对象的所有自身属性的属性名（包括不可枚举属性但不包括Symbol值作为名称的属性）组成的数组。

理解：返回对象的属性，是个数组，包括不可枚举的

const obj = {
 name:'obj1',
 age: 18
}
let descriptor = Object.getOwnPropertyNames(obj)
console.log(descriptor); //['name', 'age']

10、getOwnPropertySymbols(obj)

官方解释：返回一个给定对象自身的所有 Symbol 属性的数组。
理解：返回对象里的所有Symbol属性，是个数组。

不了解啥属于Symbol，好像是新的一种数据类型，以后再看看。

11、getPrototypeOf(obj)

官网解释：返回指定对象的原型（内部[[Prototype]]属性的值）

理解：返回对象的"原型"。1、该方法返回的就是–参数对象的原型链(__proto__)；2、通过create创建的对象的原型就是cerate的参数

// 1、方法返回的就是参数的原型链
const obj = {
  name:'obj1',
  age: 18
}
console.log(obj);
console.log(Object.getPrototypeOf(obj));
console.log(Object.getPrototypeOf(obj)===obj.__proto__); //true

在这里插入图片描述

// create创建的对象的原型就是cerate的参数
const obj = {
  name: 'obj1',
  age: 18
}
console.log(obj);
const object1 = Object.create(obj);
console.log(object1);
console.log(Object.getPrototypeOf(object1)===obj);

在这里插入图片描述

12、hasOwn(obj,“属性名”)

官方解释：如果指定的对象具有指定的属性作为其自己的属性，则静态方法返回 true。 如果属性被继承或不存在，则该方法返回 false。

理解：如果参数里的对象有这个属性，则返回true，反之false

const obj = {
  name:'obj1',
  age: 18
}
console.log(Object.hasOwn(obj,'name')); //true
console.log(Object.hasOwn(obj,'name1')); //false

13、is()

官方解释：判断两个值是否为同一个值
理解：同上

Object.is('foo', 'foo');     // true
Object.is(window, window);   // true

Object.is('foo', 'bar');     // false
Object.is([], []);           // false

var foo = { a: 1 };
var bar = { a: 1 };
Object.is(foo, foo);         // true
Object.is(foo, bar);         // false

Object.is(null, null);       // true

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

14、isExtensible(obj)

官方解释：判断一个对象是否是可扩展的（是否可以在它上面添加新的属性）

理解：判断对象可不可以增加新的属性

let obj = {
 name:'obj1',
 age: 18
}
console.log(Object.isExtensible(obj)); //true

let frozen = Object.freeze(obj); //被冻结了就不可扩展了
console.log(Object.isExtensible(frozen));  //false

15、isFrozen(obj)

官方解释：判断一个对象是否被冻结

解释：同上，冻结见上文6、freeze

let obj = {
 name:'obj1',
 age: 18
}
console.log(Object.isFrozen(obj)); //false
Object.freeze(obj); //冻结
console.log(Object.isFrozen(obj));  //true

PS：一个不可扩展的空对象同时也是个冻结对象
即：不可扩展的空对象是冻结对象。但是如果是有值的不可扩展的对象，那它不是冻结对象，因为它虽然不可扩展，但是可以修改原有的值。
另：把不可扩展的对象的属性全delete后，那它就成为了一个冻结东西

16、isSealed(obj)

官方解释：判断一个对象是否被密封

理解：同上，密封：不可扩展（不能新建key）且自身属性值（value）不可修改

let obj = {
  name:'obj1',
  age: 18
}
console.log(Object.isSealed(obj)); //false
console.log(Object.isSealed(Object.preventExtensions({}))); //true
console.log(Object.isSealed(Object.preventExtensions({name:'obj2'}))); //false
console.log(Object.isSealed(Object.freeze({}))); //true
console.log(Object.isSealed(Object.freeze({name: 'obj3'}))); //true

这里就多出了三个名词：扩展、冻结、密封
对应的定义三个状态的方法分别是：preventExtensions()、freeze()、seal()
对应的判断是否为改状态的三个方法是：isExtensible()、isFrozen()、isSealed()

17、keys(obj)

官方解释：返回一个由一个给定对象的自身可枚举属性组成的数组，数组中属性名的排列顺序和正常循环遍历该对象时返回的顺序一致。

理解：返回对象的属性名，是个数组，顺序和正常遍历的一样

console.log(Object.keys(['a', 'b', 'c']));
console.log(Object.keys(['a', 2, ['a','b','c'],{name:'obj'}]));
console.log(Object.keys({ 0: 'a', 1: 'b', 2: 'c' }));
console.log(Object.keys({ 100: 'a', 2: 'b', 7: 'c' }));
console.log(Object.keys({name: 'obj1',age: 18}));

在这里插入图片描述

18、preventExtensions(obj)

官方解释：让一个对象变的不可扩展，也就是永远不能再添加新的属性。

理解：该对象不能新增属性，但是可以修改原有的，或者删除原有的

let obj = {
  name:'obj1',
  age: 18
}
Object.preventExtensions(obj)
obj.a = "a"
obj.name = 'obj2'
delete obj.age
console.log(obj);

在这里插入图片描述

19、seal(obj)

官方解释：封闭一个对象，阻止添加新属性并将所有现有属性标记为不可配置。当前属性的值只要原来是可写的就可以改变。

理解：不能新增属性、不能删除属性，可以修改属性，但是不能修改属性为“访问性”属性（见上文3、defineProperties(obj, props)—get）

let obj = {
  name: 'obj1',
  age: 18
}
Object.seal(obj)
obj.a = 'a',
delete obj.name
obj.age = 20
console.log(obj);
Object.defineProperty(obj, 'age', {
  get: function() { return 'g'; }
}); //Uncaught TypeError: Cannot redefine property: age at Function.defineProperty

在这里插入图片描述

20、setPrototypeOf(obj, prototype)

官方解释：设置一个指定的对象的原型 ( 即, 内部[[Prototype]]属性）到另一个对象或 null。

理解，把第一个对象的原型[[Prototopy]]，变成第二个参数（一个对象或null）的原型
简而言之就是想修改对象的原型

至于有什么用，俺也不知道，也没有实际的应用场景，看看官网例子吧，知道有这么个东西就行。

21、values(obj)

官网解释：返回一个给定对象自身的所有可枚举属性值的数组，值的顺序与使用for…in循环的顺序相同 ( 区别在于 for-in 循环枚举原型链中的属性 )。

理解：返回对象的值，是个数组

let obj = {
  name:'obj1',
  age: 18
}
console.log(Object.values(obj));
console.log(Object.values({ 100: 'a', 2: 'b', 7: 'c' }));
console.log(Object.values("obj"));

在这里插入图片描述

END!

【ES新特性三】Object 原型、原型链相关方法
前端知识分享喵
08-30 1482
此方法为 Object.prototype 原型方法，Object.prototype 作为任意对象在原型链上的顶级原型对象，在 JS 中定义的任意一个对象（自定义对象、数组对象等都可以调用子方法）。**Object.getOwnPropertyNames()**方法返回一个由指定对象的所有自身属性的属性名（包括不可枚举属性但不包括 Symbol 值作为名称的属性）组成的数组。方法会返回一个由一个给定对象的自身可枚举属性组成的数组，数组中属性名的排列顺序和正常循环遍历该对象时返回的顺序一致。
JS对象方法——Object.defineProperty()
01-08
JS对象方法——Object.defineProperty() 我们都知道Vue内部通过Object.defineProperty方法属性拦截的方式，把data对象里每个数据的读写转化成getter/setter，当数据变化时通知视图更新实现双向数据绑定。可我们真的了解Object.defineProperty()吗。 Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性， 并返回这个对象。它的具体用法值得我们深究。 语法 Object.defineProperty(obj, prop, descriptor) 参数 描述
js Object方法大全
顺其自然~专栏
05-28 1484
Object 静态方法总结 create 创建一个对象 const obj = Object.create({a:1}, {b: {value: 2}}) 第一个参数为对象，对象为函数调用之后返回新对象的原型对象，第二个参数为对象本身的实例方法（默认不能修改,不能枚举） obj.__proto__.a === 1 // true obj.b = 3; console.log(obj.b) // 2 //创建一个可写的,可枚举的,可配置的属性p obj2 = Object.c
深入解析 JavaScript 中的 [[Prototype]] 和相关属性
最新发布
weixin_63490470的博客
08-14 422
的工作原理对于深入掌握 JavaScript 对象模型至关重要，它能帮助我们更好地理解对象继承、属性查找、原型链等关键概念，从而编写出更优雅、高效的 JavaScript 代码。原型链是 JavaScript 中属性查找机制的核心，当我们访问一个对象的属性或方法时，JavaScript 引擎会沿着原型链向上查找，直到找到该属性或方法，或者到达原型链的顶端。是 JavaScript 中一个隐藏的属性，它指向对象的原型对象，是 JavaScript 对象模型的核心概念，它决定了对象继承和属性查找机制。
Js中Object方法
qq_45378746的博客
04-21 3812
1.Object.assign() Object.assign()是通过复制一个或多个对象，创建一个新对象。 var source1 = { a: 1 }; var source2 = { b: 2 }; Object.assign(source1,source2); // {a: 1, b: 2} 注： 1.如果目标对象和源对象有同名属性，或多个源对象有同名属性，后面的属性会覆盖前面的属性。 2.如果只有一个参数，Object.assign会直接返回该参数。 var source1 = { a:
JavaScript Object方法
weixin_43294560的博客
02-22 959
配置对象。
JavaScript中对象（Object）的方法
前端、python爱好者
10-18 4490
JavaScript中对象方法总结： 资料来源：网道-互联网开发文档 【https://wangdoc.com/】 1、Object.getPrototypeOf(Object) Object.getPrototypeOf方法返回参数对象的原型。这是获取原型对象的标准方法。 代码示例： var F = function () {}; var f = new F(); Object.getPrototypeOf(f) === F.prototype // true 几种特殊对象的方
javascript之Object.assign实现浅拷贝的原理以及实现
saucxs
04-19 1454
一、前言 之前在前面一篇学习了赋值，浅拷贝和深拷贝。介绍了这三者的相关知识和区别。 传送门：https://www.mwcxs.top/page/592.html 本文会介绍浅拷贝Object.assign()的实现原理，然后咱们试着实现一个浅拷贝。 二、浅拷贝Object.assign() 什么是浅拷贝？浅拷贝就是创建一个新对象，这个对象有着原始对象属性值的一份精确拷贝。 浅拷...
javascript基于prototype实现类似OOP继承的方法
11-23
在JavaScript中，面向对象编程（OOP）的概念与传统意义上的类继承有所...因此，在实际开发中，可能还需要考虑其他继承模式，如ES6的类（Class）语法，或者使用`Object.create()`、`Object.assign()`等方法来实现继承。
js代码-增加方法不用prototype
07-15
在JavaScript中，我们通常使用`prototype`属性来扩展对象的功能，为对象添加新的方法。然而，还有其他方式可以在不直接操作`prototype`的情况下为对象添加方法。这些方法在某些场景下可能更为适用或有其独特的优势。...
详解Javascript中的Object对象
10-22
//false在JavaScript中，Object对象扮演着核心角色，因为所有其他类型的值（除原始类型外）都是对象，而这些对象都直接或间接继承自Object。接下来，我们将深入探讨Object对象的更多属性和方法。 1. `__proto__` 和...
JS中Object方法大全
Jet_Lover的博客
04-15 1502
Object.isExtensible(obj)：判断一个对象是否可扩展（是否可以添加新属性）。Object.seal(obj)：防止一个对象被封闭（不能再添加、删除属性，但可以修改属性值）。Object.isSealed(obj)：判断一个对象是否被封闭（不能再添加、删除属性）。Object.entries(obj)：返回一个对象所有可枚举的属性的。Object.values(obj)：返回一个对象所有可枚举的属性的。Object.keys(obj) :返回一个对象所有可枚举的属性的。
JS Object方法总结
久遇不厌的博客
05-12 297
create 创建一个对象 const obj = Object.create({a:1},{b:{value:2}}) //第一个参数为对象，对象为函数调用之后反回新对象的原型对象，第二个参数是对象本身的实例方法（默认不能修改，不能枚举） console.log(obj)//{b:2} console.log(obj.__proto__)//{a:1} const obj2=Object.create({},{ p:{ value:2,//属性值 writabl.
关于JavaScript的Object所有方法
qq_45142260的博客
07-27 3933
关于Javascript的Object的所有方法，最全，最全，最全
js object方法汇总（全面）
hulover的博客
02-23 1011
Object 对象方法的总结
JS的Object的方法
qq_43235503的博客
04-23 171
JS的Object的方法
js Object常用方法
zxl1990_ok的博客
04-03 663
这一篇简单介绍es6 Object的新属性方法. is 说明： 用于判断两个值是否是相同的值。 语法： Object.is(value1, value2); 参数： value1，value2分别表示第一个，第二个需要比较的值 返回值： Boolean 表示两个参数是否相同。 ...
js之Object的方法理解
往前跑
03-12 3812
我们都知道在js里面一切都是对象，window也是个对象，对象里拥有很多属性和方法，可以了解一下对象。 在控制台打印一下Object对象，console.dir(Object)，我们可以看到Object拥有的属性，方法还有原型，其中有一个方法叫getOwnPropertyNames，我们可以利用这个方法去得到Object本身的属性和方法。 现在在控制里输入Object.getOwnProperty...
js中Object的常用方法
weixin_44158539的博客
10-21 790
内容后期补上
javascript中object包括哪些
07-14
JavaScript中的Object对象是一种基本的数据类型，它是其他所有对象的基础。以下是JavaScript中Object对象的一些常见属性和方法： 属性： - constructor：返回创建该对象实例的函数。 - prototype：允许您向对象添加属性和方法。 方法： - Object.assign()：将一个或多个源对象的属性复制到目标对象。 - Object.create()：创建一个新对象，使用现有对象作为原型。 - Object.entries()：返回一个给定对象自身可枚举属性的键值对数组。 - Object.keys()：返回一个给定对象自身可枚举属性的键名数组。 - Object.values()：返回一个给定对象自身可枚举属性的键值数组。 - Object.freeze()：冻结一个对象，使其不可修改。 - Object.getOwnPropertyDescriptor()：返回指定对象上一个自有属性对应的属性描述符。 - Object.getPrototypeOf()：返回指定对象的原型（内部[[Prototype]]属性的值）。 - Object.hasOwnProperty()：判断一个对象是否具有指定名称的自身属性。 - Object.isFrozen()：判断一个对象是否被冻结。 - Object.isPrototypeOf()：判断一个对象是否在另一个对象的原型链上。 - Object.setPrototypeOf()：设置一个对象的原型（即将一个对象设置为另一个对象的原型）。 - Object.toString()：返回表示该对象的字符串。 - Object.valueOf()：返回指定对象的原始值。 这只是Object对象的一部分属性和方法，还有其他更多的属性和方法可以在JavaScript中使用。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值