Question

如何在 Javascript 中使用 map() 选择嵌套对象的属性？

2022-04-01

492

javascript reactjs dictionary

这是我的对象。

values : {
  title : 'this is title ..',
  translate : {
    en : 'some texts .. ',
  },
}

这是我拥有的数组。

arr = ['translate.en', 'title'];

我想要做的是这个，但这没有按我预期的方式工作。

const value = arr.map(item => values[item]);
// (Result) value : undefined, 'this is title ..'
// (Expected) value : 'some texts .. ', 'this is title ..'

const value = arr.map(item => values.item); // error : 'item'  is declared but its value is never read.

如何使用 map() 获取 values.translate.en 值？

Answer 1

您可以使用此代码片段。虽然不是最简洁的，但您明白了

arr.map(item => {
  let arrItem = item.split('.');
  let data = values;
  for (i in arrItem) {
    data = data[arrItem[i]];
  }
  return data;
});

Answer 2

您当前的代码正在执行以下操作：

const values = {
    title: 'this is title ..',
    translate: {
        en: 'some texts .. ',
    },
    'translate.en': 'hello',
};

const arr = ['translate.en', 'title'];

const value = arr.map((item) => values[item]);
// (Result) value : 'hello', 'this is title ..'

如果您想做您想做的事情，您应该执行以下操作：

const values = {
    title: 'this is title...',
    translate: {
        en: 'some texts... ',
    },
};

const arr = ['translate.en', 'title'];

const value = arr.map((item) => {
    let index = item.split('.');
    let value = values;
    for (i in index) {
        value = value[index[i]];
    }
    return value;
});
// (Result) value : 'come texts...', 'this is title ..'

但是，如果可能的话，我建议您按以下方式构造您的 values 对象：

const values = {
    title: {
        kr: '타이틀',
        en: 'title'
    },
    body: {
        en: 'some texts .. ',
        kr: '어쩌고 저쩌고 .. ',
    },
};

所以只要您知道哪个部分： body 或 title 是必需的，并且您知道您想要获得的语言，就很容易得到它。