JS数组降维的实现Array.prototype.concat.apply([], arr)
把多维数组（尤其是二维数组）转化为一维数组是业务开发中的常用逻辑，最近跟着黄轶老师学习Vue2.6.1.1版本源码时,看到源码对二维数组降维的代码,所以这里来写一篇,记录一下,加强印象
二维数组降为一维数组
循环降维
letchildren=[1,2,3,[4,5,6],7,8,[9,10]];
functionsimpleNormalizeChildren(children){
letreduce=[];
for(leti=0;i
此方法思路简单，利用双重循环遍历二维数组中的每个元素并放到新数组中。
concat降维
MDN上对于concat的介绍
“concatcreatesanewarrayconsistingoftheelementsintheobjectonwhichitiscalled,followedinorderby,foreachargument,theelementsofthatargument(iftheargumentisanarray)ortheargumentitself(iftheargumentisnotanarray).”
concat
如果concat方法的参数是一个元素，该元素会被直接插入到新数组中；如果参数是一个数组，该数组的各个元素将被插入到新数组中；将该特性应用到代码中：
letchildren=[1,2,3,[4,5,6],7,8,[9,10]];
functionsimpleNormalizeChildren(children){
letreduce=[];
for(leti=0;i
children的元素如果是一个数组，作为concat方法的参数，数组中的每一个子元素会被独立插入进新数组。利用concat方法，我们将双重循环简化为了单重循环。
apply和concat降维
MDN上对于apply方法的介绍
“Theapply()methodcallsafunctionwithagiventhisvalueandargumentsprovidedasanarray.”
apply
apply方法会调用一个函数，apply方法的第一个参数会作为被调用函数的this值，apply方法的第二个参数（一个数组，或类数组的对象）会作为被调用对象的arguments值，也就是说该数组的各个元素将会依次成为被调用函数的各个参数；将该特性应用到代码中：
letchildren=[1,2,3,[4,5,6],7,8,[9,10]];
functionsimpleNormalizeChildren(children){
returnArray.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版本源码降维
letchildren=[1,2,3,[4,5,6],7,8,[9,10]];
//:any可以去掉这里是Vue通过Flow指定传入的参数类型可以是任意类型
functionsimpleNormalizeChildren(children:any){
for(leti=0;i
多维数组降为一维数组
递归降维
递归函数就是在函数体内调用自己；
递归函数的使用要注意函数终止条件避免死循环；
//多维数组
letchildren=[1,[2,3],[4,[5,6,[7,8]]],[9,10]];
functionsimpleNormalizeChildren(children){
for(leti=0;i
到此这篇关于JS数组降维的实现Array.prototype.concat.apply([],arr)的文章就介绍到这了,更多相关JS数组降维内容请搜索毛票票以前的文章或继续浏览下面的相关文章希望大家以后多多支持毛票票！
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。