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


Posted in Javascript onMay 02, 2017

一、 属性的简洁表示法

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}

总结

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

Javascript 相关文章推荐
js判断浏览器的比较全的代码
Feb 13 Javascript
javascript Zifa FormValid 0.1表单验证 代码打包下载
Jun 08 Javascript
jquery提升性能最佳实践小结
Dec 06 Javascript
jquery中ajax学习笔记4
Oct 16 Javascript
js抽奖实现随机抽奖代码效果
Dec 02 Javascript
实例说明为什么不要行内使用javascript
Apr 18 Javascript
iframe中子父类窗口调用JS的方法及注意事项
Aug 25 Javascript
JQuery核心函数是什么及使用方法介绍
May 03 Javascript
Bootstrap 填充Json数据的实例代码
Jan 11 Javascript
移动端触屏幻灯片图片切换插件idangerous swiper.js
Apr 10 Javascript
React根据宽度自适应高度的示例代码
Oct 11 Javascript
vue路由传参页面刷新参数丢失问题解决方案
Oct 08 Javascript
Javascript ES6中数据类型Symbol的使用详解
May 02 #Javascript
Bootstrap实现基于carousel.js框架的轮播图效果
May 02 #Javascript
Vue2.x中的父子组件相互通信的实现方法
May 02 #Javascript
详解webpack 配合babel 将es6转成es5 超简单实例
May 02 #Javascript
jQuery树插件zTree使用方法详解
May 02 #jQuery
JavaScript数据结构学习之数组、栈与队列
May 02 #Javascript
js-FCC算法-No repeats please字符串的全排列(详解)
May 02 #Javascript
You might like
php中选择什么接口(mysql、mysqli)访问mysql
2013/02/06 PHP
探讨PHP中OO之静态关键字以及类常量的详解
2013/06/07 PHP
Jquery AutoComplete自动完成 的使用方法实例
2010/03/19 Javascript
JS定时关闭窗口的实例
2013/05/22 Javascript
javascript中数组的多种定义方法和常用函数简介
2014/05/09 Javascript
JavaScript通过代码调用Flash显示的方法
2016/02/02 Javascript
前端js文件合并的三种方式推荐
2016/05/19 Javascript
jquery实现的回旋滚动效果完整实例【附demo源码下载】
2016/09/20 Javascript
Angular表单验证实例详解
2016/10/20 Javascript
JS Select下拉框(支持输入模糊查询)
2017/02/04 Javascript
解决vue-router中的query动态传参问题
2018/03/20 Javascript
[18:32]DOTA2 HEROS教学视频教你分分钟做大人-谜团
2014/06/12 DOTA
使用python实现strcmp函数功能示例
2014/03/25 Python
Linux环境下MySQL-python安装过程分享
2015/02/02 Python
Python3实现将文件归档到zip文件及从zip文件中读取数据的方法
2015/05/22 Python
Python 中 list 的各项操作技巧
2017/04/13 Python
Python中拆分字符串的操作方法
2019/07/23 Python
在Pytorch中计算卷积方法的区别详解(conv2d的区别)
2020/01/03 Python
Python+OpenCV实现旋转文本校正方式
2020/01/09 Python
基于keras 模型、结构、权重保存的实现
2020/01/24 Python
Pytorch 使用不同版本的cuda的方法步骤
2020/04/02 Python
python3列表删除大量重复元素remove()方法的问题详解
2021/01/04 Python
CSS3 实现弹跳的小球动画
2020/10/26 HTML / CSS
Html5实现如何在两个div元素之间拖放图像
2013/03/29 HTML / CSS
来自圣地亚哥的实惠太阳镜:Knockaround
2018/08/27 全球购物
掌上明珠Java程序员面试总结
2016/02/23 面试题
中专生学习生活的自我评价分享
2013/10/27 职场文书
甜品蛋糕店创业计划书范文
2014/02/06 职场文书
班级德育工作实施方案
2014/02/21 职场文书
教师中国梦演讲稿
2014/04/23 职场文书
我的中国梦演讲稿600字
2014/08/19 职场文书
股权转让协议书
2014/12/07 职场文书
劳动保障事务所个人工作总结
2015/08/12 职场文书
如何用JS实现简单的数据监听
2021/05/06 Javascript
python实现A*寻路算法
2021/06/13 Python
Jedis操作Redis实现模拟验证码发送功能
2021/09/25 Redis