时间:2021-05-28
一、属性的简洁表示法
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; //trueobj.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属性返回函数名。对象方法也是函数,因此也有函数名。
四、Oject.is()
Object.is()用来比较两个值yan'ge严格相等。与严格比价运算符(===)的行为基本一致。不同之处只有两个:一是 +0 不等于 -0 ,二是NaN等于自身
+0 === -0 //trueNaN === NaN //falseObject.is(+0,-0);//falseObject.is(NaN,NaN);//true五、Oject.assign()
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的属性
ES6新增的操作
7. 属性的遍历
ES6中一共有6种方法可以遍历对象的属性。
以上6种方法遍历对象的属性遵守同样的属性遍历次序规则
八、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 //10obj.y //20obj.z //40Object.getProtortypeOf()
function Rectangle(){}var rec = new Rectangle();Object.getPrototypeOf(rec) === Rectangele.prototype // true9. 对象的扩展运算符
ES7中提案,将rest参数/扩展运算符(…)引入对象。
Rest参数
Rest参数用于从一个对象取值,相当于将所有可遍历尚未被读取的属性,分配到制定的对象上。所有的键及其值都会复制到新对象上。需要注意的是rest参数的复制是浅复制,并且也不会复制继承自原型对象的属性。
简单的demo
let {x,y,...k} = {x:2, y:3,z:4,a:5};x //2y //3k //{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}总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对的支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
本节我们来学习ES6中字符串类型的扩展,包括一些字符串对象的新增方法的使用等。字符的Unicode表示法ES6加强了对Unicode的支持,JavaScript
ES6通过字面量语法扩展、新增方法、改进原型等多种方式加强对象的使用,并通过解构简化对象的数据提取过程。一、字面量语法扩展在ES6模式下使用字面量创建对象更加简
本文实例讲述了ES6对象操作。分享给大家供大家参考,具体如下:1.对象赋值es5中的对象赋值方式如下:letname="小明";letskill='es6开发'
前言本文主要给大家介绍了关于ES6中rest参数与扩展运算符的相关内容,rest参数和扩展运算符都是ES6新增的特性。rest参数的形式为:...变量名;扩展运
其实es6的面向对象很多原理和机制还是ES5的,只不过把语法改成类似php和java老牌后端语言中的面向对象语法.一、用es6封装一个基本的类classPers