提示:
本文为JavaScript栏目:JavaScript高级系列——ES6新特性章节 第八章
JavaScript高级学习:ES6新特性08——对象属性的扩展
前言
本文讲解ES6对象属性的扩展。
提示:以下是本篇文章正文内容,下面案例可供参考
对象属性的扩展
对象简写
属性的简写
ES5属性简写
ES5中属性名和表示属性值的变量名相同,要完整表达
let obj={
name:name,
age:18
};
console.log(obj); //{name:"张三",age:18}
ES6属性简写
ES6中属性名和表示属性值的变量名相同,可以省略属性值
let obj2={
name,
age:18
}
console.log(obj2); //{name:"张三",age:18}
返回值快速封装
一般用于方法返回对象时快速封装
function f(x,y){
return {x:x,y:y};
}
console.log(f(1,3)); //{x:1,y:3}
function f2(x,y) {
return {x,y};
}
console.log(f2(1,3)); //{x:1,y:3}
对象中方法的简写
ES5写法
let obj3={
name,
sex:"男",
show:function () { //ES5的写法
console.log(`我是${this.name},性别${this.sex}`);
}
}
obj3.show(); //我是张三,性别男
ES6写法
let obj3={
name,
sex:"男",
show(){ //ES6中方法可以简写
console.log(`我是${this.name},性别${this.sex}`);
}
}
obj3.show(); //我是张三,性别男
属性名使用表达式
ES5中设置表达式模式的属性,只能在创建对象后去追加属性
let obj4={};
obj4.a="a";
let b="name";
obj4[b]="张三";
obj4[b+"s"]="张三s";
console.log(obj4); //{a:"a",name:"张三",names:"张三s"}
ES6中设置表达式模式的属性
let obj5={
a:"a",
[b]:"张三",
[b+"s"]:"张三s"
};
console.log(obj5); //{a:"a",name:"张三",names:"张三s"}
对象中的方法名也可以使用表达式
let obj6={
["sh"+"ow"](){
console.log("show");
}
};
obj6.show();
特殊情况
let obj7={a:1};
let obj8={b:9};
let obj9={
[obj7]:"value777",
[obj8]:"value888"
};
console.log(obj9); //{[object Object]: "value888"}
JS中的Object对象的key只能是字符串类型,如果使用表达式传递了一个对象类型的变量作为key,那么对象中的这个key会自己调用toString函数来把对象转化为字符串类型。
object对象类型的toString默认结果都是[object Object]。
所以obj9中相当于赋值了两个相同的属性,后面给的会覆盖掉前面的key。
最终结果只能看到一个value888。
复制对象
let o1={
name:"张三",
age:18
};
传统直接赋值复制对象
直接赋值的复制方式会让o2和o1内容同步(没有得到独立的新对象)。
let o2=o1;
console.log(o1);//{name: "张三", age: 18}
console.log(o2);//{name: "张三", age: 18}
o2.age=99;
console.log(o1);//{name: "张三", age: 99}
console.log(o2);//{name: "张三", age: 99}
使用扩展运算符复制对象
let o3={...o1};
console.log(o1);//{name: "张三", age: 99}
console.log(o3);//{name: "张三", age: 99}
o3.name="孙悟空";
console.log(o1);//{name: "张三", age: 99}
console.log(o3);//{name: "孙悟空", age: 99}
合并和拆分对象
合并对象
let o4={a:1,b:3};
let o5={a:5,c:7};
let o6={...o4,...o5};
console.log(o6); //{a:5,b:3,c:7}
拆分字符串
let o7={..."kakarot"};
console.log(o7); //{0: "k", 1: "a", 2: "k", 3: "a", 4: "r", 5: "o", 6: "t"}
拆分数组
let o8={...["nihao","wobuhao","woyebuhao","wohenkun"]};
console.log(o8);//{0: "nihao", 1: "wobuhao", 2: "woyebuhao", 3: "wohenkun"}
is函数
Object对象扩展的is函数,用来比较两个值是否相等,使用的是严格匹配(===)模式
console.log("abc"==="abc"); //true
console.log(Object.is("abc","abc")); //true
console.log({}==={}); //false
console.log(Object.is({},{})); //false
特殊情况
console.log(+0===-0); //true
console.log(Object.is(+0,-0)); //false
console.log(NaN===NaN); //false
console.log(Object.is(NaN,NaN)); //true
可枚举属性
对象中的可枚举属性与不可枚举属性
可枚举属性
大构造函数内的属性都是可枚举属性。原型属性也可以是可枚举属性。
function Student() {
/*大构造函数内的属性都是可枚举属性*/
this.name = "张三";
this.age = 18;
}
// 原型属性也可以是可枚举属性
Student.prototype.sex = "男";
不可枚举属性
通过defineProperty设置属性不可枚举
let stu = new Student();
Object.defineProperty(stu, "score", {
value: 88,
enumerable: false //设置属性不可枚举
});
Object.defineProperty(stu, "nick", {
value: "lisi",
enumerable: true //设置属性不可枚举
});
console.log(stu); //Student {name: "张三", age: 18, nick: "lisi", score: 88}
console.log(stu.name); //张三
console.log(stu.sex); //男
console.log(stu.score); //88
console.log(stu.nick); //lisi
忽略不可枚举属性
以下四种用法都会忽略不可枚举属性
for-in循环
for(let key in stu){
console.log(key); //依次输出name、age和sex
}
Object.keys函数
Object.keys函数只会返回对象自身的可枚举属性
let keys=Object.keys(stu);
console.log(keys); //["name","age","nick"]
JSON.stringify函数
JSON.stringify函数转化json数据时只会转化对象自身的可枚举属性
let json=JSON.stringify(stu);
console.log(json); //{"name":"张三","age":18,"nick":"小张"}
Object.assign函数
Object.assign函数合并数组时值对对象自身的可枚举属性生效
let stu2=Object.assign({},stu);
console.log(stu2); //{name:"张三",age:18,nick:"小张"}
以下两种方案获取所有属性,不管是否枚举
getOwnPropertyNames函数
getOwnPropertyNames函数可以获取对象自身的所有属性,不管是否可以枚举。但是不能获取symbol类型的属性
let keys2=Object.getOwnPropertyNames(stu);
console.log(keys2); //["name","age","score","nick"]
Reflect.ownKeys函数
Reflect.ownKeys获取对象的所有自身属性,不管是否枚举,symbol属性也可以获取
let keys3=Reflect.ownKeys(stu);
console.log(keys3); //["name","age","score","nick"]
总结
for-in循环、Object.keys函数、Object.getOwnPropertyNames函数和Reflect.ownKeys函数遍历属性时,遵循以下顺序规则:
- 首先数字,按照升序排序
- 其次字符串,按照加入时间升序排序
- 最后symbol,按照加入时间升序排序
Object.values函数
Object.values函数返回对象中自身所有可枚举属性的值组成数组
let values=Object.values(stu);
console.log(values); //["张三",18,"小张"]
Object.entries函数
Object.entries函数返回对象中自身所有可枚举属性的键值组成的键值对数组
let entries=Object.entries(stu);
console.log(entries); //[["name","张三"],["age",18],["nick","小张"]]
console.log(entries.flat());//["name", "张三", "age", 18, "nick", "小张"]