全网整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:400-708-3566

ES6学习教程之对象的扩展详解

一、 属性的简洁表示法

ES6允许直接写入变量和函数作为对象的属性和方法。意思就是说允许在对象中只写属性名,不用写属性值。这时,属性值等于属性名称所代表的变量。下面分别举一个例子来说明:

属性:

function getPoint(){
 var x = 1 ;
 var y = 2;
 return {x,y}
}

等同于

fucntion getPoint(x,y){
 var x = 1 ;
 var y = 2;
 return {x:x,y:y}
}

测试:

getPoint();//{x:1,y:10}

函数:

var obj = {
 fun(){
 return "simply function";
 }
};

等同于

var obj = {
 fun: function(){
 return "simply function";
 }
}

测试:

obj.fun();//simply function

二、属性名表达式

ES6里允许定义对象的时候用表达式作为对象的属性名或者方法名,即把表达式放在方括号里。

属性

let propKey = 'foo';

let obj = {
 [propKey] : true,
 ['a'+'bc'] : 123
}

测试:

obj.foo; //true
obj.abc ; //123

方法

let obj = {
 ['h'+'ello'](){
 return "hello world";
 }
}

测试:

obj.hello();//hello world

注意:

属性名表达式与简介表达式不能同时使用。

//错误的
var foo = 'bar';
var bar = 'abc';
var baz = { [foo] };

//正确
var foo = 'bar';
var baz = { [foo] : 'abc'}

三、方法的name属性

这个比较容易理解,直接阐述文字。

函数的name属性返回函数名。对象方法也是函数,因此也有函数名。

  • 一般情况方法的name属性返回函数名
  • 如果是取值函数会在函数名前加”get”
  • 如果是存值函数会在函数名前加”set”
  • 如果bind方法创建的函数会在函数名前加”bound”
  • 如果是Function构造函数创建的函数,会在函数名前加”anonymous”
  • 如果对象的方法是一个Symbol值,那么name属性返回的是这个Symbol值的描述*

四、Oject.is()

Object.is()用来比较两个值yan'ge严格相等。与严格比价运算符(===)的行为基本一致。不同之处只有两个:一是 +0 不等于 -0 ,二是NaN等于自身

+0 === -0 //true
NaN === NaN //false

Object.is(+0,-0);//false
Object.is(NaN,NaN);//true

五、Oject.assign()

Object.assign()方法是用于将源对象的可枚举属性复制到目标对象。它至少需要两个参数,第一是目标对象,后面的全是源对象。

注意:

  • 每个参数必须是对象,否则会报TypeError错误。
  • 如果目标对象与源对象有同名属性,或多个源对象有同名的属性,则后面的属性会覆盖前面的属性
  • Object.assign只复制自身属性,不可枚举的属性和继承属性不会被复制
  • 属性名为Symbol值的属性,也会被Object。assign复制。

demo:

var target = {a:1,b:2};

var source1 = {a:2,c:5};
var source2 = {a:3,d:6};

Object.assign(target,source1,source2);
target//{a:3,b:2,c:5,d:6}

Object.assign可用于处理数组,但是会将其视为对象

Object.assign([1,2,3],[4,5]);
//[4,5,3]

其他用处

  • 为对象添加属性
  • 为对象添加方法
  • 克隆对象
  • 合并多个对象
  • 为属性指定默认值

六、属性的可枚举性

对象的没个属性都有一个描述对象(Descriptor),可通过Object.getOwnPropertyDescriptor(object,prop) ,object表示对象,prop表示对象的里的一个属性,用的时候需要加上引号。描述对象里面有个enumerable(可枚举性)属性,来描述该属性是否可枚举。

ES5中会忽略enumerable为false的属性

  • for…in循环:只遍历对象自身和继承的可枚举属性(包含继承)
  • Object.keys() :返回对象自身的所有可枚举属性的键名
  • Json.stringify() :只串行化对象自身的可枚举属性

ES6新增的操作

  • Object.assign() : 只复制对象自身的可枚举属性
  • Reflect.enumerate() : 返回所有for…in循环会遍历的属性(包含继承)

7. 属性的遍历

ES6中一共有6种方法可以遍历对象的属性。

  • for…in循环遍历对象自身和继承的可枚举的属性(不含Symbol属性)
  • Object.keys(obj)返回一个数组,包括对象自身的(不含继承的)所有可枚举属性(不含Symbol属性,但是包含不可枚举属性)
  • Object.getOwnPropertySymbols(obj)返回一个数组,包含对象自身的所有Symbol属性。
  • Relect.ownKeys(obj)返回一个数组,包含对象的所有属性,包含属性名是Symbol或者字符串,也不管是否可枚举。
  • Reflect.enumerate(obj)返回一个Iterator对象,遍历对象自身的和继承的所有可枚举属性(不含Symbol),与for…in相同

以上6种方法遍历对象的属性遵守同样的属性遍历次序规则

  • 首先遍历所有属性名为数值的属性,按照数字排序
  • 其次遍历所有属性名为字符串的属性,按照生成时间排序
  • 最后遍历所有属性名为Symbol值的属性,按照生成时间排序
Reflect.ownkeys({[Symbol()]:0,b:0,10:0,2:0,a:0})
//[‘2','10','b','a',Symbol()]

八、 proto 属性,Object.setPrototypeOf(),Object.getPrototypeOf()

proto 属性

(前后应该有两个下划线,这里没显示出来)。用来读取或者设置当前对象的prototype对象。但是一般不直接对这个属性进行操作,而是通过Object.setProtortypeOf() (写操作)、Object.getPrototypeOf() (读操作)或者Object.create() (生成操作)代替。

