为什么当我克隆数组时这些方法消失了

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 规范，您会注意到 JSON 没有包含方法的规范，它只包含数据。当您执行stringify然后解析时，您正在执行导致此问题的 JSON 的中间步骤。

有关克隆对象数组的更详细说明，请参阅此帖子。

希望这有帮助！

Answer 3

当你

做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 4

将Object.assign与Array.prototype.map一起使用

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