前端如何優雅處理類數組對象？

{"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}}]}