Vuejs 复制数据对象并删除属性也会从原始对象中删除属性

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

rows[
0 {
title: "my title",
post: "my post text",
public: false,
info: "some info"
},
1 {
title: "my title",
post: "my post text"
public: true,
info: "some info"
},
2 {
title: "my title",
post: "my post text"
public: false,
info: "some info"
}
]

然后，我复制该对象并根据需要删除某些属性，然后再将对象发布到我的后端，如下所示：

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;也会从我的vm根数据中删除该属性，我不明白为什么，因为我创建了一个新的变量/将根数据复制到该变量中。那么如何在发布数据之前从数据中删除某些对象属性，而无需在 vue 中更改我的根数据vm？

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

import _ from 'lodash'
...
postDataCopy = _.cloneDeep(postData)

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

这是因为在 JavaScript 中对象是通过引用复制的，这意味着尽管您正在更改实际上引用保存数据的原始地址postData即rows.你可以这样做

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

您需要复制引用的变量。

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

这是因为行是引用类型，而postData指向与行相同的引用。要复制而不引用(深层复制)，如果您的对象/数组仅包含值类型(如数字、字符串、布尔值等)，而不包含引用类型(如对象或数组)，则可以使用 Object.assign 。如果您的对象包含引用类型，例如包含对象的对象，则内部复制的对象将是引用类型。

示例 1：

var user = {
name: "abc",
address: "cde"
};
var copiedUser = Object.assign({}, user);

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

示例 2：

var user = {
name: "abc",
address: "cde",
other_info: { // reference type
country: "india"
}
};
var copiedUser = Object.assign({}, user);

现在它从用户复制所有属性，但用户包含other_info引用类型(对象)。因此，更改值类型的复制用户属性不会影响用户，但更改复制用户或用户的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]));
}

反应性是由每个对象和数组内部的观察者_proto引起的。

如果需要，您可以使用以下对象实用程序作为 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
}

相关内容

最新更新

热门标签：