标签：arr JS 降维 let 数组 com children concat
JS数组降维--Array.prototype.concat.apply
二维数组降为一维数组
循环降维
concat降维
apply和concat降维
Vue2.6.11版本源码降维
多维数组降为一维数组
递归降维
把多维数组（尤其是二维数组）转化为一维数组是业务开发中的常用逻辑，最近跟着黄轶老师学习Vue2.6.1.1版本源码时,看到源码对二维数组降维的代码,所以这里来写一篇,记录一下,加强印象
Vue源码学习
二维数组降为一维数组
循环降维
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]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
此方法思路简单，利用双重循环遍历二维数组中的每个元素并放到新数组中。
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]
1
2
3
4
5
6
7
8
9
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]
1
2
3
4
5
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]
1
2
3
4
5
6
7
8
9
10
11
12
多维数组降为一维数组
递归降维
递归函数就是在函数体内调用自己；
递归函数的使用要注意函数终止条件避免死循环；
// 多维数组
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]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
大家有更好的降维方法嘛;欢迎留言讨论
————————————————
原文链接：https://blog.csdn.net/weixin_42752574/java/article/details/105745678
https://www.toodaylab.com/member/587427
https://www.toodaylab.com/member/587428
https://www.toodaylab.com/member/587429
https://www.toodaylab.com/member/587430
https://www.toodaylab.com/member/587431
https://www.toodaylab.com/member/587432
https://www.toodaylab.com/member/587433
https://www.toodaylab.com/member/587434
https://www.toodaylab.com/member/587435
https://www.toodaylab.com/member/587436
https://www.toodaylab.com/member/587437
https://www.toodaylab.com/member/587438
https://www.toodaylab.com/member/587439
标签：arr,JS,降维,let,数组,com,children,concat 来源： https://www.cnblogs.com/dasdfdfecvcx/p/12790871.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。