十一、对象的新增方法

对象的新增方法

    • 1. Object.is()
      • (1)Object.is() 与 === 行为基本一致
      • (2)两个不同之处: +0 不等于 -0,NaN 等于自身。
    • 2. Object.assign() 用于【对象的合并】
      • (1)Object.assign(target, source)
      • (2) Object.assign() 无法将 undefined 和 null 转成对象:报错或跳过
      • (3) Object.assign() 只拷贝源对象的自身属性(不拷贝继承属性)
      • 2.1 Object.assign() 的注意点
      • (1)【浅拷贝】
      • (2)【同名属性】的替换
      • (3)【数组】的处理 Object.assign([1, 2, 3], [4, 5])
      • (4)【取值函数】的处理
      • 2.2 常见用途
      • (1)为对象添加属性
      • (2)为对象添加方法
      • (3)克隆对象:克隆原始对象的值,克隆继承的值
      • (4)合并多个对象
      • (5)为属性指定默认值
    • 3.Object.getOwnPropertyDescriptors()
      • (1)返回指定对象所有自身属性(非继承属性)的描述对象
      • (2)配合Object.defineProperties()方法,实现正确拷贝
    • 4. __proto__属性, Object.setPrototypeOf(),Object.getPrototypeOf()

1. Object.is()

ES5 比较两个值是否相等,只有两个运算符:相等运算符(==)和严格相等运算符(===)。它们都有缺点,前者会自动转换数据类型,后者的 NaN 不等于自身,及 +0 等于 -0

JavaScript 缺乏一种运算,在所有环境中,只要两个值是一样的,它们就应该相等。
————

(1)Object.is() 与 === 行为基本一致

ES6 提出 “Same-value equality”(同值相等)算法,用来解决这个问题。
Object.is 就是部署这个算法的新方法。它用来比较两个值是否严格相等,与严格比较运算符(===)的行为基本一致。

Object.is('foo', 'foo')
// true
Object.is({}, {})
// false

(2)两个不同之处: +0 不等于 -0,NaN 等于自身。

不同之处只有两个:一是 +0 不等于 -0,二是 NaN 等于自身。

+0 === -0 //true
NaN === NaN // falseObject.is(+0, -0) // false
Object.is(NaN, NaN) // true

ES5 可以通过下面的代码,部署 Object.is

