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 相关文章推荐
Vue用mixin合并重复代码的实现
Nov 27 Vue.js
vue使用element-ui实现表单验证
Dec 13 Vue.js
vue中如何添加百度统计代码
Dec 19 Vue.js
Vue项目中使用mock.js的完整步骤
Jan 12 Vue.js
vue 根据选择的月份动态展示日期对应的星期几
Feb 06 Vue.js
使用Vue.js和MJML创建响应式电子邮件
Mar 23 Vue.js
HTML+VUE分页实现炫酷物联网大屏功能
May 27 Vue.js
vue3使用vue-router的完整步骤记录
Jun 20 Vue.js
Vue的列表之渲染,排序,过滤详解
Feb 24 Vue.js
Vue的过滤器你真了解吗
Feb 24 Vue.js
vue 数字翻牌器动态加载数据
Apr 20 Vue.js
vue 把二维或多维数组转一维数组
Apr 24 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
php adodb介绍
2009/03/19 PHP
PHP读取ACCESS数据到MYSQL的代码
2011/05/11 PHP
linux iconv方法的使用
2011/10/01 PHP
Mysql中分页查询的两个解决方法比较
2013/05/02 PHP
安装apache2.2.22配置php5.4(具体操作步骤)
2013/06/26 PHP
php加密算法之实现可逆加密算法和解密分享
2014/01/21 PHP
php为字符串前后添加指定数量字符的方法
2015/05/04 PHP
PHP文件上传、客户端和服务器端加限制、抓取错误信息、完整步骤解析
2017/01/12 PHP
Laravel timestamps 设置为unix时间戳的方法
2019/10/11 PHP
Javascript操作cookie的函数代码
2012/10/03 Javascript
jQuery旋转插件—rotate支持(ie/Firefox/SafariOpera/Chrome)
2013/01/16 Javascript
jquery实现的一个简单进度条效果实例
2014/05/12 Javascript
JavaScript预解析及相关技巧分析
2016/04/21 Javascript
探寻JavaScript中this指针指向
2016/04/23 Javascript
vue.js表格分页示例
2016/10/18 Javascript
JS+HTML5 FileReader对象用法示例
2017/04/07 Javascript
jQuery操作之效果详解
2017/05/19 jQuery
javascript定时器取消定时器及优化方法
2017/07/08 Javascript
AngularJs中$cookies简单用法分析
2019/05/30 Javascript
[05:06]TI4西雅图DOTA2前线报道 海涛密探LGD训练
2014/07/09 DOTA
Python图算法实例分析
2016/08/13 Python
使用Eclipse如何开发python脚本
2018/04/11 Python
Python numpy.zero() 初始化矩阵实例
2019/11/27 Python
python通过安装itchat包实现微信自动回复收到的春节祝福
2020/01/19 Python
django xadmin中form_layout添加字段显示方式
2020/03/30 Python
智能旅行箱:Horizn Studios
2018/04/30 全球购物
手术室护士自我鉴定
2013/10/14 职场文书
初中高效课堂实施方案
2014/02/26 职场文书
古汉语文学求职信范文
2014/03/16 职场文书
入党积极分子学习两会心得体会范文
2014/03/17 职场文书
工地质量标语
2014/06/12 职场文书
乡党委干部党的群众路线教育实践活动个人对照检查材料思想汇报
2014/10/01 职场文书
2014最新预备党员思想汇报范文:中国梦,我的梦
2014/10/25 职场文书
党员个人承诺书
2015/04/27 职场文书
2016年小学“我们的节日·中秋节”活动总结
2016/04/05 职场文书
自考生自我评价
2019/06/21 职场文书