javascript - 动态字符串的可选链接作为 JS 中的属性

Question

我有以下示例代码：

var x = [
{input1: "aaa"},
{input2: "bbb"},
{input444: "ddd"},
{input55: "eee"}
{input3: "ccc"},
]

我正在尝试获取如果存在于对象中的道具的值，例如

x.forEach((item, index) => {
 console.log(item.[`input${index}`]);
})

所以对于上面的示例代码：我希望输出为 ["aaa", "bbb", "ccc"]

我知道属性的第一部分（在本例中为“输入”），第二部分将仅为索引

是否可以使用可选链接知道值？我错过了什么？

Answer 1

您只需在索引中添加一个并为不带点的对象采用括号表示法。

可选?.的链接运算符仅适用于具有undefined源值。它不会切换某些程序逻辑以显示或不显示值。在这种情况下，您可以检查该属性是否存在于对象中，然后在没有一些可选链接的情况下显示想要的部分

var x = [{ input1: "aaa" }, { input2: "bbb" }, { input3: "ccc" }, { input444: "ddd" }, { input55: "eee" }];

x.forEach((item, index) => {
    if (`input${index + 1}` in item)
        console.log(item[`input${index + 1}`]);
});

Answer 2

除非您只是在寻找特定的属性，否则可选链接几乎没有意义。使用Object.values或Object.entries。

var x = [
  {input1: "aaa"},
  {input2: "bbb"},
  {input3: "ccc"},
  {input4: "ddd"},
  {input5: "eee"}
]

x.forEach((item, index) => {
 console.log(Object.values(item));
 console.log(Object.values(item)[0]); // If it is just one, reference it
})

如果它只有在索引匹配时才匹配，那么它仍然不需要可选链接来读取值。

var x = [
  {input1: "aaa"},
  {input2: "bbb"},
  {input3: "ccc"},
  {input4: "ddd"},
  {input555: "eee"}
]

x.forEach((item, index) => {
 console.log(item[`input${index+1}`]);
})

在您进行第 5 次左右编辑之后，要获得您想要的输出就更加奇怪了……您需要使用 reduce OR map 和 filter。您需要跟踪当前索引。

const x = [
  {input1: "aaa"},
  {input2: "bbb"},
  {input444: "ddd"},
  {input55: "eee"},
  {input3: "ccc"},
];


let current = 1;
const out = x.reduce(function (acc, obj) {
  const key = `input${current}`;
  if(obj.hasOwnProperty(key)){
    acc.push(obj[key]);
    current++;
  }
  return acc;
}, []);

console.log(out);

Answer 3

由于不能保证输入的顺序，我会这样做：

var x = [{input1: "aaa"}, {input2: "bbb"},{input444: "ddd"},{input55: "eee"},{input3: "ccc"},];

let result = Object.assign([], ...x.flatMap(o => 
    Object.entries(o).filter(([k]) => 
        k.startsWith('input') && +k.slice(5) >= 1 && +k.slice(5) <= x.length
    ).map(([k, v]) => 
        ({ [k.slice(5)-1]: v })
    )
));
    
console.log(result);

该解决方案的一些特点：

• 要求属性名称中的后缀介于 1 和输入数组的长度之间。
• 允许输入数组中的某些对象没有与模式匹配的属性inputXX，而其他对象可能具有多个此类属性。
• 分配给属性的值inputN将存储在N-1结果数组的索引处，即使这意味着数组中会有间隙。