时间戳

首页 > 解决方案 > 从现有的带有 JS 值修改的 Obj 创建新的 Obj 时如何编写干净的代码？

javascript - 从现有的带有 JS 值修改的 Obj 创建新的 Obj 时如何编写干净的代码？

问题描述

摘要：我的尝试是获取这个firstObj对象并创建一个secondObj已更改值的新对象，并尽可能使用最干净的代码。

const firstObj = {
  one: '100px',
  two: '200px',
}

const secondObj = {
  one: '50px',
  two: '150px',
}

到目前为止我所尝试的。

尝试1：

let t1 = []
Object.values(firstObj).forEach((index) => {
  t1.push(`${(parseInt(index.replace('px', '')) - 50).toString()}px`)
})
console.log(' t1', t1)

t1 [ '50px', '150px' ]

尝试2：

let t2 = []
Object.entries(firstObj).forEach(([key, value]) => {
  t2.push({ [key]: `${value.replace('px', '') - 50}px` })
})
console.log(' t2', t2)

t2 [ { one: '50px' }, { two: '150px' } ]

尝试 3：

let t3 = []
Object.entries(firstObj).forEach(([key, value]) => {
  t3 = Object.create({})
  t3[key] = value.replace('px', '') - 50
})
console.log(' t3', t3)

t3 { two: 150 }

尝试4决赛：

let temp = []
let t4
Object.entries(firstObj).forEach(([key, value]) => {
  temp.push({ [key]: `${value.replace('px', '') - 50}px` })
  t4 = Object.assign({}, ...temp)
})
console.log(' t4', t4)

t5 { one: '50px', two: '150px' }

这个做我需要做的，但我认为这段代码看起来更干净：

  1. 我必须使用temp来存储值然后使用它们，想找到一种不使用temp变量的方法

  2. 关于如何改进的任何其他提示？

  3. 想立即将新值返回给变量，但我尝试编写 return 但似乎不起作用。

点的想法3是使用函数将值直接返回给对象

const obj = {
  secondObj: () => // return my function t4
}

引擎盖下的外观：

const obj = {
  secondObj: {
    one: '50px',
    two: '150px',
  }
}

标签： javascriptobject

解决方案

如果我理解正确，您的主要目标是secondObj从firstObj. 您可以使用从对象Object.entries()中获取[[key, value], ...]对数组，然后可以调用.map()它，这将允许您将每个键值对转换为新的键值对。然后，您可以使用Object.fromEntries()which 将获取这些新[[key, value], ...]数组并为您构建一个对象：

const firstObj = {
  one: '100px',
  two: '200px',
};

const secondObj = Object.fromEntries(Object.entries(firstObj).map(([key, value]) => [
  key,
  value.replace(/\d+/, m => m - 50)
]));

console.log(secondObj);

推荐阅读