添加链接
link之家
链接快照平台
  • 输入网页链接,自动生成快照
  • 标签化管理网页链接
Object.assign( null ) // 报错 // VM118021:1 Uncaught TypeError: Cannot convert undefined or null to object // at Function.assign (<anonymous>) // at <anonymous>:1:8

5、如果非对象参数出现在源对象的位置(即非首参数),那么处理规则有所不同。

(1)首先,这些参数都会转成对象,如果无法转成对象,就会跳过。这意味着,如果 undefined null 不在首参数,就不会报错。

let obj = {a: 1};
Object.assign(obj, undefined) === obj // true
Object.assign(obj, null) === obj // true

(2)其他类型的值(即数值、字符串和布尔值)不在首参数,也不会报错。但是, 除了字符串会以数组形式,拷贝入目标对象,其他值都不会产生效果

const v1 = 'abc';
const v2 = true;
const v3 = 10;
const obj = Object.assign({}, v1, v2, v3);
console.log(obj); // { "0": "a", "1": "b", "2": "c" }

上面代码中, v1 v2 v3 分别是字符串、布尔值和数值,结果 只有字符串合入目标对象(以字符数组的形式),数值和布尔值都会被忽略 。这是 因为只有字符串的包装对象,会产生可枚举属性。 (这个之前不清楚,需要了解一下哟)

Object(true) // {[[PrimitiveValue]]: true}
Object(10)  //  {[[PrimitiveValue]]: 10}
Object('abc') // {0: "a", 1: "b", 2: "c", length: 3, [[PrimitiveValue]]: "abc"}

上面代码中,布尔值、数值、字符串分别转成对应的包装对象,可以看到它们的原始值都在包装对象的内部属性 [[PrimitiveValue]] 上面,这个属性是不会被 Object.assign 拷贝的。只有字符串的包装对象,会产生可枚举的实义属性,那些属性则会被拷贝。

6、 Object.assign 拷贝的属性是有限制的:

(1)只拷贝源对象的自身属性(不拷贝继承属性),也不拷贝不可枚举的属性( enumerable: false )。

Object.assign({b: 'c'},
  Object.defineProperty({}, 'invisible', {
    enumerable: false,
    value: 'hello'
// { b: 'c' }

上面代码中, Object.assign 要拷贝的对象只有一个不可枚举属性 invisible ,这个属性并没有被拷贝进去。

(2)属性名为 Symbol 值的属性,也会被 Object.assign 拷贝。

Object.assign({ a: 'b' }, { [Symbol('c')]: 'd' })
// { a: 'b', Symbol(c): 'd' }

二、需要注意的知识点

1、浅拷贝

Object.assign 方法实行的是 浅拷贝 ,而不是深拷贝。也就是说, 如果源对象某个属性的值是对象,那么目标对象拷贝得到的是这个对象的引用

const obj1 = {a: {b: 1}};
const obj2 = Object.assign({}, obj1);
obj1.a.b = 2;
obj2.a.b // 2

上面代码中,源对象 obj1 a 属性的值是一个对象, Object.assign 拷贝得到的是这个对象的引用。这个对象的任何变化,都会反映到目标对象上面。

2、同名属性的替换

对于这种嵌套的对象,一旦遇到同名属性, Object.assign 的处理方法是替换,而不是添加。

const target = { a: { b: 'c', d: 'e' } }
const source = { a: { b: 'hello' } }
Object.assign(target, source)
// { a: { b: 'hello' } }

上面代码中, target 对象的 a 属性被 source 对象的 a 属性整个替换掉了(需要格外注意是不是自己想要的)

3、数组的处理

Object.assign 可以用来处理数组,但是会把数组视为对象。

Object.assign([1, 2, 3], [4, 5])
// [4, 5, 3]

这种就是把索引当做属性,然后替换掉了,也需要特别注意下是不是自己想要的

4、取值函数的处理

const merge = (target, ...sources) => Object.assign(target, ...sources);

(2)如果希望合并后返回一个新对象,可以改写上面函数,对一个空对象合并。

const merge = (...sources) => Object.assign({}, ...sources);

3、为属性指定默认值

const DEFAULTS = {
  logLevel: 0,
  outputFormat: 'html'
function processContent(options) {
  options = Object.assign({}, DEFAULTS, options);
  // ...

  上面代码中,DEFAULTS对象是默认值,options对象是用户提供的参数。Object.assign方法将DEFAULTSoptions合并成一个新对象,如果两者有同名属性,则option的属性值会覆盖DEFAULTS的属性值。

  注意,由于存在浅拷贝的问题,DEFAULTS对象和options对象的所有属性的值,最好都是简单类型,不要指向另一个对象。否则,DEFAULTS对象的该属性很可能不起作用。

  还有就是需要注意同名属性替换的问题。

const DEFAULTS = {
  url: {
    host: 'example.com',
    port: 7070
processContent({ url: {port: 8000} })
//   url: {port: 8000}

  上面代码的原意是将 url.port改成 8000,url.host不变。实际结果却是options.url覆盖掉DEFAULTS.url,所以url.host就不存在了。