Как передать динамическую переменную в функцию javascripts .forEach ()?

Question

Как передать динамическую переменную image[i] в функцию .forEach ()?
Я получаю эту ошибку, когда пытаюсь использовать свою переменную: Uncaught SyntaxError: Invalid destructuring assignment target

images.forEach((image[i]) => {
  if(iter == 0){ ctx.drawImage(image[i], 60, 270);}
  if(iter == 1){ ctx.drawImage(image[i], 80, 270);}
  if(iter == 2){ ctx.drawImage(image[i], 100, 270);}
  console.log(iter);
});  

Редактировать:

Вот вся функция

    // Account UI
    function accountUI(str) {
        // Parse MOTD for use
        var motd = str.match( /<motd>[^<>]*?<\/motd>/igm );

        // Clean un-needed spaces & tags
        var motd_clean = motd[0];
        motd_clean = motd_clean.replace("<motd>", "");
        motd_clean = motd_clean.replace("</motd>", "");
        motd_clean = motd_clean.replace(/[\r]+/g, '');
        motd_clean = $.trim(motd_clean);

        // Create textarea for MOTD
        $("#can_wrapper").append('<textarea id="motd" name="motd" disabled>' + motd_clean + '</textarea>');

        // Create blue background for players
        ctx.fillStyle = "#333399";
        ctx.fillRect(2, 255, 596, 181);

        // Parse player names for use
        var players = str.match( /<players>([\s\S]*?)<\/players>/m );
        var players = players[0];
        var item = str.match( /<item([\s\S]*?)>/mg );

        // For every player run iteration
        var image = [];
        for (var i = 0; i < item.length; ++i) {
            // Position for players on account screen
            if(i == 0){ var pos = "61px";var iter = 0;}
            if(i == 1){ var pos = "168px";var iter = 1;}
            if(i == 2){ var pos = "275px";var iter = 2;}
            console.log(i);
            console.log("1 -> " + iter);
            // Gets player name from string
            var player = item[i].match( /([A-Z])\w+/g );

            // Create player div for mouse interaction
            var player_el = $('<div class="cursor player" id="player'+ player +'"></div>');
            $("#can_wrapper").append(player_el);
            $("#player"+ player).css({"position": "absolute", "height": "50px", "width": "50px", "left": ""+ pos +"", "top": "271px", "cursor": "grab", "cursor": "-webkit-grab"});

            // Get player name for hover action
            var player_name_el = player;
            document.styleSheets[0].addRule('#player'+ player +':hover::after','content: "'+player_name_el+'";');

            /**
             * Promisify loading an image
             * @param {String} imagePath The web location of the image
             * @returns {Promise} A Promise that will resolve to an Image
             */
            function loadImage(imagePath) {
                return new Promise((resolve, reject) => {
                    image[i] = new Image();
                    image[i].addEventListener("load", () => {
                        resolve(image[i]);
                    });
                    image[i].addEventListener("error", (err) => {
                        reject(err);
                    });
                    image[i].src = 'https://www.example.com/interface/images/body/' + imagePath;
                });
            }

            var imageSources = ['v1456.png', 'vbody0.png','vhead14.png','v1960.png','v578.png','v1221.png', 'v3063.png']; // url and order

            Promise
                .all(imageSources.map(ii => loadImage(ii)))
                .then((images) => {
                    images.forEach((image[i]) => {
                        if(iter == 0){ ctx.drawImage(image[i], 60, 270);}
                        if(iter == 1){ ctx.drawImage(image[i], 80, 270);}
                        if(iter == 2){ ctx.drawImage(image[i], 100, 270);}
                        console.log(iter);
                    });
                }).catch((err) => {
                    console.error(err);
                });

        }
    }

Answer 1

Переменная перед => - это имя, которое вы присваиваете каждому элементу массива, в котором вы forEach находитесь в цикле. Вам не нужно использовать обозначение [], просто имя:

images.forEach((image) => {
  if(iter == 0){ ctx.drawImage(image, 60, 270);}
  if(iter == 1){ ctx.drawImage(image, 80, 270);}
  if(iter == 2){ ctx.drawImage(image, 100, 270);}
  console.log(iter);
});

Answer 2

Вам не нужно создавать глобальный массив изображений, попробуйте следующий код

Вы также можете использовать Promise.map

// Account UI
function accountUI(str) {
	// Parse MOTD for use
	var motd = str.match(/<motd>[^<>]*?<\/motd>/igm);

	// Clean un-needed spaces & tags
	var motd_clean = motd[0];
	motd_clean = motd_clean.replace("<motd>", "");
	motd_clean = motd_clean.replace("</motd>", "");
	motd_clean = motd_clean.replace(/[\r]+/g, '');
	motd_clean = $.trim(motd_clean);

	// Create textarea for MOTD
	$("#can_wrapper").append('<textarea id="motd" name="motd" disabled>' + motd_clean + '</textarea>');

	// Create blue background for players
	ctx.fillStyle = "#333399";
	ctx.fillRect(2, 255, 596, 181);

	// Parse player names for use
	var players = str.match(/<players>([\s\S]*?)<\/players>/m);
	var players = players[0];
	var item = str.match(/<item([\s\S]*?)>/mg);

	// For every player run iteration
	
	for (var i = 0; i < item.length; ++i) {
		// Position for players on account screen
		if (i == 0) { var pos = "61px"; var iter = 0; }
		if (i == 1) { var pos = "168px"; var iter = 1; }
		if (i == 2) { var pos = "275px"; var iter = 2; }
		console.log(i);
		console.log("1 -> " + iter);
		// Gets player name from string
		var player = item[i].match(/([A-Z])\w+/g);

		// Create player div for mouse interaction
		var player_el = $('<div class="cursor player" id="player' + player + '"></div>');
		$("#can_wrapper").append(player_el);
		$("#player" + player).css({ "position": "absolute", "height": "50px", "width": "50px", "left": "" + pos + "", "top": "271px", "cursor": "grab", "cursor": "-webkit-grab" });

		// Get player name for hover action
		var player_name_el = player;
		document.styleSheets[0].addRule('#player' + player + ':hover::after', 'content: "' + player_name_el + '";');

		/**
		 * Promisify loading an image
		 * @param {String} imagePath The web location of the image
		 * @returns {Promise} A Promise that will resolve to an Image
		 */
		function loadImage(imagePath) {
			return new Promise((resolve, reject) => {
				let image = new Image();
				imag.addEventListener("load", () => {
					resolve(image);
				});
				image.addEventListener("error", (err) => {
					reject(err);
				});
				image.src = 'https://www.example.com/interface/images/body/' + imagePath;
			});
		}

		var imageSources = ['v1456.png', 'vbody0.png', 'vhead14.png', 'v1960.png', 'v578.png', 'v1221.png', 'v3063.png']; // url and order

		Promise.all(imageSources.map(ii => loadImage(ii))).then((images) => {
			images.forEach((image) => {
				if (iter == 0) { ctx.drawImage(image, 60, 270); }
				if (iter == 1) { ctx.drawImage(image, 80, 270); }
				if (iter == 2) { ctx.drawImage(image, 100, 270); }
				console.log(iter);
			});
		}).catch((err) => {
			console.error(err);
		});

	}
}

Answer 3

Вы можете переместить параметры в массив и вызвать значения с индексом.

images.forEach(image => ctx.drawImage((image[i], [60, 80, 100][iter], 270)):