JS 中迭代数组的三种方法

梦里梦外; 2022-12-13 14:14 123阅读 0赞

### 第一种(forEach): ###

const todo = [
        { 
            id : '1',
            name : 'zhangsan',
            age : '20',
        },
        { 
            id : '2',
            name : 'lisis',
            age : '22',
        },
        { 
            id : '3',
            name : 'wangwu',
            age : '22',
        }
    ]
    
     todo.forEach(function(todos){ 
        console.log(todos.name);
    })

打印结果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTE1MTk2MA_size_16_color_FFFFFF_t_70_pic_center]

### 第二种(map)： ###

const todo = [
        { 
            id : '1',
            name : 'zhangsan',
            age : '20',
        },
        { 
            id : '2',
            name : 'lisis',
            age : '22',
        },
        { 
            id : '3',
            name : 'wangwu',
            age : '22',
        }
    ]
    const td = todo.map(function(todos){ 
      return todos.age;  
    })
    
     console.log(td);

打印结果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTE1MTk2MA_size_16_color_FFFFFF_t_70_pic_center 1]

### 第三种(filter)： ###

const todo = [
        { 
            id : '1',
            name : 'zhangsan',
            age : '20',
        },
        { 
            id : '2',
            name : 'lisis',
            age : '22',
        },
        { 
            id : '3',
            name : 'wangwu',
            age : '22',
        }
    ]
    //将age等于22的数据信息打印
    const tds = todo.filter(function(todos){ 
        return todos.age == 22;
    })
     console.log(tds);

打印结果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTE1MTk2MA_size_16_color_FFFFFF_t_70_pic_center 2]

//将age等于22的数据中的name字段打印出来
    const tds = todo.filter(function(todos){ 
        return todos.age == 22;
    }).map(function(todos){ 
        return todos.name
    })
    console.log(tds);

打印结果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTE1MTk2MA_size_16_color_FFFFFF_t_70_pic_center 3]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTE1MTk2MA_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/6ecfaf42d7484126aac277810a457517.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTE1MTk2MA_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221123/5ac22446eea44cf295efffd4b47fcc4b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTE1MTk2MA_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221123/8336974c73b44f629f534cfd71b2af7a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTE1MTk2MA_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221123/a366d570f3e44bd98ec4d0f35d5a5eef.png