对象的扩展之ES6篇

今天又是晴朗愉快(热的一匹)的一天,又能和大家一起聊聊ES6的知识啦~

那么,如标题所述,ES6函数那一块,到底多了点什么东西呢?

简便的对象属性

1.传入函数的参数可以直接赋值给对象

functionAnimal(name,action){

return{name,action};

}

vara=Animal('旋仔','打羽毛球');

console.log(a);//

2.对象字面量中的方法可以像类一样写

varAnimal= {

action(){

console.log("旋仔会打羽毛球");

}

}

Animal.action();//旋仔会打羽毛球

3.对象字面量的属性名还可以用上表达式

varAnimal= {

['dog'+'cat']:'小狗小猫'

}

console.log(Animal['dogcat']);//小狗小猫

这里需要注意的一点是:属性名在中括号内需要用引号包裹起来,否则会报错。

如:

varAnimal= {

[dog]:'dog'

}// Uncaught ReferenceError: dog is not defined

实用的对象API

1.Object.is()方法的使用(用于值相等的比较)

该方法与"==="的效果基本一致,例外的是下面这几串代码

console.log(NaN===NaN);// false

console.log(Object.is(NaN,NaN));// true

console.log(-=== +);// true

console.log(Object.is(-,+));// false

2.Object.assign()方法的使用(返回的是一个新的对象引用)

给对象添加属性:

varAnimal={

name:'小狗'

}

Object.assign(Animal,{action:"打架"});

console.log(Animal.action);//打架

给对象添加多个属性:

varAnimal={

name:'牛B'

}

console.log(Object.assign(Animal,{favorite:'chicken',sport:'play basketball'}));//

对象的克隆:

varAnimal= {

name:'dog'

}

console.log(Object.assign({},Animal));//

当然,也可以将多个对象克隆到一个对象当中,不过要注意的是:同名属性会相互覆盖。下面看个例子:

varAnimal= {

name:'牛B',

action:'run'

}

vardog= {

action:'eat'

}

console.log(Object.assign({},Animal,dog));//

枚举对象属性及属性值

1.for in是枚举对象属性名最常用的方法(将对象中的属性赋值给变量a,然后循环输出)

varAnimal= {

name:'dog',

action:'run'

}

for(varainAnimal){

console.log(a);

}

//name

//action

2.使用Object.keys(obj)将对象中的可枚举属性名存放在数组当中

varAnimal= {

name:'dog',

action:'run'

}

console.log(Object.keys(Animal));//["name","action"]

同理Reflect.ownKeys(obj),只不过,其返回的是所有包括不可枚举以及Symbol修饰的属性名。

3.使用Object.values(obj)将对象中的属性值存放进数组当中

varAnimal= {

name:'dog',

action:'eat'

}

console.log(Object.values(Animal));//["dog", "eat"]

对象的解构赋值

var{a,b,...c} = {a:1,b:2,c:3,d:4};

console.log(c);//

在这里,我用了扩展运算符举了个例子。先说明一下:扩展运算符能够用在对象上面,但不能输出解析出来的值,什么意思呢?举个例子:

var{a,b,...c} = {a:1,b:2,c:3,d:4};

console.log(...c);//Uncaught TypeError: undefined is not a function

实际上,扩展运算符是解析成功的,解析出来的字符仅适用于对象中使用罢了。

var{a,b,...c} = {a:1,b:2,c:3,d:4};

console.log({...c});//

逆向使用花括号,其又变成一个完整的对象。

与扩展运算符数组一样,在对象解构赋值中,扩展运算符对象不能放在除最后的位置之外,否则会报出错误。

码了那么多字,有点累了~

喜欢的朋友们可以点击左上角"Miku灬Rua"关注,也可以扫下方二维码。

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180604G00G7L00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券