ES6中对象新增的方法
属性的简洁表示法
ES6 允许在大括号里面直接写入变量和函数,作为对象的属性和方法。这样的书写更加简洁。
const foo = 'bar';
const baz = {
foo
};
console.log(baz); // { foo: 'bar' }
function f(name, age) {
return {
name,
age
};
}
// 等同于
// function f(name, age) {
// return {
// name: name,
// age: age
// };
// }
console.log('信息', f('李四', 23));
// 输出的信息是 {age: 23 name: "李四"}
let birth = '2022-3-27';
const Person = {
name: '张三',
//等同于birth: birth
birth,
// 等同于hello: function (){}
hello() {
console.log('我的名字叫:', this.name);
}
};
// Person.hello(); // 我的名字叫:张三
//没有返回值时,默认返回 undefined。下面这一条语句会被执行两次
console.log('信息', Person.hello());
// 第1次的值: 我的名字叫:张三
// 第2次的值: undefined
注意,简写的对象方法不能用作构造函数,会报错。
let Person = {
name: '张三',
hello: function() {
console.log('你好呀')
},
like() {
console.log('简写的对象方法不能用作构造函数==>error会报错')
}
};
new Person.hello() // 不会报错
new Person.like(); //会报错
ES6对象属性遍历的5种方式
ES6 一共有 5 种方法可以遍历对象的属性。
1==>for...in
for...in循环遍历对象自身的和继承的可枚举属性(不含 Symbol 属性)。
const obj = { h: 180,w: 125}
for (let keysName in obj) {
console.log(keysName);
// h w 输出的是key值哈
}
2==>Object.keys(obj)
Object.keys返回一个数组,
包括对象自身的(不含继承的)所有可枚举属性(不含 Symbol 属性)的键名。
const obj = {
height: 180,
weight: 125,
}
console.log(Object.keys(obj)) //['height', 'weight']
3==>Object.getOwnPropertyNames(obj) 【了解即可】
Object.getOwnPropertyNames返回一个数组,
包含对象自身【所有的属性】。[其自身的可枚举和不可枚举属性的名称被返回]
【不含 Symbol 属性】的键名。
let obj = {};
let a = Symbol("a");
let b = Symbol.for("b");
obj[a] = "localSymbol";
obj[b] = "globalSymbol";
let objectSymbols = Object.getOwnPropertySymbols(obj);
console.log(objectSymbols.length); // 2
console.log(objectSymbols) // [Symbol(a), Symbol(b)]
console.log(objectSymbols[0]) // Symbol(a)
4==>Object.getOwnPropertySymbols(obj)
Object.getOwnPropertySymbols返回一个数组,包含对象自身的所有 Symbol 属性的键名。
5==>Reflect.ownKeys(obj)
Reflect.ownKeys返回一个数组,包含对象自身的(不含继承的)所有键名。
不管键名是 Symbol 或字符串,也不管是否可枚举。
const obj = {
height: 180,
weight: 125,
}
console.log(Reflect.ownKeys(obj))
//['height', 'weight']
以上的 5 种方法遍历对象的键名,都遵守同样的属性遍历的次序规则。
JavaScript中的可枚举属性与不可枚举属性
在JavaScript中,对象的属性分为可枚举和不可枚举之分,
它们是由属性的 enumerable 值决定的。
可枚举性决定了这个属性能否被for…in查找遍历到。
属性的枚举性会影响以下三个函数的结果:
for…in
Object.keys()
JSON.stringify
Object.is()
ES5 比较两个值是否相等,只有两个运算符。
相等运算符(==)和严格相等运算符(===)。
它们都有缺点,前者会自动转换数据类型。
后者的NaN不等于自身,以及+0等于-0。
JavaScript 缺乏一种运算,只要两个值是一样的,它们就应该相等。
于是,ES6提出来了一种同值相等的算法,来解决这个问题。
console.log('==>', Object.is('bar', 'bar'))
// true
console.log(Object.is({}, {}))
// false
+0 === -0 //true
NaN === NaN // false
Object.is(+0, -0) // false
Object.is(NaN, NaN) // true
Object.assign对象合并
Object.assign()方法用于对象的合并。
将源对象(source)的所有可枚举属性,复制到目标对象(target。
const target = { a: 1 };
const source1 = { b: 2 };
const source2 = { c: 3 ,b:22};
Object.assign(target, source1, source2);
target // {a:1, b:22, c:3}
Object.assign需要注意的点
需要注意的点:Object.assign()方法的第一个参数是目标对象,后面的参数都是源对象。
由于undefined和null无法转成对象,所以如果它们作为参数,就会报错。
Object.assign(undefined) // 报错
Object.assign(null) // 报错
如果非对象参数出现在源对象的位置即非首参数,
那么处理规则有所不同。
首先,这些参数都会转成对象,如果无法转成对象,就会跳过。
这意味着,如果undefined和null不在首参数,就不会报错。
let obj = {a: 1};
Object.assign(obj, undefined) === obj // true
Object.assign(obj, null) === obj // true
特别注意:其他类型的值(即数值、布尔值)不在首参数,也不会报错。
但是,除了字符串会以数组形式,拷贝入目标对象。
-- 字符串会以数组形式拷贝入目标对象
const str1 = 'abc';
const obj = Object.assign({}, str1);
console.log(obj); // { "0": "a", "1": "b", "2": "c" }
为什么字符串会以数组形式拷贝进入目标对象呢?
这是因为:只有字符串的包装对象,会产生可枚举属性。
-- 数字不会拷入目标对象
const str2 = 123;
const obj = Object.assign({}, str2);
console.log(obj); // {}
-- 最后补充一点:
Object.assign()拷贝的属性是有限制的,
只拷贝源对象的自身属性(不拷贝继承属性),
也不拷贝不可枚举的属性(enumerable: false)。
Object.assign()方法实行的是浅拷贝,而不是深拷贝。
ES6中对象新增的方法的更多相关文章
- ES6中数组新增的方法-超级好用
Array.find((item,indexArr,arr)=>{}) 掌握 找出第一个符合条件的数组成员. 它的参数是一个回调函数,对所有数组成员依次执行该回调函数. 直到找出第一个返回值为t ...
- es6的对象新增的方法
Object.is 可以看成是=== 的加强版, 其修正了 === 的 NaN 不等于自身, 以及 +0 等于 -0 另外说下, == 会自动转型, 但是 Object.is 也是如果类型不一致也是不 ...
- ES6中对象的扩展
ES6不仅为字符串.数值和数组带来了扩展,也为对象带来了很多新特性.这一节,我们来一起学习一下对象的扩展. 对象的传统表示法 我们回顾一下,对象的传统表示法: let person = { " ...
- 在ES5实现ES6中的Object.is方法
ES6中对象的扩展里面添加了一个Object.is方法,用于比较两个值是否严格相等.内部计算与 === 行为基本一致.那么我们怎么在不支持这个方法的ES5中实现呢? 首先我们需要搞清楚两点,1:Obj ...
- ES6数组对象新增方法
1. Array.from() Array.from方法用于将两类对象转为真正的数组:类数组的对象( array-like object )和可遍历( iterable )的对象(包括 ES6 新增的 ...
- ES6中函数新增的方式方法
---恢复内容开始--- 绪 言 ES6 大家对JavaScript中的函数都不陌生.今天我就为大家带来ES6中关于函数的一些扩展方式和方法. 1.1函数形参的默认值 1.1.1基本用法 ES6 ...
- ES6中数组的新方法
数组的扩展 1.1扩展运算符 1.1.1:... 扩展运算符(spread)是三个点(...).它好比 rest 参数的逆运算,将一个数组转为用逗号分隔的参数序列. <body> < ...
- ES5中数组新增的方法说明
一.前言-索引 ES5中新增的不少东西,了解之对我们写JavaScript会有不少帮助,比如数组这块,我们可能就不需要去有板有眼地for循环了. ES5中新增了写数组方法,如forEach (js v ...
- ES6中对象
ES6允许把声明的变量直接赋值给对象,我们看下面的例子. let name="Zachary"; let skill= 'web'; let obj= {name,skill}; ...
随机推荐
- MySQL数据备份/导出 创建用户及其删除
Mysql DCL 创建用户 create user '用户名'@'localhost(本机访问)/%(通配符任何ip地址都可访问本机) 分配权限 grant 权限 on 数据库.表名 to '用户名 ...
- head 插件 Content-Type header [application/x-www-form-urlencoded] is not supported
{ "error": "Content-Type header [application/x-www-form-urlencoded] is not supported& ...
- 华为云企业级Redis揭秘第16期:超越开源Redis的ACID"真"事务
摘要: 开源Redis只支持伪事务,应用场景受限.高斯Redis发布企业级事务特性,支持完备ACID,为交易.库存等上层业务带来全新可能. 本文分享自华为云社区<华为云企业级Redis揭秘第16 ...
- 【论文考古】分布式优化 Communication Complexity of Convex Optimization
J. N. Tsitsiklis and Z.-Q. Luo, "Communication complexity of convex optimization," Journal ...
- PDF太大怎么办?缩小PDF的4种常用方法
PDF太大怎么变小?我们在平时学习或生活中经常需要上传或提交一些资料,现在网站都是默认需要提交PDF格式的电子文档,有时提交资料会提示超过系统大小,如何才能使PDF缩小呢? 一.在线压缩 首先搜索sp ...
- [题解]RQNOJ PID87 过河
链接:http://www.rqnoj.cn/problem/87 思路:动态规划 定义f[i][j]表示到达第 i 块给定石头用了 j 块添加石头的最少步数. 转移方程:f[i][j]=min{f[ ...
- 过分简单,Tabluea仪表板与Smartbi自助仪表盘制作流程分享
上一章节介绍了如何接入数据到系统里面,并且对数据进行处理.那本章节与大家分享Smartbi及Tabluea是如何对数据进行仪表盘制作. 这就是Tabluea的工作簿界面,这也是Tabluea可 ...
- 【基础知识】cache 管线(Pipeline)的建立便可以提升cpu的性能,为什么还要去发展多核的cpu?
多管线 (Pipeline)的确可以提高主频,比如搭配 NetBurs架构的Pentium4,它拥有20级的管线技术,虽然可以轻易提高主频,但是效率会降低.而且随着频率的上升,功率也大幅上升温度问题也 ...
- C#基础之Foreach
下面是Foreach的介绍. 如何让一个类可以用Foreach来遍历呢. 结论:让这个类实现IEnumerable接口. 这个类有一个public的GetEnumerator的实例方法,并且返回类型中 ...
- 60天shell脚本计划-7/12-渐入佳境
--作者:飞翔的小胖猪 --创建时间:2021年2月26日 --修改时间:2021年3月2日 说明 每日上传更新一个shell脚本,周期为60天.如有需求的读者可根据自己实际情况选用合适的脚本,也可在 ...