TypeScript順時(shí)針打印矩陣實(shí)現(xiàn)實(shí)例詳解
前言
有一個(gè)矩陣,如何按照從外向里以順時(shí)針的順序依次打印出每一個(gè)元素?本文將跟大家分享下這個(gè)算法,歡迎各位感興趣的開發(fā)者閱讀本文。
梳理思路
當(dāng)我們遇到一個(gè)復(fù)雜的問題時(shí),可以通過舉例將它畫出來,這樣就可以更直觀的發(fā)現(xiàn)規(guī)律。那么我們就先構(gòu)造一個(gè)矩陣出來,如下所示:
const matrix = [ [1, 2, 3, 4], [5, 6, 7, 8], [9, 10, 11, 12], [13, 14, 15, 16] ];
順時(shí)針訪問一個(gè)矩陣,那么它的訪問過程就如下圖所示:
觀察上圖后,我們可以很明顯的知道可以通過一個(gè)循環(huán)來打印這個(gè)矩陣,每次打印矩陣的一個(gè)圈,那么循環(huán)的終止條件是什么呢?
接下來,我們就來分析下循環(huán)的終止條件。假設(shè)矩陣的行數(shù)為rows,列數(shù)為cols,打印第一圈的左上角坐標(biāo)是(0,0),第二圈的左上角坐標(biāo)是(1,1),以此類推,我們注意到左上角的坐標(biāo)中,行標(biāo)與列標(biāo)總是相同的,于是可以在矩陣中選取左上角為(start,start)的一圈作為我們的分析目標(biāo)。
我們?cè)趤矶嗔信e幾個(gè)例子觀察下,例如:
- 對(duì)于5*5的矩陣而言,最后一圈只有1個(gè)數(shù)字,對(duì)應(yīng)的坐標(biāo)為(2,2)
- 對(duì)于6*6的矩陣而言,最后一圈有4個(gè)數(shù)字,其左上角的坐標(biāo)依然為(2,2)
距上所述,我們可以發(fā)現(xiàn):5 > 2 * 2
、6 > 2 * 2
全部成立,于是可以得出讓循環(huán)終止的條件為:cols > start * 2 && rows > start * 2
。
接下來,我們來分析下如何實(shí)現(xiàn)打印一圈,前面的分析中我們已經(jīng)知道了打印1圈需要4步,即:
- 從左到右打印一行
- 從上到下打印一列
- 從右到左打印一行
- 從下到上打印一列
每一步我們根據(jù)起始坐標(biāo)和終止坐標(biāo)用一個(gè)循環(huán)就能打印出一行或者一列,但是最后一圈有可能退化成只有一行、只有一列,甚至只有一個(gè)數(shù)字,因此打印這樣的一圈就不再需要四步。可能只需要三步、兩步甚至一步。
我們來分析下每一步的執(zhí)行條件:
- 第一步是必須的,因?yàn)榇蛴∫蝗χ辽儆幸徊?ul>
- start作為行坐標(biāo)
- 從start位置開始遍歷至終止列號(hào),將其作為列坐標(biāo)
- 輸出每一個(gè)元素
- 第二步要求圈內(nèi)至少有2行,即:終止行號(hào)大于起始行號(hào)
- 從start+1位置遍歷至至終止行號(hào),將其作為行坐標(biāo)
- 終止列號(hào)作為列坐標(biāo)
- 輸出每一個(gè)元素
- 第三步要求圈內(nèi)至少有兩行兩列,即:終止行號(hào)大于起始行號(hào)且終止列號(hào)大于起始列號(hào)
- 從終止列號(hào)-1位置遍歷至start,將其作為列坐標(biāo)
- 終止行號(hào)作為行坐標(biāo)
- 輸出每一個(gè)元素
- 第四步要求圈內(nèi)至少有三行兩列,即:終止行號(hào)比起始行號(hào)至少大2,同時(shí)終止列號(hào)大于起始列號(hào)
- 從終止行號(hào)-1位置遍歷至start+1位置,將其作為行坐標(biāo)
- start作為列坐標(biāo)
- 輸出每一個(gè)元素
實(shí)現(xiàn)代碼
經(jīng)過上面的分析,我們已經(jīng)有了縝密的邏輯,接下來我們就可以愉快的進(jìn)行編碼了,如下所示:
// 順時(shí)針打印矩陣 export function PrintMatrix<T>( matrix: Array<Array<T>>, cols: number, rows: number ): void { if (matrix == null || cols == null || rows == null) return; // 圈數(shù) let start = 0; while (cols > start * 2 && rows > start * 2) { // 打印每一圈的數(shù)據(jù) PrintMatrixInCircle(matrix, cols, rows, start); start++; } } // 打印矩陣的一圈 function PrintMatrixInCircle<T>( matrix: Array<Array<T>>, cols: number, rows: number, start: number ): void { // 計(jì)算當(dāng)前圈結(jié)束點(diǎn)坐標(biāo)(索引從0開始,所以需要-1) // 終止列號(hào) const endX = cols - 1 - start; // 終止行號(hào) const endY = rows - 1 - start; // 從左到右打印一行 for (let i = start; i <= endX; i++) { console.log(matrix[start][i]); } // 從上到下打印一列 if (start < endY) { // 此時(shí): // 最后一列已經(jīng)在從左到右的打印中讀取了 for (let i = start + 1; i <= endY; i++) { console.log(matrix[i][endX]); } } // 從右到左打印一行 if (start < endX && start < endY) { // 此時(shí): // 最后一列已經(jīng)在從上到下的打印中讀取了 for (let i = endX - 1; i >= start; i--) { console.log(matrix[endY][i]); } } // 從下到上打印一列 if (start < endX && start < endY - 1) { // 此時(shí): // 最后一列已經(jīng)在從上到下的打印中讀取了 // 第一列的打印已經(jīng)在從左到右的打印中讀取了 for (let i = endY - 1; i >= start + 1; i--) { console.log(matrix[i][start]); } } }
我們用前面所舉的例子來驗(yàn)證下上述代碼能否正常執(zhí)行,如下所示:
const matrix = [ [1, 2, 3, 4], [5, 6, 7, 8], [9, 10, 11, 12], [13, 14, 15, 16] ]; PrintMatrix(matrix, 4, 4);
示例代碼
本文所用代碼完整版請(qǐng)移步:
以上就是TypeScript順時(shí)針打印矩陣實(shí)現(xiàn)實(shí)例詳解的詳細(xì)內(nèi)容,更多關(guān)于TypeScript順時(shí)針打印矩陣的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
JS面試中你不知道的call apply bind方法及使用場(chǎng)景詳解
這篇文章主要為大家介紹了JS面試中你不知道的call apply bind方法及使用場(chǎng)景詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-02-02Javascript調(diào)用XML制作連動(dòng)下拉列表框
Javascript調(diào)用XML制作連動(dòng)下拉列表框...2006-06-06關(guān)于JavaScript輪播圖的實(shí)現(xiàn)
這篇文章主要介紹了關(guān)于JavaScript輪播圖的實(shí)現(xiàn),下面文章主要是利用利用html 和 css 代碼實(shí)現(xiàn)輪播圖,詳細(xì)內(nèi)容請(qǐng)參考下面詳細(xì)內(nèi)容,希望對(duì)你有所幫助2021-11-11微信小程序 開發(fā)之滑塊視圖容器(swiper)詳解及實(shí)例代碼
這篇文章主要介紹了微信小程序 開發(fā)之滑塊視圖容器(swiper)詳解及實(shí)例代碼的相關(guān)資料,需要的朋友可以參考下2017-02-02next.js源碼解析getStaticProps?getStaticPaths使用場(chǎng)景
這篇文章主要為大家介紹了next.js源碼解析getStaticProps?getStaticPaths使用場(chǎng)景,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08前端Website?sitemap.xml文件搜索引擎優(yōu)化
這篇文章主要為大家介紹了前端Website的sitemap.xml文件和搜索引擎優(yōu)化實(shí)現(xiàn)詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-05-05微信小程序?qū)崿F(xiàn)多個(gè)按鈕toggle功能的實(shí)例
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)多個(gè)按鈕toggle功能的實(shí)例的相關(guān)資料,需要的朋友可以參考下2017-06-06uniapp封裝canvas組件無腦繪制保存小程序分享海報(bào)
這篇文章主要為大家介紹了uniapp封裝canvas組件和方法無腦繪制并保存小程序分享海報(bào)實(shí)現(xiàn)示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-08-08