ES6 --- 对象扩展
2018-03-27 06:37
323 查看
对象扩展主要从四个方面开展:
1.简洁表示法
2.属性表达式
3.扩展运算符
4.Object新增方法
在es5中,我们去定义对象,多使用键值对的方式来定义,在es6中,我们直接使用变量名称来定义就可以了。是不是比之前的写法简单很多,我们看看打印的结果,两个对象是一样的。只是写法上不同而已,其他的都是一样的。
下面,我们来看看方法是怎么定义的:
在es6中直接写方法,可以不用写function。我们看一下结果,也是一样的。
在es5中,属性值K是一个估定值。在es6中,K值是可以是一个变量的,使用[]包裹的变量。我们看到打印的结果,我们发现K值是b,所以在现实中,我们使用 [a] ,来实现变量的依赖。
Object.is() , 判断两个值是否相等,这个与 === 的功能是一样的。我们在使用字符串来判断的时候,都是true,再使用引用类型来测试时,两个数组的值不相等,打印的结果也是一样的。
Object.assign 可以复制对象,但是这个是浅拷贝。在使用时,Object.assign只会拷贝本身的属性,不可枚举的属性是不会拷贝的,原形链上的属性也不会拷贝。
Object.entries() 与数组的entries是差不多的,都是同时得到key值和value值,如过有想了解数组的es6扩展,请点这里
所以这里的一些方法我们就不具体说了,跟数组的扩展是类似的。
对象的扩展运算符和数组的扩展运算符也是类似的,但是现在对对象的扩展运算符的支持还不是很友好。得到的结果中我们可以看到,…c 这样的方式,会将右边对象中没有被左边获取的值都包括进去。
1.简洁表示法
2.属性表达式
3.扩展运算符
4.Object新增方法
一、简洁表示法
{ // 简洁表示法 let o =1; let k=2; let es5= { o:o, k:k }; let es6={ o, k }; console.log(es5,es6); //Object {k:2,0:1} //Object {k:2,0:1} }
在es5中,我们去定义对象,多使用键值对的方式来定义,在es6中,我们直接使用变量名称来定义就可以了。是不是比之前的写法简单很多,我们看看打印的结果,两个对象是一样的。只是写法上不同而已,其他的都是一样的。
下面,我们来看看方法是怎么定义的:
{ // 简洁表示法 let es5_method = { hello: function(){ console.log('hello') } }; let es6_method={ hello(){ console.log('hello') } }; console.log(es5_method.hello(), es6_method.hello());// hello hello }
在es6中直接写方法,可以不用写function。我们看一下结果,也是一样的。
二、属性表达式
{ // 属性表达式 let a='b'; let es5_obj = { a: 'c' }; let es6_obj={ [a]: 'c' }; console.log(es5_obj,es6_obj); // {a: 'c'} {b:'c'} }
在es5中,属性值K是一个估定值。在es6中,K值是可以是一个变量的,使用[]包裹的变量。我们看到打印的结果,我们发现K值是b,所以在现实中,我们使用 [a] ,来实现变量的依赖。
三、新增API
{ // 新增api console.log('字符串', Object.is('abc', 'abc'), 'abc'==='abc');// true true console.log('数组', Object.is([],[]),[]===[]); // false false }
Object.is() , 判断两个值是否相等,这个与 === 的功能是一样的。我们在使用字符串来判断的时候,都是true,再使用引用类型来测试时,两个数组的值不相等,打印的结果也是一样的。
{ // 新增api console.log('拷贝',Object.assign({a:'a'}, {b:'b'})); // {a: "a", b: "b"} }
Object.assign 可以复制对象,但是这个是浅拷贝。在使用时,Object.assign只会拷贝本身的属性,不可枚举的属性是不会拷贝的,原形链上的属性也不会拷贝。
{ // 新增api let test = {k:123,o:456} for(let {key,value} of Object.entries(test)){ console.log(key,value); // k 123 , o 456 } }
Object.entries() 与数组的entries是差不多的,都是同时得到key值和value值,如过有想了解数组的es6扩展,请点这里
所以这里的一些方法我们就不具体说了,跟数组的扩展是类似的。
四、扩展运算符
{ // 扩展运算符 let {a,b,...c} = {a:'1',b:'2',c:'3',d:'4'}; console.log(a,b,c);// 1 2 {c:3,d:4} }
对象的扩展运算符和数组的扩展运算符也是类似的,但是现在对对象的扩展运算符的支持还不是很友好。得到的结果中我们可以看到,…c 这样的方式,会将右边对象中没有被左边获取的值都包括进去。
相关文章推荐
- ES6之对象字面量扩展语法(Enhanced Object Literals)
- ES6-对象的扩展-属性的可枚举性和遍历
- js-es6-对象扩展
- ES6-对象的扩展-_proto_ 属性,Object.setPrototypeOf(),Object.getProtitypeOf()
- 【读书笔记】【深入理解ES6】#4-扩展对象的功能性
- ES6(八: 对象扩展)
- ES6-对象的扩展-super关键字
- ES6 关于对象的扩展
- ES6 对象扩展
- es6入门-对象的扩展
- ES6学习教程之对象的扩展详解
- ES6对象的扩展
- ES6对象扩展
- 【ES6】对象的扩展2
- Es6对象的扩展和Class类的基础知识笔记
- ES6-对象的扩展-属性名表达式
- ES6入门之对象扩展
- ES6 — 对象扩展
- ES6-对象的扩展-Object.keys(),Object.values(),Object.entries()
- es6 对象的扩展运算符