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的with 语句的使用方法
May 09 Javascript
JS滚轮事件onmousewheel使用介绍
Nov 01 Javascript
js使用递归解析xml
Dec 12 Javascript
浅谈javascript的call()、apply()、bind()的用法
Feb 21 Javascript
纯JS代码实现一键分享功能
Apr 20 Javascript
Javascript将数字转化成为货币格式字符串
Jun 22 Javascript
简单实现jQuery手风琴效果
Aug 18 jQuery
angular基于ng-alain定义自己的select组件示例
Feb 23 Javascript
javascript使用链接跨域下载图片
Nov 01 Javascript
element表格翻页第2页从1开始编号(后端从0开始分页)
Dec 10 Javascript
小程序实现多个选项卡切换
Jun 19 Javascript
JS sort方法基于数组对象属性值排序
Jul 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 parse_url 一个好用的函数
2009/10/03 PHP
php模拟asp中的XmlHttpRequest实现http请求的代码
2011/03/24 PHP
C/S和B/S两种架构区别与优缺点分析
2014/10/23 PHP
VPS中使用LNMP安装WordPress教程
2014/12/28 PHP
详解Yii2高级版引入bootstrap.js的一个办法
2017/03/21 PHP
laravel 关联关系遍历数组的例子
2019/10/10 PHP
js查找父节点的简单方法
2008/06/28 Javascript
JavaScript内核之基本概念
2011/10/21 Javascript
jQuery 网易相册鼠标移动显示隐藏效果实现代码
2013/03/31 Javascript
javascript显示用户停留时间的简单实例
2013/08/05 Javascript
jquery下拉select控件操作方法分享(jquery操作select)
2014/03/25 Javascript
解决jquery实现的radio重新选中的问题
2015/07/03 Javascript
jQuery实现Flash效果上下翻动的中英文导航菜单代码
2015/09/22 Javascript
微信小程序 wxapp导航 navigator详解
2016/10/31 Javascript
巧用Javascript的逻辑运算符
2016/12/02 Javascript
vue-hook-form使用详解
2017/04/07 Javascript
jquery实现加载更多"转圈圈"效果(示例代码)
2020/11/09 jQuery
[58:09]Spirit vs NB Supermajor小组赛 A组败者组决赛 BO3 第三场 6.2
2018/06/03 DOTA
K-means聚类算法介绍与利用python实现的代码示例
2017/11/13 Python
python3利用smtplib通过qq邮箱发送邮件方法示例
2017/12/03 Python
对numpy中的数组条件筛选功能详解
2018/07/02 Python
Tensorflow 1.0之后模型文件、权重数值的读取方式
2020/02/12 Python
pytorch中的inference使用实例
2020/02/20 Python
django从后台返回html代码的实例
2020/03/11 Python
Python自定义聚合函数merge与transform区别详解
2020/05/26 Python
Python turtle库的画笔控制说明
2020/06/28 Python
HTML5添加禁止缩放功能
2017/11/03 HTML / CSS
科颜氏法国官网:Kiehl’s法国
2019/08/20 全球购物
大学生军训自我评价分享
2013/11/09 职场文书
经典优秀个人求职信分享
2013/12/12 职场文书
员工培训邀请函
2014/01/11 职场文书
创业者迈进成功第一步:如何写创业计划书?
2014/03/22 职场文书
活动总结怎么写
2014/04/28 职场文书
省级优秀班集体申报材料
2014/05/25 职场文书
办理信用卡工作证明
2014/09/30 职场文书
2015大学生自我评价范文
2015/03/03 职场文书