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 相关文章推荐
extjs 初始化checkboxgroup值的代码
Sep 21 Javascript
EXTjs4.0的store的findRecord的BUG演示代码
Jun 08 Javascript
window.onload与$(document).ready()的区别分析
May 30 Javascript
jQuery实现的网页竖向菜单效果代码
Aug 26 Javascript
JSP防止网页刷新重复提交数据的几种方法
Nov 19 Javascript
javascript实现滑动解锁功能
Mar 22 Javascript
重新理解JavaScript的六种继承方式
Mar 24 Javascript
ionic2打包android时gradle无法下载的解决方法
Apr 05 Javascript
JS组件系列之JS组件封装过程详解
Apr 28 Javascript
Vue实现web分页组件详解
Nov 28 Javascript
es6数值的扩展方法
Mar 11 Javascript
浅谈bootstrap layer.open中end的使用方法
Sep 12 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文件上传类实例讲解
2015/10/27 PHP
PHP面向对象程序设计实例分析
2016/01/26 PHP
PHP弱类型的安全问题详细总结
2016/09/25 PHP
php mysql获取表字段名称和字段信息的三种方法
2016/11/13 PHP
PHP环形链表实现方法示例
2017/09/15 PHP
php strftime函数的详细用法
2018/06/21 PHP
在laravel-admin中列表中禁止某行编辑、删除的方法
2019/10/03 PHP
用javascript实现的激活输入框后隐藏初始内容
2007/06/29 Javascript
javascript学习笔记(五) Array 数组类型介绍
2012/06/19 Javascript
JS实现根据出生年月计算年龄
2014/01/10 Javascript
jQuery经过一段时间自动隐藏指定元素的方法
2015/03/17 Javascript
JavaScript中String.prototype用法实例
2015/05/20 Javascript
JavaScript中length属性的使用方法
2015/06/05 Javascript
jquery实现带缩略图的全屏图片画廊效果实例
2015/06/25 Javascript
JS模拟按钮点击功能的方法
2015/12/22 Javascript
jQuery复合事件用法示例
2017/06/10 jQuery
详解Vuex中mapState的具体用法
2017/09/28 Javascript
对vux点击事件的优化详解
2018/08/28 Javascript
ExtJs使用自定义插件动态保存表头配置(隐藏或显示)
2018/09/25 Javascript
老生常谈Python序列化和反序列化
2017/06/28 Python
Django实现表单验证
2018/09/08 Python
Django框架实现的普通登录案例【使用POST方法】
2019/05/15 Python
Python基于class()实现面向对象原理详解
2020/03/26 Python
HTML5中FileReader接口使用方法实例详解
2017/08/26 HTML / CSS
施华洛世奇天猫官方旗舰店:SWAROVSKI
2017/04/17 全球购物
商场消防演习方案
2014/02/12 职场文书
珠宝店促销方案
2014/03/21 职场文书
学校法制宣传月活动总结
2014/07/03 职场文书
2014年保卫工作总结
2014/12/05 职场文书
小学班主任事迹材料
2014/12/17 职场文书
小学中等生评语
2014/12/29 职场文书
2015年行政部工作总结
2015/04/28 职场文书
2015年汽车销售员工作总结
2015/07/24 职场文书
高一军训口号
2015/12/25 职场文书
如何用python反转图片,视频
2021/04/24 Python
python3.7.2 tkinter entry框限定输入数字的操作
2021/05/22 Python