{"id":1115,"date":"2019-02-01T00:57:59","date_gmt":"2019-02-01T00:57:59","guid":{"rendered":"http:\/\/blog.silverterra.net\/?p=1115"},"modified":"2019-02-01T22:12:56","modified_gmt":"2019-02-01T22:12:56","slug":"javascript-convert-nodelist-to-array","status":"publish","type":"post","link":"https:\/\/blog.silverterra.net\/?p=1115","title":{"rendered":"javascript &#8211; Convert NodeList to Array"},"content":{"rendered":"<blockquote><p>Goal: work with nodeList as an array<\/p><\/blockquote>\n<p>The nodeList is great but sometime we need to convert it to an array for the easy processing.<\/p>\n<p>old method<\/p>\n<pre data-enlighter-language=\"js\" class=\"EnlighterJSRAW\">\r\n  var myNodeArray = Array.prototype.slice.call(document.querySelectorAll('div'));\r\n<\/pre>\n<p>old method &#8211; short form<\/p>\n<pre data-enlighter-language=\"js\" class=\"EnlighterJSRAW\">\r\n  var myNodeArray = [].slice.call(document.querySelectorAll('div'));\r\n<\/pre>\n<p>ES6 way &#8211; shorter form<\/p>\n<pre data-enlighter-language=\"js\" class=\"EnlighterJSRAW\">\r\n  var myNodeArray = Array.from(document.querySelectorAll('div'));\r\n<\/pre>\n<p>ES6 way &#8211; the shortest form<\/p>\n<pre data-enlighter-language=\"js\" class=\"EnlighterJSRAW\">\r\n  var myNodeArray = [...document.querySelectorAll('div')];\r\n<\/pre>\n<p>enjoy&#8230;<\/p>\n<p>One more thing is a little bit strange. Check the speed of the methods listed above.<\/p>\n<pre data-enlighter-language=\"js\" class=\"EnlighterJSRAW\">\r\nvar nodeList = document.querySelectorAll('*');\r\nconsole.log('nodes: ' + nodeList.length);\r\nconsole.time('t1'); var myArray1 = Array.prototype.slice.call(nodeList); console.timeEnd('t1');\r\nconsole.time('t2'); var myArray2 = [].slice.call(nodeList); console.timeEnd('t2');\r\nconsole.time('t3'); var myArray3 = Array.from(nodeList); console.timeEnd('t3');\r\nconsole.time('t4'); var myArray4 = [...nodeList]; console.timeEnd('t4');\r\n<\/pre>\n<p>test <a href=\"https:\/\/www.youtube.com\/watch?v=IvUU8joBb1Q\">like here<\/a> &#8211; or where you want&#8230; &#8211; the result is something like this<\/p>\n<pre data-enlighter-language=\"js\" class=\"EnlighterJSRAW\">\r\nnodes: 8720\r\nt1: 13.525146484375ms\r\nt2: 12.1533203125ms\r\nt3: 18.273193359375ms\r\nt4: 16.669921875ms\r\n...\r\nnodes: 8720\r\nt1: 11.369140625ms\r\nt2: 5.88623046875ms\r\nt3: 14.56591796875ms\r\nt4: 16.107666015625ms\r\n...\r\n<\/pre>\n<p>Surprise, let&#8217;s try to explain the reason of the difference if you want. So if you work on a racket science project with a critical processing time &#8211; believe or not &#8211; than you should use only the second method, and just forget the funky solutions&#8230;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Goal: work with nodeList as an array The nodeList is great but sometime we need to convert it to an array for the easy processing. old method old method &#8211; short form ES6 way &#8211; shorter form ES6 way &#8211; the shortest form enjoy&#8230; One more thing is a little bit strange. Check the speed [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-1115","post","type-post","status-publish","format-standard","hentry","category-javascript"],"_links":{"self":[{"href":"https:\/\/blog.silverterra.net\/index.php?rest_route=\/wp\/v2\/posts\/1115","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.silverterra.net\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.silverterra.net\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.silverterra.net\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.silverterra.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1115"}],"version-history":[{"count":9,"href":"https:\/\/blog.silverterra.net\/index.php?rest_route=\/wp\/v2\/posts\/1115\/revisions"}],"predecessor-version":[{"id":1124,"href":"https:\/\/blog.silverterra.net\/index.php?rest_route=\/wp\/v2\/posts\/1115\/revisions\/1124"}],"wp:attachment":[{"href":"https:\/\/blog.silverterra.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1115"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.silverterra.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1115"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.silverterra.net\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1115"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}