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}; ...
随机推荐
- Numpy的各种下标操作
技术背景 本文所使用的Numpy版本为:Version: 1.20.3.基于Python和C++开发的Numpy一般被认为是Python中最好的Matlab替代品,其中最常见的就是各种Numpy矩阵类 ...
- MYSQL时代是否将结束
前言 已知MariaDB预计于今年下半年将以spac形式完成上市,最近也看了不少文章,发现MariaDB正在以一个迅猛的速度超越mysql,mysql 可以说是开源数据库中最具代表性的一个,甚至可以说 ...
- Android SugarORM(1)
Android Sugar ORM (1) Android Sugar ORM比我之前用过的ORM都要简单许多, 其目的是简化与Android中SQLite数据库的交互, 优点如下: 消除了编写SQL ...
- [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, ...
- pycharm创建模板
用pycharm构造作者模板 模板,就是创建一个文件时自动生成模板内容. 这里用pycharm创建作者模板,步骤如下: File-->Settings Editor-->File and ...
- 原生数据类型 nint,nuint,nfloat
原生数据类型根据操作系统32位 64位的不同,用这个关键定义的数据大小也不一样. 比如 nint 在 Xamarin.iOS 中,是 native int(原生整数)的缩写.当设备是 Apple 发布 ...
- maven-mvnd安装使用
目录 安装使用 官方介绍 使用注意 安装使用 下载 https://github.com/apache/maven-mvnd/releases/tag/0.7.1 ,mvnd-0.7.1-darwin ...
- python 2.x 版本 pip 的使用
看文档要使用 python2.7 的 pip 安装 TensorFlow, 因为有python3和pip3的缘故(pip2 和 /usr/bin/pip2看起来像是基于python2.x的,打个-V便 ...
- 错误try……except……else……finally 记录错误logging 抛出错误raise
1.错误处理机制 try--except--finally 格式: try: 可能出错的代码 except xxx1Error as e: 处理1 except xxx2Error as e: 处理2 ...
- LeetCode-040-组合总和 II
组合总和 II 题目描述:给定一个数组 candidates 和一个目标数 target ,找出 candidates 中所有可以使数字和为 target 的组合. candidates 中的每个数字 ...