Javascript: динамические переменные в цикле For

Question

Я новичок в JavaScript, и мне нужна ваша помощь! Большое спасибо за любую помощь!

cell_660 = cell_638;
cell_659 = cell_637;
...

Так и получилось. Теперь я хочу делать это каждую секунду для всех 660 переменных, чтобы изменить их значение на значение переменной, имя которой имеет номер (собственный номер -22) в конце. Конечно без написания 660 строк кода! Я пробовал это до сих пор:

var count = 660;

setInterval(function(){

for(var i=1;i<=660;i++){
    'cell_' + count = 'cell_' + eval(count - 22);
    count--;
}
count=660;

},1000);

Как мне написать это правильно? Я уже читал об окне ['cell_' + count] - но я не хочу создавать 660 новых переменных каждую секунду. Я хочу изменить значение 660 переменных каждую секунду.

Answer 1

Вам нужно менять 660 переменных каждую секунду? Что если вы просто создадите одну числовую переменную, которая хранит местоположение «где начать массив» при отображении или использовании значений массива?

var cells = ["A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z"];

var currentStart = 0;

// create an interval to modify currentStart
setInterval(function () {
  currentStart = (currentStart + 22) % cells.length;
}, 1000);

function doSomething() {
  // display contents starting at currentStart
  var msg = "";
  for (var i = 0; i < cells.length; i++) {
    var index = (i + currentStart) % cells.length;
    // do something with cells[index]
    msg += "," + cells[index];
  }
  console.log(msg);
}

document.querySelector("#thing").addEventListener("click", doSomething);

<button id='thing'>click me</button>

Answer 2

Прежде чем дать вам ответ, я хотел бы прежде всего отметить, что это ужасная практика кода. Вам никогда не нужно 660 переменных! Все, что вы пытаетесь сделать, может быть выполнено с помощью массивов. Это, как говорится, вот как вы бы сделали эту работу, и как вы должны сделать это ниже. Я настоятельно рекомендую вам использовать метод массива!

setInterval(function() {
  for(var i = 660; i > 22; i--) {
    window['cell_' + i] = window['cell_' + (i - 22)];
  }
},1000);

Теперь вот что-то более похожее на то, что вы должны делать на самом деле.

var cells = [/* 660 elements */];
setTimeout(function() {
  for(var i = 22; i < 660; i++) {
    cells[i] = cells[i - 22];
  }
}, 1000);

Фактически, с помощью этого метода вы можете сделать все это в одной строке с новым методом Array#copyWithin в ES6.

const cells = [/* 660 elements */];
setTimeout(() => {
  cells.copyWithin(22);
}, 1000);

Answer 3

с массивом

как насчет наличия массива вместо этого множества переменных?

let arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

function moveArrElem() {
  // loop all elements of the array
  // using arr.map give us a buffer so current index are keeped while doing the modification
  arr = arr.map((_, i) => {
    
    // get the new index and make it valid if necessary
    let newIndex = i - 2; 
    if (newIndex < 0) {
      newIndex += arr.length
    }
    return arr[newIndex]
  })
  console.log(arr)
}

console.log(arr)
setInterval(moveArrElem, 2000)

о window['cell_' + count] он не создает новую переменную каждый раз, фактически var test = 42 равен window["test"] = 42, если вы находитесь в глобальной области видимости (вне каких-либо функций и других блоков)

так что window['cell_' + count] просто изменит значение переменной

var test = 42
console.log(window["test"])

наконец, старайтесь избегать eval столько, сколько вы можете, это медленно и, как правило, является проблемой безопасности

некоторые (я из них) вызов eval почти всегда признак того, что это неправильное представление в других местах

---

без массива

так как OP сказал в комментарии, что он все еще не изучил массив, вот решение без массива

let quantity = 660

// declaring the 660 vars
for (let i = 0; i < quantity; i++) {
  window["cell_" + i] = i;
}

function moveCells() {
  // need some tmp vars
  for (let i = 0; i < quantity; i++) {
    window["tmp_" + i] = window["cell_" + i];
  }
  
  for (let i = 0; i < quantity; i++) {
    let newIndex = i - 22
    if (newIndex < 0) {
      // equals to : newIndex = newIndex + quantity
      newIndex += quantity
    }
    window["cell_" + newIndex] = window["tmp_" + i];
  }

  // displaying 660 items would take to much time and place
  console.log("cell_42 : " + cell_42)
  console.log("cell_43 : " + cell_43)
  console.log("cell_44 : " + cell_44)
  console.log("cell_45 : " + cell_45)
  console.log("cell_46 : " + cell_46)
}

console.log("cell_42 : " + cell_42)
console.log("cell_43 : " + cell_43)
console.log("cell_44 : " + cell_44)
console.log("cell_45 : " + cell_45)
console.log("cell_46 : " + cell_46)

setInterval(moveCells, 1000)