javascript - 有没有办法重写这个基本函数，这样我就不会重复相同的行两次？

Question

const body = document.querySelector( `body` );

function getRandomNumber( max ) {
  return Math.floor( Math.random() * max )
}
function getRandomRGB() {
  const colors = [];
  
  for( let i = 0; i < 3; i++ ) {
    const  n = getRandomNumber( 100 + 1 );
    
    colors.push( n );
  }
  return `rgb(${ colors.join( '%,' )}%)`; 
}
function changeRGB() {
  const divs = body.querySelectorAll( `div` );
  
  for( let i = 0; i < divs.length; i++ ) {
    divs[ i ].style.backgroundColor = getRandomRGB();
    divs[ i ].style.transitionDuration = `${ getRandomNumber( 10 ) + 1 }s`;
  }
}

for( let i = 0; i < 25; i++ ) {
  const div = document.createElement( `div` );
  
  div.style.backgroundColor = getRandomRGB();
  div.style.transitionDuration = `${ getRandomNumber( 10 ) + 1 }s`;
  body.appendChild( div ); 
}

setInterval( changeRGB, 1000 );

* {
  box-sizing: border-box; margin: 0; padding: 0;
}
html, body {
  height: 100%;
}
body {
  display: flex; flex-wrap: wrap;
  filter: saturate( 200% );
}
section {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  backdrop-filter: blur( 5rem );
  -webkit-backdrop-filter: blur( 5rem );
}
div {
  flex-grow: 1;
  min-width: 25%; min-height: 10%; background-color: #222;
  transition-property: background-color;
  transition-duration: 2s;
}

<section></section>

函数changeRGB():

function changeRGB() {
  const divs = body.querySelectorAll( `div` );
  
  for( let i = 0; i < divs.length; i++ ) {
    divs[ i ].style.backgroundColor = getRandomRGB();
    divs[ i ].style.transitionDuration = `${ getRandomNumber( 10 ) + 1 }s`;
  }
}

以及后面的 for 循环:

for( let i = 0; i < 25; i++ ) {
  const div = document.createElement( `div` );
  
  div.style.backgroundColor = getRandomRGB();
  div.style.transitionDuration = `${ getRandomNumber( 10 ) + 1 }s`;
  body.appendChild( div ); 
}

包含几乎相同的代码行:

divs[ i ].style.backgroundColor = getRandomRGB();
divs[ i ].style.transitionDuration = `${ getRandomNumber( 10 ) + 1 }s`;

和

div.style.backgroundColor = getRandomRGB();
div.style.transitionDuration = `${ getRandomNumber( 10 ) + 1 }s`;

分别。
在 changeRGB()我们正在操纵 div已经存在并且在 for 中循环我们首先创建那些 div然后以同样的方式操纵它们。我的目标是重构这段代码以减少重复。
我需要更换 div和 divs[ i ]有一些动态的东西，所以我可以只调用一个函数并在此处输入正确的值。我不确定循环是否使事情变得更加复杂，但我已经尝试过 window[ variable ].style.backgroundColor等哪里 variable是一个动态变量，但没有运气。可能执行错误。
我如何制作 changeRGB()功能和 for循环更少重复和更简洁？

Answer 1

你可以写另一个这样的函数:

function applyChange(element) {
    element.style.backgroundColor = getRandomRGB();
    element.style.transitionDuration = `${ getRandomNumber( 10 ) + 1 }s`;
}

你只需要像这样调用它:

function changeRGB() {
  const divs = body.querySelectorAll( `div` );
  
  for( let i = 0; i < divs.length; i++ ) {
    applyChanges(divs[i]); // <- Call it here
  }
}

for( let i = 0; i < 25; i++ ) {
  const div = document.createElement( `div` );
  
  applyChanges(div); // <- Call it here
  body.appendChild( div ); 
}

这样您只需将 div 元素作为提示传递，您就可以动态使用它。