用JS列印正三角形

JS是一種重要的編程語言，在前端開發中發揮著重要的作用，它能夠實現很多有趣的功能。在本篇文章中，我們將討論如何用JS列印正三角形。正三角形擁有良好的美學效果，在網頁設計中經常被使用。

一、基礎方法

function printTriangle(height) {
  let row = '';
  for (let i = 1; i <= height; i++) {
    row += '*';
    console.log(row);
  }
}

printTriangle(5);

這是最基本的列印正三角形的方法。該方法使用了一個for循環，以累加星號構成正三角形。

首先定義一個長度為0的字元串，該字元串用來存儲星號。然後，使用for循環從1到height，每次將一個星號添加到row字元串中。每次循環後，調用console.log()方法列印出row字元串。

我們調用了printTriangle()函數，並將5作為參數傳入，該函數將會列印一個有5行的正三角形：

*
**
***
****
*****

二、增強方法

function printTriangleEnhanced(height) {
  const TOTAL_WIDTH = height * 2 - 1;
  let row = '';
  for (let i = 1; i <= height; i++) {
    row += '*';
    const ROW_WIDTH = i * 2 - 1;
    const PADDING = Math.floor((TOTAL_WIDTH - ROW_WIDTH) / 2);
    console.log(' '.repeat(PADDING) + row + ' '.repeat(PADDING));
  }
}

printTriangleEnhanced(5);

在增強版中，我們優化了代碼，使其更靈活、更健壯，並列印了帶有空格的三角形，讓其更美觀。

為了使得三角形居中，我們定義了一個名為TOTAL_WIDTH的常量來表示三角形的總寬度，即height×2-1。在for循環中，我們通過ROW_WIDTH變數計算出當前行的寬度，即i×2-1。我們再使用PADDING變數來補足每行前面的空格，確保三角形居中。

我們調用了printTriangleEnhanced()函數，並將5作為參數傳入，該函數將會列印一個有5行的正三角形：

    *
   ***
  *****
 *******
*********

三、利用ES6特性

function printTriangleES6(height) {
  const TOTAL_WIDTH = height * 2 - 1;
  [...Array(height)].forEach((_, i) => {
    const ROW_WIDTH = i * 2 + 1;
    const PADDING = Math.floor((TOTAL_WIDTH - ROW_WIDTH) / 2);
    console.log(' '.repeat(PADDING) + '*'.repeat(ROW_WIDTH) + ' '.repeat(PADDING));
  });
}

printTriangleES6(5);

在ES6中，我們可以使用更加簡潔的方式來實現同樣的功能。

首先，我們使用[…Array(height)]方法創建一個長度為height的數組，並使用forEach()方法遍曆數組並執行操作。在此過程中不需要定義一個變數，所以我們用一個下劃線’_ ‘來佔位。

接下來，我們通過ROW_WIDTH變數計算出當前行的寬度，使用repeat()方法構造星號行，再使用repeat()方法構造空格行，最後拼接這兩個字元串並列印出來即可。

我們調用了printTriangleES6()函數，並將5作為參數傳入，該函數將會列印一個有5行的正三角形：

    *
   ***
  *****
 *******
*********

四、使用遞歸

function printTriangleRecursive(height, currentRow = 1, row = '') {
  if (currentRow > height) return;
  row += '*';
  console.log(row);
  printTriangleRecursive(height, currentRow + 1, row);
}

printTriangleRecursive(5);

遞歸是另一種實現列印正三角形的方法，可以很好地展示JS的強大之處。

在遞歸方法中，我們定義了height、currentRow和row 3個參數，其中currentRow和row都是可選的。

每次調用printTriangleRecursive()方法時，都會將currentRow加1，並將row添加一個星號。如果currentRow還沒有達到height，那麼該函數就會繼續調用自身，直到currentRow等於height為止。

我們調用了printTriangleRecursive()函數，並將5作為參數傳入，該函數將會列印一個有5行的正三角形：

*
**
***
****
*****

五、使用生成器

function* generateTriangle(height, row = '') {
  while (height--) {
    row += '*';
    yield `${row}\n`;
  }
}

for (let row of generateTriangle(5)) {
  console.log(row);
}

JavaScript中的生成器使得列印正三角形變得非常簡單。

在generateTriangle()函數中，我們定義了一個名為row的空字元串，以及height參數。在while循環中，每次執行都會將height減一，直到height為0為止。在循環中，我們再將row添加星號並使用yield關鍵字將構成好的字元串傳出去。

在for循環中，我們使用generateTriangle()函數創建一個生成器。隨著每次迭代，我們都會獲得一個新的星號行字元串並列印它。

我們調用了generateTriangle()函數，並將5作為參數傳入，該函數將會列印一個有5行的正三角形：

*
**
***
****
*****

結語

在本文中，我們介紹了不同的方法來用JS列印正三角形。無論你是想使用最基本的知識，還是想挑戰更高級的技術，都有相應的方法供你參考。這些方法都有自己獨特的優點，相信你會在日常開發中受益匪淺。