◆

ES6 对象扩展运算符用法详解

2023-02-02 01:370

对象的扩展运算符

对象的扩展运算符(...)用于取出参数对象的所有可遍历属性,拷贝到当前对象之中。

let z = { a: 3, b: 4 };
let n = { ...z };
n; // { a: 3, b: 4 }

数组是特殊的对象,所以对象的扩展运算符也可以用于数组

let foo = { ...['a', 'b', 'c'] };
foo;
// {0: "a", 1: "b", 2: "c"}

扩展运算符后面是一个空对象,则没有任何效果。

{...
  {}
,
  a: 1
}
// { a: 1 }

扩展运算符后面不是对象,则会自动将其转为对象。

扩展运算符后面是整数 1,会自动转为数值的包装对象 Number{1},由于该对象没有自身属性,所以返回一个空对象。

// 等同于 {...Object(1)}
{...
  1
} // {}

// 等同于 {...Object(true)}
{...
  true
} // {}

// 等同于 {...Object(undefined)}
{...
  undefined
} // {}

// 等同于 {...Object(null)}
{...
  null
} // {}

如果扩展运算符后面是字符串,它会自动转成一个类似数组的对象,因此返回的不是空对象。

{...
  'hello'
}
// {0: "h", 1: "e", 2: "l", 3: "l", 4: "o"}

对象的扩展运算符,只会返回参数对象自身的、可枚举的属性

class C {
  p = 12;

  m() {}
}

let c = new C();
let clone = { ...c };

clone.p; // ok
clone.m(); // 报错

上面示例中,c 是 C 类的实例对象,对其进行扩展运算时,只会返回 c 自身的属性 c.p,而不会返回 c 的方法 c.m(),因为这个方法定义在 C 的原型对象上

对象的扩展运算符等同于使用 Object.assign() 方法。

let aClone = { ...a };
// 等同于
let aClone = Object.assign({}, a);

合并两个对象

let ab = { ...a, ...b };
// 等同于
let ab = Object.assign({}, a, b);

如果用户自定义的属性,放在扩展运算符后面,则扩展运算符内部的同名属性会被覆盖掉

let aWithOverrides = { ...a, x: 1, y: 2 };
// 等同于
let aWithOverrides = { ...a, ...{ x: 1, y: 2 } };
// 等同于
let x = 1,
  y = 2,
  aWithOverrides = { ...a, x, y };
// 等同于
let aWithOverrides = Object.assign({}, a, { x: 1, y: 2 });

对象的扩展运算符后面可以跟表达式

const obj = {
  ...(x > 1 ? { a: 1 } : {}),
  b: 2,
};

扩展运算符的参数对象之中,如果有取值函数 get,这个函数是会执行的。

let a = {
  get x() {
    throw new Error('not throw yet');
  },
};

let aWithXGetter = { ...a }; // 报错
💬留言板0

还没有留言,来发表第一条吧~

PAGE LOAD / LIVEES6 对象扩展运算符用法详解加载中