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关于select的相关操作说明
Jan 13 Javascript
lyhucSelect基于Jquery的Select数据联动插件
Mar 29 Javascript
gulp-htmlmin压缩html的gulp插件实例代码
Jun 06 Javascript
canvas的神奇用法
Feb 03 Javascript
bootstrap Table服务端处理分页(后台是.net)
Oct 19 Javascript
Vue如何从1.0迁移到2.0
Oct 19 Javascript
使用JS中的Replace()方法遇到的问题小结
Oct 20 Javascript
laydate日历控件使用方法详解
Nov 20 Javascript
JavaScript求一组数的最小公倍数和最大公约数常用算法详解【面向对象,回归迭代和循环】
May 07 Javascript
Vue引入sass并配置全局变量的方法
Jun 27 Javascript
详解vue组件中使用路由方法
Feb 12 Javascript
JS实现iframe中子父页面跨域通讯的方法分析
Mar 10 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 伪造本地文件包含漏洞的代码
2011/11/03 PHP
PHP+Mysql+jQuery实现发布微博程序 php篇
2015/10/15 PHP
Zend Framework上传文件重命名的实现方法
2016/11/25 PHP
excel操作之Add Data to a Spreadsheet Cell
2007/06/12 Javascript
Javascript 键盘keyCode键码值表
2009/12/24 Javascript
JavaScript 一道字符串分解的题目
2011/08/03 Javascript
IE6下opacity与JQuery的奇妙结合
2013/03/01 Javascript
基于jquery扩展漂亮的下拉框可以二次修改
2013/11/19 Javascript
JavaScript中的style.cssText使用教程
2014/11/06 Javascript
JavaScript原生对象之Number对象的属性和方法详解
2015/03/13 Javascript
PHP+mysql+Highcharts生成饼状图
2015/05/04 Javascript
jQuery实现选中弹出窗口选择框内容后赋值给文本框的方法
2015/11/23 Javascript
url传递的参数值中包含&时,url自动截断问题的解决方法
2016/08/02 Javascript
Javascript 实现微信分享(QQ、朋友圈、分享给朋友)
2016/10/21 Javascript
JavaScript基本类型值-Undefined、Null、Boolean
2017/02/23 Javascript
Vue路由跳转问题记录详解
2017/06/15 Javascript
form表单数据封装成json格式并提交给服务器的实现方法
2017/12/14 Javascript
JavaScript碎片—函数闭包(模拟面向对象)
2019/03/13 Javascript
node crawler如何添加promise支持
2020/02/01 Javascript
[10:54]Team Spirit vs Navi
2018/06/07 DOTA
[44:33]EG vs Liquid 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
python 监听salt job状态,并任务数据推送到redis中的方法
2019/01/14 Python
20行python代码的入门级小游戏的详解
2019/05/05 Python
Django框架实现的分页demo示例
2019/05/25 Python
Django shell调试models输出的SQL语句方法
2019/08/29 Python
pytorch查看torch.Tensor和model是否在CUDA上的实例
2020/01/03 Python
使用TensorFlow直接获取处理MNIST数据方式
2020/02/10 Python
VICHY薇姿美国官方网站:欧洲药房第一的抗衰老品牌
2017/11/22 全球购物
当当网软件测试笔试题
2015/11/24 面试题
品质管理部岗位职责范文
2014/03/01 职场文书
博士生导师推荐信
2014/07/08 职场文书
毕业实习证明(4篇)
2014/10/28 职场文书
坎儿井导游词
2015/02/09 职场文书
2015年幼师个人工作总结
2015/10/15 职场文书
2016年心理学教育培训学习心得体会
2016/01/12 职场文书
nginx 防盗链防爬虫配置详解
2021/03/31 Servers