javascript - 在 javascript 中向属性名称添加计数器

Question

我试图让我的 javascript 脚本更加动态，但我不太习惯使用它，所以我需要帮助弄清楚是否可以向属性名称添加计数器？

所以我想要这段代码:

var title1 = document.getElementsByClassName('requestRightsTitle1')[0].value;
var email1 = document.getElementsByClassName('requestRightsEmail1')[0].value;
var title2 = document.getElementsByClassName('requestRightsTitle2')[0].value;
var email2 = document.getElementsByClassName('requestRightsEmail2')[0].value;
var title3 = document.getElementsByClassName('requestRightsTitle3')[0].value;
var email3 = document.getElementsByClassName('requestRightsEmail3')[0].value;
var title4 = document.getElementsByClassName('requestRightsTitle4')[0].value;
var email4 = document.getElementsByClassName('requestRightsEmail4')[0].value;

做类似的事情:

var inputFields = [];

for (i = 1; i <= 5; i++) {
   inputFields.push({
       title: document.getElementsByClassName('requestRightsTitle'+i)[0].value,
       email: document.getElementsByClassName('requestRightsEmail'+i)[0].value
       })
}

但我需要这个标题和电子邮件为标题1、电子邮件1、标题2、电子邮件2...

我尝试过:

for (i = 1; i <= 5; i++) {
    inputFields.push({
         'title'+i: document.getElementsByClassName('requestRightsTitle'+i)[0].value,
         'email'+i: document.getElementsByClassName('requestRightsEmail'+i)[0].value
    })
}

类似的事情，但没有成功。如果有办法实现这一点，请分享您的解决方案。提前致谢。

Answer 1

无需在属性名称上添加数字后缀。您将属性放在不同的对象中，因此只需使用 title 和 email，这样您的对象就有一组一致的属性名称:

for (i = 1; i <= 5; i++) {
   inputFields.push({
       title: document.getElementsByClassName('requestRightsTitle'+i)[0].value,
       email: document.getElementsByClassName('requestRightsEmail'+i)[0].value
   });
}

实例:

var i;
var inputFields = [];
for (i = 1; i <= 3; i++) {
   inputFields.push({
       title: document.getElementsByClassName('requestRightsTitle'+i)[0].value,
       email: document.getElementsByClassName('requestRightsEmail'+i)[0].value
   });
}
console.log(inputFields);

.as-console-wrapper {
  max-height: 100% !important;
}

<input class="requestRightsTitle1" value="title 1">
<input class="requestRightsEmail1" value="email 1">
<br>
<input class="requestRightsTitle2" value="title 2">
<input class="requestRightsEmail2" value="email 2">
<br>
<input class="requestRightsTitle3" value="title 3">
<input class="requestRightsEmail3" value="email 3">

<小时/>

但如果你确实有理由这样做:

使用 ES2015+ 语法，您可以使用计算属性名称来实现:

for (i = 1; i <= 5; i++) {
   inputFields.push({
       ["title" + i]: document.getElementsByClassName('requestRightsTitle'+i)[0].value,
       ["email" + i]: document.getElementsByClassName('requestRightsEmail'+i)[0].value
   });
}

在 ES5 之前，您必须先创建对象，然后添加属性:

for (i = 1; i <= 5; i++) {
   var obj = {};
   obj["title" + i] = document.getElementsByClassName('requestRightsTitle'+i)[0].value;
   obj["email" + i] = document.getElementsByClassName('requestRightsEmail'+i)[0].value;
   inputFields.push(obj);
}