Javascript 如何迭代多个数组-Jquery_Javascript_Jquery

Javascript 如何迭代多个数组-Jquery

javascript jquery

Javascript 如何迭代多个数组-Jquery,javascript,jquery,Javascript,Jquery,我的代码中有两个数组，如下所示 names = ['Kelvin', 'James']; age = ['9','10']; 迭代数组时，我将数据附加到表中。这就是我希望我的表在迭代之后的样子 Name Age Kelvin 9 James 10 但是我的桌子看起来像这样 Name Age Kelvin 9 Kelvin 10 James 9 James 10 File.Js age = localStorage.getItem('

我的代码中有两个数组，如下所示

names = ['Kelvin', 'James'];
age = ['9','10'];

迭代数组时，我将数据附加到表中。这就是我希望我的表在迭代之后的样子

Name    Age

Kelvin   9

James    10

但是我的桌子看起来像这样

Name    Age

Kelvin   9

Kelvin   10

James    9

James    10

File.Js

  age = localStorage.getItem('age').split(',');
  name = localStorage.getItem('name').split(',');
  if(name != '')
        {
            if(age != '')
            {
                $.each(name, function(index,name_value){
                $.each(age, function(index, age_value){


                $('#myTableID2 #user-id2').append('<tr><td >'+name_value+'</td><td >'+age_value+'</td></tr>');
                });
            });
            }


        }

age=localStorage.getItem（'age'）.split（'，'）；
name=localStorage.getItem（'name'）.split（'，'）；
如果（名称！=''）
{
如果（年龄！=''）
{
$.each（名称、函数（索引、名称和值）{
$.each（年龄、功能（索引、年龄值）{
$（“#myTableID2#user-id2”）。追加（“”+name_值+“”+age_值+“”）；
});
});
}
}

如何实现这一点？

您只需迭代一个数组，然后使用索引从第二个数组中获取值。在当前场景中，您正在执行嵌套循环，这意味着它将迭代

nxn

次，这是完全不必要的

age = localStorage.getItem('age').split(',');
name = localStorage.getItem('name').split(',');

if(name.length && age.length){
   $.each(name, function(index,name_value){
       $('#myTableID2 #user-id2').append('<tr><td >'+name_value+'</td><td >'+age[index]+'</td></tr>');
   });
}

age=localStorage.getItem（'age'）.split（'，'）；
name=localStorage.getItem（'name'）.split（'，'）；
if（name.length&&age.length）{
$.each（名称、函数（索引、名称和值）{
$（“#myTableID2#user-id2”）。追加（“”+name_值+“”+age[索引]+“”）；
});
}

您可以在创建整个html字符串后追加，而不是在每次迭代中追加

age = localStorage.getItem('age').split(',');
name = localStorage.getItem('name').split(',');

if(name.length && age.length){
   $('#myTableID2 #user-id2').append(name.reduce(function(html, name_value, i){
       return html + '<tr><td >'+name_value+'</td><td >'+age[i]+'</td></tr>';
   }, ''));
}

age=localStorage.getItem（'age'）.split（'，'）；
name=localStorage.getItem（'name'）.split（'，'）；
if（name.length&&age.length）{
$（'#myTableID2#user-id2'）.append（name.reduce（function）（html，name\u value，i）{
返回html++''+name\u value++'+age[i]+''；
}, ''));
}

您只需要迭代一个数组，然后使用索引从第二个数组中获取值。在当前场景中，您正在执行嵌套循环，这意味着它将迭代

nxn

次，这是完全不必要的

age = localStorage.getItem('age').split(',');
name = localStorage.getItem('name').split(',');

if(name.length && age.length){
   $.each(name, function(index,name_value){
       $('#myTableID2 #user-id2').append('<tr><td >'+name_value+'</td><td >'+age[index]+'</td></tr>');
   });
}

age=localStorage.getItem（'age'）.split（'，'）；
name=localStorage.getItem（'name'）.split（'，'）；
if（name.length&&age.length）{
$.each（名称、函数（索引、名称和值）{
$（“#myTableID2#user-id2”）。追加（“”+name_值+“”+age[索引]+“”）；
});
}

您可以在创建整个html字符串后追加，而不是在每次迭代中追加

age = localStorage.getItem('age').split(',');
name = localStorage.getItem('name').split(',');

if(name.length && age.length){
   $('#myTableID2 #user-id2').append(name.reduce(function(html, name_value, i){
       return html + '<tr><td >'+name_value+'</td><td >'+age[i]+'</td></tr>';
   }, ''));
}

age=localStorage.getItem（'age'）.split（'，'）；
name=localStorage.getItem（'name'）.split（'，'）；
if（name.length&&age.length）{
$（'#myTableID2#user-id2'）.append（name.reduce（function）（html，name\u value，i）{
返回html++''+name\u value++'+age[i]+''；
}, ''));
}

如果两个数组中的元素数量始终完全相同，那么您可以尝试使用索引并只迭代一次，如下所示：

$.each(name, function(index,name_value) {
    $('#myTableID2 #user-id2').append('<tr><td >'+ name[index] +'</td><td >' + age[index] + '</td></tr>');
});

$。每个（名称、函数（索引、名称和值）{
$（'#myTableID2#user-id2'）。追加（''+name[index]+''+age[index]+''）；
});

我希望这有帮助

如果两个数组中的元素数量始终完全相同，那么您可以尝试使用索引并只迭代一次，如下所示：

$.each(name, function(index,name_value) {
    $('#myTableID2 #user-id2').append('<tr><td >'+ name[index] +'</td><td >' + age[index] + '</td></tr>');
});

$。每个（名称、函数（索引、名称和值）{
$（'#myTableID2#user-id2'）。追加（''+name[index]+''+age[index]+''）；
});

我希望这有帮助

您将迭代两次（一次用于

名称

变量，另一次用于

年龄

变量）

如果确定存储在

name

和

age

中的数组大小相同，则只需迭代其中一个数组，然后使用迭代索引访问另一个元素：

$.each(name, function(index, name_value){
    var age_value = age[index];

    $('#myTableID2 #user-id2').append('<tr><td >'+name_value+'</td><td >'+age_value+'</td></tr>');
});

如果

localStorage

中未存储任何数据，则可以返回null。在这种情况下，当您从null调用

split

方法时，代码将中断

检查

age

和

name

是否为空的方法有点混乱。您最好检查它的长度：

如果您将数据存储在

localStorage

中，我建议您将

age

和

name

存储在同一个键下：

因此，您可以确保在检索信息时，

name

和

age

的项目数相同：

var data = localStorage.getItem('users') || '[]';
var users = JSON.parse(data);
if (users.length > 0) {
    $('#myTableID2 #user-id2').append(users.map(function(user) {
        return '<tr><td >'+ user.name+'</td><td >'+user.age+'</td></tr>';
    });
}

var data=localStorage.getItem（'users'）||'[]；
var users=JSON.parse（数据）；
如果（users.length>0）{
$（'#myTableID2#user-id2'）.append（users.map（function）（user）{
返回“”+user.name+“”+user.age+“”；
});
}

您迭代了两次（一次用于

名称