Question

出于某些奇怪的原因，当这个数据：

// data
visitorsTemplate: [{
  text: '',
  type: 'buttons',
  children: [{
    name: 'email',
    method: (e) => { this.sendEmail(e) }
  }]
}]

克隆：

// watch
console.log(this.visitorsTemplate)
const visitorItem = clone(this.visitorsTemplate)
console.log(visitorItem)

使用此功能：

// utils
export const clone = (...args) => {
  return JSON.parse(JSON.stringify.apply(null, args))
}

方法属性消失。以下是console.logs：

[{
  text: "",
  type: "buttons",
  children": [{
    name: "email",
    method: f method(e)
  }, {
    name: "delete",
    method: f method(e)
  }]
}]

[{
  text: "",
  type: "buttons",
  children": [{
    name: "email"
  }, {
    name: "delete"
  }]
}]

更新：我发现JSON.stringify正在移除methods，但我需要创建一个新数组。那么如何避免删除方法？

Answer 1

您可以实现自己的对象深度克隆实现。试试这段代码。

    function deepcloneObject(obj) {
    var clone = {};
    for(var i in obj) {
        if(obj[i] != null &&  typeof(obj[i])=="object")
            clone[i] = deepcloneObject(obj[i]);
        else
            clone[i] = obj[i];
    }
    return clone;
}

Answer 2

当你执行JSON.stringify时，他们将尝试创建一个JSON对象的字符串。当你在里面有方法时，它也会尝试转换为字符串。

因此，如果您想拥有一个新的对象实例，可以使用它：http://underscorejs.org/#clone

newObject = _.clone(visitor)

或者如果您希望以后能够以编程方式创建，请准备以下内容：

function Visitor(){
    return {
    text: '',
    type: 'buttons',
    children: [Child()]
   }
}

function Child(){
    return  {
       name: 'email',
       method: (e) => { this.sendEmail(e) }
   }
}

Answer 3

使用Object.assign和Array.prototype.map

const clonedArray = array.map(a => Object.assign({}, a));

Answer 4

如果检查JSON规范here，您会注意到JSON没有规范包含方法，它只包含数据。当你执行stringify然后解析时，你正在采取中间步骤作为JSON，这导致了这一点。

有关克隆对象数组的详细说明，请参阅this post。

希望这有帮助！

克隆数组时为什么这些方法会消失？

4 个答案: