前端如何优雅处理类数组对象？

Posted 2021-08-24 pingan8787

一、背景介绍

Leo 部门最近来了位前端实习生 Robin，作为师傅，Leo 认真的为 Robin 介绍了公司业务、部门工作等情况，还有前端的新人学习地图。

接下来 Robin 开始一周愉快的学习啦~

一周后，Leo 为 Robin 同学布置了学习作业，开发一个【人员搜索选择】的页面，效果大致如下：

Robin 看完这个效果图后，一脸得意的样子，这确实不难呀~

过几天后，Robin 带着自己写的代码，给 Leo 展示了她的代码，并疑惑的问到：

她将这个“数组”输出到控制台：

Leo 看了看代码：

getUserList(){
   const memberList = $(\'#MemberList li\');
   memberList.map(item => { console.log(item) });
   console.log(memberList);
}

Leo 又问到：

Robin 一脸疑惑，然后 Leo 再原来代码上，加了个 Array.from 方法如下：

getUserList(){
    const memberList = Array.from($(\'#MemberList li\'));
    memberList.map(item => {
        console.log(item)
    })
    console.log(memberList)
}

然后重新执行代码，输出下面结果：

Leo 输出的结果，跟 Robin 说到：

Robin 满脸期待望着师傅，对类数组对象更加充满期待。

二、类数组对象介绍

2.1 概念介绍

所谓 类数组对象，即格式与数组结构类似，拥有 length 属性，可以通过索引来访问或设置里面的元素，但是不能使用数组的方法，就可以归类为类数组对象。

举个例子