对象扩展【ES6】

我们都应该有重头再来的勇气！

目录

• 对象简写：
• • 方法的简写：
  • 属性的简写：
• [对象属性 表达式](#对象属性 表达式)
• Object.assign:
• 扩展运算符（ES2018/ES9）-浅拷贝：
• Object.is:

对象简写：

方法的简写：

以前的写法：

 let obj = {
      name: 'kitty',
      test1: function () {

      },
      test2: function () {

      }
 }

现在的写法：在对象中定义方法时，如果方法的名称与函数名称相同，也可以进行简写。

let obj = {
      name: 'kitty',
      test1 () {

      },
      test2 () {

      }
}

属性的简写：

以前的写法：

let name = 'kitty'
    let obj = {
      name: name
}

现在的写法：当对象属性的键（key）与要赋值的变量名相同时，可以只写一个名称。

let name = 'kitty'
    let obj = {
      name, // 等价于 name:name
}

对象属性 表达式

对象属性可以变成变量。使用[]将对象属性框起来，并且可以在内部进行字符串拼接。如下代码显示：

let name = 'a'
let obj = {
      name: 'kitty'
    }
let obj2 = {
      [name + 'bc']: 'kitty'
    }
console.log(obj); // {name: 'kitty'}
console.log(obj2);// {abc: 'kitty'}

如果我想让每个方法名带一个name的值该怎么办？使用对象属性表达式 ：

let name = 'moduleA'
let obj = {
      name,
      [name + "test1"] () {

      },
      [name + "test2"] () {

      }
    }
console.log(obj);// {name: 'moduleA', moduleAtest1: ƒ, moduleAtest2: ƒ}

Object.assign:

ES6提供的快速合并对象的方法Object.assign。

他的语法是：

Object.assign(target, ...sources)

参数说明：

• target‌：目标对象。这是接收源对象属性的对象，并且也是 Object.assign() 方法修改后的返回值。换句话说，Object.assign() 方法会修改这个对象，并返回它。‌
• sources‌：源对象（一个或多个）。这些对象的自身可枚举属性将被复制到目标对象中。可以传递多个源对象，它们的属性将被依次复制到目标对象中。如果源对象中有相同的属性名，则后面的源对象属性会覆盖前面的源对象属性。

let obj = {
      name: 'kitty'
    }
let obj1 = {
      name: 'Alice'
    }
let obj2 = {
      age: 100
    }
console.log(Object.assign(obj, obj1, obj2));// {name: 'Alice', age: 100}
console.log(obj); // {name: 'Alice', age: 100}
console.log(obj1); // {name: 'Alice'}
console.log(obj2); // {age: 100}

如果不想被影响就开一个新的 obj 用来存储三者合并的结果。

let objAll = {}
let obj = {
      name: 'kitty'
    }
let obj1 = {
      name: 'Alice'
    }
let obj2 = {
      age: 100
    }
console.log(Object.assign(objAll, obj, obj1, obj2));// {name: 'Alice', age: 100}

console.log(objAll); //{name: 'Alice', age: 100}
console.log(obj); // {name: 'kitty'}
console.log(obj1); // {name: 'Alice'}
console.log(obj2); // {age: 100}

扩展运算符（ES2018/ES9）-浅拷贝：

扩展运算符/展开运算符都可以，之前数组讲的 ... 东西

let obj = {
      name: 'kitty'
    }
let obj1 = {
      ...obj
    }
console.log(obj1);// {name: 'kitty'}

复制之后的对象修改值不会影响复制前的那个对象：

let obj = {
      name: 'kitty'
    }
let obj1 = {
      ...obj
    }
obj1.name = 'Alice'
console.log(obj);// {name: 'kitty'}
console.log(obj1);// {name: 'Alice'}

合并两个对象【两个对象中没有一样的属性】：

let obj = {
      name: 'kitty'
    }
let obj1 = {
      age: 100
    }
console.log({ ...obj, ...obj1 });// {name: 'kitty', age: 100}

合并两个对象【两个对象中有一样的属性】

如果两个对象中有属性名一样的属性，那么后面的值会将前面的值覆盖掉：

let obj = {
      name: 'kitty'
    }
let obj1 = {
      name: 'Alice'
    }
console.log({ ...obj, ...obj1 });// {name: 'Alice'}

即 相同覆盖，不同合并 【凭什么后来者居上，因为先者不 ~ 争 ~ 不 ~ 抢 ~ ，所以会被覆盖掉】

Object.is:

能够判断两个值是否相等。

因为 === 无法判断 NaN 是否相等。。。所以引进 Object.is，与=== 几乎一致，但是有两点不一样：

1. 他可以判断NaN和NaN是否相等

console.log(Object.is(5, 5));  // true
console.log(Object.is(5, "5")); // false
console.log(Object.is({}, {})); // false
console.log(Object.is(NaN, NaN)); // true
console.log(Object.is(parseInt("Alice"), NaN)); // true

2. 他可以判断 +0 和 -0 是否相等

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