ES6实用方法Object.assign、defineProperty、Symbol

文章目录

          • 1.合并对象 - Object.assign()
            • 介绍
            • 进阶
            • 注意
            • 用途
          • 2.定义对象 - Object.defineProperty(obj, prop, descriptor)
          • 3.新数据类型- Symbol
            • 定义
            • 应用

1.合并对象 - Object.assign()
介绍
  • assign方法可以将多个对象(字典),语法:Object.assign(srcObj,obj1,obj2…)
  • 对于重复的键将会被覆盖(尤其注意对象被覆盖),对于可枚举(迭代)参数(被合并对象)若不是对象则自动转换成对象合并(如string,[]),对于不可枚举参数(undefined,null)会自动跳过。
  • 若源对象(第一个参数)不可枚举则会报错
let srcObj= { a: 'a',b:'b',obj:{title:"我要被覆盖了"} },
obj1 = { b: 2 }, 
obj2 = { c: 3 },
str3 = "字符串",
num4 = 5;
obj = {newTitle:"我是新的title"} // 1.合并、重复覆盖、自动转换成对象合并、自动跳过举例:
console.log(Object.assign(srcObj, obj1 , obj2, str3, num4,obj));
// {a:'a',b:'2',c:3,0: "字",1: "符",2: "串",obj:{newTitle:"我是新的title"}}// 2.报错
Object.assign(null, obj1 , obj2 )) 
进阶
  • 当声明一个对象时,它的enumerable属性默认是true,我们也可以显示的将它设为false,所以说对象不一定都是可迭代的(眼见不一定为实),但可以通过’.'取到。
  • 若拷贝类型是Symbol 类型也会被拷贝。Symbol :和int、float等一样是数据类型,只不过他是隐藏类型,直接访问是取不到的
// 1.跳过不可迭代的对象
var unEnumer = Object.defineProperty({}, "k", {enumerable: false,value: "hello"}), // {k:"hello"}// 这样定义对象,任何值都能作为键(被视为字符串)enumer = Object.defineProperty({}, null,{enumerable: true,value: "hello"}) // {"null":"hello"}
console.log(Object.assign( { b: "c" },unEnumer ,enumer ));
// {b: "c",null: "hello"}// 2.合并Symbol 类型,既可以当键也可以当值console.log(Object.assign({ a: 'b' }, { [Symbol('c')]: 'd' },{'e':Symbol('f')}))
// {a: "b", e: Symbol(f), Symbol(c): "d"}
注意
  • 拷贝后的数据间的影响关系
  • 拷贝对象是数组则按照字典处理,数组很好理解成字典,如[‘a’,‘b’,‘c’],实际上会自动分配键,等价于{0:‘a’,1:‘b’,2:‘c’},所以处理规则同字典一样。
  • 对取值函数与赋值函数的处理
// 1.影响关系
var obj1 = { a: 1 },obj2={b:{c:1}};
var obj = Object.assign({}, obj1,obj2);
obj1.a = 2 // 不影响
obj2.b.c = 3 // 影响
console.log(obj,obj1,obj2) // {a: 1,b: {c: 3}}// 2.处理数组
console.log(Object.assign([1, 2, 3], [4, 5])) // 合并完还是数组 [4, 5, 3]
console.log(Object.assign({0:1,3:3}, [4, 5])) // 合并完是对象 {0: 4, 1: 5, 3: 3}
console.log(Object.assign( [4, 5],{0:1,3:3})) // 合并完还是数组 [1, 5, empty, 3]  empty?// 3.对取值函数处理和赋值函数处理
var obj1={get foo(){return "a"}},
obj2={foo:()=>{return "a"}}
console.log(obj1) // foo: "a",obj1.foo得到的是函数执行结果,计算属性原理?
console.log(obj2) // foo: ƒ foo(),obj2.foo得到的是函数地址
console.log(Object.assign({},{get obj1(){return "a"}},{obj2:()=>{return "a"}})) // {obj1: "a",obj2: ƒ obj2()}
用途
  • 为对象添加属性,方法
  • 克隆对象,结合新语法合并多个对象
  • 为属性指定默认值
