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

问题描述

我有以下示例代码：

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

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

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

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

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

是否可以使用可选链来知道这些值？我缺少什么？

解决方法

您只需要在索引中添加一个并为没有点的对象使用括号表示法。

optional chaining operator ?. 仅适用于具有 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}`]);
});

,

可选链没有什么意义，除非您只是在寻找特定的属性。使用 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"},{input555: "eee"}
]

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

在你第 5 次左右编辑之后，要获得你想要的输出就更奇怪了......你需要使用 reduce OR 映射和过滤器。您需要跟踪当前索引。

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


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);

,

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

var x = [{input1: "aaa"},];

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 处，即使这意味着数组中会有间隙。