继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

JS数组降维的多种实现方式

五月君
关注TA
已关注
手记 120
粉丝 7785
获赞 2338

业务开发中,二维数组、多维数组转为一维数组这种需求是少不了的,有些多维数组里面可能嵌套会更深,数组降维就是来解决此问题的,以下介绍三种实现方式。

数组字符串化

利用数组与字符串的隐式转换,使用+符号链接一个对象,javascript会默认调用toString方法转为字符串,再使用字符串分割成字符串数组,最后转成数值形数组

let arr = [[222, 333, 444], [55, 66, 77], {a: 1} ]
	arr += '';
	arr = arr.split(',');
	
console.log(arr); // ["222", "333", "444", "55", "66", "77", "[object Object]"]

这也是比较简单的一种方式,从以上例子中也能看到问题,所有的元素会转换为字符串,且元素为对象类型会被转换为 "[object Object]" ,对于同一种类型数字或字符串还是可以的。

利用apply和concat转换

concat() 方法用于连接两个或多个数组。该方法不会改变现有的数组,而仅仅会返回被连接数组的一个副本。

apply方法会调用一个函数,apply方法的第一个参数会作为被调用函数的this值,apply方法的第二个参数(一个数组,或类数组的对象)会作为被调用对象的arguments值,也就是说该数组的各个元素将会依次成为被调用函数的各个参数;将该特性应用到代码中

function reduceDimension(arr) {
    return Array.prototype.concat.apply([], arr);
}

console.log(reduceDimension([[123], 4, [7, 8],[9, [111]]]));
// [123, 4, 7, 8, 9, Array(1)]

以上apply的第二个参数arr,会将其每个数组元素做为参数传入contact,等同于 [].concat([123], 4, [7, 8],[9, [111]])

采用递归实现多维数组降纬

function arrayConcat(arr, point){
    return Array.prototype.concat.apply(point || [], arr);
}

function reduceDimension(arr) {
    let arrays = arrayConcat(arr);
    let newArray = [];

    for(let key in arrays){
        if(arrays[key] instanceof Array){
            newArray = arrayConcat(arrays[key], newArray);
        }else{
            newArray.push(arrays[key]);
        }
    }

    return newArray;
}

let arr = [[12], 4, [333, [4444, 5555]], [9, [111, 222]]];

for(let i = 0; i < 100000; i++){
    arr.push(i*1);
}

let start = new Date().getTime();
console.log('reduceDimension: ', reduceDimension(arr));
console.log('耗时: ', new Date().getTime() - start);

最佳实践方式

可以实现多维数组降维,实际测试效率也高于利用apply和concat转换,推荐此方法。

function reduceDimension(arr){
    let ret = [];
    
    let toArr = function(arr){
        arr.forEach(function(item){
            item instanceof Array ? toArr(item) : ret.push(item);
        });
    }

    toArr(arr);

    return ret;
}

let arr = [[12], 4, [333, [4444, 5555]], [9, [111, 222]]];

for(let i = 0; i < 100000; i++){
    arr.push(i);
}

let start = new Date().getTime();

console.log('reduceDimension: ', reduceDimension(arr));
console.log('耗时: ', new Date().getTime() - start);
打开App,阅读手记
9人推荐
发表评论
随时随地看视频慕课网APP

热门评论

你这只适合二维数组吧??不是说多维吗?

你这只适合二维数组吧??不是谁多维吗?

查看全部评论