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+vant实现购物车全选和反选功能
Nov 17 Vue.js
在Vue中使用Echarts可视化库的完整步骤记录
Nov 18 Vue.js
深入了解Vue3模板编译原理
Nov 19 Vue.js
VUE项目实现主题切换的多种方法
Nov 26 Vue.js
解决vue下载后台传过来的乱码流的问题
Dec 05 Vue.js
vue图片裁剪插件vue-cropper使用方法详解
Dec 16 Vue.js
详解Vue2的diff算法
Jan 06 Vue.js
通过vue.extend实现消息提示弹框的方法记录
Jan 07 Vue.js
用vite搭建vue3应用的实现方法
Feb 22 Vue.js
vue3.0封装轮播图组件的步骤
Mar 04 Vue.js
vue-cli4.5.x快速搭建项目
May 30 Vue.js
vue打包时去掉所有的console.log
Apr 10 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通过session id 实现session共享和登录验证的代码
2012/06/03 PHP
解析VS2010利用VS.PHP插件调试PHP的方法
2013/07/19 PHP
PHP可变变量学习小结
2015/11/29 PHP
yii2-GridView在开发中常用的功能及技巧总结
2017/01/07 PHP
php实现网页上一页下一页翻页过程详解
2019/06/28 PHP
laravel 数据验证规则详解
2019/10/23 PHP
基于jquery1.4.2的仿flash超炫焦点图播放效果
2010/04/20 Javascript
用apply让javascript函数仅执行一次的代码
2010/06/27 Javascript
JQuery模板插件 jquery.tmpl 动态ajax扩展
2011/11/10 Javascript
js将控件隐藏的方法及display属性介绍
2013/07/04 Javascript
js获取图片宽高的方法
2015/11/25 Javascript
javascript中的try catch异常捕获机制用法分析
2016/12/14 Javascript
微信小程序实现跑马灯效果完整代码(附效果图)
2018/05/30 Javascript
简单易扩展可控性强的Jquery转盘抽奖程序
2019/03/16 jQuery
JavaScript显式数据类型转换详解
2019/03/18 Javascript
详解JavaScript对数组操作(添加/删除/截取/排序/倒序)
2019/04/28 Javascript
Element-UI 使用el-row 分栏布局的教程
2020/10/26 Javascript
python的numpy模块安装不成功简单解决方法总结
2017/12/23 Python
详解Python发送email的三种方式
2018/10/18 Python
Python处理时间日期坐标轴过程详解
2019/06/25 Python
python覆盖写入,追加写入的实例
2019/06/26 Python
python实现读取excel文件中所有sheet操作示例
2019/08/09 Python
python计算n的阶乘的方法代码
2019/10/25 Python
利用Python绘制Jazz网络图的例子
2019/11/21 Python
python词云库wordcloud的使用方法与实例详解
2020/02/17 Python
解决pyecharts运行后产生的html文件用浏览器打开空白
2020/03/11 Python
浅析Python 责任链设计模式
2020/09/11 Python
英国50岁以上人群的交友网站:Ourtime
2018/03/28 全球购物
五年级音乐教学反思
2014/02/06 职场文书
2014年计生标语
2014/06/23 职场文书
学生安全责任书模板
2014/07/25 职场文书
2014年职称评定工作总结
2014/11/26 职场文书
个人催款函范文
2015/06/24 职场文书
立案决定书范文
2015/06/24 职场文书
springboot利用redis、Redisson处理并发问题的操作
2021/06/18 Java/Android
win10搭建配置ftp服务器的方法
2022/08/05 Servers