JavaScript高级学习：ES6新特性08——对象属性的扩展

提示：
本文为JavaScript栏目：JavaScript高级系列——ES6新特性章节 第八章

---

前言

本文讲解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", "小张"]