如何将动态变量传递给javascripts .forEach()函数?

时间:2019-03-20 08:18:17

标签: javascript variables dynamic foreach

如何将动态变量IMqttClient publisher = new org.eclipse.paho.client.mqttv3.MqttClient("pfad", publisherId); 传递到.forEach()函数中?
尝试使用变量image[i]

时出现此错误
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);
});  

3 个答案:

答案 0 :(得分:4)

=>前面的变量是您为循环中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);
});

答案 1 :(得分:0)

您可以将参数移动到数组中并使用索引调用值。

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

答案 2 :(得分:0)

您无需创建全局图像数组,请尝试执行以下代码

您也可以使用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);
		});

	}
}