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

news/2024/12/21 21:07:46/

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

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.ppmy.cn/news/973791.html

相关文章

K8S 证书过期后,kubeadm 重新生成证书

前言 K8S 各个组件需要与 api-server 进行通信,通信使用的证书都存放在 /etc/kubernetes/pki 路径下,kubeadm 生成的证书默认有效为 1 年,因此需要定时更新证书,否则证书到期会导致整个集群不可用。 本篇文章主要介绍如何通过 k…

代码随想录-回溯(组合问题)|ACM模式

目录 前言: 77.组合 题目描述: 输入输出示例: 思路和想法: 216. 组合总和 III 题目描述: 输入输出示例: 思路和想法: 17. 电话号码的字母组合 题目描述: 输入输出描述&a…

netty组件详解-中

接着之前的博客netty组件详解-上,我们继续深入到源码层面,来探究netty的各个组件和其设计思想: netty内置的通讯模式 我们在编写netty代码时,经常使用NioServerSocketChannel 作为通讯模式。 例如下面的简单netty客户端示例: pri…

HTML与XHTML的不同和各自特点

HTML和XHTML都是用于创建Web页面的标记语言。HTML是一种被广泛使用的标记语言,而XHTML是HTML的严格规范化版本。在本文中,我们将探讨HTML与XHTML之间的不同之处,以及它们各自的特点。 HTML与XHTML的不同之处 HTML和XHTML之间最大的不同在于它…

多模态版ChatGPT,拿下视觉语言新SOTA, 代码已开源

点击上方“AI遇见机器学习”,选择“星标”公众号 重磅干货,第一时间送 文|羿阁 发自 凹非寺源|量子位 2022年流行“文生图”模型,那2023年流行什么? 机器学习工程师Daniel Bourke的答案是:反过来…

从地图获取5A风景区位置

以下是利用Python从高德地图获取5A风景区位置并将坐标转换为WGS84的步骤: 1. 安装requests库和pyproj库。您可以使用pip命令在终端或命令提示符中安装这些库。 2. 导入requests和pyproj库: import requests import pyproj 3. 设置高德地图API密钥和…

插入,选择,堆,快速排序算法思想与复杂度

目录 插入排序 思想 算法步骤 代码 复杂度 选择排序 思想 算法步骤 代码 复杂度 堆排序 思想 算法步骤 代码 复杂度 快速排序 思想 算法步骤 代码 复杂度 稳定性 插入排序 思想 插入排序是一种简单直观的排序算法。它的工作原理是将数组分为已排序和未排序…

使用 Flask 快速构建 基于langchain 和 chatGPT的 PDF摘要总结

简介 这里不对 langchain 和 chatGPT 进行介绍,仅对实现过程进行整理 环境 Python >3.8 Flask2.2.3 Jinja23.1.2 langchain0.0.143 openai0.27.4 实现 总结功能 使用 langchain 和 openai 接口实现总结功能 实现逻辑:通过text_splitter 将pdf 分…