JavaScript数组的扁平化:将 2D JavaScript 二维数组转换为 1D 一维数组(多种方法)
推荐阅读:
什么是数组扁平化?
数组扁平化:指将一个多维数组转化为一个一维数组。
给定数组:
var myArray = [[1, 2],[3, 4, 5], [6, 7, 8, 9]];
目标值:
[1, 2, 3, 4, 5, 6, 7, 8, 9]
方法:
解决方案 1:使用 concat() 和 apply()
var myArray = [[1, 2],[3, 4, 5], [6, 7, 8, 9]];
function flatten(arr) {
var myNewArray = [].concat.apply([], myArray);
return myNewArray;
}
flatten(myArray);
// [1, 2, 3, 4, 5, 6, 7, 8, 9]
解决方案 2:使用 reduce()
var myArray = [[1, 2],[3, 4, 5], [6, 7, 8, 9]];
function flatten(arr) {
var myNewArray = myArray.reduce(function(prev, curr) {
return prev.concat(curr);
});
return myNewArray;
}
flatten(myArray);
// [1, 2, 3, 4, 5, 6, 7, 8, 9]
var myArray = [[1, 2],[3, 4, 5], [6, 7, 8, 9]];
function flatten(arr) {
return arr.reduce((res,next) =>{
return res.concat(Array.isArray(next)? flatten(next) : next);
},[]);
}
flatten(myArray);
// [1, 2, 3, 4, 5, 6, 7, 8, 9]
解决方案 3:递归遍历
var myArray = [[1, 2],[3, 4, 5], [6, 7, 8, 9]];
function flatten(arr) {
let result = []
for (const item of arr) {
if (Array.isArray(item)) {
result = result.concat(flatten1(item))
} else {
result.push(item)
}
}
return result
}
flatten(myArray);
// [1, 2, 3, 4, 5, 6, 7, 8, 9]
解决方案 4:在 ES6 中使用点差运算符(扩展运算符)
var myArray = [[1, 2],[3, 4, 5], [6, 7, 8, 9]];
function flatten(arr) {
var myNewArray = [].concat(...arr);
return myNewArray;
}
flatten(myArray);
// [1, 2, 3, 4, 5, 6, 7, 8, 9]
解决方案 5:在 ES10 中使用 flat()
var myArray = [[1, 2],[3, 4, 5], [6, 7, 8, 9]];
function flatten(arr) {
var myNewArray = myArray.flat();
return myNewArray;
}
flatten(myArray);
// [1, 2, 3, 4, 5, 6, 7, 8, 9]
解决方案 6:for循环
var myArray = [[1, 2],[3, 4, 5], [6, 7, 8, 9]];
function flatten(arr) {
var res = [];
for (let i = 0, length = arr.length; i < length; i++) {
if (Array.isArray(arr[i])) {
res = res.concat(flatten(arr[i])); //concat 并不会改变原数组
//res.push(...flatten(arr[i])); //扩展运算符
} else {
res.push(arr[i]);
}
}
return res;
}
flatten(myArray);
//[1, 2, 3, 4, 5, 6, 7, 8, 9]
var myArray = [[1, 2],[3, 4, 5], [6, 7, 8, 9]];
function flatten(arr) {
var myNewArray = [];
for (var i = 0; i < arr.length; ++i) {
for (var j = 0; j < arr[i].length; ++j)
myNewArray.push(arr[i][j]);
}
return myNewArray;
}
flatten(myArray);
// [1, 2, 3, 4, 5, 6, 7, 8, 9]
解决方案7:while循环
var myArray = [[1, 2],[3, 4, 5], [6, 7, 8, 9]];
function flatten(arr) {
while (arr.some(item => Array.isArray(item))) {
arr = [].concat(...arr);
//arr = Array.prototype.concat.apply([],arr);
}
return arr;
}
flatten(myArray);
//[1, 2, 3, 4, 5, 6, 7, 8, 9]
解决方案 8:使用toString()+split()或者join()+split()
原理很简单,先把数组转换成字符串,这个过程会吧[]去掉,然后再调用split()方法转换成数组,最后不能忘了,吧每一项转换为数组,即调用map()方法。
方法1:arr.toString().split(',').map(item => +item);
var myArray = [[1, 2],[3, 4, 5], [6, 7, 8, 9]];
function flatten(arr) {
return arr.toString().split(',').map(item => +item);
}
flatten(myArray);
// [1, 2, 3, 4, 5, 6, 7, 8, 9]
方法2:arr.join(',').split(',').map(item => +item);
var myArray = [[1, 2],[3, 4, 5], [6, 7, 8, 9]];
function flatten(arr) {
return arr.join(',').split(',').map(item => +item);
}
flatten(myArray);
(9) [1, 2, 3, 4, 5, 6, 7, 8, 9]
解决方案 9:正则表达式
var myArray = [[1, 2],[3, 4, 5], [6, 7, 8, 9]];
function flatten(arr) {
let result = JSON.stringify(arr);
// JSON.stringify 转换后的结果 '[1,[2,34,[12,4]],23]'
result = result.replace(/(\[|\])/g, '');
return JSON.parse(`[${result}]`)
}
flatten(myArray);
(9) [1, 2, 3, 4, 5, 6, 7, 8, 9]
解决方案 10:栈
var myArray = [[1, 2],[3, 4, 5], [6, 7, 8, 9]];
function flatten(arr) {
let res = [];
const stack = [].concat(arr);
while (stack.length > 0) {
// pop()方法从数组中删除最后一个元素,并返回该元素的值。此方法更改数组的长度。
const item = stack.pop();
if (Array.isArray(item)) {
/**
* push() 方法将一个或多个元素添加到数组的末尾,并返回该数组的新长度。
* 用扩展运算符展开一层
*/
stack.push(...item);
} else {
// unshift() 方法将一个或多个元素添加到数组的开头,并返回该数组的新长度(该方法修改原有数组)。
item !== undefined && res.unshift(item);
}
}
return res;
}
flatten(myArray);
// [1, 2, 3, 4, 5, 6, 7, 8, 9]
资料:
JS数组扁平化的一些方法(7-8种) - 掘金引子:这些日子在看es相关的新属性是有一个数组的方法 flat() 引起的我的注意。 我去找了一下维基百科,上面并没有关于扁平化的直接解释,只有一个扁平化组织释义。 金字塔组织,这个众所周知,它表现的层级结构就是一个金字塔式的形状。 扁平化组织(Flat organizatio…https://juejin.cn/post/6844903805876699150js数组扁平化的六种方法_爱吃肉的薄凉的博客-CSDN博客_js数组扁平化处理我也不知道为什么要整理这么多种方法,算是拓展个思路吧。🤦♂️let array = [1, [2, 34, [12, 4]], 23];1.递归遍历function flatten1(array) { let result = [] for (const item of array) { if (Array.isArray(item)) { result = result.concat(flatten1(item)) } e.https://blog.csdn.net/weixin_43544093/article/details/123842757
相关文章
- PHP和JavaScript将字符串转换为数字string2int
- Win10系列:JavaScript访问文件和文件夹
- 第一百一十九节,JavaScript事件入门
- js 数组的length(javascript教程四)
- 合格前端系列第六弹-从指向看JavaScript
- javascript时间戳和日期字符串相互转换
- javascript转换日期字符串为Date对象
- 【JavaScript】快速入门
- [Javascript Performance] Optimisation and deoptimization
- [Javascript] Intercept property access with Javascript Proxy
- [Javascript] Case insensitive sorting for string arrays
- Angular Component TypeScript代码和最后转换生成的JavaScript代码比较
- JavaScript 有多灵活?
- Atitit.js javascript异常处理机制与java异常的转换 多重catc hDWR 环境 .js exception process Vob7
- Atitit.js javascript异常处理机制与java异常的转换.js exception process Voae
- Atititjs javascript异常处理机制与java异常的转换.js exception process
- 如何在SAP Server Side JavaScript里消费destination
- 如何得到React应用转换后的JavaScript代码
- [连载]JavaScript讲义(02)--- JavaScript核心编程
- Atitit.js javascript异常处理机制与java异常的转换.js exception process Voae
- javascript时间戳和日期字符串相互转换
- JavaScript基础(一)js环境搭建、变量常量、数据类型及转换、运算符
- JavaScript 修改地址栏指定参数
- JavaScript console 获取title