概要
本文主要目的是探讨在ES5中,数组原型链上flat方法是如何实现的。文章提供了基于reduce方法和基于map方法的两种实现思路。
map和reduce方法的底层实现,请参看我的博文Javascript数组常用方法重写之map,reduce,some,every
代码实现
基本功能:将多维数组转换为1维数组。
基于ES5 和 reduce方法的实现
function flaten(temp){
arr = this;
temp = temp || [];
return arr.reduce(function(total, next){
Object.prototype.toString.call(next) === "[object Array]" ?
next.flaten(total) : total.push(next);
return total;
},temp);
}
- this是调用该方法数组对象
- temp是合并后的数组,起始是空数组
- 使用reduce方法遍历整个数组
- 如果数组元素还是一个数组,则递归调用flaten方法,参数是当前已经合并的数组
- 如果数组元素不是一个数组,将其放入最后合并后的数组。
代码验证:
var arr = [[[1,2,3], [[4,5,[6]]], 7],8,9,[[10]]];
console.log(arr.flaten());
执行结果:
基于ES6 和 reduce方法的实现
function flatenES6(){
var arr = this;
return arr.reduce(function(total, next){
Array.isArray(next) ?
total.push(...next.flatenES6()) : total.push(next);
return total;
},[]);
}
- this是调用该方法数组对象
- 使用reduce方法遍历整个数组
1. 如果数组元素还是一个数组,使用ES6的扩展操作符,将递归调用后的结果展开成xxx,xxx,xxx… 的形式。使其直接作为push方法的参数。
2. 如果数组元素不是一个数组,将其放入最后合并后的数组。 - 返回reduce的执行结果
代码验证:
var arr = [[[1,2,3], [[4,5,[6]]], 7],8,9,[[10]]];
console.log(arr.flatenES6());
基于ES6 和 map方法的实现
Array.prototype.flatenES6Map = flatenES6Map;
function flatenES6Map(){
arr = this;
const items = [];
arr.map(item => Array.isArray(item) ?
items.push(...item.flatenES6Map()) : items.push(item));
return items;
}
- this是调用该方法数组对象
- 最后返回值的初始值是一个空数组
- 使用reduce方法遍历整个数组
1. 如果数组元素还是一个数组,使用ES6的扩展操作符,将递归调用后的结果展开成xxx,xxx,xxx… 的形式。使其直接作为push方法的参数。
2. 如果数组元素不是一个数组,将其放入最后合并后的数组。 - 返回合并后的执行结果
代码验证:
var arr = [[[1,2,3], [[4,5,[6]]], 7],8,9,[[10]]];
console.log(arr.flatenES6Map());
执行结果: