原生js数组扁平化方法总汇,JavaScript多维数组如何实现扁平化处理返回一维数组

时间: 2017-12-04阅读: 2279标签: Array

js数组扁平化就是指将一个嵌套多层的数组 array (嵌套可以是任何层数)转换为只有一层的数组。  

var arr = [1, [2, [3, 4]]];
//扁平化之后:[1,2,3,4];


方法一:递归 

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

循环数组元素,如果还是一个数组,就递归调用该方法 


方法二:es5 Array 的reduce函数用法

function flatten(arr) {
	return arr.reduce(function(prev, next){
		return prev.concat(Array.isArray(next) ? flatten(next) : next)
	}, [])
}

使用reduce来简化代码 


 方法三:toString方法

function flatten(arr){
    return arr.toString().split(',').map(function(item){
        return +item;
    })
}

 toString方法只能适用于数组的元素都是数字的时候,因为中间是全部转换为字符串了。toString会将数组中的数以逗号形式结合起来,再split转成数组,并将其转换回数字。


方法四:ES6扩展运算符

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

由于扩展运算符一次只能展开一层数组:

var arr = [1, [2, [3, 4]]];
console.log([].concat(...arr)); // [1, 2, [3, 4]]

因此考虑只要数组中还有数组,就使用扩展运算符展开一次。


参考自JavaScript专题之数组扁平化  


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: http://www.fly63.com/article/detial/214

JS 将有父子关系的数组转换成树形结构数据

将有父子关系的数组数据先分为两类,一类是没有父节点的数据(取个别名parents),另一类是有父节点的数据(取个别名children),然后通过遍历parents,对每一个父节点在children查找对应的子节点,并将其放入父节点的children中(这里我的是以children表示子节点),然后每个子节点又作为一个父节点来重复之前的动作

如何在 JavaScript 中更好地使用数组

在过去的数个月里,我注意到在我审阅的 pull request 中有四个(关于数组使用的)错误经常出现。同时,我自己也会犯这些错误,因此有了这篇文章。让我们一起学习,以确保以后能正确地使用数组方法!

JavaScript数组中的22个常用方法

数组总共有22种方法,本文将其分为对象继承方法、数组转换方法、栈和队列方法、数组排序方法、数组拼接方法、创建子数组方法、数组删改方法、数组位置方法、数组归并方法和数组迭代方法共10类来进行详细介绍

Array.prototype.slice.call()

MDN中对于Array.prototype.slice.()的介绍中,提到了类数组对象。以下是原文:slice 方法可以用来将一个类数组(Array-like)对象/集合转换成一个新数组。你只需将该方法绑定到这个对象上。 一个函数中的 arguments 就是一个类数组对象的例子。

js中的Array

Array 对象用于在单个的变量中存储多个值。 创建 Array 对象的语法;参数 size 是期望的数组元素个数。返回的数组,length 字段将被设为 size 的值。参数 element ..., elementn 是参数列表。当使用这些参数来调用构造函数 Array() 时

Array的 every、some、filter、map的区别,以及和reduce的区别

every、some、filter、map这几个方法有时候总是傻傻分不清,尤其map,总是一下子有点懵逼记不清和其他方法的区别,每次都需要查一下API,他们的相同点都是需要遍历数组中的每一项,重点是他们的区别.

JS实现遍历不规则多维数组的方法

这篇文章主要介绍了JS实现遍历不规则多维数组的方法,涉及javascript数组递归遍历相关实现与使用技巧,需要的朋友可以参考下

Array数组相关方法

push向数组末尾添加元素;unshift向数组开头增加元素;pop删除数组末尾一项;shift删除数组的第一项;join为数组添加指定的分隔符;slice找某一区域内的项,返回成新数组形式

JS中forEach的用法

orEach是ES5中操作数组的一种方法,主要功能是遍历数组,forEach方法中的function回调有三个参数:第一个参数是遍历的数组内容,第二个参数是对应的数组索引,第三个参数是数组本身

js实现交换数组元素位置的方法总汇

交换数组元素位置是开发项目中经常用到的场景,总结下用过的几种方式:第三方变量、splice方法、解构赋值

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!