对象的扩展之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"关注，也可以扫下方二维码。