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控制代码暂停的实现方法分享
Oct 11 Javascript
jquery聚焦文本框与扩展文本框聚焦方法
Oct 12 Javascript
JavaScript性能优化之小知识总结
Nov 20 Javascript
jQuery实现立体式数字滚动条增加效果
Dec 21 Javascript
基于layer.js实现收货地址弹框选择然后返回相应的地址信息
May 26 Javascript
如何用webpack4带你实现一个vue的打包的项目
Jun 20 Javascript
Vue 项目分环境打包的方法示例
Aug 03 Javascript
Electron中实现大文件上传和断点续传功能
Oct 28 Javascript
jQuery实现为table表格动态添加或删除tr功能示例
Feb 19 jQuery
JS使用cookie保存用户登录信息操作示例
May 30 Javascript
vue中监听路由参数的变化及方法
Dec 06 Javascript
在Vue 中获取下拉框的文本及选项值操作
Aug 13 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
德劲1102收音机的打理维修案例
2021/03/02 无线电
PHP array_multisort() 函数的深入解析
2013/06/20 PHP
jquery multiSelect 多选下拉框
2010/07/09 Javascript
最短的IE判断代码
2011/03/13 Javascript
两种常用的javascript数组去重方法思路及代码
2013/03/26 Javascript
谈一谈jQuery核心架构设计
2016/03/28 Javascript
AngularJS指令与指令之间的交互功能示例
2016/12/14 Javascript
详解ES6之async+await 同步/异步方案
2017/09/19 Javascript
js和jQuery以及easyui实现对下拉框的指定赋值方法
2018/01/23 jQuery
详解create-react-app 自定义 eslint 配置
2018/06/07 Javascript
ng-zorro-antd 入门初体验
2018/12/03 Javascript
vue生命周期的探索
2019/04/03 Javascript
react-native滑动吸顶效果的实现过程
2019/06/03 Javascript
electron-vue开发环境内存泄漏问题汇总
2019/10/10 Javascript
微信小程序实现点击图片放大预览
2019/10/21 Javascript
json.stringify()与json.parse()的区别以及用处
2021/01/25 Javascript
Python遍历文件夹和读写文件的实现代码
2016/08/28 Python
Python selenium 三种等待方式解读
2016/09/15 Python
Python中常用的8种字符串操作方法
2019/05/06 Python
django删除表重建的实现方法
2019/08/28 Python
Python使用正则实现计算字符串算式
2019/12/29 Python
Python文本文件的合并操作方法代码实例
2020/03/31 Python
python 使用elasticsearch 实现翻页的三种方式
2020/07/31 Python
HTML5 textarea高度自适应的两种方案
2020/04/08 HTML / CSS
倩碧英国官网:Clinique英国
2018/08/10 全球购物
如何写一份好的自荐信
2014/01/02 职场文书
户外用品商店创业计划书
2014/01/29 职场文书
学生周末长期请假条
2014/02/15 职场文书
质检部经理岗位职责
2014/02/19 职场文书
行政专员岗位职责说明书
2014/07/30 职场文书
机关领导查摆四风思想汇报
2014/09/13 职场文书
薪资证明范本
2015/06/19 职场文书
歌咏比赛主持词
2015/06/29 职场文书
2016三八妇女节慰问信
2015/11/30 职场文书
pytorch中的model.eval()和BN层的使用
2021/05/22 Python
python自动化八大定位元素讲解
2021/07/09 Python