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弹簧振子超简洁版 完全符合能量守恒,胡克定理
Oct 25 Javascript
JQuery优缺点分析说明
Apr 10 Javascript
JS操作Cookies的小例子
Oct 15 Javascript
javascript正则表达式总结
Feb 29 Javascript
在Javascript操作JSON对象,增加 删除 修改的简单实现
Jun 02 Javascript
BootStrap Validator 版本差异问题导致的submitHandler失效问题的解决方法
Dec 01 Javascript
详解Angular Reactive Form 表单验证
Jul 06 Javascript
Vue响应式原理深入解析及注意事项
Dec 11 Javascript
解决mpvue + vuex 开发微信小程序vuex辅助函数mapState、mapGetters不可用问题
Aug 03 Javascript
详解vue-cli+element-ui树形表格(多级表格折腾小计)
Apr 17 Javascript
Vue.js的模板语法详解
Feb 16 Javascript
JavaScript 中的六种循环方法
Jan 06 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
DOTA2【瓜皮时刻】Vol.91 RTZ山史最惨“矿难”
2021/03/05 DOTA
php简单静态页生成过程
2008/03/27 PHP
php判断某个方法是否存在函数function_exists (),method_exists()与is_callable()区别与用法解析
2020/04/20 PHP
window.location.href IE下跳转失效的解决方法
2014/03/27 Javascript
node.js下when.js 的异步编程实践
2014/12/03 Javascript
node.js中的fs.renameSync方法使用说明
2014/12/16 Javascript
js判断子窗体是否关闭的方法
2015/08/11 Javascript
快速学习jQuery插件 Form表单插件使用方法
2015/12/01 Javascript
jQuery simplePage+AJAX plus分页插件用法实例
2016/02/17 Javascript
AngularJS 过滤与排序详解及实例代码
2016/09/14 Javascript
bootstrap是什么_动力节点Java学院整理
2017/07/14 Javascript
nodejs判断文件、文件夹是否存在及删除的方法
2017/11/10 NodeJs
vue单页应用的内存泄露定位和修复问题小结
2019/08/02 Javascript
JavaScript使用localStorage存储数据
2019/09/25 Javascript
Nuxt v-bind绑定img src不显示的解决
2019/12/05 Javascript
JavaScript实现鼠标移入随机变换颜色
2020/11/24 Javascript
js重写alert事件(避免alert弹框标题出现网址)
2020/12/04 Javascript
测试、预发布后用python检测网页是否有日常链接
2014/06/03 Python
win与linux系统中python requests 安装
2016/12/04 Python
python 日期操作类代码
2018/05/05 Python
简单了解Python matplotlib线的属性
2019/06/29 Python
python3.7简单的爬虫实例详解
2019/07/08 Python
tensorflow 自定义损失函数示例代码
2020/02/05 Python
Python制作简易版小工具之计算天数的实现思路
2020/02/13 Python
python实现图片,视频人脸识别(dlib版)
2020/11/18 Python
CSS3新增布局之: flex详解
2020/06/18 HTML / CSS
全球速卖通俄罗斯站:AliExpress俄罗斯
2019/06/17 全球购物
薇姿法国官网:Vichy法国
2021/01/28 全球购物
实习单位接收函模板
2014/01/10 职场文书
餐饮商业计划书范文
2014/04/29 职场文书
婚前协议书标准版
2014/10/19 职场文书
2015年副班长工作总结
2015/05/15 职场文书
导游词之临安白水涧
2019/11/05 职场文书
《女娲补天》读后感5篇
2019/12/31 职场文书
java如何实现socket连接方法封装
2021/09/25 Java/Android
python装饰器代码解析
2022/03/23 Python