Javascript实现的数组降维——维度不同,怎么谈恋爱

数组的元素可能是数组,这样一层层嵌套,可能得到一个嵌套很深的数组,数组降维要做的事就是把嵌套很深的数组展开,一般最后得到一个一维数组,其中的元素都是非数组元素,比如数组[1, [2, 3, [4, 5], 6], 7, 8]降维展开后是[1, 2, 3, 4, 5, 6, 7, 8].

1.普通方法

  1. function flattenMd(arr){
  2. var result=[]
  3. function flatten(arr){
  4. for (var i = 0; i < arr.length; i++) {
  5. if (Array.isArray(arr[i])) {
  6. flatten(arr[i]);
  7. }else{
  8. result.push(arr[i]);
  9. }
  10. }
  11. }
  12. flatten(arr);
  13. return result;
  14. }
  15. var arr=[1, [2, 3, [4, 5], 6], 7, 8]
  16. console.log(flattenMd(arr));[ 1, 2, 3, 4, 5, 6, 7, 8 ]

备注:这里我使用了Array.isArray()方法来检测对象时候是数组,没有考虑ES5以下的兼容性,关于js对象类型的检测可以参考我的另一篇博文Javascript数据类型检测,当然了如果支持ES5的话,还可以直接使用数组的迭代方法forEach(或map、reduce等),Es6中还有for···in可以使用,这里就不赘述了。

这个方法需要定义两个函数,其中flatten方法位于内部。还可以改造成闭包的形式

  1. function flattenMd(ret) {
  2. function flatten(arr) {
  3. arr.forEach(function(item) {
  4. (Array.isArray(item)) ? flatten(item) : ret.push(item);
  5. });
  6. }
  7. return function(arr) {
  8. flatten(arr);
  9. return ret;
  10. }
  11. }([]);
  12. var arr=[1, [2, 3, [4, 5], 6], 7, 8]
  13. console.log(flattenMd(arr));[ 1, 2, 3, 4, 5, 6, 7, 8 ]

2.数组concat方法

熟悉数组操作方法的开发人员应该知道数组concat方法的特性:传递给concat方法的参数序列中如果包含数组,则会将这个数组的每一项添加到结果数组中,这就使数组的这个方法具有了天然的展开二维数组的能力,比如:

  1. var colors=['red','green','blue'];
  2. var colors2=colors.concat('yellow',['black','brown']);
  3. console.log(colors2)//[ 'red', 'green', 'blue', 'yellow', 'black', 'brown' ]

需要注意的是如果数组的元素还是数组则不会再展开了,也就是concat方法只能降低一维。借助concat方法,可以得到另一种二维数组降维方法。

  1. function flatten2d(arr) {
  2. var result = [];
  3. for(var i = 0; i < arr.length; i++) {
  4. result = result.concat(arr[i]);
  5. }
  6. return result;
  7. }

上面的方法还可以进一步简化。我们知道apply方法是可以直接接受数组参数,这样我们连循环迭代都省了。

  1. function flatten2d(arr) {
  2. return Array.prototype.concat.apply([], arr);
  3. }

网上很多博客说使用递归很容易将二维的降维改造成多维的降维,实际上操作起来是比较复杂的,因为没有现成的方法能够判断某个数组是不是二维数组,也就不能判断递归的结束条件了。所以对于多维数组的降维需要重新规划使用concat方法可以避免方法一中多出的内部函数

对于多维数组

  1. function flattenMd(arr) {
  2. var result = [];
  3. for(var i = 0; i < arr.length; i++){
  4. if(arr[i] instanceof Array) {
  5. result = result.concat(flattenMd(arr[i]));
  6. }
  7. else {
  8. result.push(arr[i]);
  9. }
  10. }
  11. return result;
  12. }
  13. var arr=[1, [2, 3, [4, 5], 6], 7, 8]
  14. console.log(flattenMd(arr));[ 1, 2, 3, 4, 5, 6, 7, 8 ]

3.数组join和split方法的结合(有缺陷)

很多开发人员都知道数组的join方法可以将数组展开成字符串,但是不确定的是join方法能够展平数组,即使是多维数组,我们再使用split方法重新组合数组就行了。但是这个方法有天然缺陷,下面的例子中会看到

  1. function flattenMd(arr) {
  2. return arr.join().split(',');
  3. }
  4. var arr=['1', [null, 3, [4, 5], {K:1}], undefined, 8]
  5. console.log(flattenMd(arr));//[ '1', '', '3', '4', '5', '[object Object]', '', '8' ]

从结果可以看出,这样处理过后有几个缺点:一是所有类型的元素都会变成字符串;二是null、undefined会变成空字符串、对象会变成'[object Object]'。相当于调用了toString方法,当也不是说这个方法一无是处。对于同一种类型的元素,还是很有用处的,比如要求多维数组的最大值。

  1. function flattenMd(arr) {
  2. return arr.join().split(',');
  3. }
  4. var arr=[1, [5, 3, [8, 5], 5,[15]], 9, 13]
  5. console.log(Math.max.apply(null,flattenMd(arr)));//15

参考

优雅的数组降维——Javascript中apply方法的妙用

上一篇:sqlserver waitfor time 延迟函数的用法


下一篇:文件上传组件FileUpload 以及邮箱搭建JavaMail