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数组与对象转换的资料请关注脚本之家其它相关文章!
相关文章
关于JavaScript中parseInt()的一个怪异行为解决
parseInt()是内置的 JS 函数,用于解析数字字符串中的整数,下面这篇文章主要给大家介绍了关于JavaScript中parseInt()的一个怪异行为解决,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-12-12document.selection.createRange方法与实例
document.selection.createRange() 根据当前文字选择返回 TextRange 对象,或根据控件选择返回 ControlRange 对象2006-10-10
最新评论