Object.setProtortypeOf()

let proto = {};
let obj = { x : 10};
Object.setProtortypeOf(obj,proto);

proto.y = 20;
proto.z = 40;

obj.x //10
obj.y //20
obj.z //40

Object.getProtortypeOf()

function Rectangle(){}

var rec = new Rectangle();

Object.getPrototypeOf(rec) === Rectangele.prototype // true

9. 对象的扩展运算符

ES7中提案,将rest参数/扩展运算符(…)引入对象。

Rest参数

Rest参数用于从一个对象取值,相当于将所有可遍历尚未被读取的属性,分配到制定的对象上。所有的键及其值都会复制到新对象上。需要注意的是rest参数的复制是浅复制,并且也不会复制继承自原型对象的属性。

简单的demo

 let {x,y,...k} = {x:2, y:3,z:4,a:5};
x //2
y //3
k //{z:4,a:5}

扩展运算符

扩展运算符用于取出参数对象的所有可遍历属性,复制到当前对象中。

let z = {a:3 ,b:4};
let n = {...z};
n //{a:3,b:4}

扩展运算符还可以合并两个对象。

let a = { c:5,d:6 };
let b = { e:7,f:8 };
let ab = {...a,...b};
ab //{c:5,d:6,e:7,f:7}

扩展运算符还可以自定义属性,会在新对象中覆盖掉原有参数。

let a = {x:1,y:2};
let aWithOverides = {...a,x:3,y:4};
aWithOverides //{x:4,y:4}

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对的支持。


# es6  # 对象扩展  # 扩展  # 函数的扩展  # ES6数组与对象的解构赋值详解  # ES6新特性六:promise对象实例详解  # ES6中定义类和对象的方法示例  # ES6 迭代器与可迭代对象的实现  # ES6知识点整理之对象解构赋值应用示例  # ES6 Promise对象概念与用法分析  # ES6学习笔记之字符串、数组、对象、函数新增知识点实例分析  # ES6学习教程之对象字面量详解  # ES6 对象的新功能与解构赋值介绍  # ES6 Promise对象的应用实例分析  # JS面向对象编程——ES6 中class的继承用法详解  # ES6对象操作实例详解  # 遍历  # 会在  # 运算符  # 不含  # 的是  # 还可以  # 多个  # 象中  # 种方法  # 会报  # 是一个  # 都有  # 也有  # 放在  # 也会  # 有个  # 一是  # 下划线  # 将其  # 自定义 


相关文章: 网站制作网站,深圳做网站哪家比较好?  高防服务器如何保障网站安全无虞?  文字头像制作网站推荐软件,醒图能自动配文字吗?  网站设计制作书签怎么做,怎样将网页添加到书签/主页书签/桌面?  建站主机助手选型指南:2025年热门推荐与高效部署技巧  太原网站制作公司有哪些,网约车营运证查询官网?  建站主机CVM配置优化、SEO策略与性能提升指南  长春网站建设制作公司,长春的网络公司怎么样主要是能做网站的?  如何正确选择百度移动适配建站域名?  宁波免费建站如何选择可靠模板与平台?  如何在Windows虚拟主机上快速搭建网站?    如何制作新型网站程序文件,新型止水鱼鳞网要拆除吗?  建站之星如何保障用户数据免受黑客入侵?  专业网站建设制作报价,网页设计制作要考什么证?  沈阳制作网站公司排名,沈阳装饰协会官方网站?  设计网站制作公司有哪些,制作网页教程?  如何在云指建站中生成FTP站点?  如何用y主机助手快速搭建网站?  定制建站是什么?如何实现个性化需求?  如何在景安云服务器上绑定域名并配置虚拟主机?  黑客如何利用漏洞与弱口令入侵网站服务器?  如何零基础在云服务器搭建WordPress站点?  洛阳网站制作公司有哪些,洛阳的招聘网站都有哪些?  义乌企业网站制作公司,请问义乌比较好的批发小商品的网站是什么?  制作企业网站建设方案,怎样建设一个公司网站?  如何在七牛云存储上搭建网站并设置自定义域名?  青岛网站设计制作公司,查询青岛招聘信息的网站有哪些?  如何用VPS主机快速搭建个人网站?  建站之星后台管理系统如何操作?  专业型网站制作公司有哪些,我设计专业的,谁给推荐几个设计师兼职类的网站?  微信h5制作网站有哪些,免费微信H5页面制作工具?  建站之星好吗?新手能否轻松上手建站?  如何通过VPS建站实现广告与增值服务盈利?  专业商城网站制作公司有哪些,pi商城官网是哪个?  免费的流程图制作网站有哪些,2025年教师初级职称申报网上流程?  中山网站制作网页,中山新生登记系统登记流程?  网站制作的步骤包括,正确网址格式怎么写?  企业宣传片制作网站有哪些,传媒公司怎么找企业宣传片项目?  建站ABC备案流程中有哪些关键注意事项?  建站之星代理如何优化在线客服效率?  济南网站建设制作公司,室内设计网站一般都有哪些功能?  手机钓鱼网站怎么制作视频,怎样拦截钓鱼网站。怎么办?  外贸公司网站制作哪家好,maersk船公司官网?  c# 在高并发下使用反射发射(Reflection.Emit)的性能  如何快速搭建安全的FTP站点?  企业微网站怎么做,公司网站和公众号有什么区别?  专业的网站制作设计是什么,如何制作一个企业网站,建设网站的基本步骤有哪些?  网站视频怎么制作,哪个网站可以免费收看好莱坞经典大片?  如何获取上海专业网站定制建站电话? 

您的项目需求

*请认真填写需求信息,我们会在24小时内与您取得联系。