• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号
您的位置:首页 > 程序设计 >JavaScript > ES6学习教程之对象的扩展详解

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

作者: 字体:[增加 减小] 来源:互联网 时间:2017-05-11

通过本文主要向大家介绍了ES6学习教程之对象的扩展详解等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com

一、 属性的简洁表示法

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

属性:

function getPoint(){
 var x = 1 ;
 var y = 2;
 return {x,y}
}
</div>

等同于

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

测试:

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

函数:

var obj = {
 fun(){
 return "simply function";
 }
};
</div>

等同于

var obj = {
 fun: function(){
 return "simply function";
 }
}
</div>

测试:

obj.fun();//simply function
</div>

二、属性名表达式

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

属性

let propKey = 'foo';

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

测试:

obj.foo; //true
obj.abc ; //123
</div>

方法

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

测试:

obj.hello();//hello world
</div>

注意:

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

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

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

三、方法的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
</div>

五、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}
</div>

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

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

其他用处

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

六、属性的可枚举性

对象的没个属性都有一个描述对象(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()]
</div>

八、 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
</div>

Object.getProtortypeOf()

function Rectangle(){}

var rec = new Rectangle();

Object.getPrototypeOf(rec) === Rectangele.prototype // true
</div>

9. 对象的扩展运算符

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

Rest参数

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

简单的demo

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



 
分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

相关文章

  • 2017-05-11javascript深拷贝和浅拷贝详解
  • 2017-05-11js常用DOM方法详解
  • 2017-05-11微信小程序实现图片自适应(支持多图)
  • 2017-08-26Javascript map如何实现
  • 2017-05-11详解Angularjs在控制器(controller.js)中使用过滤器($filter)格式化日期/时间实例
  • 2017-05-11原生Javascript插件开发实践
  • 2017-05-11利用Vue.js框架实现火车票查询系统(附源码)
  • 2017-05-11微信小程序实战之仿android fragment可滑动底部导航栏(4)
  • 2017-05-11JavaScript获取URL参数的方法之一
  • 2017-05-11令按钮悬浮在(手机)页面底部的实现方法

文章分类

  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号

最近更新的内容

    • 用file标签实现多图文件上传预览
    • JS操作input标签属性checkbox全选的实现代码
    • JavaScript纯色二维码变成彩色二维码
    • d3.js入门教程之数据绑定详解
    • 微信端开发--登录小程序步骤
    • 通过npm引用的vue组件使用详解
    • canvas仿iwatch时钟效果
    • 利用VUE框架,实现列表分页功能示例代码
    • js实现自动轮换选项卡
    • 使用nodejs爬取前程无忧前端技能排行

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有