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}; ...
随机推荐
- 利用信号量semaphore实现两个进程读写同步 Linux C
这篇帖子主要是记录一下自己使用信号量遇到的坑. 首先是需求:创建两个进程A,B.A往buffer中写,B读.两个进程利用命名管道进行通信,并实现读写同步.即A写完后通知B读,B读完后通知A写. 如果A ...
- 攻防世界Web_ics_05
题目: 题目描述:其他破坏者会利用工控云管理系统设备维护中心的后门入侵系统 题目场景: 1.进入云平台设备中心界面,查看以下源码发现?page= ,(点下云平台设备维护中心url里也能出?page ...
- windows加普通用户加入管理员组
net localgroup administrators 用户名 /add ------------>使用这句命令添加用户到管理组 shutdown -g 重启电脑
- kali主机探测命令与工具集
实验目的 熟悉ping.arping.fping.hping3.nbtscan.nping.p0f.xprobe2工具对目标主机的探测方法. 实验原理 目标识别工具发送特殊构造的数据包,根据返回的应答 ...
- 技术管理进阶——为什么Leader的话有时候你听不懂
原创不易,求分享.求一键三连 Hi,各位亲爱的小伙伴,小钗公号遵循日复盘->周复盘->月复盘->季度复盘->年总结策略,所以某类型文章到后期才会成体系. 今天这篇文章属于「月复 ...
- C# 2进制、8进制、10进制、16进制...各种进制转换
在.NET Framework中,System.Convert类中提供了较为全面的各种类型.数值之间的转换功能. 其中的两个方法可以轻松的实现各种进制的数值间的转换: Convert.ToInt32( ...
- 【windows 操作系统】文件保护:文件访问类型和访问控制
文件保护:文件访问类型和访问控制 为了防止文件共享可能会导致文件被破坏或未经核准的用户修改文件,文件系统必须控制用户对文件的存取,即解决对文件的读.写.执行的许可问题. 为此,必须在文件系统中建立相应 ...
- vue如何全局引用公共js
在项目开发中需要调用一些工具类方法,所以需要将公共方法放在公共js中,并且需要全局引用这些公共js 1:创建公共JS(utils.js) src/common/utils.js export def ...
- 六、Java方法
Java方法 何为方法 System.out.println(),那么它是什么呢? System是一个类,out是一个对象,println()是一个方法 Java方法是语句的集合,它们在一起执行的 ...
- 二级py--day6数据库设计基础
二级py-- 数据库设计基础 1.数据定义语言(DDL):该语言负责数据的模式定义与数据的物理存取构建 2.数据操纵语言(DML):该语言负责数据的操纵,包括查询及总删改等操作 3.数据控制语言(DC ...