JS专题之数组展开

栏目: JavaScript · 发布时间: 5年前

内容简介:首先什么是数组展开?假如现在有这样一个需求:将后台的一个多重 List 数据,展开成一个 List 后,并去重后排序;数组去重我们前面在《JS专题之数组去重》已经讲过了,那么前一步的多重数组展开成单层数组,该如何处理呢?

前言

首先什么是数组展开?

假如现在有这样一个需求:将后台的一个多重 List 数据,展开成一个 List 后,并去重后排序;

["a", "b", ["c", "d"], [["d"],"e"], "f"] => ["a", "b", "c", "d", "e"];

数组去重我们前面在《JS专题之数组去重》已经讲过了,那么前一步的多重数组展开成单层数组,该如何处理呢?

这就来到我们所要探讨的数组展开了。

根据需求的特点,数组展开需要进行迭代和递归。

回答文章开头的问题:

将多重数组转化成单层数组的过程就是数组展开,也叫作数组扁平化(flatten)

一、循环加递归

最简单的思路:循环中判断,如果子元素是数组则递归。

function flatten(origin) {
    var result = [];
    for(var i = 0; i< origin.length; i++) {
        var item = origin[i];
        if(Array.isArray(item)) {
            result = result.concat(flatten(item))
        } else {
            result.push(item);
        }
    }
    return result;
}

var arr = ["a", "b", ["c", "d"], [["d"],"e"], "f"];
flatten(arr);  // ["a", "b", "c", "d", "d", "e", "f"]

二、toString()

数组的原型对象上有一个方法,toString, 它能把数组的所以元素转化成用逗号隔开的字符串。

var arr = [1, [2, 3, [4]], "a", "b", ["c", "d"], [["d"],"e"], "f"];  
arr.toString()  // "1,2,3,4,a,b,c,d,d,e,f"

// 所以,利用 split 先把字符串转化为单层数组,再进行处理。
const flatten = (origin) => origin.toString().split(',');  // ["1", "2", "3", "4", "a", "b", "c", "d", "d", "e", "f"]

由于 toString 转化为字符串的时候,不会区分字符串和数字类型,在进行区分数据类型的时候要注意。

三、split

上面的方法,我们用 toString() 将数组转化为字符串,那么我们也可以用 split 来做:

var arr = [1, [2, 3, [4]], "a", "b", ["c", "d"], [["d"],"e"], "f"];
function flatten(arr) {
    return arr.join(',').split(',');  
} 
console.log(flatten(arr))。 // ["1", "2", "3", "4", "a", "b", "c", "d", "d", "e", "f"]

同样,这种字符串和数组互转的过程,不适合多种数据类型同时处理。

四、reduce

我们注意到其实数组扁平化其实就是“迭代 + 拼接(累加) + 递归”的过程,数组 reduce 方法既可以迭代又可以累加,适合做数组扁平化。

function flatten(origin){
  return origin.reduce(function(init, item){
    return init.concat(Array.isArray(item) ? flatten(item) : item)
  }, [])
}
var arr = [1, [2, 3, [4]], "a", "b", ["c", "d"], [["d"],"e"], "f"];  
console.log(flatten(arr)) // [1, 2, 3, 4, "a", "b", "c", "d", "d", "e", "f"]

五、some + concat

some 会遍历数组的每一个元素,判断是否有元素都满足条件,最后返回布尔值。some 一旦返回真值后,其后的元素就不会继续监测。

function flatten(origin) {
    while (origin.some(item => Array.isArray(item))){
    origin = [].concat.apply([], origin);
  }
  return origin;
}
var arr = [1, [2, 3, [4]], "a", "b", ["c", "d"], [["d"],"e"], "f"];  
console.log(flatten(arr)) // [1, 2, 3, 4, "a", "b", "c", "d", "d", "e", "f"]

六、some + 扩展运算符

ES6 扩展运算符 ... 可以将两重数组转换为单层数组:

[].concat(...[1, [2, 3, [4]], "a", "b", ["c", "d"], [["d"],"e"], "f"]);  // [1, 2, 3, Array(1), "a", "b", "c", "d", Array(1), "e", "f"]

// 利用 some 方法,我们可以实现多重转换为单层:

function flatten(origin) { while(origin.some(item=> Array.isArray(item))) {
        origin = [].concat(origin);
    } return origin;
}

var arr = [1, [2, 3, [4]], "a", "b", ["c", "d"], [["d"],"e"], "f"];  
console.log(flatten(arr)) // [1, 2, 3, 4, "a", "b", "c", "d", "d", "e", "f"]

总结

数组扁平化其实就是利用元素迭代 + 元素拼接(叠加)+ 递归调用来对数组进行处理,达到将多层数组转换为单层数组的过程。


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

重构(影印版)

重构(影印版)

Martin Fowler / 中国电力出版社 / 2003-7-1 / 49.00元

随着对象技术应用越来越普及,软件开发社区出现了一个新的问题。缺乏经验的开发者编写出了大批设计较差的程序,导致这些应用程序非常低效,且难于维护和扩展。本书除了讨论重构的各种技巧之外,还提供了超过70个可行重构的详细编目,对如何应用它们给出了有用的提示;并以step by step的形式给出了应用每一种重构的指南;而且用实例展示了重构的工作原理。这些示例都是用Java语言写成的,但其中的思想却可以运用......一起来看看 《重构(影印版)》 这本书的介绍吧!

JSON 在线解析
JSON 在线解析

在线 JSON 格式化工具

正则表达式在线测试
正则表达式在线测试

正则表达式在线测试

HSV CMYK 转换工具
HSV CMYK 转换工具

HSV CMYK互换工具