javascript - 将数组存储到Javascript中的变量中

Question

我有一个输入数组，在使用 for 循环遍历它们之后，是否可以将每个值存储到变量中？

这是我正在尝试做的具体事情：我正在构建一个渐变背景生成器。我总共有 6 个输入（渐变的第一种颜色为 rgb，第二种颜色为 rgb）。我遍历输入数组，然后将每个值存储到一个变量（r, g, b, r2, g2, b2）中，然后在线性梯度 css 中使用它们。

我的方法似乎不是很实用，所以我想知道是否可以将所有input[i]值“自动”存储到变量中。

const inputs = document.querySelectorAll('input')
const body = document.body;

for (var i = 0; i < inputs.length; i++) {
  inputs[i].addEventListener('change', changeValue);
  inputs[i].addEventListener('mousemove', changeValue);

  function changeValue() {
    let r = inputs[0].value;
    let g = inputs[1].value;
    let b = inputs[2].value;
    let rgb = r + ',' + g + ',' + b;

    let r2 = inputs[3].value;
    let g2 = inputs[4].value;
    let b2 = inputs[5].value;
    let rgb2 = r2 + ',' + g2 + ',' + b2;

    body.style.backgroundImage = `linear-gradient(45deg, rgb(${rgb}), rgb(${rgb2}))`;
  };
}

<input type="range" min="0" max="255">
<input type="range" min="0" max="255">
<input type="range" min="0" max="255">

<input type="range" min="0" max="255">
<input type="range" min="0" max="255">
<input type="range" min="0" max="255">

标签： javascript

Answer 1

您可以使用Array.prototype.forEachand删除所有 for 循环Array.prototype.slice。

我还为EventTarget.prototype.addEventListeners.

EventTarget.prototype.addEventListeners = function(eventNames, listener) {
  eventNames.split(' ').forEach(event => this.addEventListener(event, listener, false))
}

const inputs = document.querySelectorAll('input')

inputs.forEach(input => input.addEventListeners('change mousemove', onChangeValue))

function onChangeValue() {
  let rgb1 = [].slice.call(inputs, 0, 3).map(x => x.value).join(',')
  let rgb2 = [].slice.call(inputs, 3, 6).map(x => x.value).join(',')
  document.body.style.backgroundImage = `linear-gradient(45deg, rgb(${rgb1}), rgb(${rgb2}))`;
};

<input type="range" min="0" max="255">
<input type="range" min="0" max="255">
<input type="range" min="0" max="255">
<input type="range" min="0" max="255">
<input type="range" min="0" max="255">
<input type="range" min="0" max="255">

您还可以尝试按类对组件进行分组。

EventTarget.prototype.addEventListeners = function(events, listener) {
  events.split(' ').forEach(event => this.addEventListener(event, listener, false));
}

document.querySelectorAll('.color-slider-channel').forEach(input => {
  input.addEventListeners('change mousemove', onChangeValue);
})

function onChangeValue(e) {
  document.body.style.backgroundImage = `linear-gradient(45deg, ${retrieveGradientStops()})`;
};

function retrieveGradientStops() {
  return [...document.querySelectorAll('.color-slider-rgb')].map(s => {
    return 'rgb(' + [...s.querySelectorAll('.color-slider-channel')].map(c => c.value).join(',') + ')';
  }).join(', ');
}

<div class="color-sliders">
  <div class="color-slider-rgb">
    <input type="range" class="color-slider-channel" min="0" max="255">
    <input type="range" class="color-slider-channel" min="0" max="255">
    <input type="range" class="color-slider-channel" min="0" max="255">
  </div>
  <div class="color-slider-rgb">
    <input type="range" class="color-slider-channel" min="0" max="255">
    <input type="range" class="color-slider-channel" min="0" max="255">
    <input type="range" class="color-slider-channel" min="0" max="255">
  </div>
</div>