javascript數(shù)組拍平方法總結

更新時間：2018年01月20日 09:02:35 投稿：laozhang

本篇文章給大家詳細分析了javascript數(shù)組拍平的方法，對此有興趣的朋友跟著小編一起學習下吧。

在開發(fā)過程中有得時候總是碰一些共性的問題，比如將一個二維數(shù)組拍平成一維數(shù)組，或者三維數(shù)組拍平成一維數(shù)組。這些問題在遇到的時候總會重新思考，不如將其提煉出來，總結一下。

下面筆者將為大家演示一下，將一個多維數(shù)組拍平成一個一維數(shù)組的兩種方法，算是拋磚引玉，大家有更好的方法可以在留言區(qū)發(fā)表。

首先是第一種方法，遞歸處理，代碼如下：

var arr = [1, 2, 3, [3, 3, 3, [5, 4, 5, 6, 6, 7, 8]],
 [333, 4444]
];
function product() {
 // 1、創(chuàng)建一個空數(shù)組,
 var newarr = [];
 ///2、并且返回一個函數(shù),函數(shù)參數(shù)為要拍平的數(shù)組
 return function flatten(arr) {
  // 3、循環(huán)數(shù)組，判斷每一項,不為輸?shù)脑拰⑵淙雗ewarr
  // 若為數(shù)組,遞歸調用 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))

執(zhí)行結果為：

上面這這種方法比較中規(guī)中矩，代碼詳解見注釋，下面這種方法運用到了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語言中數(shù)組的一個方法。

數(shù)組調用recduce方法時，可以傳遞兩個參數(shù)，第一個參數(shù)為回調函數(shù)，第二個參數(shù)為一個初始值?；卣{函數(shù)中需要傳遞兩個參數(shù)，第一個參數(shù)為每次執(zhí)行函數(shù)的返回值，第二個參數(shù)為當前索引對應數(shù)組的值。reduce的第二個參數(shù)是可以省略的，省略的話，回調函數(shù)第一次調用的參數(shù)為數(shù)組的第一項和第二項的值，如果沒有省略，回調函數(shù)的第一個參數(shù)就是這個初始值。上面的例子，reduce的第二個參數(shù)設置了一個空數(shù)組。

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

相比來說第一種比較好理解，第二種的難點在于對reduce函數(shù)的運用和理解。

您可能感興趣的文章: