ES6 Object的新增 API

本文介绍了ES6为解决对象相等判断的历史遗留问题引入的新API。它与严格相等运算符基本一致,但处理NaN和0的特殊情况不同。此外,还探讨了Object.assign在合并对象时的问题及解决方案,以及ES6中Object.getOwnPropertyNames排序的明确规定。最后,提到了Object.setPrototypeOf作为设置对象隐式原型的方法。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

ES6 Object的新增 API

Objext.is

用于判断两个对象是否相等,这其实是一个历史遗留问题,在原来当我们判断相等的时候,会发生一些怪异的现象,那么能不能解决这些问题呢,可以是可以但是老版本的浏览器不太会兼容这些改动,所以不得不这样。

	
	//在我们面临这些问题时就会有一定问题
	console.log(NaN === NaN);//flase
	console.log(+0 === -0);//ture
	//因此ES6出了一种新的API,Objext.is

用于判断两个数据是否相等,基本上跟严格相等===是一致的除了以下两点:

  • NaN === NaN 相等
  • +0 === -0 不相等

Object.assign

用于混合对象


	const obj1 = {
		a : 123,
		b : 456,
		c : 789
	}
	const obj2 = {
		a : 123,
		b : 456,
		c : 789,
		d : 666
	}
	
	const obj = Object.assign(obj1, obj2);
	

此时他会把obj2的属性合并到obj1,有的覆盖没有的添加,但有一个问题是他会将obj1给更改掉,这是在ES6之前遇到的问题在展开运算符之后就不怎么使用了具体见我的博客ES6 剩余参数 展开运算符博客。

一般的解决办法是:


	const obj = Objecct.assign({}, obj1 ,obj2);
	//将前面放一个大括号这样改动的就是第一个对象了

Object.getOwnPropertyNames

Object.getOwnPropertyNames的枚举排序,之前就存在,只不过,官方没有明确要求,对属性的顺序如何排序,而如何排序,完全由浏览器厂商决定。

ES6规定了该方法返回的数组排序方式如下

  • 先排数字,按照升序排序
  • 再排其他,按照书写顺序

	const obj = {
		d : 1,
		b : 2,
		c : 3,
		0 : 5,
		5 : 4,
		4 : 1
	}
	//在一个数组中将属性名按照升序排列,只改变数字不改变其他

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

Object.setPrototypeOf

该函数用于设置某个对像的隐式原型

比如:Object.setPrototypeOf(obj1 ,obj2),
相当于:obj1.__proto__ = obj2把obj1的原型改为obj2

所以说ES6相当于提供了修改原型的一种方法。

