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 相关文章推荐
使用prototype.js进行异步操作
Feb 07 Javascript
超级有用的13个基于jQuery的内容滚动插件和教程
Jul 31 Javascript
javascript实现选中复选框后相关输入框变灰不可用的方法
Aug 11 Javascript
JS未跨域操作iframe里的DOM
Jun 01 Javascript
JavaScript制作颜色反转小游戏
Sep 25 Javascript
遍历json获得数据的几种方法小结
Jan 21 Javascript
Bootstrap 下拉多选框插件Bootstrap Multiselect
Jan 22 Javascript
深入理解vue2.0路由如何配置问题
Jul 18 Javascript
小程序自定义组件实现城市选择功能
Jul 18 Javascript
微信小程序实现写入读取缓存详解
Aug 30 Javascript
微信小程序中网络请求缓存的解决方法
Dec 29 Javascript
vue监听浏览器原生返回按钮,进行路由转跳操作
Sep 09 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
程序员编程十条戒律
2009/07/09 PHP
php中用加号与用array_merge合并数组的区别深入分析
2013/06/03 PHP
本地机apache配置基于域名的虚拟主机详解
2013/08/10 PHP
php file_get_contents抓取Gzip网页乱码的三种解决方法
2013/11/12 PHP
ThinkPHP之M方法实例详解
2014/06/20 PHP
JavaScript创建命名空间的5种写法
2014/06/24 PHP
Yii2实现中国省市区三级联动实例
2017/02/08 PHP
PHP实现的文件上传类与用法详解
2017/07/05 PHP
用javascript实现的仿Flash广告图片轮换效果
2007/04/24 Javascript
Jquery数独游戏解析(一)-页面布局
2010/11/05 Javascript
jQuery load方法用法集锦
2011/12/06 Javascript
js对象与打印对象分析比较
2013/04/23 Javascript
JavaScript类型检测之typeof 和 instanceof 的缺陷与优化
2016/01/13 Javascript
js弹出框、对话框、提示框、弹窗实现方法总结(推荐)
2016/05/31 Javascript
jQuery图片加载显示loading效果
2016/11/04 Javascript
原生js实现商品放大镜效果
2017/01/12 Javascript
laydate 显示结束时间不小于开始时间的实例
2017/08/11 Javascript
js序列化和反序列化的使用讲解
2019/01/19 Javascript
nodejs实现获取本地文件夹下图片信息功能示例
2019/06/22 NodeJs
javascript实现留言板功能
2020/02/08 Javascript
vue双击事件2.0事件监听(点击-双击-鼠标事件)和事件修饰符操作
2020/07/27 Javascript
基于Ionic3实现选项卡切换并重新加载echarts
2020/09/24 Javascript
Python中用函数作为返回值和实现闭包的教程
2015/04/27 Python
python Crypto模块的安装与使用方法
2017/12/21 Python
matplotlib 纵坐标轴显示数据值的实例
2018/05/25 Python
详细介绍pandas的DataFrame的append方法使用
2019/07/31 Python
Django admin.py 在修改/添加表单界面显示额外字段的方法
2019/08/22 Python
基于Python和PyYAML读取yaml配置文件数据
2020/01/13 Python
Python GUI编程学习笔记之tkinter控件的介绍及基本使用方法详解
2020/03/30 Python
python中requests模拟登录的三种方式(携带cookie/session进行请求网站)
2020/11/17 Python
网站性能延迟加载图像的五种技巧(小结)
2020/08/13 HTML / CSS
2014党员自我评议表范文
2014/09/20 职场文书
2014乡镇干部对照检查材料思想汇报
2014/09/26 职场文书
老兵退伍标语
2014/10/07 职场文书
辞职书格式样本
2015/02/26 职场文书
低版本Druid连接池+MySQL驱动8.0导致线程阻塞、性能受限
2021/07/01 MySQL