// 1.为对象同时添加(更新)多个属性、方法
var obj = {title:"标题",dateStamp:"2020/5/22"},
newProp = {get dateStamp(){ return Date.now()},text:"新属性",fun1(){return "新方法"}};
console.log(Object.assign(obj, newProp)) // {title: "标题", dateStamp: 1590119249783, text: "新属性", fun1: ƒ}// 2.克隆
var obj = {};
var obj1 = { a: 1 };
Object.defineProperty(obj1, "k", {enumerable: true,// value: "hello",get() {console.log("获取obj1的k值");} // 当使用了getter或setter方法,不允许使用writable和value这两个属性?   });
console.log(Object.assign(obj, obj1)); // 获取obj1的k值 {a: 1, k: undefined}
console.log(Object.assign(obj, obj1).k); // 获取obj1的k值 undefined
console.log(obj1.k); // 获取obj1的k值 undefined
// 采用这种方法克隆,只能克隆原始对象自身的值,不能克隆它继承的值(什么意思?)// 3.为对象指定默认值和属性
const defaultVal = {title: "未定义",time: "0"};
var obj = {},
obj1 = {};
Object.defineProperty(obj1, "title", {enumerable: true,// value: "hello",get() {console.log("获取obj的title值");return "标题"}
});
// 注意顺序,先默认值,再配置属性,obj在最后
console.log(Object.assign({}, defaultVal,obj1,obj));
2.定义对象 - Object.defineProperty(obj, prop, descriptor)

定义属性:Object.defineProperty(obj, prop, descriptor)

属性在创建对象时就定义好了,所有特性的默认值都为true;而当使用defineProperty添加的属性,特性的默认值都为false。当使用了getter或setter方法,不允许使用writable和value这两个属性?

obj ,待修改的对象
prop ,带修改的属性名称
descriptor ,待修改属性的相关描述

configurable ,属性是否可配置。可配置的含义包括:是否可以删除属性( delete ),是否可以修改属性的 writable 、 enumerable 、 configurable 属性。 改为false之后,不能删除修改(不可逆)。默认true

enumerable ,属性是否可枚举。可枚举的含义包括:是否可以通过 for…in 遍历到,是否可以通过 Object.keys() 方法获取属性名称,是改为false,for in时不会被遍历,但使用 "."依然可访问。默认true

writable ,是否为可写,改为false,当前属性变为只读。。默认true

value ,属性的默认值。

set ,属性的重写器(暂且这么叫)。一旦属性被重新赋值,此方法被自动调用。

get ,属性的读取器(暂且这么叫)。一旦属性被访问读取,此方法被自动调用。

3.新数据类型- Symbol

Symbol是由ES6规范引入的一项新特性,它的功能类似于一种标识唯一性的ID。

定义
    let s1 = Symbol();let s2 = Symbol("another symbol"); // 传入描述信息 可以是任何可以被转型成字符串的值,如:字符串、数字、对象、数组等let s3 = Symbol();console.log(s1,s2,s3)console.log(typeof s1); // 'symbol'console.log(s1===s2,s1===s3); // false - 每个Symbol实例都是唯一的。
应用
  • 由于Symbol类型的key是不能通过Object.keys()或者for…in来枚举的,它未被包含在对象自身的属性名集合(property names)之中,所以可以把一些不需要对外操作和访问的属性使用Symbol来定义,作为对象的键(唯一);
  • 因为这个特性,当使用JSON.stringify()将对象转换成JSON字符串的时候,Symbol属性也会被排除在外
  • 定义常量不用再去想值的内容了
  • 安全性高
  • 多模块共享唯一
	const NAME = Symbol("it`s const key");const AGE = Symbol("it`s const key");let obj = {[NAME]: "默认名称"};obj[AGE] = "赋值年龄";// 访问console.log(obj[NAME],obj[AGE]) // 默认名称, 赋值年龄// 获取所有1console.log(Object.getOwnPropertySymbols(obj)); // [Symbol(it`s const key), Symbol(it`s const key)]// 获取所有2console.log(Reflect.ownKeys(obj)); // [Symbol(it`s const key), Symbol(it`s const key)]// 定义常量不用再去想值的内容了const id = Symbol(); // id - 唯一// 注册全局Symbol,实现多模块共享唯一Symbollet s1 = Symbol.for("global_symbol_1"); //注册一个全局Symbollet s2 = Symbol.for("global_symbol_1"); //获取全局Symbol,注意描述一直才行let s3 = Symbol.for("global_symbol_3");console.log(s1 === s2); // trueconsole.log(s1 === s3); // false

未完待续…

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/278707.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Enable Authentication on MongoDB

1、Connect to the server using the mongo shell mongo mongodb://localhost:270172、Create the user administrator Change to the admin database: use admindb.createUser({user: "Admin",pwd: "Admin123",roles: [ { role: "userAdminAnyDataba…

windows驱动程序编写_如何在Windows中回滚驱动程序

windows驱动程序编写Updating a driver on your PC doesn’t always work out well. Sometimes, they introduce bugs or simply don’t run as well as the version they replaced. Luckily, Windows makes it easy to roll back to a previous driver in Windows 10. Here’s…

运行tomcat报Exception in thread ContainerBackgroundProcessor[StandardEngine[Catalina]]

解决方法1: 手动设置MaxPermSize大小,如果是linux系统,修改TOMCAT_HOME/bin/catalina.sh,如果是windows系统,修改TOMCAT_HOME/bin/catalina.bat, 在“echo "Using CATALINA_BASE: $CATALINA_BASE&q…

new子类会先运行父类的构造函数

发现子类构造函数运行时,先运行了父类的构造函数。为什么呢? 原因:子类的所有构造函数中的第一行,其实都有一条隐身的语句super(); super(): 表示父类的构造函数,并会调用于参数相对应的父类中的构造函数。而super():是在调用父类…

在Windows 7中的Windows Media Player 12中快速预览歌曲

Do you ever wish you could quickly preview a song without having to play it? Today we look at a quick and easy way to do that in Windows Media Player 12. 您是否曾经希望无需播放就可以快速预览歌曲? 今天,我们探讨一种在Windows Media Play…

Vue.js中的8种组件间的通信方式;3个组件实例是前6种通信的实例,组件直接复制粘贴即可看到运行结果

文章目录一、$children / $parent二、props / $emit三、eventBus四、ref五、provide / reject六、$attrs / $listeners七、localStorage / sessionStorage八、Vuex实例以element ui为例。例子从上往下逐渐变复杂(后面例子没有删前面的无用代码,有时间重新…

不可思议的混合模式 background-blend-mode

本文接前文:不可思议的混合模式 mix-blend-mode 。由于 mix-blend-mode 这个属性的强大,很多应用场景和动效的制作不断完善和被发掘出来,遂另起一文继续介绍一些使用 mix-blend-mode 制作的酷炫动画。 CSS3 新增了一个很有意思的属性 -- mix-…

adb错误 - INSTALL_FAILED_NO_MATCHING_ABIS

#背景 换组啦,去了UC国际浏览器,被拥抱变化了。还在熟悉阶段,尝试了下adb,然后就碰到了这个INSTALL_FAILED_NO_MATCHING_ABIS的坑。。。 #解决方法 INSTALL_FAILED_NO_MATCHING_ABIS is when you are trying to install an app th…

如何更改从Outlook发送的电子邮件中的“答复”地址

If you’re sending an email on behalf of someone else, you might want people to reply to that person instead of you. Microsoft Outlook gives you the option to choose a different default Reply address to cover this situation. 如果您要代表其他人发送电子邮件&…

visio自定义图形填充

选中图形,最上面一栏:开发工具-操作(-组合-连接)-拆分

Ansible 详解2-Playbook使用

aaa转载于:https://www.cnblogs.com/Presley-lpc/p/10107491.html

Angular2官网项目 (4)--路由

行动计划 把AppComponent变成应用程序的“壳”,它只处理导航 把现在由AppComponent关注的英雄们移到一个独立的GeneralComponent中 添加路由 创建一个新的DashboardComponent组件 把仪表盘加入导航结构中 路由是导航的另一个名字。路由器就是从一个视图导航到另…

在Windows 7或Vista资源管理器中禁用缩略图预览

If you want to speed up browsing around in explorer, you might think about disabling thumbnail previews in folders. 如果要加快在资源管理器中的浏览速度,可以考虑禁用文件夹中的缩略图预览。 Note that this works in Windows 7 or Vista 请注意&#xf…

rimraf 秒删 node_modules

//第一次需要安装删除指令 npm install rimraf -g //进入对应目录后卸载node依赖库在这里插入代码片 rimraf node_modules

[Halcon] 算子学习_Calibration_Calibration Object

find_caltab find_marks_and_pose   输出参数StartPose是标定板的位姿  通过pose_to_hom_mat3d转化为Hom矩阵可得到下面的关系 3D_Point_Coord_in_Cam Hom_Mat(StartPose) * 3D_Point_Coord_in_Cam ; 转载于:https://www.cnblogs.com/LoveBuzz/p/10109202.html

mysql 表数据转储_在MySQL中仅将表结构转储到文件中

mysql 表数据转储For this exercise, we will use the mysqldump utility the same as if we were backing up the entire database. 在本练习中,我们将像备份整个数据库一样使用mysqldump实用程序。 Syntax: 句法: mysqldump -d -h localhost -u root -…

lenos快速开发脚手架

2019独角兽企业重金招聘Python工程师标准>>> lenos一款快速开发模块化脚手架, lenos(p为spring boot版本扩展名)一款快速开发模块化脚手架,采用spring bootspringSpringMvcmybatisshiroswaggerehcachequartzfreemarkerlayui技术开发&#xff…

把angular(vue等)项目部署在局域网上

在cmd中输入 ipconfig , 复制自己电脑的ipv4地址在启动项目的时候加上 --host 192.167.8.100 (本机地址)在同一局域网下(wifi)其他设备访问此地址端口号即可访问此项目

luogu P2257 YY的GCD

嘟嘟嘟 感觉这几道数论题都差不多,但这到明显是前几道的升级版。 推了一大顿只能得60分,不得不看题解。 各位看这老哥的题解吧 我就是推到他用\(T\)换掉\(kd\)之前,然后枚举\(T\)的。这个转换确实想不出来啊。 还有最后一句,最终的…

20.4. myisamchk — MyISAM Table-Maintenance Utility

先停止mysqld,在--datadir目录运行 myisamchk */*.MYI >/dev/null #检查哪些表需要修复修复用以下命令一个个修复: myisamchk -r table.MYI更省事的做法: myisamchk -r /var/lib/mysql/*.MYImyisamchk可用crontab定時最佳化tab…