JavaScript實現(xiàn)數(shù)組降維詳解

更新時間：2017年01月05日 10:03:20 作者：Mervyn Zhang

大家都知道將多維數(shù)組（尤其是二維數(shù)組）轉化為一維數(shù)組是業(yè)務開發(fā)中的常用邏輯，除了使用樸素的循環(huán)轉換以外，我們還可以利用Javascript的語言特性和數(shù)據(jù)結構的思想實現(xiàn)更為簡潔優(yōu)雅的轉換。下面跟著小編一起來學習學習關于JavaScript如何實現(xiàn)數(shù)組降維吧。

二維數(shù)組降維

二維數(shù)組只有兩個維度，降維比較簡單，也不用考慮太復雜的算法邏輯，我們看一下二維數(shù)組降維的幾種方法；

遍歷降維

var arr = [
  ['h', 'e', 'l', 'l', 'o'],
  ['m', 'y'],
  ['w', 'o', 'r', 'l', 'd'],
  ['!']
];
var result = [];
for (var r = 0; r < arr.length; r++) {
  for (var c = 0; c < arr[r].length; c++) {
    result.push(arr[r][c]);
  }
}
console.log(result); //=>[ 'h', 'e', 'l', 'l', 'o', 'm', 'y', 'w', 'o', 'r', 'l', 'd', '!' ]

此方法思路簡單，利用雙重循環(huán)遍歷二維數(shù)組中的每個元素并放到新數(shù)組中。

使用concat

利用concat方法，可以將雙重循環(huán)簡化為單重循環(huán)：

var arr = [
  ['h', 'e', 'l', 'l', 'o'],
  ['m', 'y'],
  ['w', 'o', 'r', 'l', 'd'],
  ['!']
];
var result = [];
for (var r = 0, result = []; r < arr.length; r++) {
  result = result.concat(arr[r]);
}
console.log(result); //=>[ 'h', 'e', 'l', 'l', 'o', 'm', 'y', 'w', 'o', 'r', 'l', 'd', '!' ]

arr的每一個元素都是一個數(shù)組或參數(shù)，作為concat方法的參數(shù)，數(shù)組中的參數(shù)或每一個子元素又都會被獨立插入進新數(shù)組。

使用apply+concat

apply方法會調用一個函數(shù)，apply方法的第一個參數(shù)會作為被調用函數(shù)的this值，apply方法的第二個參數(shù)（一個數(shù)組，或類數(shù)組的對象）會作為被調用對象的arguments值，也就是說該數(shù)組的各個元素將會依次成為被調用函數(shù)的各個參數(shù)；

var arr = [
  ['h', 'e', 'l', 'l', 'o'],
  ['m', 'y'],
  ['w', 'o', 'r', 'l', 'd'],
  ['!']
];
var result = Array.prototype.concat.apply([], arr);
console.log(result); //=>[ 'h', 'e', 'l', 'l', 'o', 'm', 'y', 'w', 'o', 'r', 'l', 'd', '!' ]

利用apply方法，只需要一行代碼就可以完成二維數(shù)組降維了。

多維數(shù)組降維

多維數(shù)組就沒二維數(shù)組那么簡單了，因為不確定數(shù)組的深度，所以也不能進行遍歷來降維，只能通過遞歸或者棧方法來實現(xiàn)。

遞歸

Array.prototype.deepFlatten = function() {
  var result = []; //定義保存結果的數(shù)組
  this.forEach(function(val, idx) { //遍歷數(shù)組
    if (Array.isArray(val)) { //判斷是否為子數(shù)組
      val.forEach(arguments.callee); //為子數(shù)組則遞歸執(zhí)行
    } else {
      result.push(val); //不為子數(shù)組則將值存入結果數(shù)組中
    }
  });
  return result; //返回result數(shù)組
}
var arr = [2, 3, [2, 2],
  [3, 'f', ['w', 3]], { "name": 'Tom' }
];
console.log(arr.deepFlatten()); //=>[ 2, 3, 2, 2, 3, 'f', 'w', 3, { name: 'Tom' } ]

這是通過遞歸的方法實現(xiàn)了多維數(shù)組的降維，在這里面，我有使用了原型鏈將方法封裝進了Array原型中，可以直接在數(shù)組方法中調用。

棧方法

Array.prototype.deepFlatten = function() {
  var result = []; //定義保存結果的數(shù)組
  var stack = this; //將數(shù)組放入棧中
  while (stack.length !== 0) { //如果棧不為空，則循環(huán)遍歷
    var val = stack.pop(); //取出最后一個值
    if (Array.isArray(val)) { //判斷是不是數(shù)組
      stack = stack.concat(val); //如果是數(shù)組就將拼接入棧中
    } else {
      result.unshift(val); //如果不是數(shù)組就將其取出來放入結果數(shù)組中
    }
  }
  return result;
}
var arr = [2, 3, [2, 2],
  [3, 'f', ['w', 3]], { "name": 'Tom' }
];
console.log(arr.deepFlatten()); //=>[ 2, 3, 2, 2, 3, 'f', 'w', 3, { name: 'Tom' } ]

這是通過棧方法，建立了一個棧，將數(shù)組的內容存進去，然后逐個取出來，如果取出來的是個數(shù)組，就將這個數(shù)組打散拼接進棧中，在出棧一個，這樣循環(huán)。

多維數(shù)組降維的方法也可以降維二維數(shù)組，但是有點大材小用，還是用對的方法做對的事才是最好的！

總結

以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作能帶來一定的幫助，如果有疑問大家可以留言交流。

您可能感興趣的文章: