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

{"type":"doc","content":[{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"一、背景介绍"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Leo 部门最近来了位前端实习生 Robin，作为师傅，Leo 认真的为 Robin 介绍了公司业务、部门工作等情况，还有前端的新人学习地图。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"接下来 Robin 开始一周愉快的学习啦~"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"一周后，Leo 为 Robin 同学布置了学习作业，开发一个【人员搜索选择】的页面，效果大致如下："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/c5/c52a42e1e2778f053b2ec2b38276b349.gif","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Robin 看完这个效果图后，一脸得意的样子，这确实不难呀~"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"过几天后，Robin 带着自己写的代码，给 Leo 展示了她的代码，并疑惑的问到："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/7e/7ee87a6ee4c74faa46a0f12d63035e74.png","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"她将这个“数组”输出到控制台："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/54/54ec6fe9bee2f0733605727355571106.png","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Leo 看了看代码："}]},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":"getUserList(){\n const memberList = $('#MemberList li');\n memberList.map(item => { console.log(item) });\n console.log(memberList);\n}"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Leo 又问到："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/f1/f11de7fac2385c0a8a753fec6df25f54.png","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Robin 一脸疑惑，然后 Leo 再原来代码上，加了个 "},{"type":"codeinline","content":[{"type":"text","text":"Array.from"}]},{"type":"text","text":" 方法如下："}]},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":"getUserList(){\n const memberList = Array.from($('#MemberList li'));\n memberList.map(item => {\n console.log(item)\n })\n console.log(memberList)\n}"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"然后重新执行代码，输出下面结果："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/3a/3a1f14956a087e53be8a78d7e8c4119a.png","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Leo 输出的结果，跟 Robin 说到："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/96/968af3d9404f978b9da4fd0a558728ce.png","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Robin 满脸期待望着师傅，对"},{"type":"text","marks":[{"type":"strong"}],"text":"类数组对象"},{"type":"text","text":"更加充满期待。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"二、类数组对象介绍"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"2.1 概念介绍"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"所谓 "},{"type":"text","marks":[{"type":"strong"}],"text":"类数组对象"},{"type":"text","text":"，即格式与数组结构类似，拥有 "},{"type":"codeinline","content":[{"type":"text","text":"length"}]},{"type":"text","text":" 属性，可以通过"},{"type":"text","marks":[{"type":"strong"}],"text":"索引"},{"type":"text","text":"来访问或设置里面的元素，但是不能使用数组的方法，就可以归类为"},{"type":"text","marks":[{"type":"strong"}],"text":"类数组对象"},{"type":"text","text":"。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"举个例子🌰："}]},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":"const arrLike = {\n 0: 'name',\n 1: 'age',\n 2: 'job',\n length: 3\n}"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"2.2 常见类数组对象"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"arguments"}]},{"type":"text","text":" 对象；"}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":"function f() {\n return arguments;\n}\nf(1,2,3)\n\n// Arguments(3) [1, 2, 3, callee: ƒ, Symbol(Symbol.iterator): ƒ]"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"NodeList"}]},{"type":"text","text":"（比如 "},{"type":"codeinline","content":[{"type":"text","text":"document.getElementsByClassName('a')"}]},{"type":"text","text":" 得到的结果；"}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":"document.getElementsByTagName('img')\n// HTMLCollection(3) [img, img, img]"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"typedArray"}]},{"type":"text","text":"（比如 "},{"type":"codeinline","content":[{"type":"text","text":"Int32Array"}]},{"type":"text","text":"）；"}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"typedArray 即 "},{"type":"text","marks":[{"type":"strong"}],"text":"类型化数组对象"},{"type":"text","text":" 是一种类似数组的对象，它提供了一种用于访问原始二进制数据的机制。JavaScript引擎会做一些内部优化，以便对数组的操作可以很快。然而，随着Web应用程序变得越来越强大，尤其一些新增加的功能例如：音频视频编辑，访问WebSockets的原始数据等，很明显有些时候如果使用JavaScript代码可以快速方便地通过类型化数组来操作原始的二进制数据将会非常有帮助。 ——"},{"type":"link","attrs":{"href":"https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Typed_arrays","title":""},"content":[{"type":"text","text":" 《MDN 类型化数组》"}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":"const typedArray = new Uint8Array([1, 2, 3, 4])\n// Uint8Array(4) [1, 2, 3, 4]"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"另外使用 jQuery 获取元素，会被 jQuery 做特殊处理成为 init 类型："}]},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":"$('img')\n// init(3) [img, img, img, prevObject: init(1), context: document, selector: \"img\"]"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"当然还有一些不常见的类数组对象，比如“Storage API 返回的结果”，这里就不一一列出。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"三、类数组对象属性"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"下面通过 Robin 代码作为示例，介绍类数组对象的属性："}]},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":"const memberList = $('#MemberList li');"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"3.1 读写"}]},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":"// 读取\nmemberList[0];\n// Node:

...

\n\n// 写入\nmemberList[0] = document.createElement(\"div\")\nmemberList[0];\n// Node:

...

"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"3.2 长度"}]},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":"memberList.length; \n// 10"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"3.3 遍历"}]},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":"for (let i = 0;i < memberList.length; i++){\n console.log(memberList[i]);\n}\n\n/*\n\tNode:

...

\n\tNode:

...

\n ... 共10个，省略其他\n*/\n\nmemberList.map(item => console.log(item));\n\n/*\n\t0\n ... 共10个，省略其他\n*/"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"但如果是 "},{"type":"codeinline","content":[{"type":"text","text":"HTMLCollection"}]},{"type":"text","text":" 就不能使用 "},{"type":"codeinline","content":[{"type":"text","text":"map"}]},{"type":"text","text":" 咯："}]},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":"const img = document.getElementsByTagName(\"img\");\nimg.map(item => console.log(item));\n\n// Uncaught TypeError: img.map is not a function"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"四、类数组对象处理"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Leo 看了看 Robin 处理这个列表的代码："}]},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":"getUserList(){\n const memberList = $('#MemberList li');\n const result = {\n text: [],\n dom : [],\n };\n memberList.map(item => {\n item = memberList[item]\n // 判断当前节点是否有 checked 类名\n })\n console.log(result)\n this.showToast(`选中成员：${result.text}`);\n}"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"很明显，Robin 并没有对 jQuery 获取到的 "},{"type":"codeinline","content":[{"type":"text","text":"memberList"}]},{"type":"text","text":" 做处理，直接使用，通过索引来获取对应值。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Leo 继续和 Robin 介绍到："}]},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/9f/9f23ea34e816bb248cef2de2274aa34d.png","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"4.1 Array.from"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"使用 "},{"type":"codeinline","content":[{"type":"text","text":"Array.from"}]},{"type":"text","text":" 来将类数组对象转为数组对象，操作起来非常简单："}]},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":"getUserList(){\n const memberList = Array.from($('#MemberList li'));\n // 省略其他代码\n}"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"其"},{"type":"text","marks":[{"type":"strong"}],"text":"语法"},{"type":"text","text":"如下："}]},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":"Array.from(arrayLike[, mapFn[, thisArg]])"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong"}],"text":"参数"},{"type":"text","text":"："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"numberedlist","attrs":{"start":"1","normalizeStart":1},"content":[{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":1,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"arrayLike"}]},{"type":"text","text":" 想要转换成数组的伪数组对象或可迭代对象。"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":2,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"mapFn"}]},{"type":"text","text":" 可选如果指定了该参数，新数组中的每个元素会执行该回调函数。"}]}]},{"type":"listitem","content":[{"type":"paragraph","attrs":{"indent":0,"number":3,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"thisArg"}]},{"type":"text","text":" 可选可选参数，执行回调函数 "},{"type":"codeinline","content":[{"type":"text","text":"mapFn"}]},{"type":"text","text":" 时 "},{"type":"codeinline","content":[{"type":"text","text":"this"}]},{"type":"text","text":" 对象。"}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong"}],"text":"返回值"},{"type":"text","text":"："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"一个新的数组实例。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"更多"},{"type":"link","attrs":{"href":"https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/from","title":""},"content":[{"type":"text","text":" Array.from "}]},{"type":"text","text":" 介绍可以查看文档。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"4.2 Array.prototype.slice.call()"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"slice()"}]},{"type":"text","text":" 方法返回一个新的数组对象，这一对象是一个由 "},{"type":"codeinline","content":[{"type":"text","text":"begin"}]},{"type":"text","text":" 和 "},{"type":"codeinline","content":[{"type":"text","text":"end"}]},{"type":"text","text":" 决定的原数组的**浅拷贝**（包括 "},{"type":"codeinline","content":[{"type":"text","text":"begin"}]},{"type":"text","text":"，不包括"},{"type":"codeinline","content":[{"type":"text","text":"end"}]},{"type":"text","text":"）。"},{"type":"text","marks":[{"type":"strong"}],"text":"原始数组不会被改变"},{"type":"text","text":"。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"实现代码："}]},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":"getUserList(){\n const memberList = Array.prototype.slice.call($('#MemberList li'));\n // 省略其他代码\n}"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"更多 "},{"type":"link","attrs":{"href":"https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/slice","title":""},"content":[{"type":"text","text":"Array.prototype.slice"}]},{"type":"text","text":" 介绍可以查看文档。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"4.3 ES6展开运算符"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"展开语法(Spread syntax), 可以在函数调用/数组构造时, "},{"type":"text","marks":[{"type":"strong"}],"text":"将数组表达式或者string在语法层面展开"},{"type":"text","text":"；还可以在构造字面量对象时, 将对象表达式按"},{"type":"codeinline","content":[{"type":"text","text":"key-value"}]},{"type":"text","text":"的方式展开。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"实现代码："}]},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":"getUserList(){\n const memberList = [...document.getElementsByTagName(\"li\")];\n // 省略其他代码\n}"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"更多 "},{"type":"link","attrs":{"href":"https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Spread_syntax","title":""},"content":[{"type":"text","text":"ES6展开运算符"}]},{"type":"text","text":" 介绍可以查看文档。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"4.4 利用concat+apply"}]},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":"getUserList(){\n const memberList = Array.prototype.concat.apply([], $('#MemberList li'));\n // 省略其他代码\n}"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"五、案例小结"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Leo 介绍完这些知识后，Robin 又优化了下自己的代码，涉及"},{"type":"text","marks":[{"type":"strong"}],"text":"到类数组对象操作的"},{"type":"text","text":"核心 js 代码如下："}]},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":"class SelectMember {\n constructor(){\n this.MockUsers = window.MockUsers;\n this.init();\n }\n init(){\n this.initMemberList('#MemberList', this.MockUsers);\n this.initBindEvent();\n }\n\t // ... 省略部分代码，保留核心代码\n submitSelect(){\n const memberList = Array.from($('#MemberList li'));\n const result = {\n text: [],\n dom : [],\n };\n memberList.map(item => {\n const hasClass = $(item).children('.round-checkbox').children('span').hasClass(this.selectClassName);\n if(hasClass){\n result.text.push($(item).children('.user-data').children('h4').text());\n result.dom.push(item);\n }\n })\n this.showToast(`选中成员：${result.text}`);\n }\n}\n\nlet newMember = new SelectMember();"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"很明显，使用正确方式来处理类数组对象，不仅能使我们代码更加少，减少转换处理，还能提高代码质量。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"整个项目的完整代码，可以在"},{"type":"link","attrs":{"href":"https://github.com/pingan8787/Leo-JavaScript/blob/master/Cute-Demo/10.Learn-Array-Liked-Objects/index.html","title":""},"content":[{"type":"text","text":"我的 github 查看"}]},{"type":"text","text":"："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"link","attrs":{"href":"https://github.com/pingan8787/Leo-JavaScript/blob/master/Cute-Demo/10.Learn-Array-Liked-Objects/index.html","title":""},"content":[{"type":"text","text":"https://github.com/pingan8787/Leo-JavaScript/blob/master/Cute-Demo/10.Learn-Array-Liked-Objects/index.html"}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"六、总结"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"本文我们通过一个实际场景，详细介绍了类数组对象在实际开发中的使用，对于常见的类数组对象，我们还介绍了处理方式，能很大程度减少我们处理类数组对象的操作，将类数组统一转成数组，更加方便对数据的操作。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"希望看完本文的你，以后再遇到类数组对象，不会再一脸懵逼咯~~~"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}}]}