JavaScript中对象(Object)方法详解

devtools/2024/10/18 13:27:50/

JavaScript中对象(Object)方法详解

  • 1、JavaScript中对象方法总结:
    • 1、Object.getPrototypeOf(Object)
    • 2、Object.setPrototypeOf(nowObject,originalObject)
    • 3、Object.create(Object)
  • 2、实例对象的方法:
    • 1、Object.prototype.isPrototypeOf()
    • 2、Object.getOwnPropertyNames()
    • 3、Object.prototype.hasOwnProperty()
    • 4、in 运算符和 for…in 循环
  • 3、ES6新增:
    • 1、 Object.is()
    • 2、Object.assign()
    • 3、Object.getOwnPropertyDescriptors()
    • 4、Object.setPrototypeOf()
    • 5、Object.getPrototypeOf()
    • 6、Object.keys(),Object.values(),Object.entries()
      • 6.1 Object.keys()
      • 6.2 Object.values()
      • 6.3 Object.entries()
    • 7、Object.fromEntries()

1、JavaScript中对象方法总结:

1、Object.getPrototypeOf(Object)

`Object.getPrototypeOf` 方法返回参数对象的原型。这是获取原型对象的标准方法。

代码示例:

javascript">var Fn = function () {};
var f = new Fn();
Object.getPrototypeOf(f) === Fn.prototype // true// 几种特殊对象的方法:
// 空对象的原型是 Object.prototype
Object.getPrototypeOf({}) === Object.prototype // true// Object.prototype 的原型是 null
Object.getPrototypeOf(Object.prototype) === null // true// 函数的原型是 Function.prototype
function fun() {}
Object.getPrototypeOf(fun) === Function.prototype // true

2、Object.setPrototypeOf(nowObject,originalObject)

Object.setPrototypeOf 方法为参数对象设置原型,返回该参数对象。它接受两个参数,第一个是现有对象,第二个是原型对象。方法和new出来的对象类似。

代码示例:

javascript">var a = {};
var b = {x: 1};
Object.setPrototypeOf(a, b);Object.getPrototypeOf(a) === b // true
a.x // 1

3、Object.create(Object)

Object.create()方法接受一个对象为参数,然后以它为原型,返回一个实例对象。该实例完全继承原型对象的属性、方法。

代码示例:

javascript">// 原型对象
var A = {print: function () {console.log('hello');}};// 实例对象var B = Object.create(A); //通过对象上的create方法,B继承拥有了A的属性以及方法Object.getPrototypeOf(B) === A // trueB.print() // helloB.print === A.print // true

注意:
1、create方法必须提供对象原型,参数为空或者参数不是对象,代码会报错
2、create()方法生成的新对象,动态继承了原型。在原型上添加或修改任何方法,会立刻反映在新 对象之上。相当于浅拷贝

2、实例对象的方法:

1、Object.prototype.isPrototypeOf()

实例对象的isPrototypeOf方法,用来判断该对象是否为参数对象的原型。

示例代码:

javascript">console.log(Object.prototype.isPrototypeOf({})) // true
console.log(Object.prototype.isPrototypeOf([])) // true
console.log(Object.prototype.isPrototypeOf(/xyz/)) // true
console.log(Object.prototype.isPrototypeOf(Object.create(null))) // false

上面代码中,由于Object.prototype处于原型链的最顶端,所以对各种实例都返回true,只有直接继承自null的对象除外。

2、Object.getOwnPropertyNames()

Object.getOwnPropertyNames方法返回一个数组,成员是参数对象本身的所有属性的键名,不包含继承的属性键名。

示例代码:

javascript">console.log(Object.getOwnPropertyNames(Date))
// [ 'length', 'name', 'prototype', 'now', 'parse', 'UTC' ]

3、Object.prototype.hasOwnProperty()

对象实例的hasOwnProperty方法返回一个布尔值,用于判断某个属性定义在对象自身,还是定义在原型链上。

示例代码:

javascript">Date.hasOwnProperty('length') // true
Date.hasOwnProperty('toString') // false

4、in 运算符和 for…in 循环

in运算符返回一个布尔值,表示一个对象是否具有某个属性。它不区分该属性是对象自身的属性,还是继承的属性。
示例代码:

