ES6对象新增了哪些扩展?

news2025/2/22 17:21:56

 

一、属性的简写

ES6中,当对象键名与对应值名相等的时候,可以进行简写

const baz = {foo:foo}

// 等同于
const baz = {foo}

方法也能够进行简写

const o = {
  method() {
    return "Hello!";
  }
};

// 等同于

const o = {
  method: function() {
    return "Hello!";
  }
}

在函数内作为返回值,也会变得方便很多

function getPoint() {
  const x = 1;
  const y = 10;
  return {x, y};
}

getPoint()
// {x:1, y:10}

注意:简写的对象方法不能用作构造函数,否则会报错

const obj = {
  f() {
    this.foo = 'bar';
  }
};

new obj.f() // 报错

二、属性名表达式

ES6 允许字面量定义对象时,将表达式放在括号内

let lastWord = 'last word';

const a = {
  'first word': 'hello',
  [lastWord]: 'world'
};

a['first word'] // "hello"
a[lastWord] // "world"
a['last word'] // "world"

表达式还可以用于定义方法名

let obj = {
  ['h' + 'ello']() {
    return 'hi';
  }
};

obj.hello() // hi

注意,属性名表达式与简洁表示法,不能同时使用,会报错

// 报错
const foo = 'bar';
const bar = 'abc';
const baz = { [foo] };

// 正确
const foo = 'bar';
const baz = { [foo]: 'abc'};

注意,属性名表达式如果是一个对象,默认情况下会自动将对象转为字符串[object Object]

const keyA = {a: 1};
const keyB = {b: 2};

const myObject = {
  [keyA]: 'valueA',
  [keyB]: 'valueB'
};

myObject // Object {[object Object]: "valueB"}

三、super关键字

this关键字总是指向函数所在的当前对象,ES6 又新增了另一个类似的关键字super,指向当前对象的原型对象

const proto = {
  foo: 'hello'
};

const obj = {
  foo: 'world',
  find() {
    return super.foo;
  }
};

Object.setPrototypeOf(obj, proto); // 为obj设置原型对象
obj.find() // "hello"

四、扩展运算符的应用

在解构赋值中,未被读取的可遍历的属性,分配到指定的对象上面

let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
x // 1
y // 2
z // { a: 3, b: 4 }

注意:解构赋值必须是最后一个参数,否则会报错

解构赋值是浅拷贝

let obj = { a: { b: 1 } };
let { ...x } = obj;
obj.a.b = 2; // 修改obj里面a属性中键值
x.a.b // 2,影响到了结构出来x的值

对象的扩展运算符等同于使用Object.assign()方法

五、属性的遍历

ES6 一共有 5 种方法可以遍历对象的属性。

  • for...in:循环遍历对象自身的和继承的可枚举属性(不含 Symbol 属性)

  • Object.keys(obj):返回一个数组,包括对象自身的(不含继承的)所有可枚举属性(不含 Symbol 属性)的键名

  • Object.getOwnPropertyNames(obj):回一个数组,包含对象自身的所有属性(不含 Symbol 属性,但是包括不可枚举属性)的键名

  • Object.getOwnPropertySymbols(obj):返回一个数组,包含对象自身的所有 Symbol 属性的键名

  • Reflect.ownKeys(obj):返回一个数组,包含对象自身的(不含继承的)所有键名,不管键名是 Symbol 或字符串,也不管是否可枚举

上述遍历,都遵守同样的属性遍历的次序规则:

  • 首先遍历所有数值键,按照数值升序排列
  • 其次遍历所有字符串键,按照加入时间升序排列
  • 最后遍历所有 Symbol 键,按照加入时间升序排
Reflect.ownKeys({ [Symbol()]:0, b:0, 10:0, 2:0, a:0 })
// ['2', '10', 'b', 'a', Symbol()]

六、对象新增的方法

关于对象新增的方法,分别有以下:

  • Object.is()
  • Object.assign()
  • Object.getOwnPropertyDescriptors()
  • Object.setPrototypeOf(),Object.getPrototypeOf()
  • Object.keys(),Object.values(),Object.entries()
  • Object.fromEntries()

