首頁  >  文章  >  web前端  >  javascript陣列如何平手?

javascript陣列如何平手?

亚连
亚连原創
2018-06-11 14:21:112884瀏覽

這篇文章給大家詳細分析了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的第二個參數設定了一個空數組。

上面是我整理給大家的,希望今後對大家有幫助。

相關文章:

在微信中如何使用js喚起App?

在Vue中使用cli mui有關區域滾動問題

在vue中線上付費課程(詳細教學)

express與koa的使用比較(詳細教學)

在vue中首次使用stylus安裝方法(詳細教學)

Vue框架中有關goods元件開發

以上是javascript陣列如何平手?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn