如何将多个数组降维合并成一个长尾词数组？

本文共计1307个文字，预计阅读时间需要6分钟。

将多维数组（尤其是二维数组）转换为单维数组是业务开发中常见的逻辑。以下是对这一过程的简要描述：

在Vue2.6.1.1版本源码中，可以看到对二维数组降维的代码实现。以下是一篇简要记录，旨在加强这一逻辑的理解：

多维数组降维

1. 背景：在处理数据时，我们经常需要将多维数组转换为单维数组，以便进行后续操作，如排序、筛选等。

2. 方法：有多种方法可以实现多维数组的降维，以下列举两种常用方法：

- 递归法：通过递归调用函数，将多维数组逐层展开为单维数组。 - 扩展运算符：使用扩展运算符（...）将多维数组展开为单维数组。

3. 示例：

javascript // 递归法 function flattenArray(arr) { let result=[]; arr.forEach(item=> { if (Array.isArray(item)) { result=result.concat(flattenArray(item)); } else { result.push(item); } }); return result; }

// 扩展运算符 function flattenArray(arr) { return [...arr].reduce((acc, cur)=> [...acc, ...cur], []); }

4. 应用场景：

- 数据处理：将多维数组转换为单维数组，便于进行数据处理和分析。 - 组件开发：在Vue组件中，将多维数组传递给子组件时，需要将其降维，以便子组件能够正确接收数据。

通过以上简要记录，希望读者能够对多维数组降维的逻辑有更深入的理解。

把多维数组（尤其是二维数组）转化为一维数组是业务开发中的常用逻辑，最近跟着黄轶老师学习Vue2.6.1.1版本源码时,看到源码对二维数组降维的代码,所以这里来写一篇,记录一下,加强印象

二维数组降为一维数组

循环降维

let children = [1, 2, 3, [4, 5, 6], 7, 8, [9, 10]]; function simpleNormalizeChildren(children) { let reduce = []; for (let i = 0; i < children.length; i++) { if (Array.isArray(children[i])) { for (let j = 0; j < children[i].length; j++) { reduce.push(children[i][j]); } } else { reduce.push(children[i]); } } return reduce; } simpleNormalizeChildren(children) // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

此方法思路简单，利用双重循环遍历二维数组中的每个元素并放到新数组中。

concat降维

MDN上对于concat的介绍

“concat creates a new array consisting of the elements in the object on which it is called, followed in order by, for each argument, the elements of that argument (if the argument is an array) or the argument itself (if the argument is not an array).”

concat

如果concat方法的参数是一个元素，该元素会被直接插入到新数组中；如果参数是一个数组，该数组的各个元素将被插入到新数组中；将该特性应用到代码中：

let children = [1, 2, 3, [4, 5, 6], 7, 8, [9, 10]]; function simpleNormalizeChildren(children) { let reduce = []; for (let i = 0; i < children.length; i++) { reduce = reduce.concat(children[i]); } return reduce; } simpleNormalizeChildren(children) // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

children 的元素如果是一个数组，作为concat方法的参数，数组中的每一个子元素会被独立插入进新数组。利用concat方法，我们将双重循环简化为了单重循环。

apply和concat降维

MDN上对于apply方法的介绍

“The apply() method calls a function with a given this value and arguments provided as an array.”

apply

apply方法会调用一个函数，apply方法的第一个参数会作为被调用函数的this值，apply方法的第二个参数（一个数组，或类数组的对象）会作为被调用对象的arguments值，也就是说该数组的各个元素将会依次成为被调用函数的各个参数；将该特性应用到代码中：

let children = [1, 2, 3, [4, 5, 6], 7, 8, [9, 10]]; function simpleNormalizeChildren(children) { return Array.prototype.concat.apply([], children); } simpleNormalizeChildren(children) // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

children作为apply方法的第二个参数，本身是一个数组，数组中的每一个元素（还是数组，即二维数组的第二维）会被作为参数依次传入到concat中，效果等同于[].concat(1, 2, 3, [4, 5, 6], 7, 8, [9, 10])。利用apply方法，我们将单重循环优化为了一行代码

Vue2.6.11版本源码降维

let children = [1, 2, 3, [4, 5, 6], 7, 8, [9, 10]]; // :any 可以去掉 这里是Vue通过Flow指定传入的参数类型可以是任意类型 function simpleNormalizeChildren(children: any) { for (let i = 0; i < children.length; i++) { if (Array.isArray(children[i])) { return Array.prototype.concat.apply([], children); } } return children; } simpleNormalizeChildren(children); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

多维数组降为一维数组

递归降维

递归函数就是在函数体内调用自己；

递归函数的使用要注意函数终止条件避免死循环；

// 多维数组 let children = [1, [2,3], [4, [5, 6, [7, 8]]], [9, 10]]; function simpleNormalizeChildren(children) { for (let i = 0; i < children.length; i++) { if (Array.isArray(children[i])) { children = Array.prototype.concat.apply([], children); for(let j =0; j<children.length; j++) { simpleNormalizeChildren(children) } } } return children; } simpleNormalizeChildren(children); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

到此这篇关于JS数组降维的实现Array.prototype.concat.apply([], arr)的文章就介绍到这了,更多相关JS数组降维内容请搜索易盾网络以前的文章或继续浏览下面的相关文章希望大家以后多多支持易盾网络！