javascript数组拍平方法总结

在开发过程中有得时候总是碰一些共性的问题，比如将一个二维数组拍平成一维数组，或者三维数组拍平成一维数组。这些问题在遇到的时候总会重新思考，不如将其提炼出来，总结一下。

下面笔者将为大家演示一下，将一个多维数组拍平成一个一维数组的两种方法，算是抛砖引玉，大家有更好的方法可以在留言区发表。

首先是第一种方法，递归处理，代码如下：

var arr = [1, 2, 3, [3, 3, 3, [5, 4, 5, 6, 6, 7, 8]],
 [333, 4444]
];
function product() {
 // 1、创建一个空数组,
 var newarr = [];
 ///2、并且返回一个函数,函数参数为要拍平的数组
 return function flatten(arr) {
  // 3、循环数组，判断每一项,不为输的话将其塞入newarr
  // 若为数组,递归调用 faltten,并将结果与newarr合并
  for (var t of arr) {
   if (!Array.isArray(t)) {
    newarr.push(t);
   } else {
    newarr.concat(flatten(t))
   }
  }
  return newarr
 }
}
var flatten = product();
console.log(flatten(arr))

执行结果为：

上面这这种方法比较中规中矩，代码详解见注释，下面这种方法运用到了javascript语言的一些新特性，代码如下：

var arr = [1, 2, 3, [3, 3, 3, [5, 4, 5, 6, 6, 7, 8]],
 [333, 4444]
];
function flatten(arr){
 return arr.reduce(function(pre,cur){
  if(!Array.isArray(cur)){
   return [...pre,cur];
  }else{
   return [...pre,...flatten(cur)]
  }
 },[])
}
console.log(flatten(arr))

上面代码中用了ES6的一个新特性扩展云算法 “...”，“[...abc,...fff]”其作用相当于abc.concat(fff),这种用法更加直观明了，还有就是运用了reduce方法。reduce是javascript语言中数组的一个方法。

数组调用recduce方法时，可以传递两个参数，第一个参数为回调函数，第二个参数为一个初始值。回调函数中需要传递两个参数，第一个参数为每次执行函数的返回值，第二个参数为当前索引对应数组的值。reduce的第二个参数是可以省略的，省略的话，回调函数第一次调用的参数为数组的第一项和第二项的值，如果没有省略，回调函数的第一个参数就是这个初始值。上面的例子，reduce的第二个参数设置了一个空数组。

reduce的文档地址：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce

相比来说第一种比较好理解，第二种的难点在于对reduce函数的运用和理解。

赞 (0)

相关推荐

  • javascript数组拍平方法总结

    javascript数组拍平方法总结

    在开发过程中有得时候总是碰一些共性的问题,比如将一个二维数组拍平成一维数组,或者三维数组拍平成一维数组.这些问题在遇到的时候总会重新思考,不如将其提炼出来,总结一下. 下面笔者将为大家演示一下,将一个多维数组拍平成一个一维数组的两种方法,算是抛砖引玉,大家有更好的方法可以在留言区发表. 首先是第一种方法,递归处理,代码如下: var arr = [1, 2, 3, [3, 3, 3, [5, 4, 5, 6, 6, 7, 8]], [333, 4444] ]; function product(

  • JavaScript面试之如何实现数组拍平（扁平化）方法

    目录 1 什么叫数组拍平? 2 JS标准库中的数组拍平方法 3 实现一个flat方法 3.1 如何遍历一个数组 3.2 如何判断元素是否为数组 3.3 递归 3.4 初步实现flat方法 4 优化 4.1 指定展开深度 4.2 数组空位处理 4.2.1 for...of增加空位判断 4.2.2 forEach.map方法遍历 4.2.3 reduce方法 5 其他 5.1 栈 5.2 改进 总结 1 什么叫数组拍平? 概念很简单,意思是将一个"多维"数组降维,比如: // 原数组是一个

  • Javascript数组中push方法用法分析

    本文实例讲述了Javascript数组中push方法用法.分享给大家供大家参考,具体如下: 看下面代码: var o = { 1:'a' ,2:'b' ,length:2 ,push:Array.prototype.push }; o.push('c'); Q:o现在内部的值是什么样子? 我的第一反应是排斥,为什么要研究不合理情况下[解释引擎]的行为?但是这种推论有时候又很吸引人,于是我回来的时候仔细思考了下,发现其实很简单. 对于push这个方法,我条件反射地想到的就是栈,[数据结构的经典栈]

  • Javascript 更新 JavaScript 数组的 uniq 方法

    上次写的一篇<JavaScript 数组的 uniq 方法>,发现代码的问题还是存在.比如如果数组内有 undefined 元素就无法过滤等. 昨天看见 Lazy 兄弟重新更新了函数,现在他是这样子写的: Array.prototype.uniq = function() {     var resultArr = [],         returnArr = [],         origLen = this.length,         resultLen; function inc

  • javascript数组遍历的方法实例分析

    javascript数组遍历的方法实例分析

    本文实例讲述了javascript数组遍历的方法.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <script> var a = [1,2,3,4,5,6]; var b = a.

  • JavaScript 数组- Array的方法总结(推荐)

    JavaScript中的Array类型是经常用到的,Array类型也提供了很多方法能实现我们需求,下面我们来总结一下 一.创建Array的方法 var colors=new Array(); var colors=new Array(3);//创建一个长度为3的数组 var colors=new Array("red","blue")//创建一个数组["red","blue"] 当然,上面的new可以省略不写,如 var co

  • JavaScript数组去重的方法总结【12种方法，号称史上最全】

    本文实例总结了JavaScript数组去重的方法.分享给大家供大家参考,具体如下: 数组去重,一般都是在面试的时候才会碰到,一般是要求手写数组去重方法的代码.如果是被提问到,数组去重的方法有哪些?你能答出其中的10种,面试官很有可能对你刮目相看. 在真实的项目中碰到的数组去重,一般都是后台去处理,很少让前端处理数组去重.虽然日常项目用到的概率比较低,但还是需要了解一下,以防面试的时候可能回被问到. 注:写的匆忙,加上这几天有点忙,还没有非常认真核对过,不过思路是没有问题,可能一些小细节出错而已.

  • JavaScript数组去重实现方法小结

    本文实例讲述了JavaScript数组去重实现方法.分享给大家供大家参考,具体如下: 一.ES3方法: var arr = ['a', 'a', 'b', 'b', 'b', 'c', 'e', 'f', 1, 2, 2, 3, 3, 3]; 创建一个空数组与原来数组进行比较 //与前面的数组进行比较(不会改变原数组) function deleteRepeat() { var result = []; label: for(var i=0; i<arr.length; i++) { for(v

  • Javascript数组的 splice 方法详细介绍

    目录 前言 牛刀小试 删除元素 添加元素 并且替换元素 example1 example2 example3 example4 添加元素 example1 example2 负数索引支持 总结 前言 splice() 方法通过删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被修改的内容.此方法会改变原数组. 语法格式: array.splice(start[, deleteCount[, item1[, item2[, ...]]]]) 参数: start 必选 指定修改的开始

  • Javascript 数组去重的方法（四种）详解及实例代码

     Javascript 数组去重的四种方法 四种算法来实现这个目的: 第一种方法: Array.prototype.unique1 = function () { var n = []; //一个新的临时数组 for (var i = 0; i < this.length; i++) //遍历当前数组 { //如果当前数组的第i已经保存进了临时数组,那么跳过, //否则把当前项push到临时数组里面 if (n.indexOf(this[i]) == -1) n.push(this[i]); }

随机推荐