Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

如何装好「数组扁平化」的逼?

  「数组扁平化」是一道经典的面试题,它的实现方式有很多很多。对于喜欢装逼的我而言,一般的递归、循环之类的方案很难满足我。必须得找到一种逼格比较高的数组扁平化方案才会善罢甘休。现在咱就把茴香豆的回字各种写法都试试来装个逼,也许真有你没见过的哦。
  这里说的数组扁平化不是针对特定类型的,所以 join/split 的方案请绕行。
  首先是最普通的方案,递归(ES3):
<script> var arr = [ 1, 2, 3, [ 4, [ 5 ], 6 ] ]; var result = []; void function callee(arr) { arr.forEach(function(item) { if (item instanceof Array) { callee(item); } else { result.push(item); } }); }(arr); document.write(result); </script>   这种递归的方案的逼格是最低的,稍微高点的可以试试 reduce 递归(ES5):
<script> var arr = [ 1, 2, 3, [ 4, [ 5 ], 6 ] ]; var result = arr.reduce(function callee(storage, item) { if (item instanceof Array) { item.reduce(callee, storage); } else { storage.push(item); } return storage; }, []); document.write(result); </script>   其实思路还是一样,只是把全局的 result 容器换成了 reduce 的迭代器,避免了一个全局变量。如果只是解决 result 的存储问题,ES6 的迭代器应该更合适。下面这个是逼格更高一点的迭代器递归(ES6):
<script> var arr = [ 1, 2, 3, [ 4, [ 5 ], 6 ] ]; var result = function* callee(arr) { for (let item of arr) { if (item instanceof Array) { yield* callee(item); } else { yield item; } }; }(arr); document.write([...result]); </script>   递归的方案其实也就那么回事,如果不想递归呢?试试循环吧?下面这个循环的思路是持续做 concat 操作,直到所有元素都不是数组为止。(ES6)
<script> var arr = [ 1, 2, 3, [ 4, [ 5 ], 6 ] ]; while (arr.some(item => item instanceof Array)) arr = [].concat(...arr); document.write(arr); </script>   或者另一个办法是遍历过程中把遇到的数组插回原数组:(ES6)
<script> var arr = [ 1, 2, 3, [ 4, [ 5 ], 6 ] ]; for (let i = 0; i < arr.length; i++) if (arr[i] instanceof Array) arr.splice(i, 1, ...arr[i]); document.write(arr); </script>   那么,除了循环和递归之外还有别的方法么?好吧,最后演示一个逼格最高的方案(其实也是递归,只不过是引擎内部的)。
<script> var arr = [ 1, 2, 3, [ 4, [ 5 ], 6 ] ]; var result = []; JSON.stringify(arr, function(key) { let value = this[key]; if (!(value instanceof Array)) result.push(value); return value; }); document.write(result); </script>   这个逼就装到这儿吧,如果大家有什么更碉堡的方案欢迎分享哦~
网名:
52.91.185.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^