ES5 对象

ES6 定义对象

对象简洁语法

一般写法：

let name = 'superman', // 定义变量
    age = 18;

function showName() { // 定义函数
    console.log(this.name);
}

let obj = {
    name: name,
    age: age,
    showName: showName,
    showAge: function () {
        console.log(this.age);
    }
};

obj.showName(); // superman
obj.showAge(); // 18

对象简洁语法：① 属性名与变量名一样时，可以只写属性名；② 函数可以省略 function 关键字

let obj = {
    name,
    age,
    showName,
    showAge() {
        console.log(this.age);
    }
};

属性名表达式

JavaScript 有 2 种定义对象属性的方法：. & []

obj.sex = 'male';
obj['s' + 'ex'] = 'male';

如果使用字面量方式定义对象（使用大括号），大括号内定义属性，只能使用 属性名:属性值 的方法

let obj = {
    name: 'superman',
    age: 21
};

属性名表达式：ES6 中，在用字面量方式定义对象时，允许用 [表达式] 作为对象的属性名

let a = 'sex'
let obj = {
    ['age']: 21,
    [a]: 'male',
    ['show' + 'Age']() {
        console.log(this.age);
    }
};
obj.showAge(); // 21

注意，属性名表达式 & 对象属性的简洁语法，不能同时使用，会报错：

let a = 'name';
let name = 'superman';

// 希望属性 name 的值为 superman 
let obj1 = {
    [a] // 报错
};

let obj2 = {
    [a]: name // 正确
};

对象新增

`Object.is()`

ES5 中有 2 个相等运算符：== & ===；都有缺点，前者会隐式类型转换；后者的 NaN !== NaN，且(+0) === (-0)
ES6 提出 Object.is，用来比较值 & 地址是否相等，返回布尔值；与 === 的行为基本一致
与 === 不同的是，对于基本数据类型；我们肉眼看着相等就为 true，看着不相等就为 false

Object.is(NaN, NaN); // true
NaN == NaN; // false

Object.is(+0, -0); // false
(+0) == (-0); // true

Object.is({}, {}); // false

`Object.assign()`

用来合并对象
返回值：合并后的新对象
用法：let 新对象 = Object.assign(目标对象, 需要合并的对象)

let obj1 = {
    a: 1
};
let obj2 = {
    b: 2
};

let obj = Object.assign(obj1, obj2);
console.log(obj); // {a: 1, b: 2} - 输出返回值 obj
console.log(obj1); // {a: 1, b: 2} - 输出目标对象 obj1
console.log(obj2); // {b: 2} - 输出需要合并的对象 obj2

如果属性名有重复，后面的属性会覆盖前面的属性

let obj1 = {
    a: 1
};
let obj2 = {
    b: 2,
    a: 2
};

let obj = Object.assign({}, obj1, obj2);
console.log(obj); // {a: 2, b: 2}

如果只有一个参数，Object.assign 会直接返回该参数

const obj = { a: 1 };
Object.assign(obj) === obj // true

对于基本数据类型的参数

由于 undefined & null 无法转成对象，所以如果它们作为参数，就会报错

Object.assign(undefined); // 报错
Object.assign(null); // 报错

有包装类的基本数据，会转成包装类对应的对象

let json1 = { a: 1 };
let obj = Object.assign(1, json1);
console.log(obj); // Number {1, a: 1}

可以利用这个方法来拷贝数组 / 对象

let arr = [1, 2, 3];
let arr2 = Object.assign([], arr);
console.log(arr2); // [1, 2, 3]

拷贝对象，是浅拷贝

let obj1 = {
    arr: [1, 2, 3, 4], // 引用类型数据
    num: 12 // 基本类型数据
};
let obj2 = Object.assign({}, obj1);

obj2.arr[0] = 2;
obj2.num = 18;

console.log(obj1); // {[2, 2, 3, 4], num: 12}
console.log(obj2); // {[2, 2, 3, 4], num: 18}

`for . of`

先认识下面 3 个方法：

Object.keys(obj)：返回属性名
Object.values(obj)：返回属性值
Object.entries(obj)：以数组的形式，返回键值对

对象的这 3 个方法是挂载到 Object 构造函数身上的，需要通过 Object.方法 调用

数组也有这三个方法，但是数组的方法是挂载到其原型对象上的，所以数组可以直接通过 实例.方法 调用

let obj = {
    name: "superman",
    age: 18,
    sex: "男"
};

for (let key of Object.keys(obj)) {
    console.log(key); // name age sex
};

for (let val of Object.values(obj)) {
    console.log(val); // superman  18  男
};

for (let item of Object.entries(obj)) {
    console.log(item); // ["name", "superman"] ["age", 18] ["sex", "男"]
};

for (let [key, value] of Object.entries(obj)) { // 利用解构赋值
    console.log(key, value); // name superman age 18 sex 男
};

可以通过解构赋值，将 Object 身上的同名方法赋值到变量上：

let { // 通过解构赋值，将 Object 身上的同名方法赋值到变量上
    keys,
    values,
    entries
} = Object;

let obj = {
    name: "superman",
    age: 18,
    sex: "男"
};

for (let key of keys(obj)) {
    console.log(key); // name age sex
};

for (let val of values(obj)) {
    console.log(val); // superman  18  男
};

for (let item of entries(obj)) {
    console.log(item); // ["name", "superman"] ["age", 18] ["sex", "男"]
};