ES7 中执行字符串对象合并的最快方法是什么？

Question

我有一个包含字符串的对象。

  const userKeyframes = {
    from: {
      opacity: 1,
    },
    '40%': {
      transform: 'skew(20deg)',
      opacity: 1,
    },
    '80%': {
      transform: 'skew(-5deg)',
      opacity: 1,
    },
    to: {
      transform: 'translate3d(-100%, 0, 0) skew(10deg)',
      opacity: 0,
    },
  };

我曾经用 ImmutableJS 这样做：

  const merge = fromJS(make(options)).mergeDeep(userKeyframes);

我已经试过了 (https://www.webpackbin.com/bins/-KiVy6f5eWDb44W4dXtE) 但没有成功:

  const merge = make(options);
  Object.keys(userKeyframes).forEach((key) => {
    Object.assign(merge[key], userKeyframes[key]);
  });

我不认为我不想只为此保留 immutableJS。

在没有任何第三方库的情况下，ES7 中执行其中两个合并的最快方法是什么？

Answer 1

问题是您假设所有键都存在 merge[key]，但显然不能保证这一点。所以 Object.assign(merge[key], .......) 的第一个参数可能是 undefined，这不会产生预期的效果（而是一个错误）。

相反，为第一个参数创建一个新对象，并将结果分配给 merge[key]:

Object.keys(userKeyframes).forEach((key) => {
    merge[key] = Object.assign({}, userKeyframes[key]);
});

但是，上面的代码会在赋值发生之前覆盖 merge[key] 中的任何内容。您可以使用两种不同的方法来处理此问题：

您只能在 merge[key] 不存在的情况下执行赋值，因此在这种情况下您只能赋值 userKeyframes[key]:

Object.keys(userKeyframes).forEach((key) => {
    if (!(key in merge)) {
        merge[key] = Object.assign({}, userKeyframes[key]);
    }
});

或者，您可能希望在两个对象都已存在时真正合并这两个对象，这意味着您希望拥有 userKeyframes[key] 中的所有属性，但同时保留 [=] 中已有的任何其他属性13=] 会被第一个解决方案破坏。

在这种情况下，提供 merge[key] 和 userKeyframes[key] 作为 2^nd 和 3^rd 参数Object.assign，假设 undefined 中除第一个参数之外的所有值都不会造成问题：

Object.keys(userKeyframes).forEach((key) => {
    merge[key] = Object.assign({}, merge[key], userKeyframes[key]);
});

在最后一段代码中，当merge[key]已经有一个值时，它在userKeyframes[key]中没有出现的属性将保留，而中出现的[=50] =]，被 userKeyframes[key] 中的那些覆盖，如 documentation on MDN:

中所述

Later sources' properties will ... overwrite earlier ones.

ES7 中执行字符串对象合并的最快方法是什么？

What is the fastest way in ES7 to perform a merge of an object of object of string?

javascript

merge

ecmascript-6

ecmascript-2016