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 相关文章推荐
用JavaScrpt实现文件夹简单轻松加密的实现方法图文
Sep 08 Javascript
JavaScript代码编写中各种各样的坑和填坑方法
Jun 06 Javascript
JS显示表格内指定行html代码的方法
Mar 31 Javascript
jQuery取得iframe中元素的常用方法详解
Jan 14 Javascript
javascript DIV实现跟随鼠标移动
Mar 19 Javascript
JavaScript DOM 对象深入了解
Jul 20 Javascript
jquery实现限制textarea输入字数的方法
Sep 06 jQuery
实现div滚动条默认最底部以及默认最右边的示例代码
Nov 15 Javascript
vue组件传递对象中实现单向绑定的示例
Feb 28 Javascript
Vue单页及多页应用全局配置404页面实践记录
May 22 Javascript
解决layui表格内文本超出隐藏的问题
Sep 12 Javascript
使用JS实现简易计算器
Jun 14 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中使用explode查找某个字符是否存在的方法
2011/07/12 PHP
从零开始学YII2框架(二)通过 Composer 安装扩展插件
2014/08/20 PHP
PHP+MYSQL会员系统的开发实例教程
2014/08/23 PHP
thinkphp微信开发(消息加密解密)
2015/12/02 PHP
我整理的PHP 7.0主要新特性
2016/01/07 PHP
PHP入门教程之正则表达式基本用法实例详解(正则匹配,搜索,分割等)
2016/09/11 PHP
php中get_magic_quotes_gpc()函数说明
2017/02/06 PHP
PHP cURL获取微信公众号access_token的实例
2018/04/28 PHP
php判断某个方法是否存在函数function_exists (),method_exists()与is_callable()区别与用法解析
2020/04/20 PHP
javascript 广告后加载,加载完页面再加载广告
2010/11/25 Javascript
Jquery Ajax请求代码(2)
2011/01/07 Javascript
js 控制页面跳转的5种方法
2013/09/09 Javascript
脚本合并提升javascript性能示例
2014/02/24 Javascript
JS实现适合于后台使用的动画折叠菜单效果
2015/09/21 Javascript
vue.js实现价格格式化的方法
2017/05/23 Javascript
layui实现table加载的示例代码
2018/08/14 Javascript
JS实现获取毫秒值及转换成年月日时分秒的方法
2018/08/15 Javascript
vue-router之nuxt动态路由设置的两种方法小结
2018/09/26 Javascript
JavaScript回调函数callback用法解析
2020/01/14 Javascript
Python读写Json涉及到中文的处理方法
2016/09/12 Python
python跳过第一行快速读取文件内容的实例
2018/07/12 Python
numpy concatenate数组拼接方法示例介绍
2019/05/27 Python
python图形开发GUI库pyqt5的基本使用方法详解
2020/02/14 Python
Pandas实现一列数据分隔为两列
2020/05/18 Python
如何用python处理excel表格
2020/06/09 Python
pandas 数据类型转换的实现
2020/12/29 Python
CSS3实现曲线阴影和翘边阴影
2016/05/03 HTML / CSS
前端canvas水印快速制作(附完整代码)
2019/09/19 HTML / CSS
用HTML5中的Canvas结合公式绘制粒子运动的教程
2015/05/08 HTML / CSS
致800米运动员广播稿
2014/02/16 职场文书
《阳光》教学反思
2014/02/23 职场文书
平面设计专业大学生职业规划书
2014/03/12 职场文书
给学校建议书范文
2014/05/13 职场文书
四风问题民主生活会对照检查材料思想汇报
2014/09/27 职场文书
机关作风建设剖析材料
2014/10/11 职场文书
2015年重阳节活动总结
2015/03/24 职场文书