vue 扁平化_5种方式实现数组扁平化

数组扁平化概念

数组扁平化是指将一个多维数组变为一维数组

[1, [2, 3, [4, 5]]] ------> [1, 2, 3, 4, 5]

实现

1. reduce

遍历数组每一项，若值为数组则递归遍历，否则concat。

functionflatten(arr) {return arr.reduce((result, item)=>{return result.concat(Array.isArray(item) ?flatten(item) : item);

}, []);

}

reduce是数组的一种方法，它接收一个函数作为累加器，数组中的每个值(从左到右)开始缩减，最终计算为一个值。

reduce包含两个参数：回调函数，传给total的初始值

//求数组的各项值相加的和：

arr.reduce((total, item)=> { //total为之前的计算结果，item为数组的各项值

return total +item;

},0);

2. toString & split

调用数组的toString方法，将数组变为字符串然后再用split分割还原为数组

functionflatten(arr) {return arr.toString().split(',').map(function(item) {returnNumber(item);

})

}

因为split分割后形成的数组的每一项值为字符串，所以需要用一个map方法遍历数组将其每一项转换为数值型

3. join & split

和上面的toString一样，join也可以将数组转换为字符串

functionflatten(arr) {return arr.join(',').split(',').map(function(item) {returnparseInt(item);

})

}

4. 递归

递归的遍历每一项，若为数组则继续遍历，否则concat

functionflatten(arr) {var res =[];

arr.map(item=>{if(Array.isArray(item)) {

res=res.concat(flatten(item));

}else{

res.push(item);

}

});returnres;

}

5. 扩展运算符

es6的扩展运算符能将二维数组变为一维

[].concat(...[1, 2, 3, [4, 5]]); //[1, 2, 3, 4, 5]

根据这个结果我们可以做一个遍历，若arr中含有数组则使用一次扩展运算符，直至没有为止。

functionflatten(arr) {while(arr.some(item=>Array.isArray(item))) {

arr=[].concat(...arr);

}returnarr;

}

总结

虽然说写了5种方法，但是核心也只有一个：

遍历数组arr，若arr[i]为数组则递归遍历，直至arr[i]不为数组然后与之前的结果concat。

vue 扁平化_5种方式实现数组扁平化相关推荐

你能想到几种方式实现数组扁平化（越多越好）
数组扁平化:将一个多维数组,展开成一个一维数 let arr = [1,[2,3],[4,[5,6,[7]]],8]; ⇒ [1,2,3,4,5,6,7,8] 数组中嵌套数组自然会想到利用递归来做,只 ...
JAVA数组扁平化整合_5种方法实现数组扁平化
数组扁平化概念数组扁平化是指将一个多维数组变为一维数组 [1, [2, 3, [4, 5]]] ------> [1, 2, 3, 4, 5] 复制代码实现 1. reduce 遍历数组每一 ...
指针数组下标JAVA_Java语言中可用下标和指针两种方式表示数组元素。
[判断题]一行可以写多条预处理命令 [判断题]如果一个java程序中有多个类,编译后只生成一个字节码文件,其名字同主类名一致. [判断题]Protected类型的实例变量只能在本类中使用,其他类中不可 ...
对连续值/离散值进行预处理的两种方式（标准化/one-hot化）、反标准化/逆标准化、字符串预处理
日萌社人工智能AI:Keras PyTorch MXNet TensorFlow PaddlePaddle 深度学习实战(不定时更新) tensorflow 2.0 画出model网络模型的拓扑图 ...
vue引入css三种方式
vue引入css三种方式 1.在对应.vue文件的中引入 <script> import "@/assets/css/reset.css" </script> ...
PHP创建数组的方式_5种PHP创建数组的方法
本节内容: php数组创建实例 . 1.使用array()创建数组 array()创建数组是我们在PHP开发过程中最常用到的一种方式,准确来说array()是一种结构而不是一个函数. 复制代码代码示 ...
vue路由传参两种方式；vue路由传参query与params区别；vue路由跳转的带参与不带参,路由跳转传参方式：name 、 path；
vue项目的路由传参常用的有两种方式:query和params 1.query传参特点:1.1可以用path也可以用name传递路径注意name是路由页面vue文件的名称不需要/1.2跳转页面地址 ...
JS基础之数组--概述、创建数组的几种方式、数组的特点、数组的常用方法、数组的解构赋值、数组高级API
一.概述描述:数组(array)是按照一定顺序排列的一组值,每个值都拥有自己的编号,编号从0开始.整个数组用方括号来表示. 语法:var arr=[item1,item2,item3-] 1.1 注 ...
js中对象合并的4种方式，数组合并的4种方法
目录一.对象合并 1.拓展运算符(...) 2.Object.assign() 3.递归赋值 4.jquery中的extend() 二.数组合并 1.扩展操作符 2.使用array.concat() ...
vue通信的N种方式
组件通信可以分为父子组件通信.非父子组件通信,可以是数据的传递,也可以是方法的传递,先介绍数据的相互传递,再介绍方法的相互传递. 父组件到子组件传递数据: 一.通过props,父组件可以传递动态和静态 ...

vue 扁平化_5种方式实现数组扁平化

vue 扁平化_5种方式实现数组扁平化相关推荐

最新文章

热门文章