本文详细解析JavaScript中数组与对象相互转换的常见实现方式。涵盖一维及二维数组转对象的方法，包括使用reduce、Object.fromEntries以及Map遍历；同时介绍对象转一维数组和二维数组的技巧，如Object.keys、Object.entries及Map展开。通过具体代码示例，帮助开发者掌握不同场景下的数据格式转换技巧。
在JavaScript开发中，数据结构之间的转换是常见需求。本文将介绍数组与对象之间相互转换的具体实现方法，帮助开发者根据实际场景选择合适的数据处理方案。
首先探讨如何将数组转换为对象，这是数据聚合和键值映射的基础操作。
需要注意的是，如果数组元素中的键名不是字符串类型，JavaScript引擎会自动将其转换为字符串，并作为最终对象的键名。
const arr1 = [{
label: '昨天',
value: '4-09'
},{
label: '今天',
value: '4-10'
},{
label: '明天',
value: '4-11'
}]
// 一维数组转obj [{},{}] => {}
function Arr1ToObj(arr) {
const obj_1 = arr.reduce((res, item, index) => (res[index] = item.value, res), {})
console.log('一维数组转obj', obj_1);
// 指定键名
const obj_2 = arr.reduce((res, item) => (res[item.label] = item.value, res), {})
console.log('一维数组转obj----指定键名', obj_2);
}
Arr1ToObj(arr1)
接下来分析二维数组转换为对象的不同实现路径，重点对比内置API与手动遍历的差异。
利用ES6提供的Object.fromEntries()方法，可以简洁地将二维数组直接转换为对象，该方法接受一个键值对数组并返回对应的对象。
const arr2 = [['昨天','4-09'], ['今天','4-10'], ['明天','4-11']]
// 二维数组转obj [['',''],['','']] => {}
function Arr2ToObj(arr) {
return Object.fromEntries(arr)
}
console.log('二维数组转obj', Arr2ToObj(arr2));
除了内置API，还可以借助Map数据结构来实现二维数组到对象的转换，这种方式在处理复杂键名或引用类型时更具灵活性。
具体实现中，可以先将二维数组初始化为Map实例，再通过遍历Map将键值对逐一赋值给一个新创建的空对象，最后返回该对象。
const obj_a = {a: 1}
const obj_b = {b: 1}
const arr3 = [['昨天','4-09'],['今天','4-10'],['明天','4-11'],[obj_a, '是一个引用类型的a'],[obj_b, '是一个引用类型的b']]
// 二维数组转obj by map [['',''],['','']] => {}
function Arr2ToObjByMap(arr) {
const map = new Map(arr)
let obj = Object.create(null);
for (let [k,v] of map) {
obj[k] = v;
}
return obj;
}
console.log('二维数组转obj by map', Arr2ToObjByMap(arr3))
反过来，将对象转换为数组也是常见需求，通常用于数据列表化或序列化操作。
将对象转换为一维数组时，通常需要将键值对封装为包含label和value属性的对象，以便前端组件或UI库直接使用。
const obj = {
'上午': ['上午数组值'],
'下午': ['下午数组值'],
'晚上': ['晚上数组值'],
}
// obj转一维数组 [{},{},{}]
function objToArr1(obj) {
let arr = []
Object.keys(obj).forEach(key => {
arr.push({
label: key,
value: obj[key]
})
})
return arr
}
console.log('obj转一维数组',objToArr1(obj));
若需将对象转换为二维数组格式，可以直接使用Object.entries()方法，它返回一个包含键值对数组的数组，适用于需要保持原始结构的数据处理场景。
function objToArr2(obj) {
// 方法一
let arr = []
Object.keys(obj).forEach(key => {
arr.push([key, obj[key]])
})
return arr
// 或者 方法二
return Object.entries(obj)
}
console.log('obj转二维数组', objToArr2(obj));
另一种转换方式是利用Map对象，先将对象转换为Map，再通过展开运算符将其转换为二维数组，这种方式在链式处理中较为常见。
主要思路是利用Map对象存储键值对，然后通过展开语法将Map转换为数组形式，实现从对象到二维数组的映射。
function ObjToArrByMap(obj) {
const map = new Map(Object.entries(obj))
console.log('map', map);
// map转对象
const my_map = new Map(map)
return [...my_map]
}
console.log('obj转二维数组 by map', ObjToArrByMap(obj))
以上涵盖了JavaScript中数组与对象相互转换的主要实现方式，开发者可根据具体业务需求选择最合适的方法。