今天又是晴朗愉快(热的一匹)的一天,又能和大家一起聊聊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"关注,也可以扫下方二维码。
领取专属 10元无门槛券
私享最新 技术干货