属性的简洁表示法

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中对象新增的方法的更多相关文章

  1. ES6中数组新增的方法-超级好用

    Array.find((item,indexArr,arr)=>{}) 掌握 找出第一个符合条件的数组成员. 它的参数是一个回调函数,对所有数组成员依次执行该回调函数. 直到找出第一个返回值为t ...

  2. es6的对象新增的方法

    Object.is 可以看成是=== 的加强版, 其修正了 === 的 NaN 不等于自身, 以及 +0 等于 -0 另外说下, == 会自动转型, 但是 Object.is 也是如果类型不一致也是不 ...

  3. ES6中对象的扩展

    ES6不仅为字符串.数值和数组带来了扩展,也为对象带来了很多新特性.这一节,我们来一起学习一下对象的扩展. 对象的传统表示法 我们回顾一下,对象的传统表示法: let person = { " ...

  4. 在ES5实现ES6中的Object.is方法

    ES6中对象的扩展里面添加了一个Object.is方法,用于比较两个值是否严格相等.内部计算与 === 行为基本一致.那么我们怎么在不支持这个方法的ES5中实现呢? 首先我们需要搞清楚两点,1:Obj ...

  5. ES6数组对象新增方法

    1. Array.from() Array.from方法用于将两类对象转为真正的数组:类数组的对象( array-like object )和可遍历( iterable )的对象(包括 ES6 新增的 ...

  6. ES6中函数新增的方式方法

    ---恢复内容开始---   绪 言 ES6 大家对JavaScript中的函数都不陌生.今天我就为大家带来ES6中关于函数的一些扩展方式和方法. 1.1函数形参的默认值 1.1.1基本用法 ES6 ...

  7. ES6中数组的新方法

    数组的扩展 1.1扩展运算符 1.1.1:... 扩展运算符(spread)是三个点(...).它好比 rest 参数的逆运算,将一个数组转为用逗号分隔的参数序列. <body> < ...

  8. ES5中数组新增的方法说明

    一.前言-索引 ES5中新增的不少东西,了解之对我们写JavaScript会有不少帮助,比如数组这块,我们可能就不需要去有板有眼地for循环了. ES5中新增了写数组方法,如forEach (js v ...

  9. ES6中对象

    ES6允许把声明的变量直接赋值给对象,我们看下面的例子. let name="Zachary"; let skill= 'web'; let obj= {name,skill}; ...

随机推荐

  1. CentOS8系统上Zookeeper安装启动

    下载Zookeeper安装包,下载地址为:https://zookeeper.apache.org/releases.html.注意选择bin的gz包,否则安装不成功,提示找不到相应的类. 一.单机模 ...

  2. JVM学习——字节码(学习过程)

    JVM--字节码 为什么要学字节码 字节码文件,有什么用? JVM虚拟机的特点:一处编译,多处运行. 多处运行,靠的是.class 字节码文件. JVM本身,并不是跨平台的.Java之所以跨平台,是因 ...

  3. Devops 开发运维高级篇之容器管理

    Devops 开发运维高级篇之容器管理 安装docker Dockerfile镜像脚本入门制作 Harbor镜像仓库安装及使用 不过多解释docker直接秀基操 安装docker:(jenkins服务 ...

  4. rinetd基于内网TCP端口转发

    在Linux系统中大多数情况选择用iptables来实现端口转发,iptables虽然强大,但配置不便,而且新手容易出错.在此分享另一个TCP/UDP端口转发工具rinetd,rinetd体积小巧,配 ...

  5. java 人机猜拳 游戏

    人机猜拳-游戏 掌握类和对象的使用,掌握方法的定义和返回值,掌握封装的运用 定义一个电脑类:Computer.java 点击查看[Computer.java]代码 /** * @Title: 电脑类 ...

  6. 激活visio pro 2019

    内容来源:http://www.yishimei.cn/catalog.asp?page=2 1.必须彻底关闭windows defender 防火墙 :光笔防火墙的教程:https://www.cn ...

  7. $_SERVER["QUERY_STRING"],$_SERVER["REQUEST_URI"],$_SERVER["SCRIPT_NAME"] 和$_SERVER["PHP_SELF"]

    $_SERVER["QUERY_STRING"],$_SERVER["REQUEST_URI"],$_SERVER["SCRIPT_NAME" ...

  8. VMware:用Ubuntu创建一个新的虚拟机

    1)进入VMware,选择创建新虚拟机 2)安装ISO文件 3)各种名,密码 这里有可能出错: 原因是你输入的用户名和系统用户名重复了,修改一下就可以了 4)安装位置:这里可以是任意盘,但至少要有4G ...

  9. C++ 删除一个字符串中的指定字符

    Q:一个数字是以xxx,yyy,zzz的字符串形式存储的,将逗号消去并转化为整数输出 方法一:char数组,即定义时s1定义为 char s1[20]的形式: //删除输入字符串中的逗号,并构建新串 ...

  10. Python推导式

    Python推导式 推导式:是Python中提供的一个非常方便的功能,可以通过一行代码实现创建 list.dict.tuple.set的同时初始化一些值. 1.列表推到式 # -*- coding: ...