JS中数组与对象相互转换的实现方式
更新时间:2024年04月23日 08:29:09 作者:前端代码仔
这篇文章主要介绍了JS中数组与对象相互转换的实现方式,文章通过代码示例讲解的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下
一、数组转对象
1. 一维数组转对象
如果有非字符串的键名,那么这个键名会被转成字符串,再作为对象的键名
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)

2. 二维数组转对象
Object.fromEntries()实现
const arr2 = [['昨天','4-09'], ['今天','4-10'], ['明天','4-11']]
// 二维数组转obj [['',''],['','']] => {}
function Arr2ToObj(arr) {
return Object.fromEntries(arr)
}
console.log('二维数组转obj', Arr2ToObj(arr2));
3. 二维数组转对象
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))

二、对象转数组
1. 对象转一维数组
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));

2. 对象转二维数组
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));

3. 对象转二维数组
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))

以上就是JS中数组与对象相互转换的实现方式的详细内容,更多关于JS数组与对象转换的资料请关注脚本之家其它相关文章!
相关文章
bootstrap-table formatter 使用vue组件的方法
Bootstrap table是国人开发的一款基于 Bootstrap 的 jQuery 表格插件,通过简单的设置,就可以拥有强大的单选、多选、排序、分页,以及编辑、导出、过滤(扩展)等等的功能。这篇文章重点给大家介绍bootstrap-table formatter 使用vue组件的方法,感兴趣的朋友一起看看2019-05-05
webpack DllPlugin xxx is not defined解决办法
这篇文章主要介绍了webpack DllPlugin xxx is not defined解决办法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2019-12-12


最新评论