將數組存儲到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"> 

Answer 1

您可以使用Array.prototype.forEach和Array.prototype.slice刪除所有for循環。

我還為EventTarget.prototype.addEventListeners創建了一個自定義shiv（aka polyfill）。

 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> 

Answer 2

如果您使用的是ES6，則可以使用解構分配 。

你會做的事情如下：

let [r, g, b, r2, g2, b2] = Array.from(inputs).map((x) => x.value);

例：

 const arr = [234,124,233, 25,233,21] let [r, g, b, r2, g2, b2] = arr; console.log(r, g, b) console.log(r2, g2, b2) 

Answer 3

您可以使用數組解構來簡化代碼：

 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, g, b, r2, g2, b2] = inputs.map((x) => x.value); let rgb = r + ',' + g + ',' + b; 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"> 

Answer 4

您可以按id獲取值。

 function changeValue() { const mapId = id => document.getElementById(id).value || 0; var [rgb, rgb2] = inputs.map(groups => groups.map(mapId).join(',')); document.body.style.backgroundImage = `linear-gradient(45deg, rgb(${rgb}), rgb(${rgb2}))`; } var inputs = [['r1', 'g1', 'b2'], ['r2', 'g2', 'b2']]; inputs.forEach(group => group.forEach(id => { document.getElementById(id).addEventListener('change', changeValue); document.getElementById(id).addEventListener('mousemove', changeValue); })); 

 <input id="r1" type="range" min="0" max="255"> <input id="g1" type="range" min="0" max="255"> <input id="b1" type="range" min="0" max="255"><br> <input id="r2" type="range" min="0" max="255"> <input id="g2" type="range" min="0" max="255"> <input id="b2" type="range" min="0" max="255">