javascript">'length' in Date // true
'toString' in Date // true
//in运算符常用于检查一个属性是否存在。//获得对象的所有可遍历属性(不管是自身的还是继承的),可以使用for...in循环。var o1 = { p1: 123 };var o2 = Object.create(o1, {p2: { value: "abc", enumerable: true }
});for (p in o2) {console.info(p); //p1 p2
}  

3、ES6新增:

1、 Object.is()

Object.is用来比较两个值是否严格相等,与严格比较运算符(===)的行为基本一致。

javascript">let a = {major:'英语', class:'五年一班'};
let aClone = { ...a };//使用扩展运算符将对象a的数据复制到aClone1中
console.log(aClone === a); //false
console.log(Object.is(aClone,a)) //false,使用对象上的is进行判断是否相同

2、Object.assign()

Object.assign()方法用于对象的合并,将源对象(source)的所有可枚举属性,复制到目标对象(target)。
Object.assign()方法的第一个参数是目标对象,后面的参数都是源对象。

javascript">const target = { a: 1 };
const source1 = { b: 2 };
const source2 = { c: 3,d:4 };
Object.assign(target, source1, source2);
console.log(target);// { a: 1, b: 2, c: 3, d: 4 }
const source = { a: { b: 'hello' } }
let obj = Object.assign(target, source)
console.log(obj) //  { a: { b: 'hello' }} key相同时,后出现的value将会覆盖前边的value值

注意:
1、如果目标对象与源对象有同名属性,或多个源对象有同名属性,则后面的属性会覆盖前面的属性。
2、Object.assign()方法实行的是浅拷贝,而不是深拷贝。也就是说,如果源对象某个属性的值是对象,那么目标对象拷贝得到的是这个对象的引用。

3、Object.getOwnPropertyDescriptors()

ES2017 引入了Object.getOwnPropertyDescriptors()方法,返回指定对象所有自身属性(非继承属性)的描述对象

javascript">const obj = {id:123,get bar(){return 'abc'}
};
let obj1 = Object.getOwnPropertyDescriptors(obj)
console.log(obj1)

输出结果:

javascript">{id: { value: 123, writable: true, enumerable: true, configurable: true },bar: {get: [Function: get bar],set: undefined,enumerable: true,configurable: true}
}

4、Object.setPrototypeOf()

Object.setPrototypeOf方法的作用与__proto__相同,用来设置一个对象的原型对象(prototype) 返回参数对象本身。它是 ES6 正式推荐的设置原型对象的方法。
语法格式:

javascript">Object.setPrototypeOf(object, prototype)

语法示例:

javascript">const o = Object.setPrototypeOf({}, null);

举例:

javascript">let proto = {};
let obj = {x:10};
Object.setPrototypeOf(obj,proto)
proto.y = 20;
proto.z = 30;
console.log(obj.x) //10
console.log(obj.y) //20
console.log(obj.z) //30
console.log(proto) //{ y: 20, z: 30 }

5、Object.getPrototypeOf()

Object.getPrototypeOf,该方法与Object.setPrototypeOf配套,用于查询读取一个对象的原型对象

语法格式:
Object.getPrototypeOf(obj);

javascript">function Rectangle() {// ...
}const rec = new Rectangle();console.log(Object.getPrototypeOf(rec) === Rectangle.prototype);
//输出true 表明rec对象的原型对象和Rectangle的原型对象是一致的
Object.setPrototypeOf(rec, Object.prototype); //将rec的原型对象设置到Object的原型对象上面
console.log(Object.getPrototypeOf(rec) === Rectangle.prototype)
//输出false,表明rec的原型对象重新设置后与Rectangle的原型对象不一样了

6、Object.keys(),Object.values(),Object.entries()

这三个方法都是将对象中的键或者值转换成数组可供遍历。ES2017 引入了跟Object.keys配套的Object.values和Object.entries,作为遍历一个对象的补充手段,供for…of循环使用。

6.1 Object.keys()

ES5 引入了Object.keys方法,返回一个数组,成员是参数对象自身的(不含继承的)所有可遍历(enumerable)属性的键名。

javascript">var obj = { foo: 'bar', baz: 42 };
Object.keys(obj)
// ["foo", "baz"]

6.2 Object.values()

Object.values方法返回一个数组,成员是参数对象自身的(不含继承的)所有可遍历(enumerable)属性的键值。

