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}; ...
随机推荐
- 使用docker部署awx-1.7.1.0(ansible图形化界面)
文章目录 关于环境 下载awx 下载安装所需依赖 安装docker-compose 配置inventory文件 出现的报错 TASK [local_docker : Run migrations in ...
- suse 12 二进制部署 Kubernetets 1.19.7 - 第02章 - 部署etcd集群
文章目录 1.2.部署etcd集群 1.2.0.下载etcd二进制文件 1.2.1.创建etcd证书和私钥 1.2.2.生成etcd证书和私钥 1.2.3.配置etcd为systemctl管理 1.2 ...
- CMake 交叉编译
CMake 交叉编译 交叉编译就是说在平台 A (宿主机)上编译出可以在平台 B (目标机) 上运行的程序,比如在 x86 上编译 ARM 程序 要交叉编译首先要去下载目标平台的工具链,比如要编译 A ...
- Java IO 技术
文章目录 流的概念 IO 流类体系 InputStream / OutputStream Reader / Writer 文件字节流 文件字符流 缓冲字节流 缓冲字符流 字节数组流 数据流 转换流 序 ...
- 【k8s中无法使用jstack和arthas的解决方案】1: Unable to get pid of LinuxThreads manager thread
使用alpine镜像,jstack和arthas等无法连接到pid为1的java进程 k8s容器中执行结果 / # jstack 1 1: Unable to get pid of LinuxThre ...
- [Matlab]三维曲面绘制实例
[x,y] = meshgrid(-8:0.5:8); z = sin(sqrt(x.^2+y.^2))./sqrt(x.^2+y.^2+eps); subplot(2,2,1); mesh(x,y, ...
- javaScript(js)手写原生任务定时器源码
javaScript(js)手写原生任务定时器 功能介绍 定时器顾名思义就是在某个特定的时间去执行一些任务,现代的应用程序早已不是以前的那些由简单的增删改查拼凑而成的程序了,高复杂性早已是标配,而任务 ...
- XDMCP远程连接Linux桌面
转至:https://blog.csdn.net/u014008779/article/details/90724651 XDMCP远程连接Linux桌面 1.安装epel源(不安装会找不到light ...
- python浅拷贝与深拷贝浅析
首先我们要明确,python中大多数都是浅拷贝,我们先说原因: 1.时间花费更少 2.内存更小 3.效率更高,浅拷贝只拷贝顶层数据,一般情况下比深拷贝效率高. 容器(如列表)切片是浅拷贝
- 『现学现忘』Docker基础 — 11、Docker安装的问题补充
目录 1.问题复现 2.解决冲突 3.重新安装docker-ce-selinux 4.安装Docker-ce 5.总结 通过yum安装Docker的时候,安装20版本的Docker没有出现问题,在安装 ...