Object.is()

严格判断两个值是否相等,与严格比较运算符(===)的行为基本一致,不同之处只有两个:一是+0不等于-0,二是NaN等于自身

+0 === -0 //true
NaN === NaN // false

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

Object.assign()

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

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()方法是浅拷贝,遇到同名属性会进行替换

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.setPrototypeOf()

Object.setPrototypeOf方法用来设置一个对象的原型对象

Object.setPrototypeOf(object, prototype)

// 用法
const o = Object.setPrototypeOf({}, null);

Object.getPrototypeOf()

用于读取一个对象的原型对象

Object.getPrototypeOf(obj);

Object.keys()

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

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

Object.values()

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

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

Object.entries()

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

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

Object.fromEntries()

用于将一个键值对数组转为对象

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

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

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

相关文章

时局不利,如何化解职场焦虑?

部分数据来源:ChatGPT 在不景气的经济环境下,大多数求职者都面临极大的压力,而技术人员又是其中之一。他们不仅需要不断学习新技能,还需要面对工作市场的竞争,并努力将自己的技能提升到所需的水平。一旦被拒绝或无法找…

半导体设计使用FTP外发文件存在风险,如何安全有效替代?

近几年,基于我国“科技强国”战略目标的实行,以半导体、人工智能、新能源等为代表的的科技型领域及行业快速发展。在半导体行业,以行业产业链来区分,整个行业包括上游材料和设备支撑、中游芯片设计和制造,以及下游移动…

用ArcGIS绘制研究区地图

科研tips:ArcGIS中国地图构建教程 有同学提问:怎么画论文最常用的研究区地图呢? 论文用图对准确性和美观度有一定要求,而ArcGIS具有强大的地图制作功能,可以利用该软件快速制作研究区地图。 01 地图的导入 &#…

C语言CRC-16 DNP格式校验函数

C语言CRC-16 DNP格式校验函数 CRC-16校验产生2个字节长度的数据校验码,通过计算得到的校验码和获得的校验码比较,用于验证获得的数据的正确性。基本的CRC-16校验算法实现,参考: C语言标准CRC-16校验函数。 不同应用规范通过对输…

基于 SpringBoot实现文档管理编辑器

访问【WRITE-BUG数字空间】_[内附完整源码和文档] 本项目实现功能如下:注册、登录和个人资料修改;文档编辑:Markdown 文档的阅读和编辑、发布;文档管理; 使用 Cookies 保存登录状态;在数据库中使用 MD5 保…

【AUTOSAR】【以太网】SD

目录 一、概述 二、限制与约束 三、功能说明 3.1 需求 3.1.1 通用需求 3.1.2 以太网通信 3.1.3 状态处理 3.1.4 与SoAd的交互 3.1.5 订阅事件组重试处理 3.2 报文格式 3.2.1 Entries Array 3.2.2 Opotion Array 3.2.3 示例 3.3 服务发现条目 3.3.1 服务查找相关…

Godot引擎 4.0 文档 - 循序渐进教程 - 使用信号

本文为Google Translate英译中结果,DrGraph在此基础上加了一些校正。英文原版页面: Using signals — Godot Engine (stable) documentation in English 使用信号 在本课中,我们将研究信号。它们是节点在发生特定事件时发出的消息&#xf…

S7-1200中通过MODBUS TCP客户端在一次请求中实现从服务器读写一个或多个保持性寄存器的具体方法

S7-1200中通过MODBUS TCP客户端在一次请求中实现从服务器读写一个或多个保持性寄存器的具体方法 TIA博途V17中增加了MODBUS TCP客户端功能码 23,可以在一次请求作业下实现从服务器读取和写入一个或多个保持性寄存器,这样省去了轮询的编程工作量,提高了工作效率,如下图所示,…

第三章 卷积神经网络

目录 一、CNN 基础二、CNN 进阶 卷积神经网络,Convolutinal Neural Network,CNN 在之前两章的由线性模型构成的神经网络都是全连接神经网络 一、CNN 基础 在之前全连接层处理二维图像的时候,直接将二维图像从 N 1 28 28 N \times 1 \t…

