ES6学习教程之对象的扩展详解
一、 属性的简洁表示法
ES6允许直接写入变量和函数作为对象的属性和方法。意思就是说允许在对象中只写属性名，不用写属性值。这时，属性值等于属性名称所代表的变量。下面分别举一个例子来说明：
属性：
functiongetPoint(){
varx=1;
vary=2;
return{x,y}
}
等同于
fucntiongetPoint(x,y){
varx=1;
vary=2;
return{x:x,y:y}
}
测试：
getPoint();//{x:1,y:10}
函数：
varobj={
fun(){
return"simplyfunction";
}
};
等同于
varobj={
fun:function(){
return"simplyfunction";
}
}
测试：
obj.fun();//simplyfunction
二、属性名表达式
ES6里允许定义对象的时候用表达式作为对象的属性名或者方法名，即把表达式放在方括号里。
属性
letpropKey='foo';
letobj={
[propKey]:true,
['a'+'bc']:123
}
测试：
obj.foo;//true obj.abc;//123
方法
letobj={
['h'+'ello'](){
return"helloworld";
}
}
测试：
obj.hello();//helloworld
注意：
属性名表达式与简介表达式不能同时使用。
//错误的
varfoo='bar';
varbar='abc';
varbaz={[foo]};
//正确
varfoo='bar';
varbaz={[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：
vartarget={a:1,b:2};
varsource1={a:2,c:5};
varsource2={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()
letproto={};
letobj={x:10};
Object.setProtortypeOf(obj,proto);
proto.y=20;
proto.z=40;
obj.x//10
obj.y//20
obj.z//40
Object.getProtortypeOf()
functionRectangle(){}
varrec=newRectangle();
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}
扩展运算符
扩展运算符用于取出参数对象的所有可遍历属性，复制到当前对象中。
letz={a:3,b:4};
letn={...z};
n//{a:3,b:4}
扩展运算符还可以合并两个对象。
leta={c:5,d:6};
letb={e:7,f:8};
letab={...a,...b};
ab//{c:5,d:6,e:7,f:7}
扩展运算符还可以自定义属性，会在新对象中覆盖掉原有参数。
leta={x:1,y:2};
letaWithOverides={...a,x:3,y:4};
aWithOverides//{x:4,y:4}
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对毛票票的支持。