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 相关文章推荐
怎样在JavaScript里写一个swing把数据插入数据库
Dec 10 Javascript
addEventListener 的用法示例介绍
May 07 Javascript
js函数参数设置默认值的一种变通实现方法
May 26 Javascript
JS生成某个范围的随机数【四种情况详解】
Apr 20 Javascript
Bootstrap modal使用及点击外部不消失的解决方法
Dec 13 Javascript
利用Query+bootstrap和js两种方式实现日期选择器
Jan 10 Javascript
Bootstrap模态框使用详解
Feb 15 Javascript
微信小程序page的生命周期和音频播放及监听实例详解
Apr 07 Javascript
xmlplus组件设计系列之路由(ViewStack)(7)
May 02 Javascript
Mac中安装nvm的教程分享
Dec 11 Javascript
解决Vue.js 2.0 有时双向绑定img src属性失败的问题
Mar 14 Javascript
微信小程序实现原生步骤条
Jul 25 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
浅析THINKPHP的addAll支持的最大数据量
2015/02/03 PHP
PHP生成word文档的三种实现方式
2016/11/14 PHP
php实现的错误处理封装类实例
2017/06/20 PHP
phpstorm 正则匹配删除空行、注释行(替换注释行为空行)
2018/01/21 PHP
Laravel框架控制器的middleware中间件用法分析
2019/09/30 PHP
基于jQuery的消息提示插件之旅 DivAlert(三)
2010/04/01 Javascript
Prototype源码浅析 String部分(三)之HTML字符串处理
2012/01/15 Javascript
解析URI与URL之间的区别与联系
2013/11/22 Javascript
讲解JavaScript中for...in语句的使用方法
2015/06/03 Javascript
使用coffeescript编写node.js项目的方法汇总
2015/08/05 Javascript
JavaScript调用传递变量参数的相关问题及解决办法
2015/11/01 Javascript
谈谈基于iframe、FormData、FileReader三种无刷新上传文件的方法
2015/12/03 Javascript
Javascript数组中push方法用法分析
2016/10/31 Javascript
JS使用cookie实现只出现一次的广告代码效果
2017/04/22 Javascript
详解10分钟学会vue滚动行为
2017/09/21 Javascript
解决vue中无法动态修改jqgrid组件 url地址的问题
2018/03/01 Javascript
vue中Element-ui 输入银行账号每四位加一个空格的实现代码
2018/09/14 Javascript
这应该是最详细的响应式系统讲解了
2019/07/22 Javascript
浅谈vue 多个变量同时赋相同值互相影响
2020/08/05 Javascript
[02:22]完美世界DOTA2联赛PWL S3 集锦第一期
2020/12/15 DOTA
[01:11]steam端dota2实名认证操作流程视频
2021/03/11 DOTA
批处理与python代码混合编程的方法
2016/05/19 Python
Pyhton中单行和多行注释的使用方法及规范
2016/10/11 Python
python+opencv 读取文件夹下的所有图像并批量保存ROI的方法
2019/01/10 Python
PyTorch实现AlexNet示例
2020/01/14 Python
python环境搭建和pycharm的安装配置及汉化详细教程(零基础小白版)
2020/08/19 Python
基于Python组装jmx并调用JMeter实现压力测试
2020/11/03 Python
html5需遵循的6个设计原则
2016/04/27 HTML / CSS
超市开店计划书
2014/04/26 职场文书
医院院务公开实施方案
2014/05/03 职场文书
文明礼仪演讲稿
2014/05/12 职场文书
五一活动标语
2014/06/30 职场文书
家庭教育的心得体会
2014/09/01 职场文书
党支部先进事迹材料
2014/12/24 职场文书
中秋节晚会开场白
2015/05/29 职场文书
天堂的孩子观后感
2015/06/11 职场文书