ES6学习教程之对象的扩展详解
一、 属性的简洁表示法
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}
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对的支持。
上一篇: 如何统计全天各个时间段产品销量情况(sqlserver)
下一篇: SQL编程之子查询及注意事项