Javascript绘制图案

Question

我需要一些函数来 return 这样的模式 :

= * = * =
* = * = *
= * = * =
* = * = *
= * = * =

我试试这个，但我做不到：

function cetakGambar(angka){
    let result = ''
    for(let i=0; i<=angka; i++){
        for(let j=0; j<=i; j++){
            result += '= '
        }
        for(let k=0; k == i; k++){
            result += ' *'
        }
        result += '\n'
    }
    return result
}

console.log(cetakGambar(5))

我需要什么样的循环才能得到那个模式

Answer 1

你在两个嵌套循环的正确轨道上。这是解决问题的示例小修改：

function cetakGambar(angka){
    let result = ''
    for(let i = 0; i < angka; i++){
        for(let j = 0; j < angka; ++j) {
            result += ((i + j) % 2 == 0) ? '= ' : '* ';
        }
        result += '\n';
    }
    return result
}

对于每个 i，通过遍历 j 生成一行。对于每个 j，我们附加一个 = 或 * ，这取决于添加 i 和 j 后结果是否可以被二整除（以创建交替图案）。在每一行之后附加一个 \n（换行符）。

Answer 2

使用一个循环的不同方法

function gen(row,col){
  var i = 0;
  var out="";
  do {
   if(i%col==0) out+="\n"
   out += (i % 2) == 0 ? ' = ' : ' * ';
    i++;
  }
  while (i < row*col);
  return out;
}
 
console.log(gen(5,5));

Answer 3

这是一个 ES6 解决方案 w/o 显式迭代。它不是特别简洁，在这种情况下可能不太有用，但很有趣（恕我直言），所以我想分享它。

它使用 Array.from 应用生成器函数，为每个单元格生成下一个符号（* 或 =），并用空格和换行符连接单元格。

// Utility to apply function <fn> <n> times.
function times(n, fn) {
  return Array.from({ length: n }, fn);
}

// Generator function yielding the next symbol to be drawn.
//
function cetakGambar(angka) {
  let generator = (function*() {
    let [i, s1, s2] = [0, "*", "="];
    while (true) {
      // Make sure to start a new line with a different symbol for
      // even rows in case <angka> is even
      if (i++ % angka === 0 && angka % 2 === 0) {
        [s1, s2] = [s2, s1];
      }
      // limit the generator to the number of values we actually need
      if (i === angka * angka + 1) return;

      yield i % 2 === 0 ? s1 : s2;
    }
  })();

  return times(
    angka,
    () => times(angka, () => generator.next().value).join(" ") // join symbols w/ spaces ...
  ).join("\n"); // ... and lines w/ newline
}

console.log(cetakGambar(5));

Codesandbox 在这里：https://codesandbox.io/s/wispy-http-mfxgo?file=/src/index.js

Javascript绘制图案

Javascript Draw pattern

javascript

logic

draw