Object.defineProperty(Object, 'is', {value: function(x, y) {if (x === y) {// 针对+0 不等于 -0的情况return x !== 0 || 1 / x === 1 / y;}// 针对NaN的情况return x !== x && y !== y;},configurable: true,enumerable: false,writable: true
});

2. Object.assign() 用于【对象的合并】

(1)Object.assign(target, source)

Object.assign() 方法用于对象的合并,将源对象(source)的所有可枚举属性,复制到目标对象(target)。

const target = { a: 1 };const source1 = { b: 2 };
const source2 = { c: 3 };Object.assign(target, source1, source2);
target // {a:1, b:2, c:3}

Object.assign() 方法的第一个参数是目标对象,后面的参数都是源对象。

注意,如果目标对象与源对象有同名属性,或多个源对象有同名属性,则后面的属性会覆盖前面的属性。

const target = { a: 1, b: 1 };const source1 = { b: 2, c: 2 };
const source2 = { c: 3 };Object.assign(target, source1, source2);
target // {a:1, b:2, c:3}

————
如果只有一个参数,Object.assign() 会直接返回该参数。

const obj = {a: 1};
Object.assign(obj) === obj // true

如果该参数不是对象,则会先转成对象,然后返回。

typeof Object.assign(2)  // "object"

————

(2) Object.assign() 无法将 undefined 和 null 转成对象:报错或跳过

由于 undefinednull 无法转成对象,所以如果它们作为参数,就会报错。

Object.assign(undefined) // 报错
Object.assign(null) // 报错

如果非对象参数出现在源对象的位置(即非首参数),那么处理规则有所不同。首先,这些参数都会转成对象,如果无法转成对象,就会跳过。这意味着,如果 undefinednull 不在首参数,就不会报错。

let obj = {a: 1};
Object.assign(obj, undefined) === obj // true
Object.assign(obj, null) === obj // true
// 源对象的位置,如果不能转成对象,就会跳过

其他类型的值(即数值、字符串和布尔值)不在首参数,也不会报错。但是,除了字符串会 以数组形式,拷贝入目标对象,其他值都不会产生效果。

const v1 = 'abc';
const v2 = true;
const v3 = 10;const obj = Object.assign({}, v1, v2, v3);
console.log(obj); // { "0": "a", "1": "b", "2": "c" }

v1v2v3 分别是字符串、布尔值和数值,结果只有字符串合入目标对象(以字符数组的形式),数值和布尔值都会被忽略。这是因为只有字符串的包装对象,会产生可枚举属性。

Object(true) // {[[PrimitiveValue]]: true}
Object(10)  //  {[[PrimitiveValue]]: 10}
Object('abc') // {0: "a", 1: "b", 2: "c", length: 3, [[PrimitiveValue]]: "abc"}


————

(3) Object.assign() 只拷贝源对象的自身属性(不拷贝继承属性)

Object.assign() 拷贝的属性是有限制的,只拷贝源对象的自身属性(不拷贝继承属性),也不拷贝不可枚举的属性(enumerable: false)。

Object.assign({b: 'c'},Object.defineProperty({}, 'invisible', {enumerable: false,value: 'hello'})
)
// { b: 'c' }

上面代码中,Object.assign()要拷贝的对象只有一个不可枚举属性invisible,这个属性并没有被拷贝进去。

属性名为 Symbol 值的属性,也会被 Object.assign() 拷贝。

Object.assign({ a: 'b' }, { [Symbol('c')]: 'd' })
// { a: 'b', Symbol(c): 'd' }

2.1 Object.assign() 的注意点

(1)【浅拷贝】

Object.assign() 方法实行的是浅拷贝,而不是深拷贝。也就是说,如果源对象某个属性的值是对象,那么目标对象拷贝得到的是这个对象的引用

const obj1 = {a: {b: 1}};
const obj2 = Object.assign({}, obj1);obj1.a.b = 2;
obj2.a.b // 2

Object.assign() 拷贝得到的是这个对象的引用。这个对象的任何变化,都会反映到目标对象上面。

(2)【同名属性】的替换

对于这种嵌套的对象,一旦遇到同名属性,Object.assign() 的处理方法是替换,而不是添加。

const target = { a: { b: 'c', d: 'e' } }
const source = { a: { b: 'hello' } }
Object.assign(target, source)  // a 属性的值被整个替换掉
// { a: { b: 'hello' } }  

上面代码中,target 对象的 a 属性被 source 对象的 a 属性整个替换掉了,而不会得到 { a: { b: 'hello', d: 'e' } } 的结果。这通常不是开发者想要的,需要特别小心。

一些函数库提供 Object.assign() 的定制版本(比如 Lodash 的_.defaultsDeep() 方法),可以得到==深拷贝的合并==。

(3)【数组】的处理 Object.assign([1, 2, 3], [4, 5])

Object.assign() 可以用来处理数组,但是 会把数组视为对象

Object.assign([1, 2, 3], [4, 5])
// [4, 5, 3]

上面代码中,Object.assign() 把数组视为属性名为 0、1、2 的对象。

(4)【取值函数】的处理

Object.assign() 只能进行值的复制,如果要复制的值是一个取值函数,那么将求值后再复制。

const source = {get foo() { return 1 }
};
const target = {};Object.assign(target, source)
// { foo: 1 } 

上面代码中,source 对象的 foo 属性是一个取值函数,Object.assign() 不会复制这个取值函数,只会拿到值以后,将这个值复制过去。


2.2 常见用途

(1)为对象添加属性

class Point {constructor(x, y) {Object.assign(this, {x, y});}
}

上面方法通过Object.assign()方法,将x属性和y属性添加到Point类的对象实例。

(2)为对象添加方法

Object.assign(SomeClass.prototype, {someMethod(arg1, arg2) {···},anotherMethod() {···}// 之所以这么写,就是因为方便
});// 等同于下面的写法
SomeClass.prototype.someMethod = function (arg1, arg2) {···
};
SomeClass.prototype.anotherMethod = function () {···
};

上面代码使用了对象属性的简洁表示法,直接将两个函数放在大括号中,再使用assign() 方法添加到 SomeClass.prototype 之中。

(3)克隆对象:克隆原始对象的值,克隆继承的值

function clone(origin) {return Object.assign({}, origin);
}

采用这种方法克隆,只能克隆原始对象自身的值不能克隆它继承的值。如果想要保持继承链,可以采用下面的代码。

function clone(origin) {let originProto = Object.getPrototypeOf(origin);return Object.assign(Object.create(originProto), origin);
}

(4)合并多个对象

将多个对象合并到某个对象。

const merge =(target, ...sources) => Object.assign(target, ...sources);

如果希望合并后返回一个新对象,可以改写上面函数,对一个空对象合并。

const merge =(...sources) => Object.assign({}, ...sources);

(5)为属性指定默认值

const DEFAULTS = {logLevel: 0,outputFormat: 'html'
};function processContent(options) {// DEFAULT只是一个属性名,代替对象的内容,{} 用于包装数据,拷贝的是{}里面的数据options = Object.assign({}, DEFAULTS, options);  // 合并多个对象console.log(options);// ...
}

上面代码中,DEFAULTS 对象是默认值,options 对象是用户提供的参数。Object.assign() 方法将 DEFAULTSoptions 合并成一个新对象,如果两者有同名属性,则 options 的属性值会覆盖 DEFAULTS 的属性值。

注意,由于存在浅拷贝的问题,DEFAULTS 对象和 options 对象的所有属性的值,最好都是简单类型,不要指向另一个对象。否则,DEFAULTS 对象的该属性很可能不起作用。

const DEFAULTS = {url: {host: 'example.com',port: 7070},
};// 浅拷贝的问题
processContent({ url: {port: 8000} })  // 调用上面定义的函数
// {
//   url: {port: 8000}
// }

上面代码的原意是将 url.port 改成 8000,url.host 不变。实际结果却是options.url 覆盖掉 DEFAULTS.url,所以 url.host 就不存在了。


3.Object.getOwnPropertyDescriptors()

(1)返回指定对象所有自身属性(非继承属性)的描述对象

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

const obj = {foo: 123,get bar() { return 'abc' }
};Object.getOwnPropertyDescriptors(obj)
// { foo:
//    { value: 123,
//      writable: true,
//      enumerable: true,
//      configurable: true },
//   bar:
//    { get: [Function: get bar],
//      set: undefined,
//      enumerable: true,
//      configurable: true } }

上面代码中,Object.getOwnPropertyDescriptors() 方法返回一个对象,所有原对象的属性名都是该对象的属性名,对应的属性值就是该属性的描述对象。

该方法的实现非常容易。

// 方法实现源码
function getOwnPropertyDescriptors(obj) {const result = {};for (let key of Reflect.ownKeys(obj)) {result[key] = Object.getOwnPropertyDescriptor(obj, key);}return result;
}

————
该方法的引入目的,主要是为了解决 Object.assign() 无法正确拷贝 get 属性和 set 属性的问题。

const source = {set foo(value) {console.log(value);}
};const target1 = {};
Object.assign(target1, source);Object.getOwnPropertyDescriptor(target1, 'foo')
// { value: undefined,
//   writable: true,
//   enumerable: true,
//   configurable: true }

上面代码中,source 对象的 foo 属性的值是一个赋值函数,Object.assign 方法将这个属性拷贝给 target1 对象,结果该属性的值变成了 undefined。这是因为 Object.assign 方法总是拷贝一个属性的值,而不会拷贝它背后的赋值方法或取值方法。
————

(2)配合Object.defineProperties()方法,实现正确拷贝

这时,Object.getOwnPropertyDescriptors() 方法配合Object.defineProperties() 方法,就可以实现正确拷贝。

const source = {set foo(value) {console.log(value);}
};const target2 = {};
Object.defineProperties(target2, Object.getOwnPropertyDescriptors(source));
Object.getOwnPropertyDescriptor(target2, 'foo')
// { get: undefined,
//   set: [Function: set foo],
//   enumerable: true,
//   configurable: true }

上面代码中,两个对象合并的逻辑可以写成一个函数。

const shallowMerge = (target, source) => Object.defineProperties(target,Object.getOwnPropertyDescriptors(source)
);

————
Object.getOwnPropertyDescriptors() 方法的另一个用处,是配合Object.create() 方法,将对象属性克隆到一个新对象。这属于浅拷贝。


4. __proto__属性, Object.setPrototypeOf(),Object.getPrototypeOf()

JavaScript 语言的对象继承是通过原型链实现的。ES6 提供了更多原型对象的操作方法。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/102601.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

salesforce的按钮执行js代码如何链接到apex代码

在Salesforce中,你可以通过自定义JavaScript按钮或链接来触发Apex代码的执行。这可以通过使用JavaScript Remoting或Visualforce页面来实现。以下是一些步骤来将JavaScript按钮与Apex代码链接起来: 使用JavaScript Remoting链接JavaScript按钮到Apex代码…

WPF向Avalonia迁移(三、项目结构)

前提: Avalonia版本11.0.0 1.配置文件 1.1 添加配置文件 1.2 读取配置文件 添加System.Configuration.ConfigurationManager using Avalonia.Controls; using System.Configuration;namespace AvaloniaApplication7.Views {public partial class MainWindow : W…

git服务器宕机后,怎么用本地仓库重新建立gitlab服务器(包括所有历史版本)

一、重新建立 当您的 GitLab 服务器因为某种原因宕机后,您可以使用本地仓库中的备份数据来恢复 GitLab 服务器。以下是一般的步骤,用于重新建立 GitLab 服务器: 注意: 这些步骤假定您已经定期备份了 GitLab 数据,包括…

如何使用Net2FTP搭建免费web文件管理器打造个人网盘

文章目录 1.前言2. Net2FTP网站搭建2.1. Net2FTP下载和安装2.2. Net2FTP网页测试 3. cpolar内网穿透3.1.Cpolar云端设置3.2.Cpolar本地设置 4.公网访问测试5.结语 1.前言 文件传输可以说是互联网最主要的应用之一,特别是智能设备的大面积使用,无论是个人…

常用的Linux命令及其用法

常用的Linux命令及其用法 1. ls:列出文件和目录 ls命令用于列出当前目录中的文件和子目录。通过不同的选项,可以显示详细信息、隐藏文件等。 示例: ls -l ls -a2. cd:切换工作目录 cd命令用于切换当前工作目录。通过指定目标…

H3C交换机的40G堆叠线 ,可以插在普通光口做堆叠吗?

环境: S6520X-24ST-SI交换机 H3C LSWM1QSTK2万兆40G堆叠线QSFP 问题描述: H3C交换机的40G堆叠线 ,可以插在普通光口做堆叠吗? 解答: 1.H3C交换机的40G堆叠线通常是用于连接堆叠模块或堆叠端口的。这些堆叠线通常使…

【逆向】导出表:1.编写程序打印所有的导出表信息 2.编写GetFunctionAddrByName 3.编写GetFunctionAddrByOrdinal

这是从数据目录中获取每个表的地址 void PE::Analyze_Data_Directory(Data& my_data) {my_data.my_Data_Directory nullptr;my_data.my_Data_Directory (PIMAGE_DATA_DIRECTORY*)malloc(16 * sizeof(PIMAGE_DATA_DIRECTORY));void* Temp_ptr my_data.my_optional->D…

【技术干货】如何快速创建商用照明 OEM APP?

本文介绍了如何在涂鸦 IoT 平台的 App 工作台上创建一款体验版商照 App、正式版 OEM App、上架 App、以及完成通用配置。 OEM App 开发 创建 App 登录 涂鸦 IoT 平台的 App 页面。 单击 创建APP,选择 商照 APP 进行创建。 在提示框里,完善 App 信息…

通过Node.js获取高德的省市区数据并插入数据库

通过Node.js获取高德的省市区数据并插入数据库 1 创建秘钥1.1 登录高德地图开放平台1.2 创建应用1.3 绑定服务创建秘钥 2 获取数据并插入2.1 创建数据库连接工具2.2 请求数据2.3 数据处理2.4 全部代码 3 还可以打印文件到本地 1 创建秘钥 1.1 登录高德地图开放平台 打开开放平…

Java基础面试-面向对象

什么是面向对象? 对比面向过程,是两种不同的处理问题角度 面向过程更注重事情的每一个步骤及顺序,面向对象更注重事情有哪些参与者(对象),及各自需要做什么 比如洗衣机洗衣服 面向过程会将任务拆解成一系…

11面向对象编程例子 月饼可以访问模子 模子不能访问月饼

类就好比是一个模子,然后各种对象就是月饼,印的月饼太多了,于是找不到月饼了,但是月饼只有一个模子,所以可以向上找到自己的模子 先上代码: class Person:age 0def shilifangfa(self):print(self)print(…

多列等高实现

预期效果 多列等高,左右两列高度自适应且一样,分别设置不同背景色效果预览: 分别由6种方法实现 1、使用padding + margin + overflow 实现多列等高效果,具有良好的兼容性; 2、border实现多列等高,左边框宽度为200px,左列浮动,伪元素清除浮动; 3、父元素线性渐变背景色…

基于web的酒店客房管理系统

目录 前言 一、技术栈 二、系统功能介绍 用户信息管理 会员信息管理 客房信息管理 收藏客房管理 用户入住管理 客房清扫管理 三、核心代码 1、登录模块 2、文件上传模块 3、代码封装 前言 随着信息技术在管理上越来越深入而广泛的应用,管理信息系统的实施…

【数据结构】算法效率的度量方法

🦄个人主页:修修修也 🎏所属专栏:数据结构 ⚙️操作环境:Visual Studio 2022 目录 🎏事后统计方法 🎏事前分析估算方法 🎏函数的渐进式增长 结语 在上篇文章中我们提到了算法的设计要求中我们要尽量满足时间效率高…

10架构管理之公司整体技术架构

一句话导读 公司的整体技术架构一般是公司的架构组、架构管理部、技术委员会等部门负责,需要对公司整体的技术架构进行把控和管理,确保信息系统的稳定性和可靠性,避免因技术架构不合理而导致的系统崩溃和数据丢失等问题,为公司的业…

Tomcat和HPPT协议

1.介绍 1.Java EE 规范 JavaEE(java Enterprise Edition):java企业版 JavaEE 规范是很多的java开发技术的总称。这些技术规范都是沿用自J2EE的。一共包括了13个技术规范 2.WEB概述 WEB在计算机领域中代表的是网络 像我们之前所用的WWW&…

Excel往Word复制表格时删除空格

1.背景 在编写文档,经常需要从Excel往Word里复制表格 但是复制过去的表格前面会出现空格(缩进) 再WPS中试了很多方法,终于摆脱了挨个删除的困扰 2. WPS排版中删除 选择表格菜单栏-选在【开始】-【排版】选择【更多段落处理】-【段…

ai语音机器人OKCC的空号检测

一、空号检测模块介绍 空号检测的原理:空号检测是利用现代通信技术和互联网技术结合而成,采用批量拨电话号码的方式,过滤空号、停机、无效号码。业内又称空号筛选、空号过滤。空号检测技术的成果是去除号码中的无效号码,包括…

二、BurpSuite Proxy代理

一、配置与基础 配置:配置代理的端口 Forward:将拦截的请求正常发往服务器 Drop:直接将请求丢弃 intercept:开启后才能进行请求拦截 Open brower:在2021版本之后,点击该选项即可开启BurpSuite自带的浏览器…

2023版 STM32实战9 RTC实时时钟/闹钟

RTC简介 实时时钟是一个独立的定时器。RTC模块拥有一组连续计数的计数器,在相应软件配置下,可提供时钟日历的功能。修改计数器的值可以重新设置系统当前的时间和日期。 注意事项 -1- 要手动配置中断寄存器 -2- 需要等待写操作完成 -3- 时钟闹钟中段…