<think>好的,用户让我介绍一下ES6以上新增的属性和高阶函数。首先,我需要回忆一下ES6之后的主要版本,比如ES7(ES2016)、ES8(ES2017),一直到最近的ES14(ES2023),然后分别整理每个版本中新增的特性。 用户可能已经了解ES6的特性,比如箭头函数、模板字符串、解构赋值等,所以现在需要聚焦在ES6之后的版本。首先,我需要分版本列举新增的属性和方法,比如数组方法、对象方法、字符串方法,以及新的语法特性如async/await、可选链操作符等。 然后,关于高阶函数,ES6之后是否有新增的高阶函数呢?比如数组的flatMap是在ES10引入的,可能属于高阶函数。需要确认哪些数组方法属于高阶函数,例如map、filter、reduce这些是ES5就有的,但像flatMap是后来加入的,应该包括进去。 接下来,要组织内容结构,可能需要先分版本介绍新增属性,再专门列出高阶函数部分。要注意使用中文,并且按照用户的要求,行内数学表达式用$...$,但这里可能用不上数学公式,所以主要关注代码示例的正确格式,比如使用反引号包裹代码块。 需要检查每个特性的正确性,比如可选链操作符是ES2020引入的,空值合并运算符也是同一版本。Promise.any和WeakRef是ES2021的。数组的flat和flatMap是ES2019的。这些都需要准确对应到正确的ES版本。 另外,用户提到“高阶函数”,可能需要明确高阶函数的定义,即接收函数作为参数或返回函数的函数。因此,在数组方法中,像flatMap虽然处理数组,但它接收一个映射函数,属于高阶函数。此外,Promise相关的方法如then、catch也是高阶函数,但可能用户更关注数组的高阶函数。 还要注意不要遗漏重要的特性,比如ES6的模块导入导出虽然不是方法,但属于重要特性,不过用户可能更关注属性和高阶函数,所以可能不需要深入模块系统。 最后,确保回答结构清晰,分点列出,帮助用户逐步理解。可能需要使用代码示例来说明用法,比如展示flatMap的使用方式,或者可选链操作符的例子。同时,需要提醒用户这些特性在不同环境下的兼容性,可能需要使用Babel等工具进行转译。 总结步骤: 1. 分ES版本介绍新增属性与方法,从ES7到ES14。 2. 单独列出新增的高阶函数,特别是数组相关的方法。 3. 每个特性给出简要说明和示例代码。 4. 确保术语准确,版本对应正确。 5. 检查是否有遗漏的重要特性,如异步迭代、对象扩展等。 6. 最后总结,并提醒兼容性问题。 现在开始组织内容,确保符合用户的要求,结构清晰,语言简洁。</think>以下为ES6ES2015)之后新增的重要特性与高阶函数详解,按版本分类说明: --- ### 一、ES7(ES2016新增 1. **`Array.prototype.includes`** 检查数组是否包含指定元素,返回布尔值 ```javascript [1, 2, 3].includes(2); // true ``` 2. **指数运算符`**`** 简化幂运算 ```javascript 2 ** 3; // 8(等同于Math.pow(2,3)) ``` --- ### 二、ES8(ES2017)新增 1. **`async/await`** 异步操作语法糖,用同步方式写异步代码 ```javascript async function fetchData() { const res = await fetch('api/data'); return res.json(); } ``` 2. **`Object.values()`/`Object.entries()`** 获取对象值/键值对数组 ```javascript Object.values({a:1, b:2}); // [1,2] Object.entries({a:1, b:2}); // [['a',1], ['b',2]] ``` 3. **字符串填充`padStart()`/`padEnd()`** 按指定长度填充字符串 ```javascript '5'.padStart(3, '0'); // '005' ``` --- ### 三、ES9(ES2018)新增 1. **对象扩展运算符`...`** 合并/复制对象 ```javascript const merged = {...obj1, ...obj2}; ``` 2. **`Promise.prototype.finally`** Promise无论成功失败都执行 ```javascript fetch(url) .then(res => res.json()) .finally(() => stopLoading()); ``` --- ### 四、ES10(ES2019)新增 1. **`Array.flat()/flatMap()`** 数组扁平化与映射后扁平化 ```javascript [1, [2,3]].flat(); // [1,2,3] [1,2].flatMap(x => [x*2]); // [2,4] ``` 2. **`Object.fromEntries()`** 键值对数组转对象 ```javascript Object.fromEntries([['a',1], ['b',2]]); // {a:1, b:2} ``` --- ### 五、ES2020(ES11)新增 1. **可选链操作符`?.`** 安全访问嵌套属性 ```javascript user?.address?.city; // 不会因undefined报错 ``` 2. **空值合并运算符`??`** 更严谨的默认值设置 ```javascript const value = input ?? 'default'; ``` --- ### 六、高阶函数新增 1. **`Array.prototype.flatMap`(ES10)** 先映射后扁平化,比`map()+flat()`更高效 ```javascript const arr = [1,2]; arr.flatMap(x => [x, x*2]); // [1,2,2,4] ``` 2. **`Promise.allSettled`(ES2020)** 等待所有Promise完成(无论成功/失败) ```javascript Promise.allSettled([promise1, promise2]) .then(results => {/*处理结果数组*/}); ``` --- ### 七、其他重要特性 - **动态导入`import()`(ES2020)** 按需加载模块 ```javascript const module = await import('./module.js'); ``` - **BigInt类型(ES2020)** 支持超大整数运算 ```javascript const bigNum = 9007199254740991n; ``` --- ### 总结建议 1. **兼容性处理**:使用Babel等工具转译新特性 2. **优先应用场景**:可选链、空值合并、`flatMap`可显著简化代码逻辑 3. **性能注意**:`flat(Infinity)`慎用于极深嵌套数组
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值