前言

JavaScript中的Array對(duì)象，就是我們常說(shuō)的數(shù)組對(duì)象，主要用于封裝多個(gè)任意類(lèi)型的數(shù)據(jù)，并對(duì)它們進(jìn)行管理。

所有主流瀏覽器均支持Array對(duì)象。

大家都知道Array實(shí)例有這四個(gè)方法：push、pop、shift、unshift。大家也都知道 push + pop實(shí)現(xiàn)棧， shift + push實(shí)現(xiàn)隊(duì)列。在這里不討論什么先進(jìn)后出、先進(jìn)先出。

但一面這個(gè)題將要用到這幾個(gè)方法。

題目

螺旋矩陣這個(gè)名詞，在后臺(tái)語(yǔ)言中可能很熟悉，他是個(gè)二維數(shù)組，他有什么特點(diǎn)呢？請(qǐng)看下圖：

以上是一個(gè)從外到內(nèi)的螺旋矩陣，他的排列規(guī)則是從外圍開(kāi)始走，一圈一圈繞道最里面，就像一條盤(pán)旋著的蛇。

分析與解答

進(jìn)入正題，今年9月份騰訊校招在線筆試題就有一個(gè)螺旋矩陣的 題，傳入給定數(shù)字n，打印出n*n的螺旋矩陣，當(dāng)時(shí)本菜鳥(niǎo)并沒(méi)有做出來(lái)，時(shí)間過(guò)后自己在電腦上想，然后恍然大悟明白的其中的奧妙。

雖然博主沒(méi)有記錄當(dāng)時(shí)的代碼，但是我是首先定義了個(gè)n*n的二維數(shù)組，得到需要繞幾層，比如上面的是2層，然后就循環(huán)幾次，在內(nèi)部用四個(gè)for循環(huán)，分別是上下左右給定義的二維數(shù)組插內(nèi)容，具體的代碼就沒(méi)法上了，反正方法很笨，而且并不是本文章的重點(diǎn)，下面進(jìn)入本章主題：

前幾天我在codewars上做題，遇到了個(gè)螺旋矩陣的題，它是要求寫(xiě)一個(gè)函數(shù)，給定一個(gè)矩陣二維數(shù)組參數(shù)，返回一個(gè)數(shù)組，該數(shù)組的元素順序就是螺旋矩陣的路徑。

例如：

function getLinear (spiral) {
 //...做一些操作 
}

var arr = [
 [1,2,3],
 [4,5,6],
 [7,8,9]
]

getLinear(arr) // 返回 [1,2,3,6,9,8,7,4,5]

上面例子清除的看到getLinear函數(shù)是將傳入的‘螺旋矩陣'用一維數(shù)組按順序輸出了（我也不知道怎么說(shuō)了，反正就是把這個(gè)二維數(shù)組像蛇一樣盤(pán)旋著形成一維數(shù)組）

看到這個(gè)題的第一時(shí)間，我就想起了騰訊校招的那個(gè)題， 然后博主就用類(lèi)似的四個(gè)for循環(huán)寫(xiě)完了，然后提交。這個(gè)網(wǎng)站有個(gè)功能是，你做完題目可以看別人做的代碼，博主小心翼翼的點(diǎn)開(kāi)答案列表，哇，第一條就深深吸引了我。雖然不記得別人寫(xiě)的源碼，但大致是這樣的：

function getLinear(spiral) {

  var item;

  var linear = []

  while (item = spiral.shift()) {
  // 上
  linear = linear.concat(item)

  // 右
  for (var i = 0; i < spiral.length; i++) {
   linear.push( spiral[i].pop() )
  }

  // 下
  linear = linear.concat( spiral.pop().reverse())

  // 左
  for (var i = spiral.length - 1; i >= 0; i --) {
   linear.push(spiral[i].shift())
  }

  }
  return linear
 }

對(duì)于菜鳥(niǎo)級(jí)別的我來(lái)說(shuō)，剛開(kāi)始還有點(diǎn)懵，因?yàn)楦业乃季S不一樣，看了一會(huì)才發(fā)現(xiàn)其中的奧妙。相比我寫(xiě)的真是好多了，這個(gè)代碼不需要考慮傳入的是否為n*n數(shù)組，他可以解析任意數(shù)組比如2*3數(shù)組等。

而且代碼絕對(duì)簡(jiǎn)潔，對(duì)于有一定基礎(chǔ)的來(lái)說(shuō)也很容易懂。

如果你有些困惑，就往下看，我的圖文解釋

// 上
 linear = linear.concat(item)

item為二維數(shù)組的第一個(gè)元素，就是第一個(gè)數(shù)組，將它移除數(shù)組并返回，如下：

此行代碼后，原數(shù)組變成如下：

接下來(lái)，我們需要將 5 6 7 加入要返回的數(shù)組中，也就是二維數(shù)組的每個(gè)數(shù)組元素的最后一個(gè)元素，我們可以用pop獲取到：

// 右
  for (var i = 0; i < spiral.length; i++) {
   linear.push( spiral[i].pop() )
  }

這時(shí)原來(lái)的二維數(shù)組變成了如下：

接下來(lái)我們要拿到最后一行 10 9 8 并倒置，將二維數(shù)組pop出最后一個(gè)數(shù)組然后將他reverse就可以了

// 下
 linear = linear.concat(spiral.pop().reverse())

此時(shí)原來(lái)二維數(shù)組是這樣的：

獲取左邊的就跟右邊類(lèi)似，只需要將pop變成shift：

// 左
for (var i = spiral.length - 1; i >= 0; i --) {
 linear.push(spiral[i].shift())
}

原來(lái)二維數(shù)組變?yōu)椋?/p>

此時(shí)，一圈就完了，然后while判斷是否進(jìn)入下一圈。

總結(jié)

好了，本文的內(nèi)容就到這里了，一個(gè)看上去不簡(jiǎn)單的題目，在Array的靈活下變得如此簡(jiǎn)單，希望本文的內(nèi)容對(duì)各位js新手們能有所幫助，如果有疑問(wèn)大家可以留言交流。

最新評(píng)論