ES6 - 对象新增的一些常用方法

文章目录

    • 1,Object.is()
    • 2,Object.asign()
    • 3,Object.getOwnPropertyDescriptors()
    • 4,Object.setPrototypeOf()和getPrototypeOf()
    • 5,Object.keys()、values() 和 entries()
    • 6,Object.fromEntries()
    • 7,Object.hasOwn()

1,Object.is()

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

先说它们两个的比较过程:

双等号==

(1)如果两个值类型相同,再进行三个等号(===)的比较

(2)如果两个值类型不同,也有可能相等,需根据以下规则进行类型转换在比较:
 
    1)如果一个是null,一个是undefined,那么相等
    2)如果一个是字符串,一个是数值,把字符串转换成数值之后再进行比较

三等号===:

(1)如果类型不同,就一定不相等

(2)如果两个都是数值,并且是同一个值,那么相等;如果其中至少一个是NaN,那么不相等。

(3)如果两个都是字符串,每个位置的字符都一样,那么相等,否则不相等。

(4)如果两个值都是true,或是false,那么相等

(5)如果两个值都引用同一个对象或是函数,那么相等,否则不相等

(6)如果两个值都是null,或是undefined,那么相等

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

Object.is('123', '123')
// true
Object.is({}, {})
// false
Object.is([], [])
// false

Object.is() 判断两个值是否相同。如果下列任何一项成立,则两个值相同:

  • 两个值都是undefined
  • 两个值都是 null
  • 两个值都是 true 或者都是 false
  • 两个值是由相同个数的字符按照相同的顺序组成的字符串
  • 两个值指向同一个对象
  • 两个值都是数字并且
    • 都是正零 +0
    • 都是负零 -0
    • 都是 NaN
    • 都是除零和 NaN 外的其它同一个数字

如下的案例:

      console.log(111 == '111');// true 先转数子再比较是否一样// 1,判断 undefined console.log(undefined === undefined);  // trueconsole.log(Object.is(undefined, undefined)); // true// 2,判断 null console.log(null === null); // trueconsole.log(Object.is(null,null)); // true// 3,判断空数组[]console.log([] === []); // falseconsole.log(Object.is([],[])); // false// 4,需要特别注意下 +0和-0console.log(+0 === -0); // true 显然是判断失误了console.log(Object.is(+0, -0)); //false// 5,判断NaNconsole.log(NaN === NaN); // false  显然也是判断失误了console.log(Object.is(NaN,NaN)); // true

可以看出,使用Object.is()方法会有更高的准确度。


