vue中 两个数组对象,如何吧另一个数组对象的值赋值给另一个数组对象呢 代码实现
时间: 2023-08-02 10:25:03 浏览: 675
在Vue中,我们可以使用 `Vue.set()` 或 `Object.assign()` 方法将一个数组对象的值赋值给另一个数组对象。
下面是两种实现方式的示例代码:
1. 使用 `Vue.set()`
```javascript
// 定义两个数组对象
let array1 = [{ id: 1, name: 'Tom' }, { id: 2, name: 'Jerry' }];
let array2 = [{ id: 3, name: 'Alice' }, { id: 4, name: 'Bob' }];
// 将 array2 的值赋值给 array1
array1.forEach((item, index) => {
Vue.set(item, 'name', array2[index].name);
});
console.log(array1); // 输出结果为 [{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }]
```
在上面的代码中,我们使用 `forEach()` 方法循环遍历 `array1` 数组,使用 `Vue.set()` 方法将 `array2` 数组中的 `name` 属性值赋值给 `array1` 数组中的同一属性。最终,`array1` 数组中的 `name` 属性值就被替换成了 `array2` 数组中的值。
2. 使用 `Object.assign()`
```javascript
// 定义两个数组对象
let array1 = [{ id: 1, name: 'Tom' }, { id: 2, name: 'Jerry' }];
let array2 = [{ id: 3, name: 'Alice' }, { id: 4, name: 'Bob' }];
// 将 array2 的值赋值给 array1
array1 = array1.map((item, index) => Object.assign({}, item, { name: array2[index].name }));
console.log(array1); // 输出结果为 [{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }]
```
在上面的代码中,我们使用 `map()` 方法循环遍历 `array1` 数组,使用 `Object.assign()` 方法将 `array2` 数组中的 `name` 属性值赋值给 `array1` 数组中的同一属性,并返回一个新的数组对象。最终,`array1` 数组就被替换成了新的数组对象,其中 `name` 属性值被替换成了 `array2` 数组中的值。