ES6基础知识三:对象新增了哪些扩展?

在这里插入图片描述
一、属性的简写

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 // falseObject.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.mzph.cn/news/8651.shtml

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

相关文章

【MATLAB绘图】

MATLAB绘图函数:Plot函数详解 介绍 MATLAB是一种常用的科学计算和数据可视化工具,它提供了强大的绘图函数,使用户能够创建各种类型的图表和图形。 基本语法 plot函数的基本语法如下: plot(x, y)其中,x和y是长度相…

第八次CCF计算机软件能力认证

第一题:最大波动 小明正在利用股票的波动程度来研究股票。 小明拿到了一只股票每天收盘时的价格,他想知道,这只股票连续几天的最大波动值是多少,即在这几天中某天收盘价格与前一天收盘价格之差的绝对值最大是多少。 输入格式 输入…

OpenStack - 构建强大的云计算平台

简介 OpenStack是一个开源的云计算平台,它提供了一套用于构建和管理私有云和公有云的工具和服务。OpenStack的目标是提供可伸缩性、弹性和可靠性的云基础设施服务。 组件介绍 Nova(计算服务) Nova是OpenStack的计算服务组件,负…

子网划分和计网解题方法

子网的基本概念 子网是计算机网络中的一个逻辑单元,是由多个IP地址组成的网络。在计算机网络中,IP地址是一个32位的二进制数,用于标识网络上的设备。子网划分是将一个大型的IP地址网络划分为多个小的IP地址网络,每个小的IP地址网…

php-golang-rpc spiral/goridge库和php spiral/goridge2.4.5实践

golang 代码: package main import ( "fmt" "net" "net/rpc" "github.com/spiral/goridge/v2" ) type App struct{} func (*App) Hi(name string, r *string) error { *r fmt.Sprintf("hello %s!", name) re…

至臻画质、高清带感,这就是声网实时高清·超级画质

至臻画质、高清带感,这就是声网实时高清超级画质 7月26日,实时互动云服务商声网在北京举办“实时高清超级画质”发布会。 实时高清超级画质是声网面向实时视频场景提供的一套以提升视频画质和使用体验为核心的解决方案,包含至臻画质、美颜悦…

uni-app:实现账号密码登录,并且实现当页面登录过该账号在下次登录时无需再输入账号密码(本地缓存实现)

效果 前端代码 一、完整代码 <template><view><view class"all"><view class"title"><image :src"title_login" alt"图片损坏" /></view><form class"login-form" submit"fo…

TSDB - VictoriaMetrics 技术原理浅析

一、前言 在监控领域&#xff0c;通常需要指标存储组件TSDB&#xff0c;目前开源的TSDB组件比较多&#xff0c;各个组件性能、高可用性、维护成本等等各有差异。本文不分析选型问题&#xff0c;重点讲解VictoriaMetrics&#xff08;后面简称为vm&#xff09;。 有兴趣的朋友建议…

回调函数的使用

使用例子 #include<stdio.h>int Callback_1(int x) // Callback Function 1 {printf("Hello, this is Callback_1: x %d ", x);return 0; }int Callback_2(int x) // Callback Function 2 {printf("Hello, this is Callback_2: x %d ", x);return…

吉林大学计算机软件考研经验贴

文章目录 简介政治英语数学专业课 简介 本人23考研&#xff0c;一战上岸吉林大学软件工程专硕&#xff0c;政治72分&#xff0c;英一71分&#xff0c;数二144分&#xff0c;专业课967综合146分&#xff0c;总分433分&#xff0c;上图&#xff1a; 如果学弟学妹需要专业课资料…

网络—Linux网络收发包的流程

一、接收网络包的过程 引言 网卡是计算机里的一个硬件&#xff0c;专门负责接收和发送网络包&#xff0c;当网卡接收到一个网络包后&#xff0c;会通过 DMA 技术&#xff0c;将网络包写入到指定的内存地址&#xff0c;也就是写入到 Ring Buffer &#xff0c;这个是一个…

Mysql执行计划字段解释

文章目录 一、前言二、如何查看执行计划三、执行计划各字段解释四、select_type4.1、SIMPLE&#xff08;简单查询&#xff09;4.1.1、简单的单表查询4.1.2、多表连接查询 4.2、PRIMARY&#xff08;主查询&#xff09;4.2.1、包含复杂子查询的外层查询4.2.2、UNION语句中的第一个…

【N32L40X】学习笔记02-gpio输入实例

GPIO 使用实例 该函数库的目的就是在统一的敌方配置gpio&#xff0c;将配置的不同项放置在一个结构体内部没得io口使用一个枚举来定义一个gpio pin的别名 gpio输入实例 key.c #include <stdio.h> #include "key/bsp_key.h" #include "./key/bsp_lib_i…

自动化测试框架unittest与pytest的区别!

引言 前面文章已经介绍了python单元测试框架&#xff0c;大家平时经常使用的是unittest&#xff0c;因为它比较基础&#xff0c;并且可以进行二次开发&#xff0c;如果你的开发水平很高&#xff0c;集成开发自动化测试平台也是可以的。而这篇文章主要讲unittest与pytest的区别&…

可解释的 AI:在transformer中可视化注意力

Visualizing Attention in Transformers | Generative AI (medium.com) 一、说明 在本文中&#xff0c;我们将探讨可视化变压器架构核心区别特征的最流行的工具之一&#xff1a;注意力机制。继续阅读以了解有关BertViz的更多信息&#xff0c;以及如何将此注意力可视化工具整合到…

Debian12中为python3配置虚拟环境及在Pycharm中使用虚拟环境

在Debian 12中&#xff0c;python默认为python 3.11。 基于应用&#xff0c;现需设置虚拟环境。 1.安装venv模块 从python3.3开始&#xff0c;配置python虚拟环境&#xff0c;可用venv模块&#xff0c;更加方便了。 执行命令&#xff1a; #apt install python3.11-venv 2.…

Java虚拟机——前端编译优化

Java的编译期是有上下文语境影响的&#xff0c;不同语境下可以指不同的过程&#xff1a; 可以是前端编译器&#xff0c;把*.java文件转变成*.class文件的过程。 JDK的Javac、Eclipse JDT中的增量式编译器 可以指Java虚拟机的即时编译器&#xff08;JIT编译器&#xff09;在运…

【算法基础:搜索与图论】3.6 二分图(染色法判定二分图匈牙利算法)

文章目录 二分图介绍染色法判定二分图例题&#xff1a;860. 染色法判定二分图 匈牙利匹配二分图最大匹配匈牙利匹配算法思想例题&#xff1a;861. 二分图的最大匹配 二分图介绍 https://oi-wiki.org/graph/bi-graph/ 二分图是图论中的一个概念&#xff0c;它的所有节点可以被…

FPGA驱动SPI屏幕(附完整工程)

一. 简介 相信大家都玩过屏幕&#xff0c;在FPGA上使用最多的就是VGA/HDMI接口的显示器了&#xff0c;这两种显示器的优点就不用说了&#xff0c;缺点就是体积比较大&#xff0c;而且价格比较贵&#xff0c;对于追求便携/价格低的我来说&#xff0c;SPI接口的屏幕才是我的首要…

<Spring Boot>开发基于三层架构设计:Dao层、Service层、Controller层及案例一

三层架构设计&#xff1a;基于Spring Boot开发要使用三层架构&#xff1a; 数据访问层&#xff08;Dao&#xff09;、业务逻辑层&#xff08;Service&#xff09;、控制层&#xff08;Control-ler&#xff09; &#xff08;1&#xff09;数据访问层&#xff08;Dao&#xff0…