2,Object.asign()

  • 基本用法

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

      // 目标对象 也可以是一个空对象const target = { name: 'Eula' };// 源对象 可以有多个const source1 = { age: 18 };const source2 = { friend: 'Amber' };Object.assign(target, source1, source2);console.log("target:",target); //{name: 'Eula', age: 18, friend: 'Amber'}

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

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

      // 目标对象 const target = { name: 'Eula' }; // 这个会被覆盖掉// 源对象 const source1 = { age: 18 };const source2 = { name: 'Amber' };Object.assign(target, source1, source2);console.log("target:",target); //{name: 'Amber', age: 18}

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

     let copyA = Object.assign({ name: "Eula" },Object.defineProperty({}, "age", {enumerable: false, // 不可枚举value: 18 // 为此属性添加值 18 }));console.log("copyA:",copyA);//{ name: "Eula" }

上面代码中,Object.assign()要拷贝的对象只有一个不可枚举属性age,这个属性并没有被拷贝进去。如果把enumerable 改为true,就可以成功拷贝;

  • assign()方法 注意事项:

(1)浅拷贝

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

      const obj1 = {my:{ name: "Eula"} };const obj2 = Object.assign({}, obj1);// 改变源对象的属性obj1.my.name = "Amber"console.log(obj2); //{my: {name: 'Amber'}} 

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

(2)同名属性的替换

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

      const target = { my: { name: "Eula", age: 18 } };const source = { my: { name: "Amber" } };let res = Object.assign(target, source);console.log(res);// {my: {name: 'Amber'}}

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


3,Object.getOwnPropertyDescriptors()

该方法返回指定对象所有自身属性(非继承属性)的描述对象;如下:

     const obj1 = {name: "Eula",fun: function () {return "优菈";}};const  Descriptors = Object.getOwnPropertyDescriptors(obj1)console.log("Descriptors:",Descriptors);

打印结果如下:
在这里插入图片描述


4,Object.setPrototypeOf()和getPrototypeOf()

  • setPrototypeOf()

Object.setPrototypeOf方法用来设置一个对象的原型对象;下面案例是给obj原型上添加一个属性 age:

      let obj1 = { name: "Eula" };let obj2 = { age: 18 };// 下面是给obj1添加一个属性 nameObject.setPrototypeOf(obj1, obj2);console.log(obj1.age); //18
  • getPrototypeOf()

该方法与Object.setPrototypeOf方法配套,用于读取一个对象的原型对象,下面是读取obj1 新增的原型属性:

      let obj1 = { name: "Eula" };let obj2 = { age: 18 };// 下面是给obj1添加一个属性 nameObject.setPrototypeOf(obj1, obj2);// 获取里面原型对象console.log(Object.getPrototypeOf(obj1)); //  { age: 18 }

5,Object.keys()、values() 和 entries()

(1) Object.keys()

返回自身的(不含继承的)所有可遍历(enumerable)属性的键名的数组。

      const ys = { KamisatoAyaka: '神里绫华', ShenliLingren: '神里绫人' };let ysKeys = Object.keys(ys)console.log(ysKeys); //  ['KamisatoAyaka', 'ShenliLingren'] 注意:只返回了对象每一项的键名

(2)Object.values()

返回自身的(不含继承的)所有可遍历(enumerable)属性的键值的数组。

      const ys = { KamisatoAyaka: '神里绫华', ShenliLingren: '神里绫人' };let ysvalues = Object.values(ys)console.log(ysvalues); // ['神里绫华', '神里绫人'] 注意:只返回了对象每一项的键值

(3)Object.entries()

返回一个对象自身的(不含继承的)所有可遍历(enumerable)属性的键值对的数组。
注意:entries方法同时返回了此对象的键值对, 并用一个数组包装。

      const ys = { KamisatoAyaka: "神里绫华", ShenliLingren: "神里绫人" };let ysentries = Object.entries(ys);console.log(ysentries);// 同时返回了键值对 并用一个数组包装//  ['KamisatoAyaka', '神里绫华']//  ['ShenliLingren', '神里绫人']

以下是配合for of 循环使用:

1,keys()是对键名的遍历

      let obj = {Amber: "安柏",Eula: "优菈",KamisatoAyaka: "神里绫华"};// for of不支持遍历普通对象,可通过与Object.keys()搭配使用遍历for (let key of Object.keys(obj)) {console.log(key); // Amber,Eula,KamisatoAyaka  拿到的都是对象的键名}console.log(Object.keys(obj)); //(3) ['Amber', 'Eula', 'KamisatoAyaka']

2,values()是对键值的遍历

      let obj = {Amber: "安柏",Eula: "优菈",KamisatoAyaka: "神里绫华"};for (let key of Object.values(obj)) {console.log(key); // 安柏,优菈,神里绫华  拿到的都是对象的值}console.log(Object.values(obj)); //(3) ['安柏', '优菈', '神里绫华']

3,entries()是对键值对的遍历

      let obj = {Amber: "安柏",Eula: "优菈",KamisatoAyaka: "神里绫华"};for (let key of Object.entries(obj)) {console.log(key);// ['Amber', '安柏']// ['Eula', '优菈']// ['KamisatoAyaka', '神里绫华']}console.log(Object.entries(obj));// 会以一个数组重新包装起来// [//   ["Amber", "安柏"],//   ["Eula", "优菈"],//   ["KamisatoAyaka", "神里绫华"]// ];

6,Object.fromEntries()

Object.fromEntries()方法是Object.entries()的逆操作,用于将一个键值对数组转为对象。

Object.fromEntries([['foo', 'bar'],['baz', 42]
])
// { foo: "bar", baz: 42 }

该方法的主要目的,是将键值对的数据结构还原为对象,因此特别适合将 Map 结构转为对象。

// 例一
const entries = new Map([['foo', 'bar'],['baz', 42]
]);Object.fromEntries(entries)
// { foo: "bar", baz: 42 }// 例二
const map = new Map().set('foo', true).set('bar', false);
Object.fromEntries(map)
// { foo: true, bar: false }

该方法的一个用处是配合URLSearchParams对象,将查询字符串转为对象。

Object.fromEntries(new URLSearchParams('foo=bar&baz=qux'))
// { foo: "bar", baz: "qux" }

7,Object.hasOwn()

Object.hasOwn() 时用来判断是否为自身的属性。

JavaScript 对象的属性分成两种:自身的属性和继承的属性。对象实例有一个hasOwnProperty()方法,也可以判断某个属性是否为原生属性。

Object.hasOwn()可以接受两个参数,第一个是所要判断的对象,第二个是属性名:

const foo = Object.create({ a: 123 });
foo.b = 456;Object.hasOwn(foo, 'a') // false
Object.hasOwn(foo, 'b') // true

上面示例中,对象foo的属性a是继承属性,属性b是原生属性。Object.hasOwn()对属性a返回false,对属性b返回true

Object.hasOwn()的一个好处是,对于不继承Object.prototype的对象不会报错,而hasOwnProperty()是会报错的。

const obj = Object.create(null);obj.hasOwnProperty('foo') // 报错
Object.hasOwn(obj, 'foo') // false

上面示例中,Object.create(null)返回的对象obj是没有原型的,不继承任何属性,这导致调用obj.hasOwnProperty()会报错,但是Object.hasOwn()就能正常处理这种情况。

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

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

相关文章

利用appium抓取app中的信息

一、appium简介 二、appium环境安装 三、联调测试环境 四、利用appium自动控制移动设备并提取数据

nginx+flask+uwsgi部署遇到的坑

文章目录 1.环境:2.uwsgi_conf.ini具体配置内容3.nginx 具体配置4.具体命令(注意使用pip3命令安装)5.服务异常排查 1.环境: centos8 uWSGI 2.0.22 gmssl 3.2.2 nginx version: nginx/1.18.0 项目目录: 2.uwsgi_conf.ini具体配置内容 [uws…

从俩个不确定长度的字符串中找出最长连续公共子串【动态规划】

从俩个不确定长度的字符串中找出最长连续公共子串【动态规划】 输入和输出动态规划 输入和输出 输入: asdfwww cvcasdfeew输出: asdf 动态规划 俩种情况 第一种情况 当比较到i3,j3时;上面最长的公共子字符串长度为f,长度为1; …

AI抠图使用指南:Stable Diffusion WebUI Rembg实用技巧

抠图是图像处理工具的一项必备能力,可以用在重绘、重组、更换背景等场景。最近我一直在探索 Stable Diffusion WebUI 的各项能力,那么 SD WebUI 的抠图能力表现如何呢?这篇文章就给大家分享一下。 安装插件 作为一个生成式AI,SD…

Mr. Cappuccino的第56杯咖啡——Mybatis拦截器

Mybatis拦截器 概述应用场景项目结构实现分页查询其它拦截器的使用 概述 Mybatis允许使用者在映射语句执行过程中的某一些指定的节点进行拦截调用,通过织入拦截器,在不同节点修改一些执行过程中的关键属性,从而影响SQL的生成、执行和返回结果…

项目也能“收纳”?UniPro帮助客户智能管理项目数据

用户是技术产品最终的使用者,他们对产品的需求和期望直接影响着产品的成功与否。通过用户的反馈,开发团队可以深入了解用户的实际需求,将技术的发展方向和优先级与用户需求紧密结合,从而更好地满足市场需求。 UniPro作为国内主流…

wpf 项目中使用 Prism + MaterialDesign

1.通过nuget安装MaterialDesign 2.通过nuget安装Prism 3.修改App.xmal <prism:PrismApplication x:Class"VisionMeasureGlue.App"xmlns"http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x"http://schemas.microsoft.com/winfx/…

应急响应-linux挖矿病毒的实战处置

0x01 服务器现状分析 客户描述服务器卡顿&#xff0c;切通过搜索引擎进去该官网跳转非法页面&#xff0c;但本地访问无异常 0x02 信息收集 通过进程占用情况cpu功率拉满&#xff0c;确定被植入挖矿病毒文件 qq 且存在计划任务update.sh&#xff1a;crontab -l 将该文件上传沙…

C语言案例 99乘法口诀-04

难度2复杂度2 题目&#xff1a;打印99乘法口诀 步骤一&#xff1a;定义程序目标 编写一个C程序&#xff0c;打印99乘法口诀。 步骤二&#xff1a;程序设计 整个程序分别为两个部分&#xff0c;第一部分是使用for循环打印的行数&#xff0c;第二部分是使用for循环控制打印的列…

Gitlab CI/CD笔记-第二天-GitOps的流水线常用关键词(1)

一、常用关键词 在Gitlab项目的根目录需要创建一个 .gitlab-ci.yaml的文件。 这个文件就是定义的流水线。Call :"Pipeline as code" 二、这条流水线怎么写&#xff1f; 一、掌握常用的关键词即可。 1.关键词分类 1.全局关键词 Global Keywards 2.任务关键词…

基于YOLOv7开发构建MSTAR雷达影像目标检测系统

MSTAR&#xff08;Moving and Stationary Target Acquisition and Recognition&#xff09;数据集是一个基于合成孔径雷达&#xff08;Synthetic Aperture Radar&#xff0c;SAR&#xff09;图像的目标检测和识别数据集。它是针对目标检测、机器学习和模式识别算法的研究和评估…

On Evaluation of Embodied Navigation Agents 论文阅读

论文信息 题目&#xff1a;On Evaluation of Embodied Navigation Agents 作者&#xff1a;Peter Anderson&#xff0c;Angel Chang 来源&#xff1a;arXiv 时间&#xff1a;2018 Abstract 过去两年&#xff0c;导航方面的创造性工作激增。这种创造性的输出产生了大量有时不…

Typescript - 索引签名

目录 1&#xff0c;什么是索引签名1&#xff0c;js 中使用对象的属性2&#xff0c;ts 中的索引签名3&#xff0c;扩展索引签名定义的类型 2&#xff0c;与 Record 对比3&#xff0c;遇到的问题1&#xff0c;索引 key 的类型问题&#xff0c;keyof2&#xff0c;索引 key 的类型问…

烧结钕铁硼的物理性能

烧结钕铁硼永磁体作为核心功能部件&#xff0c;广泛应用在电机、电声、磁吸和传感器等仪器设备中。磁体在服役过程中&#xff0c;会受到机械力、冷热变化、交变电磁场等环境因素&#xff0c;如果发生环境失效&#xff0c;将会严重影响设备的功用&#xff0c;造成巨大的损失。因…

QT - 建立页面

一、生成页面 二、实现 1.LineEdit 是一个单行输入文本框&#xff0c;为用户提供了比较多的编辑功能&#xff0c;例如选择复制、粘贴。 修改echomode属性为password Push Button(常规按钮) 三、程序 声明全局变量&#xff0c;属于MainWindow private: // 定义了一个指向Ma…

24届近5年上海交通大学自动化考研院校分析

今天给大家带来的是上海交通大学控制考研分析 满满干货&#xff5e;还不快快点赞收藏 一、上海交通大学 学校简介 上海交通大学是我国历史最悠久、享誉海内外的高等学府之一&#xff0c;是教育部直属并与上海市共建的全国重点大学。经过120多年的不懈努力&#xff0c;上海交…

【Linux旅行记】第一个小程序“进度条“!

文章目录 一、预备知识1.1回车换行1.2缓冲区 二、倒计时三、进度条3.1普通版本源代码3.2高级版本源代码 &#x1f340;小结&#x1f340; &#x1f389;博客主页&#xff1a;小智_x0___0x_ &#x1f389;欢迎关注&#xff1a;&#x1f44d;点赞&#x1f64c;收藏✍️留言 &…

Vue3自定义简单的Swiper滑动组件-触控板滑动鼠标滑动左右箭头滑动-demo

代码实现了一个基本的滑动功能&#xff0c;通过鼠标按下、鼠标松开和鼠标移动事件来监听滑动操作。 具体实现逻辑如下&#xff1a; 在 onMounted 钩子函数中&#xff0c;我们为滚动容器添加了三个事件监听器&#xff1a;mousedown 事件&#xff1a;当鼠标按下时&#xff0c;设置…

Netty面试题1

计算机网络模型 OSI采用了分层的结构化技术&#xff0c;共分七层&#xff0c; 物理层、数据链路层、网络层、传输层、会话层、表示层、应用层 。 Open System Interconnect 简称OSI&#xff0c;是国际标准化组织(ISO)和国际电报电话咨询委员会(CCITT)联合制定的开放系统互连参…

超详情的开源知识库管理系统- mm-wiki的安装和使用

背景&#xff1a;最近公司需要一款可以记录公司内部文档信息&#xff0c;一些只是累计等&#xff0c;通过之前的经验积累&#xff0c;立马想到了 mm-wiki&#xff0c;然后就给公司搭建了一套&#xff0c;分享一下安装和使用说明&#xff1a; 当前市场上众多的优秀的文档系统百…