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中echarts的用法及与elementui-select的协同绑定操作
Nov 17 Vue.js
vue单元格多列合并的实现
Nov 26 Vue.js
ESLint 是如何检查 .vue 文件的
Nov 30 Vue.js
Vue router传递参数并解决刷新页面参数丢失问题
Dec 02 Vue.js
vue+element实现动态加载表单
Dec 13 Vue.js
Vue实现点击当前行变色
Dec 14 Vue.js
vue中父子组件的参数传递和应用示例
Jan 04 Vue.js
vue完美实现el-table列宽自适应
May 08 Vue.js
vue实现同时设置多个倒计时
May 20 Vue.js
Vue3如何理解ref toRef和toRefs的区别
Feb 18 Vue.js
vue+elementUI实现表格列的显示与隐藏
Apr 13 Vue.js
Vue组件化(ref,props, mixin,.插件)详解
May 15 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缩略图生成程式(需要GD库支持)
2007/03/06 PHP
PHP+Mysql+jQuery实现动态展示信息
2011/10/08 PHP
PHP中VC6、VC9、TS、NTS版本的区别与用法详解
2013/10/26 PHP
PHP集成百度Ueditor 1.4.3
2014/11/23 PHP
读JavaScript DOM编程艺术笔记
2011/11/15 Javascript
Javascript数组的排序 sort()方法和reverse()方法
2012/06/04 Javascript
Jquery chosen动态设置值实例介绍
2013/08/08 Javascript
node.js实现逐行读取文件内容的代码
2014/06/27 Javascript
jQuery实现的五子棋游戏实例
2015/06/13 Javascript
JavaScript Promise 用法
2016/06/14 Javascript
JS实现复选框的全选和批量删除功能
2017/04/05 Javascript
使用Vue.js和Flask来构建一个单页的App的示例
2018/03/21 Javascript
element-ui 时间选择器限制范围的实现(随动)
2019/01/09 Javascript
微信小程序实现单个卡片左滑显示按钮并防止上下滑动干扰功能
2019/12/06 Javascript
VueQuillEditor富文本上传图片(非base64)
2020/06/03 Javascript
vue 出现data-v-xxx的原因及解决
2020/08/04 Javascript
[49:59]KG vs Mineski 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
玩转python爬虫之正则表达式
2016/02/17 Python
Python 的描述符 descriptor详解
2016/02/27 Python
Python 基于Twisted框架的文件夹网络传输源码
2016/08/28 Python
让python 3支持mysqldb的解决方法
2017/02/14 Python
对Python中for复合语句的使用示例讲解
2018/11/01 Python
Python的互斥锁与信号量详解
2019/09/12 Python
pandas的相关系数与协方差实例
2019/12/27 Python
解决pytorch报错:AssertionError: Invalid device id的问题
2020/01/10 Python
Html5让容器充满屏幕高度或自适应剩余高度的布局实现
2020/05/14 HTML / CSS
沙特阿拉伯排名第一的在线时尚购物应用程序:1Zillion
2020/08/08 全球购物
工程造价专业大专生求职信
2013/10/06 职场文书
医院学雷锋活动策划方案
2014/02/15 职场文书
银行行长竞聘演讲稿
2014/04/23 职场文书
建筑工程专业大学生求职信
2014/04/23 职场文书
《明天,我们毕业》教学反思
2014/04/24 职场文书
关于倡议书的范文
2015/04/29 职场文书
奖学金主要事迹范文
2015/11/04 职场文书
解决Golang time.Parse和time.Format的时区问题
2021/04/29 Golang
JavaScript parseInt0.0000005打印5原理解析
2022/07/23 Javascript