js最全的数组的降维5种办法(小结)


Posted in Javascript onApril 28, 2020

业务开发中,二维数组、多维数组转为一维数组这种需求是少不了的,有些多维数组里面可能嵌套会更深,数组降维就是来解决此问题的

1、数组字符串化

let arr = [[222, 333, 444], [55, 66, 77], {a: 1} ]
arr += '';
arr = arr.split(',');
 
console.log(arr); // ["222", "333", "444", "55", "66", "77", "[object Object]"]

所有的元素会转换为字符串,且元素为对象类型会被转换为 "[object Object]" ,对于同一种类型数字或字符串还是可以的。

2、递归

function reduceDimension(arr){
  let ret = [];
  let toArr = function(arr){
    arr.forEach(function(item){
      item instanceof Array ? toArr(item) : ret.push(item);
    });
  }
  toArr(arr);
  return ret;
}

3、Array​.prototype​.flat()

var arr1 = [1, 2, [3, 4]];
arr1.flat(); 
// [1, 2, 3, 4]
 
var arr2 = [1, 2, [3, 4, [5, 6]]];
arr2.flat();
// [1, 2, 3, 4, [5, 6]]
 
var arr3 = [1, 2, [3, 4, [5, 6]]];
arr3.flat(2);
// [1, 2, 3, 4, 5, 6]
 
//使用 Infinity 作为深度,展开任意深度的嵌套数组
arr3.flat(Infinity); 
// [1, 2, 3, 4, 5, 6]

4、

// 不使用递归,使用 stack 无限反嵌套多层嵌套数组
var arr1 = [1,2,3,[1,2,3,4, [2,3,4]]];
function flatten(input) {
 const stack = [...input];
 const res = [];
 while (stack.length) {
  // 使用 pop 从 stack 中取出并移除值
  const next = stack.pop();
  if (Array.isArray(next)) {
   // 使用 push 送回内层数组中的元素,不会改动原始输入 original input
   stack.push(...next);
  } else {
   res.push(next);
  }
 }
 // 使用 reverse 恢复原数组的顺序
 return res.reverse();
}
flatten(arr1);// [1, 2, 3, 1, 2, 3, 4, 2, 3, 4]

5、

// 使用 reduce、concat 和递归无限反嵌套多层嵌套的数组
var arr1 = [1,2,3,[1,2,3,4, [2,3,4]]];
 
function flattenDeep(arr1) {
  return arr1.reduce((acc, val) => Array.isArray(val) ? acc.concat(flattenDeep(val)) : acc.concat(val), []);
}
flattenDeep(arr1);
// [1, 2, 3, 1, 2, 3, 4, 2, 3, 4]

到此这篇关于js最全的数组的降维5种办法(小结)的文章就介绍到这了,更多相关js 数组降维内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
javascript数组去掉重复
May 12 Javascript
js replace正则表达式应用案例讲解
Jan 17 Javascript
Javascript代码实现仿实例化类
Apr 03 Javascript
使用AngularJS创建自定义的过滤器的方法
Jun 18 Javascript
Javascript实现鼠标右键特色菜单
Aug 04 Javascript
JavaScript中数组去除重复的三种方法
Apr 22 Javascript
基于JS组件实现拖动滑块验证功能(代码分享)
Nov 18 Javascript
Javascript实现base64的加密解密方法示例
Jun 27 Javascript
swiper自定义分页器使用方法详解
Sep 14 Javascript
react用Redux中央仓库实现一个todolist
Sep 29 Javascript
vue 实现购物车总价计算
Nov 06 Javascript
Element实现表格嵌套、多个表格共用一个表头的方法
May 09 Javascript
JS数组降维的实现Array.prototype.concat.apply([], arr)
Apr 28 #Javascript
React中Ref 的使用方法详解
Apr 28 #Javascript
在Webpack中用url-loader处理图片和字体的问题
Apr 28 #Javascript
react PropTypes校验传递的值操作示例
Apr 28 #Javascript
vue 百度地图(vue-baidu-map)绘制方向箭头折线实例代码详解
Apr 28 #Javascript
Vue + Scss 动态切换主题颜色实现换肤的示例代码
Apr 27 #Javascript
浅析vue cli3 封装Svgicon组件正确姿势(推荐)
Apr 27 #Javascript
You might like
PHP以mysqli方式连接类完整代码实例
2014/07/15 PHP
ThinkPHP行为扩展Behavior应用实例详解
2014/07/22 PHP
制作个性化的WordPress登陆界面的实例教程
2016/05/21 PHP
PHP判断访客是否手机端(移动端浏览器)访问的方法总结【4种方法】
2019/03/27 PHP
Javascript Jquery 遍历Json的实现代码
2010/03/31 Javascript
JSON 数据格式介绍
2012/01/13 Javascript
node.js中的path.extname方法使用说明
2014/12/09 Javascript
javascript中JSON对象与JSON字符串相互转换实例
2015/07/11 Javascript
JavaScript定时器实现的原理分析
2016/12/06 Javascript
集合Bootstrap自定义confirm提示效果
2017/09/19 Javascript
vue生成文件本地打开查看效果的实例
2018/09/06 Javascript
浅探express路由和中间件的实现
2019/09/30 Javascript
基于JS实现table导出Excel并保留样式
2020/05/19 Javascript
解决vue-cli输入命令vue ui没效果的问题
2020/11/17 Javascript
[41:52]DOTA2-DPC中国联赛 正赛 CDEC vs Dynasty BO3 第二场 2月22日
2021/03/11 DOTA
仅利用30行Python代码来展示X算法
2015/04/01 Python
python关键字and和or用法实例
2015/05/28 Python
详解Python编程中对Monkey Patch猴子补丁开发方式的运用
2016/05/27 Python
Python爬虫实现(伪)球迷速成
2018/06/10 Python
django的ORM模型的实现原理
2019/03/04 Python
python selenium 查找隐藏元素 自动播放视频功能
2019/07/24 Python
使用Pandas对数据进行筛选和排序的实现
2019/07/29 Python
tensorflow2.0与tensorflow1.0的性能区别介绍
2020/02/07 Python
Python实现读取并写入Excel文件过程解析
2020/05/27 Python
Python‘==‘ 及 ‘is‘相关原理解析
2020/09/05 Python
英国最大的笔记本电脑直销专家:Laptops Direct
2019/07/20 全球购物
Java语言程序设计测试题改错题部分
2014/07/22 面试题
毕业生自荐书
2014/02/03 职场文书
自荐信的基本格式
2014/02/22 职场文书
总经理秘书岗位职责
2014/03/17 职场文书
内勤主管岗位职责
2014/04/03 职场文书
2014卖家双十一活动策划书
2014/09/29 职场文书
中学生打架检讨书
2014/10/13 职场文书
发布会邀请函
2015/01/31 职场文书
保密法制宣传月活动总结
2015/05/07 职场文书
关于windows server 2012 DC 环境 重启后蓝屏代码:0xc00002e2的问题
2022/05/25 Servers