js数组中一些实用的方法(forEach,map,filter,find)

虽互不曾谋面,但希望能和你成为笔尖下的朋友

以读书,技术,生活为主,偶尔撒点鸡汤

不作,不敷衍,意在真诚吐露,用心分享

点击左上方,可关注本刊

(点击绿色图标,可收听音频)

撰文 | 川川

VX-ID:suibichuanji

点击文末左下方阅读原文,可看视频内容

前言

撰文:川川

您将在本文中学习到

• for循环与forEach/map/filter/find的一个使用对比

• 同for循环性能的一个比较

是不是一提到循环,就条件反射的只知道for循环呢,那么本文就是你想要知道的

·  正  ·  文  ·  来  ·  啦  ·

需求场景: 假若后端返回这么一个json数据格式,如下所示,我们需要拿到返回对象中的数组项,或者根据某些指定的条件，取特定的值,然后渲染到页面当中去,例如:拿name属性值

{
   "ret":true,
   "data":{
       "headerTitle":"群成员",
       "members":{
         "A":[
            {"id":"0A1","name":"小爱","imgPhoto","http://default.png","phoneNumber":1333344,“age”:18},
          ],
         "B":[],
         "C":[],
         "D":[
            {"id":"0D1","name":"小兵","imgPhoto","http://default.png","phoneNumber":14343344,"age":19},
         ],
         "E":[],
         "F":[],
         "H":[
            {"id":"0H1","name":"黄药师","imgPhoto","http://default.png","phoneNumber":14343344
         }],
         "L":[
            {"id":"0L1","name":"小
             L1","imgPhoto","http://default.png","phoneNumber":14343344,"age":20},
            {"id":"0L2","name":"小L1","imgPhoto","http://default.png","phoneNumber":14343344,"age":22}
            {"id":"0L3","name":"小L2","imgPhoto","http://default.png","phoneNumber":14343344,"age":21}
         ]
         }
         }
}

对应的UI渲染图结果如下所示

(客人到家,换鞋太麻烦,弄个鞋套机,省事方便)

从数组对象中拿到特定的值渲染到页面当中，一些新增数组的方法就很有用了,单纯靠一个for循环就很难搞定了

目标:取对象中的值,然后循环遍历数组

Es5实现方法:先通过对象,方式拿到数组对象,然后for循环,拿到数组项

不同的框架代码中实现的方式语法表现有些不一样

Angular中

// array表示要遍历的数组,obj表示遍历时的每个元素,index表示遍历数组的下标,当然ng中提供 ng-repeat指令也是可以循环遍历
angular.forEach(array,funciton(obj,index){
 // dosomething
}

React中:

react中父组件向子组件传值,同样,使用最多是map方法

Vue中

vue中比较粗暴,直接用指令v-for="item in items"可以遍历,比较暴力,下面的是伪代码,仅供参考

var members = {}; // 初始化一个空对象,用于接收后台要返回的对象,然后通过DOM(innerHTML方式，字符串拼接)操作,将数据内填充到页面中指定的位置,当然下面的是伪代码模拟一下
axios.get("/api/mock/linker.json")
.then(res=>{
  res = res.data;
  if(res.ret == true){
   let data = res.data;
   this.members = data.members;
  }
})
function showName(){
  for(key in this.members){
     for(var i=