JS底层--手撕代码之数组扁平化

609 阅读1分钟

image.png

JS底层--手撕代码之数组扁平化

前言

数组扁平化(又称数组将维)是我们在面试当中经常会碰到的问题,也是我们必须要掌握的问题,考察的主要是js的底层功力。数组的扁平化,就是将一个嵌套多层的数组 array (嵌套可以是任何层数)转换为只有一层的数组。即将一个多维数组转化为一个一维数组

实现基本思路

  • 对数组的每一项进行遍历
  • 判断该项是否是数组
  • 如果该项不是数组则将其直接放进新数组
  • 是数组则回到1,继续迭代
  • 当数组遍历完成,返回这个新数组

方法一、递归处理

代码如下

function flatten(arr) {
    var result = [];//定义一个新数组
    for (var i = 0, len = arr.length; i < len; i++) {
        if (Array.isArray(arr[i])) {//判断是否为数组 如果元素为数组则进入
            result = result.concat(flatten(arr[i]))// concat 合并数组,内部进行嵌套
        } else {
            result.push(arr[i])//符合条件则嵌套进数组
        }
    }
    return result;
}
var arr=[1,2,[3,4,[5,6]]];
console.log(flatten(arr));// [ 1, 2, 3, 4, 5, 6 ]

方法二、拓展运算符方法

拓展运算符方法,用于取出参数对象的所有可遍历属性,拷贝到当前对象之中

function flatten(arr) {
	while(arr.some(item => Array.isArray(item))) {
		arr = [].concat(...arr);
	}
	return arr;
}
var arr=[1,2,[3,4,[5,6]]];
console.log(flatten(arr));// [ 1, 2, 3, 4, 5, 6 ]

方法三、toStirng方法

利用toString方法,把数组直接转化为逗号分隔的字符串,然后再利用split方法把字符串重新转换为数组

    return arr.toString().split(',');
}
var arr=[1,2,[3,4,[5,6]]];
console.log(flatten(arr));// [ '1', '2', '3', '4', '5', '6' ]

方法四、reduce

我们传递了两个参数, 第一个参数就是就是处理扁平化的箭头函数,第二个参数是一个空数组,也是作为遍历的开始。

function flatten(arr) {
	return arr.reduce((res, next) => {
		return res.concat(next instanceof Array ? flatten(next) : next)
	}, [])
}
var arr=[1,2,[3,4,[5,6]]];
console.log(flatten(arr));// [ 1, 2, 3, 4, 5, 6 ]

总结

对于js的底层原理的理解,笔者也是小白一个,正在不断地学习过程当中,还望各位大佬多多指教。

参考链接

juejin.cn/post/694602…