Question

我正在尝试创建一个随机颜色生成器是否有任何方法可以缩短此代码并转换为es6箭头功能？谢谢

let html = "";
let rgbColor;

function randomColors(red, green, blue) {
  for (let i = 1; i <= 10; i++) {
    red = Math.floor(Math.random() * 256);
    green = Math.floor(Math.random() * 256);
    blue = Math.floor(Math.random() * 256);
    rgbColor = `rgb(${red},${green},${blue})`;
    html += `<div style="background-color:${rgbColor}"></div>`;
  }

 document.write(html);
}

randomColors()

Answer 1

您可以使用Array#from和Array#join生成每种颜色和颜色列表，并将所有内容组合成字符串：

＆＃13;

const randomColors = (count) => 
  Array.from({ length: count }, (_, k) => // create an array of divs with length of count
    `<div style="background-color: rgb(${
      Array.from({ length: 3 }, () => Math.floor(Math.random() * 256)).join()
    })">${k}</div>` // inside each div create an array of 3 colors, and join them
  ).join(''); // join the array of divs to one string

document.write(randomColors(9));

＆＃13;

Answer 2

你可以这样做：

+------------+
| time_expr  |
+------------+
| 43 minutes |
+------------+

但这不会过多地缩短这段代码。

Answer 3

This answer是准确的，因为它是使用箭头函数的randomColors函数的有效表示。然而（正如他所指出的），它本身并没有提供缩短代码的方法。为此，我建议提出一个辅助函数来生成随机颜色（参见下面的getRandColor函数）。

let html = "";
let rgbColor;

const randomColors = (red, green, blue) => {
  const getRandColor = () => Math.floor(Math.random() * 256);

  for (let i = 1; i <= 10; i++) {
    [red, green, blue] = [getRandColor(), getRandColor(), getRandColor()];
    rgbColor = `rgb(${red},${green},${blue})`;
    html += `<div style="background-color:${rgbColor}"></div>`;
  }
  document.write(html);
}

也许尝试以上方法。

Answer 4

短暂并不总是最好的。这很短，但它可能有点不透明：

let html = ""

const randomColors=()=>(
    ((rnd)=>(`<div style="background-color: rgb(${rnd()},${rnd()},${rnd()})"></div>`))
    (()=>Math.floor(Math.random()*256))
)

html+=randomColors()
document.write(html)

Answer 5

ES6箭头函数用于替换标准匿名函数，而无需创建函数通常创建的新范围。所以你的函数将保持其名称，不会是箭头函数。

如何在ES6箭头功能中编写此代码块

5 个答案: