vue 把二维或多维数组转一维数组


Posted in Vue.js onApril 24, 2022

将二维数组转化为一维数组

需求

数组嵌套数据,导致循环不方便,想着将二维数组合并成一维数据,方便数据的操作

具体实现

利用reduce方法

reduce:不改变原数组,返回一个新的数组。就是遍历数组元素,从头开始,依次往下,第一个参数是上一次的返回值,第二个参数是下一个数组元素,首次的时候第一个和第二个参数分别是 array[0], array[1] ;

let flat=[[1,2,3],[4,5,6],[6,7,8]].reduce( (prev,next)=> {
    return prev.concat(next);//循环将数组进行拼接
});
console.log(flat);

vue 把二维或多维数组转一维数组

将多维数组转一维数组6种方法

ES6 flat方法

var arr=[1,[[[2,3],4]],5];
arr.flat(Infinity)//[1, 2, 3, 4, 5]

递归

var arr=[1,[[[2,3],4]],5];
var newArr=[];
function Arr(arr){
    arr.map(item=>{
        if(Array.isArray(item)){
             Arr(item)
        }else{
            newArr.push(item)
        }
    })
    return newArr
}
console.log(Arr(arr));//[ 1, 2, 3, 4, 5 ]

reduce +concat + 递归

var arr=[[[[2,3],4]],5];
function concatArr(arr){
  var newArr=arr.reduce((pre,next)=>{
       return pre.concat(Array.isArray(next)?concatArr(next):next)
  },[])
  return newArr;
}
console.log(concatArr(arr));//[ 2, 3, 4, 5 ]

join+split

var arr=[[1,2],3,[4,[5]]];
var arr1=arr.join().split(',');
console.log(arr1);//["1", "2", "3", "4", "5"]

toString+split

var arr=[[1,2],3,[4,[5]]];
var arr1=arr.toString().split(',');
console.log(arr1);//["1", "2", "3", "4", "5"]

eval

var arr=[[1,2],3,[4,[5]]];
var arr1=eval('[' + arr + ']');
console.log(arr1);//[ 1, 2, 3, 4, 5 ]

Tags in this post...

Vue.js 相关文章推荐
Vue3配置axios跨域实现过程解析
Nov 25 Vue.js
使用vue编写h5公众号跳转小程序的实现代码
Nov 27 Vue.js
详解Vue3 Teleport 的实践及原理
Dec 02 Vue.js
详解如何在vue+element-ui的项目中封装dialog组件
Dec 11 Vue.js
Vue.extend 登录注册模态框的实现
Dec 29 Vue.js
Vue 事件的$event参数=事件的值案例
Jan 29 Vue.js
vue仿携程轮播图效果(滑动轮播,下方高度自适应)
Feb 11 Vue.js
Vue SPA 首屏优化方案
Feb 26 Vue.js
vue3.0 项目搭建和使用流程
Mar 04 Vue.js
Vue实现下拉加载更多
May 09 Vue.js
vue3中provide && inject的使用
Jul 01 Vue.js
简单聊聊Vue中的计算属性和属性侦听
Oct 05 Vue.js
Vue OpenLayer 为地图绘制风场效果
Apr 24 #Vue.js
vue二维数组循环嵌套方式 循环数组、循环嵌套数组
vue @click.native 绑定原生点击事件
Apr 22 #Vue.js
vue实现省市区联动 element-china-area-data插件
vue修饰符.capture和.self的区别
Apr 22 #Vue.js
vue 自定义组件添加原生事件
Apr 21 #Vue.js
vue 自定义的组件绑定点击事件
Apr 21 #Vue.js
You might like
博士208HAF收音机实习报告
2021/03/02 无线电
php面向对象 字段的声明与使用
2012/06/14 PHP
利用phpexcel把excel导入数据库和数据库导出excel实现
2014/01/09 PHP
ThinkPHP添加更新标签的方法
2014/12/05 PHP
在WordPress中实现评论头像的自定义默认和延迟加载
2015/11/24 PHP
php图片添加水印例子
2016/07/20 PHP
JavaScript 对话框和状态栏使用说明
2009/10/25 Javascript
基于JQuery 选择器使用说明介绍
2013/04/18 Javascript
Jquery实现顶部弹出框特效
2015/08/08 Javascript
js倒计时简单实现方法
2015/12/17 Javascript
bootstrap读书笔记之CSS组件(上)
2016/10/17 Javascript
Three.js基础部分学习
2017/01/08 Javascript
canvas实现环形进度条效果
2017/03/23 Javascript
JavaScript实现淘宝京东6位数字支付密码效果
2018/08/18 Javascript
layui表单验证select下拉框实现验证的方法
2019/09/05 Javascript
你不知道的 TypeScript 高级类型(小结)
2020/08/28 Javascript
[33:42]LGD vs OG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
浅谈python中scipy.misc.logsumexp函数的运用场景
2016/06/23 Python
Python+pandas计算数据相关系数的实例
2018/07/03 Python
django框架事务处理小结【ORM 事务及raw sql,customize sql 事务处理】
2019/06/27 Python
如何通过Python实现标签云算法
2019/07/02 Python
python连接PostgreSQL数据库的过程详解
2019/09/18 Python
python pygame实现挡板弹球游戏
2019/11/25 Python
python实现简单日志记录库glog的使用
2019/12/13 Python
Django 5种类型Session使用方法解析
2020/04/29 Python
Python Tricks 使用 pywinrm 远程控制 Windows 主机的方法
2020/07/21 Python
Python3 ffmpeg视频转换工具使用方法解析
2020/08/10 Python
conda安装tensorflow和conda常用命令小结
2021/02/20 Python
如何给HTML标签中的文本设置修饰线
2019/11/18 HTML / CSS
国际领先的学术出版商:Springer
2017/01/11 全球购物
高二物理教学反思
2014/02/08 职场文书
岗位廉洁从业承诺书
2014/03/28 职场文书
董事长助理工作职责
2014/06/08 职场文书
民主评议政风行风整改方案
2014/09/17 职场文书
2015年安全保卫工作总结
2015/05/14 职场文书
大学生读书笔记大全
2015/07/01 职场文书