【DolphinScheduler 安装部署】DolphinScheduler调度系统如何安装部署?

要安装DolphinScheduler(以下简称DS)调度系统,请按照以下步骤进行操作: 系统要求: 确保您的计算机满足DS的最低系统要求,例如操作系统版本、内存和处理器要求等。DS通常在Linux系统上运行良好。 下载DS安装…

k8s部署mongodb副本高可用集群

此版本的NFS为单点,仅为练习使用,生产环境建议使用cephfs的卷类型,避免单点。或者通过keepalived加Sersync的方案对NFS作容灾处理即可用于生产环境。当然,对于开发或测试环境,方便起见,直接使用单点的NFS加…

Oracle OCP 和MySQL OCP 考试完成后查询成绩和下载证书的步骤

我的一些学员考完Oracle OCP和MySQL OCP不知道如何查看自己的考试成绩和证书,姚远老师现在详细说明具体的操作步骤,一共8步。 关于号主,姚远: Oracle ACE(Oracle和MySQL数据库方向)Oracle MAA 大师华为云…

基于Java+Springmvc+vue+element实现大学生科技创新创业项目管理系统

基于JavaSpringmvcvueelement实现大学生科技创新创业项目管理系统 博主介绍:5年java开发经验,专注Java开发、定制、远程、指导等,csdn特邀作者、专注于Java技术领域 作者主页 超级帅帅吴 Java项目精品实战案例《500套》 欢迎点赞 收藏 ⭐留言 文末获取源…

【校园网设计】基于ensp的跨地区的校园网组网方案

本博客是基于模拟器ensp的校园网组网方案,有总校区和分校区,主要用了vlan划分、dhcp、nat、ospf、acl、bgp等技术。首先说一下本博客的局限性: 总校区和分校区之间只是使用的传统的bgp建立连接,这样可以在运营商上看到内网的明细&…

Squid 代理服务器的应用(传统代理、透明代理、ACL控制列表、sarg日志分析、反向代理)

一、Squid代理服务器的概述 squid 作为一款服务器代理工具,可以缓存网页对象,减少重复请求,从而达到加快网页访问速度,隐藏客户机真实IP,更为安全。 Squid主要提供缓存加速、应用层过滤控制的功能 1、squid代理的工…

Android Studio SDK无法勾选安装的解决方案

问题描述 1、在初次安装好Android Studio后,会启动AS,出现经典的Unable to access Android SDK add-on list报错,点Cancel即可。网上的解决方法分为两种:(1)设置Proxy为教育网(2)在…

Linux 下安装SonarQube (版本sonarqube7.6)

公司的虚拟环境坏了,sonarqube需要重新安装。简单记录安装过程和遇到的问题。 相关环境信息 CentOS Linux release 7.6.1810 (Core)MySQL 5.7.30sonarqube7.6JDK 11.0.2 一 安装Sonar前需要知道 1为什么要代码清洁 软件的核心是代码。代码不仅指导业务行为&#…

陈丹琦团队最新力作:上下文学习在上下文“学到”了什么?

深度学习自然语言处理 原创作者 | 鸽鸽 这段时间in-context learning真的很火,陈丹琦组最新的两篇文章都是ICL相关,今天我们拜读其中一篇:丹琦的硕士生、纽约大学准博士生Jane Pan的ACL小短文。 大佬的学生会做出怎样的科研示范呢&#xff1f…

单位、家庭建筑物电气、电子设备防雷举措

前 言 在现实的学习、工作、生活中,有时会面对自然灾害、重特大事故、环境公害及人为破坏等突发事件,为了控制事故的发展,就不得不需要事先制定应急预案。那要怎么制定科学的应急预案呢﹖下面是小编为大家整理的单位、住宅建筑物、电子电气防…

Flink有状态计算的状态容错

状态容错 State Fault Tolerance 首先来说一说状态容错。Flink 支持有状态的计算,可以把数据流的结果一直维持在内存(或 disk)中,比如累加一个点击数,如果某一时刻计算程序挂掉了,如何保证下次重启的时候&…