对象扩展【ES6】

发布于:2025-03-06 ⋅ 阅读:(10) ⋅ 点赞:(0)

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

对象简写:

方法的简写:

以前的写法:

 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
  1. 他可以判断 +0 和 -0 是否相等
console.log(Object.is(+0, -0)); // false
console.log(+0 === -0); // true