js 处理数组合并vs对象合并

前言: 前端开发中，我们会遇到各种数据的需求，但是后端给你返回的数据结构又不是你想要的， 只能自己动手，去组装数据，重新定义数据结构了。

1. js 数组合并的方法

常用的应该是 concat 方法.

示例:   

let  arr1 = [ 1 , 3, 5, 7]
let  arr2 = [ 2, 4 , 6, 8]
let result = arr1.concat(arr2)
// result = [1, 2, 3, 4, 5, 6, 7, 8]

1-1. 怎么使用map()从数组对象中单独提取某几项

this.tableData_chart =  this.tableData.map((res)=>{
		return {
		          'dataNum': res.dataNum,
		          'recTime': res.recTime
		      }
		  })

一个数组返回了很多个变量，我只想从里面截取某几个变量的值，如上图的代码里面。我只想截取到里面的2项变量的所有返回值。

处理方法:

1-1-1 、直接保留返回数组里面的某2项的值，如下： 

const a1 = this.tableData
// const a3 = a1.map(({ dataNum, recTime}) => ({ dataNum, recTime}))
 

1-1-2、 直接保留返回数组里面某2项的值，顺便改变新数组里面某个变量的名。
 

const a1 = this.tableData
// const a3 = a1.map(({ dataNum, recTime}) => ({ id: dataNum, recTime}))

1-1-3、 2个数组过滤id相等的obj，保留下来。或者保留id不等的obj。

1-1-3-1、2个数组过滤id相等的obj，保留

const arr1 = [145, 135, 148]
const arr2 = [
	{id: 146, firstname: "dave", lastname: "jones"},
	{id: 135, firstname: "mike", lastname: "williams"},
	{id: 148, firstname: "bob", lastname: "michaels"}
]
newArr2 = arr2.filter(x => arr1.some(y => y === x.id))
console.log(newArr2)

1-1-3-2、2个数组过滤id相等的obj，第2个数组里面与第1个数组里面id !== 的一项保留下来。

// 第2个数组里面与第1个数组里面id !== 的一项保留下来
const arr1 = [145, 135, 148]
const arr2 = [
	{id: 146, firstname: "dave", lastname: "jones"},
	{id: 135, firstname: "mike", lastname: "williams"},
	{id: 148, firstname: "bob", lastname: "michaels"}
]
newArr2 = arr2.filter(x => !arr1.some(y => y === x.id))
console.log(newArr2)

1-1-3-3、 2个对象数组过滤
 

const arr1 = [
	{id: "145", firstname: "dave", lastname: "jones"},
	{id: "135", firstname: "mike",lastname: "williams"},
	{id: "148", firstname: "bob",lastname: "michaels"}
]
const arr2 = [
	{id: "146", firstname: "dave", lastname: "jones"},
	{id: "135", firstname: "mike", lastname: "williams"},
	{id: "148", firstname: "bob", lastname: "michaels"}
],
 newArr1 = arr1.filter(x => !arr2.some(y => y.id === x.id)),
 newArr2 = arr2.filter(x => !arr1.some(y => y.id === x.id));
console.log(newArr1)// [{id: '145', firstname: 'dave', lastname: 'jones'}]
console.log(newArr2)// [{id: '146', firstname: 'dave', lastname: 'jones'}]

2. js 对象的合并方法

可以使用 Object.assign 方法来合并两个对象。Object.assign 方法接受一个目标对象和一个或多个源对象作为参数，将源对象的属性复制到目标对象中，并返回目标对象。如果有重复的属性名，则后面的属性会覆盖前面的。

const obj1 = { a: 1, b: 2 }
const obj2 = { b: 3, c: 4 }
 
const result = Object.assign({}, obj1, obj2)
 
console.log(result) // 输出：{ a: 1, b: 3, c: 4 }

上述代码中，我们首先定义了两个对象 obj1 和 obj2，然后使用 Object.assign 方法将它们合并到一个新对象 result 中，并打印出了合并后的结果。注意，这里通过传递一个空对象 {} 作为第一个参数来创建了一个新的对象作为目标对象。这是因为 Object.assign 方法会修改第一个参数的值，如果我们不想修改原始的对象，就需要传递一个新的空对象作为目标对象。