javascript">const obj = { foo: 'bar', baz: 42 };
Object.values(obj)
// ["bar", 42]

6.3 Object.entries()

Object.entries()方法返回一个数组,成员是参数对象自身的(不含继承的)所有可遍历(enumerable)属性的键值对数组(二维数组)。

javascript">const obj = { foo: 'bar', baz: 42 };
Object.entries(obj)
// [ ["foo", "bar"], ["baz", 42] ]

7、Object.fromEntries()

Object.fromEntries()Object.entries()配套,是将特定的数组对象转换成对象格式

javascript">const arr = [ [ 'foo', 'bar' ], [ 'baz', 42 ] ]/*数组对象中的数组只能有两个值,是类似键值对格式的数组,如果有多的将会被忽略不纳入转换
的对象数据中,以前两个数据为准进行数据格式的转换*/
const arr1 = [ [ 'foo', 'bar','obj' ], [ 'baz', 42,'name','jerry' ] ] 
console.log(Object.fromEntries(arr)) //{ foo: 'bar', baz: 42 }
console.log(Object.fromEntries(arr1))//{ foo: 'bar', baz: 42 } 两个数组得到的是一样的

http://www.ppmy.cn/devtools/41219.html

相关文章

PHP单独项目启动演示

文章目录 phpstudy得到文件打开phpStudy.exe运行项目 Apache运行后又自动停止 phpstudy 得到文件 一般我们会得到这么一个项目文件,如果外层有“中文路径”,请剪切此内容作为项目根目录即可 打开phpStudy.exe 因为我又正常的编程环境和mysql&#x…

前端面试题大合集4----框架篇(React)

一、React 合成事件 Dom事件流分三个阶段&#xff1a;事件捕获阶段&#xff0c;目标阶段&#xff0c;事件冒泡阶段 React在事件绑定时有一套自身的机制&#xff0c;就是合成事件。如下比较直观&#xff1a; react中事件绑定&#xff1a; <div className"dome" …

在微信小程序项目中安装和使用 Vant 组件库

vant Wwapp 小程序开发组件库官网 Vant Weapp - 轻量、可靠的小程序 UI 组件库 安装 Vant 组件库 1.在微信小程序项目文件目录的空白位置右键&#xff0c;选择在外部终端窗口中打开 2在命令行输入如下命令&#xff08;在项目中创建包管理配置文件 package.json&#xff09; …

OKHTTP 3.12.0 以后版本 headers 中不可携带中文

今天遇到的报错&#xff1a; java.lang.llegalArgumentException: Unexpected char 0x957f at 0 in x-brand value: 电视堆栈 okhttp3.Headers.checkValue(Headers.java:272) okhttp3.Headers$Builder.add(Headers.java:312) okhttp3.Request$Builder.addHeader(Request.iava:…

MFC桌面应用中窗口的客户区与非客户区的

在MFC&#xff08;Microsoft Foundation Class&#xff09;中&#xff0c;窗口被分为客户区和非客户区。理解这两个概念对于设计和开发Windows应用程序至关重要。 客户区&#xff08;Client Area&#xff09;&#xff1a; 客户区是窗口中用于显示应用程序内容的区域。它是窗口…

接口自动化-requests库

requests库是用来发送请求的库&#xff0c;本篇用来讲解requests库的基本使用。 1.安装requests库 pip install requests 2.requests库底层方法的调用逻辑 &#xff08;1&#xff09;get / post / put / delete 四种方法底层调用 request方法 注意&#xff1a;data和json都…

安全 | 开源入侵防御系统 Snort

目录 Snort 概要 入侵预防系统模式 数据包记录器和嗅探器模式 网络安全学习路线 &#xff08;2024最新整理&#xff09; 学习资料的推荐 1.视频教程 2.SRC技术文档&PDF书籍 3.大厂面试题 特别声明&#xff1a; Snort 概要 Snort 概要 是世界上最重要的开源入…

Go 处理错误异常——之一

如果你习惯了 try catch 这样的语法后&#xff0c;会觉得处理错误真简单&#xff0c;然后你再来接触 Go 的错误异常&#xff0c;你会发现他好复杂啊&#xff0c;怎么到处都是 error&#xff0c;到处都需要处理 error。 首先咱们需要知道 Go 语言里面有个约定&#xff0c;就是一…