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

1.普通方法

functionflattenMd(arr){

varresult=[]

functionflatten(arr){

for(vari=0;i

if(Array.isArray(arr[i])){

flatten(arr[i]);

}else{

result.push(arr[i]);

}

}

}

flatten(arr);

returnresult;

}

vararr=[1,[2,3,[4,5],6],7,8]

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方法位于内部。还可以改造成闭包的形式

functionflattenMd(ret){

functionflatten(arr){

arr.forEach(function(item){

(Array.isArray(item))?flatten(item):ret.push(item);

});

}

returnfunction(arr){

flatten(arr);

returnret;

}

}([]);

vararr=[1,[2,3,[4,5],6],7,8]

console.log(flattenMd(arr));[1,2,3,4,5,6,7,8]

2.数组concat方法

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

varcolors=['red','green','blue'];

varcolors2=colors.concat('yellow',['black','brown']);

console.log(colors2)//[ 'red', 'green', 'blue', 'yellow', 'black', 'brown' ]

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

functionflatten2d(arr){

varresult=[];

for(vari=0;i

result=result.concat(arr[i]);

}

returnresult;

}

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

functionflatten2d(arr){

returnArray.prototype.concat.apply([],arr);

}

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

对于多维数组

functionflattenMd(arr){

varresult=[];

for(vari=0;i

if(arr[i]instanceofArray){

result=result.concat(flattenMd(arr[i]));

}

else{

result.push(arr[i]);

}

}

returnresult;

}

vararr=[1,[2,3,[4,5],6],7,8]

console.log(flattenMd(arr));[1,2,3,4,5,6,7,8]

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

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

functionflattenMd(arr){

returnarr.join().split(',');

}

vararr=['1',[null,3,[4,5],{K:1}],undefined,8]

console.log(flattenMd(arr));//[ '1', '', '3', '4', '5', '[object Object]', '', '8' ]

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

functionflattenMd(arr){

returnarr.join().split(',');

}

vararr=[1,[5,3,[8,5],5,[15]],9,13]

console.log(Math.max.apply(null,flattenMd(arr)));//15

javascript数组降维_Javascript实现的数组降维——维度不同,怎么谈恋爱相关推荐

  1. JAVA中将数组清空_JavaScript中清空数组的三种方式

    方式1,splice var ary = [1,2,3,4]; ary.splice(0,ary.length); console.log(ary); // 输出 [],空数组,即被清空了 方式2,l ...

  2. jq数组清空_JavaScript中清空数组的三种方式

    方式1,splice var ary = [1,2,3,4]; ary.splice(0,ary.length); console.log(ary); // 输出 [],空数组,即被清空了 方式2,l ...

  3. js中ES6新增的数组方法reduce(),和数组去重,降维。

    js中ES6新增的数组方法reduce() js数组reduce()详解 基本概念: reduce()方法接收一个函数作为累加器,数组中的每一值(从左到右)开始缩减,最后成为一个值 reduce()为 ...

  4. java代码中fastjson生成字符串和解析字符串的方法和javascript文件中字符串和json数组之间的转换方法...

    1.java代码中fastjson生成字符串和解析字符串的方法 List<TemplateFull> templateFulls = new ArrayList<TemplateFu ...

  5. JavaScript中十种一步拷贝数组的方法

    JavaScript中我们经常会遇到拷贝数组的场景,但是都有哪些方式能够来实现呢,我们不妨来梳理一下. 1.扩展运算符(浅拷贝) 自从ES6出现以来,这已经成为最流行的方法.它是一个很简单的语法,但是 ...

  6. JavaScript学习总结(二)数组和对象部分

    pt学习总结(二)数组和对象部分 2016-09-16    分类:WEB开发.编程开发.首页精华暂无人评论     来源:trigkit4 分享到:更多1 对象部分 Object类型 Object  ...

  7. JavaScript中十个一步拷贝数组的方法

    JavaScript中我们经常会遇到拷贝数组的场景,但是都有哪些方式能够来实现呢,我们不妨来梳理一下. 1.扩展运算符(浅拷贝) 自从ES6出现以来,这已经成为最流行的方法.它是一个很简单的语法,但是 ...

  8. 【JavaScript】JS的变量、数组、计算器案例、函数、类、常用对象的方法

    目录 01-js-js的声明和引入 <!DOCTYPE html> <html><head><meta charset="UTF-8"&g ...

  9. js不用reverse反转数组代码_JavaScript 数组排序

    JavaScript 数组排序 JS 数组方法 JS 数组迭代 sort() 方法是最强大的数组方法之一. 数组排序 sort() 方法以字母顺序对数组进行排序: 实例 var fruits = [& ...

最新文章

  1. 广告点击率预测_精品案例|在线广告点击率预测
  2. 如何刷新JTable
  3. npm使用入门(package.json)
  4. stm32之USART学习
  5. java循环语句三角形_JAVA——程序流程控制——循环语句——for循环(打印三角形)...
  6. html laber上下居中,CSS未知高度垂直居中的实现
  7. BZOJ4314 倍数?倍数!
  8. JDBC 学习笔记(一)—— JDBC 基础
  9. nginx 直接在配置文章中设置日志分割
  10. 如何保证消息队列里的数据顺序执行?
  11. 一文说透WordPress的自定义文章类型
  12. 大话西游之Office应用实例系列! 19
  13. 面试官:new Object[5] 一共创建了几个对象?
  14. android gps信号一直获取不到_抵押车的GPS到底能不能拆干净!
  15. tar.bz2 解压命令
  16. 身份证号码校验工具类—算法
  17. 微信 支付 h5 开发 使用 best-pay-sdk
  18. Gym 101350E Competitive Seagulls
  19. 【首次起用黑人模特的Prada】
  20. 有哪些主流智能音箱品牌值得买?小米、华为、苹果、百度

热门文章

  1. js把文字中的空格替换为横线
  2. 系统升级到10.13之后cocoapods安装失败问题解决办法
  3. 智能家居成新热点 市场化进程遇瓶颈
  4. 《ANSYS 14.0超级学习手册》一第2章 高级应用的基石——APDL
  5. Mysql 内部结构 / Replication | 原理
  6. PHP问题 —— Deprecated: Function ereg_replace() is de
  7. hadoop、spark/storm等大数据相关视频资料汇总下载
  8. Java输入输出(io)流详解、图解
  9. IE下的li有空白问题
  10. rtsp发送主流和辅流