如何优雅的数组降维—— Javascript中apply方法的妙用_前端开发者

前端开发者丨JavaScript
https://www.rokub.com
将多维数组( 尤其是二维数组) 转化为一维数组是业务开发中的常用逻辑, 除了使用朴素的循环转换以外, 我们还可以利用Javascript的语言特性实现更为简洁优雅的转换。
本文将从朴素的循环转换开始, 逐一介绍三种常用的转换方法, 并借此简单回顾Array.prototype.concat方法和Function.prototype.apply方法。
以下代码将以把二维数组降维到一维数组为例。
1. 朴素的转换

 

function reduceDimension(arr) {
varreduced= [];
for (vari=0;i<arr.length;i++) {
for (varj=0;j<arr[i].length;j++) {
reduced.push(arr[i][j]);
}
}
returnreduced;
}
1 2 3 4 5 6 7 8 9
function reduceDimension(arr) {
varreduced= [];
for (vari=0;i<arr.length;i++) {
for (varj=0;j<arr[i].length;j++) {
reduced.push(arr[i][j]);
}
}
returnreduced;
}
此方法思路简单, 利用双重循环遍历二维数组中的每个元素并放到新数组中。
2. 利用concat转换先来回顾一下MDN上对于该方法的介绍:“ concat creates a new array consisting of the elements in the object on which it is called, followed in order by,
foreachargument,theelementsofthatargument(
iftheargumentisanarray) ortheargumentitself(
iftheargumentisnotanarray).”https: //developer.mozilla.org/en-US/docs/web/JavaScript/Reference/Global_Objects/Array/concat
即如果concat方法的参数是一个元素, 该元素会被直接插入到新数组中; 如果参数是一个数组, 该数组的各个元素将被插入到新数组中; 将该特性应用到代码中:
function reduceDimension(arr) {
varreduced= [];
for (vari=0;i<arr.length;i++) {
reduced=reduced.concat(arr[i]);
}
returnreduced;
}
1 2 3 4 5 6 7
function reduceDimension(arr) {
varreduced= [];
for (vari=0;i<arr.length;i++) {
reduced=reduced.concat(arr[i]);
}
returnreduced;
}
arr的每一个元素都是一个数组, 作为concat方法的参数, 数组中的每一个子元素又都会被独立插入进新数组。
利用concat方法, 我们将双重循环简化为了单重循环。
3. 利用apply和concat转换按照惯例, 先来回顾一下MDN上对于apply方法的介绍:“ The apply() method calls a
function with a given this value and arguments provided as an array.”https: //developer.mozilla.org/en-US/docs/web/JavaScript/Reference/Global_Objects/Function/apply
即apply方法会调用一个函数, apply方法的第一个参数会作为被调用函数的this值, apply方法的第二个参数( 一个数组, 或类数组的对象) 会作为被调用对象的arguments值, 也就是说该数组的各个元素将会依次成为被调用函数的各个参数; 将该特性应用到代码中:
function reduceDimension(arr) {
returnArray.prototype.concat.apply([],arr);
}
1 2 3
function reduceDimension(arr) {
returnArray.prototype.concat.apply([],arr);
}
arr作为apply方法的第二个参数, 本身是一个数组, 数组中的每一个元素( 还是数组, 即二维数组的第二维) 会被作为参数依次传入到concat中, 效果等同于[].concat([1, 2], [3, 4], [5, 6])。
利用apply方法, 我们将单重循环优化为了一行代码, 很简洁有型有木有啊~读者也可参照本文思路, 自己利用递归实现N维数组降维的逻辑。
前端开发者丨JavaScript
» 本文来自:前端开发者 » 《如何优雅的数组降维—— Javascript中apply方法的妙用_前端开发者》
» 本文链接地址:https://www.rokub.com/2265.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!