在 Javascript 中编码部分复制对象的优雅方式？答案

【问题标题】：Elegant way to code partially copy objects in Javascript?在 Javascript 中编码部分复制对象的优雅方式？
【发布时间】：2014-05-27 10:03:02
【问题描述】：

我有一个表示表单字段的 javascript 对象。大约 70% 的这些字段必须复制到某些对象中以发送到服务器，其他字段用于 UI 使用。目前我通过为每个字段手动创建分配来克隆对象，这导致结构不太好，如下所示。请注意，对于被复制的部分，我会保持字段名称相同。

var contData = {
                ContainerType: data.ContainerType,
                ProjectIds: data.ProjectIds,
                PrivateToProjects: data.PrivateToProjects,
                DimensionType:data.DimensionType,
                MetricsX: data.MetricsX,
                MetricsY: data.MetricsY,
                Parent:data.Parent,
                ContainerName:data.Prefix
            };

对对象的克隆部分进行编码的最佳方法是什么，只需指定要克隆/不克隆的字段列表，例如一些有用的辅助函数？

我也使用 angular 和 jquery。

【问题讨论】：

是的。您是否尝试过编写这样的辅助函数？这实际上是微不足道的。我认为 Angular 或 jquery 中还没有。

标签： javascript

【解决方案1】：

在 ES6 之后，你可以

let { ContainerType, ProjectIds } = data  // the fields you want
let partiallyCopy = { ContainerType, ProjectIds }
console.log(partiallyCopy)  // { ContainerType: "...", ProjectIds: "..." }

如果你需要大多数字段，你可以

let { ContainerType, ProjectIds, ...rest } = data  // the fields you don't want
let partiallyCopy = rest
console.log(partiallyCopy)  // the object excludes ContainerType and ProjectIds

【讨论】：

【解决方案2】：

您可以创建一个自定义函数，使用过滤器函数部分克隆您的对象。

这可能是非常简单的版本。

function filteredClone(sourceObj, filterFunction){
  var destObj = {};
  for(var i in sourceObj){
    if(filterFunction(sourceObj[i])){
      destObj[i] = sourceObj[i];
    }
  }
  return destObj;
}

假设您不想复制“姓名”和“姓氏”字段，您可以像下面这样调用它。

var dest = filteredClone(source, function(v){
   return ["name","surname"].indexOf(v) !== -1;
});

以下问题的答案中有几个更复杂的示例。

Deep clone without some fields

【讨论】：

【解决方案3】：

一种方法是定义对象的属性。 IE9 是第一个支持此功能的 IE。

var obj = {};
Object.defineProperty(obj, "no1", {enumerable: false, value: "", writable: true, configurable: true});
Object.defineProperty(obj, "no2", {enumerable: false, value: "", writable: true, configurable: true});

obj.yes1 = "foo";
obj.yes2 = "bar";
obj.no1 = "baz";
obj.no2 = "quux";

jsfiddle

99.9% 的克隆函数会循环遍历键，并且只会显示可枚举的键，因此它们只会复制可枚举的键。这也是同样的原因，例如toString 在循环对象的键时不显示。

这可以被抽象为允许定义数据和临时值。

function makeType(description, data) {
    if (arguments.length === 1) {
        return function (data) {
            return makeType.call(this, description, data);
        };
    }

    var obj = {};
    data = data || {};
    for (var key in description) {
        if (description[key] === true) {
            obj[key] = data[key]
        } else {
            Object.defineProperty(obj, key, {
                enumerable: false,
                value: data[key],
                writable: true,
                configurable: true
            });
        }
    }
    return obj;
}

var makeYesNo = makeType({
    yes1: true,
    yes2: true,
    no1: false,
    no2: false
});

var obj = makeYesNo({
    yes1: "foo",
    yes2: "bar",
    no1: "baz",
    no2: "quux"
})

fiddle

【讨论】：