Question

我在vue中有一个看起来像这样的数据对象

var postData = this.rows;
      postData.forEach(function(o) {

        if (o.public === true) {
          delete o.info;
        }
      });

      var uploadData = {};
      uploadData.blogpost = postData;
      axios({
          method: 'post',
          url: myUrl,
          responseType: 'json',
          data: uploadData
        })

然后我复制该对象，并在将对象发布到我的后端之前删除某些属性，如下所示：

delete o.info;

问题是BUFSIZ还会从我的 vm 根数据中删除该属性，我不明白为什么因为我创建了一个新的varible /将根数据复制到该数据中。那么如何在发布之前从我的数据中删除某些对象属性而不在vue中更改我的根数据 vm ？

Answer 1

您需要复制引用的变量。

// ES6
let copiedObject = Object.assign({}, originalObject)

Answer 2

您需要通过克隆来获取数据的副本。有多种克隆数据的方法，我建议使用lodash的函数，cloneDeep

postDataCopy = _.cloneDeep(postData)

然后您可以根据需要修改postDataCopy而无需修改原始内容。

Answer 3

这是因为javascript对象是按引用复制的，这意味着您正在更改postData，它实际上是引用保存数据的原始地址，即rows。你可以这样做

postData = JSON.parse(JSON.stringify(rows))

Answer 4

这是因为row是引用类型而postData指向与行相同的引用。如果您的对象/数组仅包含值类型（如数字，字符串，布尔等）而不是像Object或Array这样的引用类型，则可以使用Object.assign进行无引用的复制（深层复制）。如果您的Object包含类似于包含对象的对象的引用类型，则内部复制的对象将是引用类型。

示例1：

var user = {
name: "abc",
address: "cde"
};

var copiedUser = Object.assign({}, user);

它从用户复制属性。因此user和copiedUser是不同的对象，因为用户只包含值类型

示例2：

var user = {
name: "abc",
address: "cde",
other_info: { // reference type
   country: "india"
}

};

var copiedUser = Object.assign({}, user);

现在它从用户复制所有属性，但用户包含作为引用类型（对象）的other_info。因此，更改值类型的copiedUser属性不会影响用户，但更改copiedUser或user的other_info会相互影响。

copiedUser.name ="new name"; //不会反映在用户

中

copiedUser .other_info.country = "new country"; //也会反映在用户

中

所以Object.assign将复制到一个级别。如果您的对象包含嵌套对象或数组，则需要迭代并复制到最后一级。

Object.assign也需要{}和[]。所以你也可以返回数组。

例如：var copiedArray= Object.assign([], [1,3,4,5]);

因此，对于您的情况，我认为您需要迭代您的数组直到对象然后复制并将它们推送到另一个数组中;

var rows = [
 {
  title: "my title",
  post: "my post text",
  public: false,
  info: "some info"
},
{
 title: "my title",
  post: "my post text",
  public: true,
  info: "some info"
},
 {
 title: "my title",
  post: "my post text",
  public: false,
  info: "some info"
}
];

var postData = [];

for(var i=0;i<rows.length;i++) {
postData.push(Object.assign({}, rows[i]));
}

Answer 5

反应性是由每个对象和数组内的Observer _proto引起的。

如果需要从每个对象中删除可见的填充，可以使用以下对象util作为mixin。

const isEmpty = (value) =&gt; {

if (!value) return false;

if (Array.isArray(value)) return Boolean(value.length);

return value ? Boolean(Object.keys(value).length) : false;

};

const isNotEmpty = value =&gt; isEmpty(value);

const clone = (value) =&gt; {

if (!value) return value;

const isObject = (typeof value === 'object');

const isArray = Array.isArray(value);

if (!isObject &amp;&amp; !isArray) return value;

// Removing reference of Array of values

if (isArray) return [...value.map(val =&gt; clone(val))];

if (isObject) return { ...value };

return value;

};

const merge = (parent, values) =&gt; ({ ...parent, ...values });

export {

isEmpty,

isNotEmpty,

clone,

merge

};

还有商店吸气剂。

import { clone } from '@/utils/object';

const getData = state =&gt; clone(state.data);
export default {
   getData
}

复制数据对象和删除属性的vuejs也将从原始对象中删除该属性

5 个答案: