JS专题之数组展开

boredream 发布于2019-08-23 15:07 / 2444人阅读

摘要：根据需求的特点，数组展开需要进行迭代和递归。回答文章开头的问题将多重数组转化成单层数组的过程就是数组展开，也叫作数组扁平化一循环加递归最简单的思路循环中判断，如果子元素是数组则递归。

前言

首先什么是数组展开？
假如现在有这样一个需求：将后台的一个多重 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"]

总结

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

GPU云服务器云服务器 js 展开收起动画 js表格折叠展开 JS点击展开收缩 html点击展开js

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/101543.html

JavaScript专题之递归

摘要：专题系列第十八篇，讲解递归和尾递归定义程序调用自身的编程技巧称为递归。然而非尾调用函数，就会创建多个执行上下文压入执行上下文栈。所以我们只用把阶乘函数改造成一个尾递归形式，就可以避免创建那么多的执行上下文。 JavaScript 专题系列第十八篇，讲解递归和尾递归定义程序调用自身的编程技巧称为递归(recursion)。阶乘以阶乘为例： function factorial(n...

asoren 2019-08-22 11:05 评论0 收藏0
JS专题之数组去重

摘要：将元素作为对象的键，默认键对应的值为如果对象中没有这个键，则将这个元素放入结果数组中去。前言数组去重在日常开发中的使用频率还是较高的，也是网上随便一抓一大把的话题，所以，我写这篇文章目的在于归纳和总结，既然很多人都在提的数组去重，自己到底了解多少呢。又或者是如果自己在开发中遇到了去重的需求，自己能想到更好的解决方案吗。这次我们来理一理怎么做数组去重才能做得最合适，既要考虑兼容性，...

only_do 2019-08-26 13:29 评论0 收藏0
JS数组专题1️⃣ ➖ 数组扁平化

一、什么是数组扁平化扁平化，顾名思义就是减少复杂性装饰，使其事物本身更简洁、简单，突出主题。数组扁平化，对着上面意思套也知道了，就是将一个复杂的嵌套多层的数组，一层一层的转化为层级较少或者只有一层的数组。 Ps: flatten 可以使数组扁平化，效果就会如下： const arr = [1, [2, [3, 4]]]; console.log(flatten(arr)); // [1, ...

lieeps 2019-08-23 10:43 评论0 收藏0
JavaScript专题之从零实现jQuery的extend

摘要：不过的实现中，多了很多细节上的判断，比如第一个参数是否是布尔值，是否是一个对象，不传参数时的默认值等。 JavaScritp 专题系列第七篇，讲解如何从零实现一个 jQuery 的 extend 函数前言 jQuery 的 extend 是 jQuery 中应用非常多的一个函数，今天我们一边看 jQuery 的 extend 的特性，一边实现一个 extend! extend 基本用...

wangtdgoodluck 2019-08-20 17:59 评论0 收藏0