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计算机软件能力认证

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

子网划分和计网解题方法

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

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;。 有兴趣的朋友建议…

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

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

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语句中的第一个…

自动化测试框架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接口的屏幕才是我的首要…

更新合集 | 七月功能上新记

点击链接了解详情 七月来临&#xff0c;正式开启 2023 下半年的新征途&#xff01;这个盛夏&#xff0c;腾讯云 CODING 上线了微信扫码注册、微信通知、Go 制品管理等重点能力&#xff0c;为企业及团队研发管理带来更多便利&#xff01;以下是 CODING 新功能速递&#xff0c;快…

登录页的具体实现 (小兔鲜儿)【Vue3】

登录页 整体认识和路由配置 整体认识 登录页面的主要功能就是表单校验和登录登出业务 准备模板 <script setup></script><template><div><header class"login-header"><div class"container m-top-20"><h1 cl…

详解go的hex.Encode原理

简言 今天看nsq的messageID生成的时候&#xff0c;发现它使用了hex.Encode函数来产生编码&#xff0c;那就顺道研究一下这个编码方式。 原理 hex是16进制的意思&#xff0c;encode是进行编码的意思&#xff0c;内部实现也很简单&#xff0c;就是 每4位计算出十六进制的值&a…

基于Python机器学习、深度学习在气象、海洋、水文等技能提升教程

详情点击链接&#xff1a;基于Python机器学习、深度学习技术提升气象、海洋、水文领域实践应用 前言 Python是功能强大、免费、开源&#xff0c;实现面向对象的编程语言&#xff0c;能够在不同操作系统和平台使用&#xff0c;简洁的语法和解释性语言使其成为理想的脚本语言。…

数据可视化(1)

使用python带的matplotlib库进行简单的绘图。使用之前先进行安装&#xff0c;pip install matplotlib。如果安装了Anaconda,则无需安装matplotlib。 1.简单折线图 #绘制简单图表 import matplotlib.pyplot as plt plt.plot([1,2,3,4,5]) plt.show() import matplotlib.pyp…

2023年的深度学习入门指南(19) - LLaMA 2源码解析

2023年的深度学习入门指南(19) - LLaMA 2源码解析 上一节我们学习了LLaMA 2的补全和聊天两种API的使用方法。本节我们来看看LLaMA 2的源码。 补全函数text_completion源码解析 上一节我们讲了LLaMA 2的编程方法。我们来复习一下&#xff1a; generator Llama.build(ckpt_di…

logback-spring.xml日志配置文件详解

目录 前言logback-spring.xml 配置 前言 打印日志是一个系统的基本功能&#xff0c;系统出现异常可以通过查找日志弄清楚是什么原因&#xff0c;从而更加快速地定位问题&#xff0c;修复系统。 logback-spring.xml 配置 文件位置 具体配置 <?xml version"1.0"…