Javascript 识别所有可能获胜组合的代码
Javascript code to recognize all possible combinations of winning
我正在为科学博览会制作一个井字游戏，我需要帮助来识别所有可能的获胜方式，而不是用蛮力将它们全部写下来。
游戏机制是今天才开始的，我也是刚开始学习javascript（大约5天前）所以我可能不是最好看的代码和最高效的代码。另请注意，我还没有完成，因为此代码尚未 100% 完成，但我只是将我的代码提供给任何想要查看的人，因为我只需要所有可能获胜的组合。如果你想在我工作时关注我并帮助我，我很乐意邀请你在 Gitlab 上查看我的代码（我知道它不是最著名的，但它非常好）。
<!DOCTYPE html>
<html>
<head>
<style>
table,tr,td{
border-style:solid;
border-length:1px;
}
</style>
<script>
var s1="s1";
var s2="s2";
var s3="s3";
var s4="s4";
var s5="s5";
var s6="s6";
var s7="s7";
var s8="s8";
var s9="s9";
var turn=0;
function gotClicked(s1,s2,s3,s4,s5,s6,s7,s8,s9) {
if (!(id1="s1" || id2="s2" || id3="s3" || id4="s4" || id5="s5" || id6="s6" || id7="s7" || id8="s8" || id9="s9")) {
switch(x1 || x2 || x3 || x4 || x5 || x6 || x7 || x8 || x9) {
case x1:
var x1=NA1;
turn++;
if(turn=3) {
if(s1=NA1 && s2=NA3 )
}
}
}
}
</script>
</head>
<body>
<table>
<tr>
<td>
<p id="s1" onclick="document.getElementById('s1').innerHTML='x';var id1=x1;gotClicked();"><a href="#">N/A</a></p>
</td>
<td>
<p id="s2" onclick="document.getElementById('s2').innerHTML='x';var id2=x2;gotClicked();"><a href="#">N/A</a></p>
</td>
<td>
<p id="s3" onclick="document.getElementById('s3').innerHTML='x';var id3=x3;gotClicked();"><a href="#">N/A</a></p>
</td>
<tr/>
<tr>
<td>
<p id="s4" onclick="document.getElementById('s4').innerHTML='x';var id4=x4;gotClicked();"><a href="#">N/A</a></p>
</td>
<td>
<p id="s5" onclick="document.getElementById('s5').innerHTML='x';var id5=x5;gotClicked();"><a href="#">N/A</a></p>
</td>
<td>
<p id="s6" onclick="document.getElementById('s6').innerHTML='x';var id6=x6;gotClicked();"><a href="#">N/A</a></p>
</td>
<tr/>
<tr>
<td>
<p id="s7" onclick="document.getElementById('s7').innerHTML='x';var id7=x7;gotClicked();"><a href="#">N/A</a></p>
</td>
<td>
<p id="s8" onclick="document.getElementById('s8').innerHTML='x';var id8=x8;gotClicked();"><a href="#">N/A</a></p>
</td>
<td>
<p id="s9" onclick="document.getElementById('s9').innerHTML='x';var id9=x9;gotClicked();"><a href="#">N/A</a></p>
</td>
<tr/>
</table>
</body>
</html>
感谢一位贡献者指出我的错误！
您可以创建一个包含所有可能获胜组合的数组；创建一个数组以在单击的元素 id 处存储数字；将 click 事件附加到 for..of 循环中的每个 p 元素；使用 Array.prototype.some()、Array.prototype.every()、Array.prototype.indexOf() 检查包含 id 的单击元素数字部分的数组中的每个元素是否在包含一组可能的获胜组合和元素 .innerHTML等于"x"；利用setTimeout()让最后的"x"有时间渲染，然后将<p>元素.innerHTML重置为<a href='#'>N/A</a>，设置包含[=的点击元素数字部分的数组11=] 到 0 .length
<!DOCTYPE html>
<html>
<head>
<style>
table,
tr,
td {
border: 1px solid #000;
}
</style>
<script>
window.onload = function() {
var winners = [
[1, 2, 3],
[4, 5, 6],
[7, 8, 9],
[1, 5, 9],
[3, 5, 7],
[1, 4, 7],
[2, 5, 8],
[3, 6, 9]
];
var clicked = [];
var p = document.querySelectorAll("table td p");
for (el of p) {
el.onclick = function() {
if (this.innerHTML !== "x") {
this.innerHTML = "x";
clicked.push(+this.id.match(/\d/).pop());
};
var win = winners.some(function(winner) {
return winner.every(function(n) {
return clicked.indexOf(n) > -1
&& document.querySelector("[id$='" + n + "']")
.innerHTML === "x"
})
});
setTimeout(function() {
if (win) {
alert("winner");
clicked.length = 0;
for (el of p) {
el.innerHTML = "<a href='#'>N/A</a>"
}
}
}, 1000)
}
}
}
</script>
</head>
<body>
<table>
<tr>
<td>
<p id="s1"><a href="#">N/A</a>
</p>
</td>
<td>
<p id="s2"><a href="#">N/A</a>
</p>
</td>
<td>
<p id="s3"><a href="#">N/A</a>
</p>
</td>
</tr>
<tr>
<td>
<p id="s4"><a href="#">N/A</a>
</p>
</td>
<td>
<p id="s5"><a href="#">N/A</a>
</p>
</td>
<td>
<p id="s6"><a href="#">N/A</a>
</p>
</td>
</tr>
<tr>
<td>
<p id="s7"><a href="#">N/A</a>
</p>
</td>
<td>
<p id="s8"><a href="#">N/A</a>
</p>
</td>
<td>
<p id="s9"><a href="#">N/A</a>
</p>
</td>
</tr>
</table>
</body>
</html>
一些问题：
border-length无效CSS，应该是border-width你不是在这个if语句中做比较，而是赋值：
if (!(id1="s1" ...
使用三个等号 (===) 执行（严格）字符串比较。
如果您使用数组而不是 9 个单独的变量，您的代码将会大大改进：这将减少几乎相同代码的重复。例如，使用这个作为你的董事会代表：
var board = Array(9);
... 并在相应方块接收到 and 'X' 或 and 'O' 时将 0 或 1 放入特定数组元素中。例如：
board[0] = 1
通过数组演示，您可以将获胜配置列为该数组中的三元组索引。例如，如果索引 0、1 和 2 处的值均为 1，则玩家 1 ('O') 获胜。所有此类演示文稿可列举如下：
var wins = [
[0, 1, 2],
[3, 4, 5],
[6, 7, 8],
[0, 3, 6],
[1, 4, 7],
[2, 5, 8],
[0, 4, 8],
[2, 4, 6]
];
检查是否获胜将是检查这些索引处的 board 个条目以查看它们包含全 1 还是全 0（请参见下面代码片段中的代码）。
最好不要在HTML onclick属性中写JavaScript代码。其一，它会再次导致代码重复，但在发生错误时也更难调试。总体而言，将代码 (JavaScript) 与布局 (HTML) 分开被认为更好。
删除 onclick 属性并在脚本中使用 addEventListener 方法：
Array.from(document.querySelectorAll('td a'), function (link, i) {
link.addEventListener('click', gotClicked.bind(null, link, i));
});
function gotClicked(link, i) {
// From the `turn` value we can know who the current player is: 0 or 1.
// We use the modulo operator to get the remainder when dividing by 2:
var player = turn % 2; // alternates between 0 and 1.
// Use this 0 or 1 as index in the XO string and display it.
// When player is 0 this gives 'X', when 1 it gives 'O':
link.parentNode.textContent = 'XO'[player];
// Also put the 0 or 1 in our array
board[i] = player;
// Player played, so now increment `turn`.
turn++;
}
为此，您应该将脚本移动到文档的末尾，就在结束 </body> 之前。或者，如果您喜欢它在顶部，则将代码包装在：
document.addEventListener('DOMContentLoaded', function () {
// your code that needs access to the document elements comes here
});
点击事件处理程序应防止点击启动导航。为此，您可以使用 e.preventDefault()，但您还必须在函数中获取 e 参数。
function gotClicked(link, i, e) {
e.preventDefault();
// ... ETC。
}
当您只想放置文本时不要使用innerHTML。为此，textContent 更合适。
这是一个工作片段：
document.addEventListener('DOMContentLoaded', function () {
// *** Initialise board with "empty" cells -- we use -1 for that:
var board = [-1,-1,-1,-1,-1,-1,-1,-1,-1];
var wins = [
[0, 1, 2],
[3, 4, 5],
[6, 7, 8],
[0, 3, 6],
[1, 4, 7],
[2, 5, 8],
[0, 4, 8],
[2, 4, 6] ];
var turn = 0;
Array.from(document.querySelectorAll('td a'), function (link, i) {
link.addEventListener('click', gotClicked.bind(null, link, i));
});
function gotClicked(link, i, e) {
// Prevent the click on the link to initiate a navigation
e.preventDefault();
// *** call function to perform move: will return true when game is over
if (doMove(i, 'You won!')) return;
// ***Let AI play a move.
randomAi();
}
// ***Separate function to perform a particular move: can be used for
// both players
function doMove(i, msg) {
// *** Get td-element that corresponds to the given index
var td = document.querySelectorAll('td')[i];
// From the `turn` value we can know who the current player is: 0 or 1.
// We use the modulo operator to get the remainder when dividing by 2:
var player = turn % 2;
// Use this 0 or 1 as index in the XO string and display it.
// When player is 0 this gives 'X', when 1 it gives 'O':
td.textContent = 'XO'[player];
// Also put the 0 or 1 in our array
board[i] = player;
// Player played, so now increment `turn`.
turn++;
// Now board has changed, check if there is a 3-in-a-row for this player,
// *** and return it as the result of this function
if (isWinFor(player)) {
// *** Show appropriate message
alert(msg);
return true; // signify end of game
}
// *** Detect a draw
if (turn == 9) {
alert("It's a draw");
return true; // signify end of game
}
}
// *** Modified completely
function randomAi() {
// ***Pick random number among the free cells. Make sure it is integer.
var randomPick = Math.floor(Math.random()*(9-turn));
// ***Find out its position on the board
for (var i in board) {
if (board[i] !== -1) continue; // used cell -- skip it
if (randomPick == 0) break; // found it
randomPick--;
}
// ***Perform this AI move
doMove(i, 'You lost');
}
function isWinFor(player) {
// Player is 0 or 1.
// Iterate over all the 8 potential wins
for (var win of wins) {
// `win` is a triplet of indices, which when they contain the player's value
// constitute a winning position. Let's count how many of those three
// have the player's value (0 or 1)
var count = 0;
for (var index of win) {
// Is the value on the board the value that corresponds to the player?
if (board[index] !== player) break; // don't bother looking further.
count++;
}
// If we have a count of 3 here, it is a winning position.
if (count == 3) {
// Don't try other wins: one is enough :-)
// ***Remove all hyperlinked cells -- no move should be played anymore
Array.from(document.querySelectorAll('td a'), function (link, i) {
link.parentNode.innerHTML = ''; // remove link
});
return true;
}
}
}
});
table,tr,td{
border-style:solid;
border-width:1px;
text-align: center
}
/* ***Fix the size of the board */
td { width: 30px; height: 30px }
<table>
<tr>
<td>
<a href="#">N/A</a>
</td>
<td>
<a href="#">N/A</a>
</td>
<td>
<a href="#">N/A</a>
</td>
<tr/>
<tr>
<td>
<a href="#">N/A</a>
</td>
<td>
<a href="#">N/A</a>
</td>
<td>
<a href="#">N/A</a>
</td>
<tr/>
<tr>
<td>
<a href="#">N/A</a>
</td>
<td>
<a href="#">N/A</a>
</td>
<td>
<a href="#">N/A</a>
</td>
<tr/>
</table>
说明
在您询问这段代码的评论中：
Array.from(document.querySelectorAll('td a'), function (link, i) {
link.addEventListener('click', gotClicked.bind(null, link, i));
});
它查找所有 a 元素，它们是具有 querySelectorAll:
的 td 元素的后代
document.querySelectorAll('td a')
由于返回的列表不是数组，我使用 Array.from:
将其转换为一个数组以便于循环
Array.from( )
上面的returns数组就是我要访问的每个元素。有很多方法可以做到这一点，但在这里我选择了 Array.from 并使用可以提供给它的回调函数：为第一个参数中的每个元素调用该回调。
在每次调用时，下一个数组元素作为第一个参数传递给它，序列号（数组索引）作为第二个参数传递给它：
function (link, i) { }
在函数中，我在元素（a 元素）上调用 addEventListener 来监听 click 事件：
link.addEventListener('click', );
这确实起到了与 onclick 属性类似的作用。传递给它的第二个参数必须是单击此特定 a 元素时将调用的函数。为此，我参考了您的 gotClicked 函数。但是当我想传递一些参数时，我使用 bind:
gotClicked.bind(null, link, i)
bind 的第一个参数是 this 应该在 gotClicked 中的任何内容。因为我不关心那个，所以我通过了 null。但我确实关心传递给 gotClicked 的实际参数：link（单击的元素）和 i（该元素的索引）。请注意，bind 不会调用该函数，它只是创建一个对函数的引用，该函数已经指定一旦函数被调用将作为参数传递的内容。
我正在为科学博览会制作一个井字游戏，我需要帮助来识别所有可能的获胜方式，而不是用蛮力将它们全部写下来。
游戏机制是今天才开始的，我也是刚开始学习javascript（大约5天前）所以我可能不是最好看的代码和最高效的代码。另请注意，我还没有完成，因为此代码尚未 100% 完成，但我只是将我的代码提供给任何想要查看的人，因为我只需要所有可能获胜的组合。如果你想在我工作时关注我并帮助我，我很乐意邀请你在 Gitlab 上查看我的代码（我知道它不是最著名的，但它非常好）。
<!DOCTYPE html>
<html>
<head>
<style>
table,tr,td{
border-style:solid;
border-length:1px;
}
</style>
<script>
var s1="s1";
var s2="s2";
var s3="s3";
var s4="s4";
var s5="s5";
var s6="s6";
var s7="s7";
var s8="s8";
var s9="s9";
var turn=0;
function gotClicked(s1,s2,s3,s4,s5,s6,s7,s8,s9) {
if (!(id1="s1" || id2="s2" || id3="s3" || id4="s4" || id5="s5" || id6="s6" || id7="s7" || id8="s8" || id9="s9")) {
switch(x1 || x2 || x3 || x4 || x5 || x6 || x7 || x8 || x9) {
case x1:
var x1=NA1;
turn++;
if(turn=3) {
if(s1=NA1 && s2=NA3 )
}
}
}
}
</script>
</head>
<body>
<table>
<tr>
<td>
<p id="s1" onclick="document.getElementById('s1').innerHTML='x';var id1=x1;gotClicked();"><a href="#">N/A</a></p>
</td>
<td>
<p id="s2" onclick="document.getElementById('s2').innerHTML='x';var id2=x2;gotClicked();"><a href="#">N/A</a></p>
</td>
<td>
<p id="s3" onclick="document.getElementById('s3').innerHTML='x';var id3=x3;gotClicked();"><a href="#">N/A</a></p>
</td>
<tr/>
<tr>
<td>
<p id="s4" onclick="document.getElementById('s4').innerHTML='x';var id4=x4;gotClicked();"><a href="#">N/A</a></p>
</td>
<td>
<p id="s5" onclick="document.getElementById('s5').innerHTML='x';var id5=x5;gotClicked();"><a href="#">N/A</a></p>
</td>
<td>
<p id="s6" onclick="document.getElementById('s6').innerHTML='x';var id6=x6;gotClicked();"><a href="#">N/A</a></p>
</td>
<tr/>
<tr>
<td>
<p id="s7" onclick="document.getElementById('s7').innerHTML='x';var id7=x7;gotClicked();"><a href="#">N/A</a></p>
</td>
<td>
<p id="s8" onclick="document.getElementById('s8').innerHTML='x';var id8=x8;gotClicked();"><a href="#">N/A</a></p>
</td>
<td>
<p id="s9" onclick="document.getElementById('s9').innerHTML='x';var id9=x9;gotClicked();"><a href="#">N/A</a></p>
</td>
<tr/>
</table>
</body>
</html>
感谢一位贡献者指出我的错误！
您可以创建一个包含所有可能获胜组合的数组；创建一个数组以在单击的元素 id 处存储数字；将 click 事件附加到 for..of 循环中的每个 p 元素；使用 Array.prototype.some()、Array.prototype.every()、Array.prototype.indexOf() 检查包含 id 的单击元素数字部分的数组中的每个元素是否在包含一组可能的获胜组合和元素 .innerHTML等于"x"；利用setTimeout()让最后的"x"有时间渲染，然后将<p>元素.innerHTML重置为<a href='#'>N/A</a>，设置包含[=的点击元素数字部分的数组11=] 到 0 .length
<!DOCTYPE html>
<html>
<head>
<style>
table,
tr,
td {
border: 1px solid #000;
}
</style>
<script>
window.onload = function() {
var winners = [
[1, 2, 3],
[4, 5, 6],
[7, 8, 9],
[1, 5, 9],
[3, 5, 7],
[1, 4, 7],
[2, 5, 8],
[3, 6, 9]
];
var clicked = [];
var p = document.querySelectorAll("table td p");
for (el of p) {
el.onclick = function() {
if (this.innerHTML !== "x") {
this.innerHTML = "x";
clicked.push(+this.id.match(/\d/).pop());
};
var win = winners.some(function(winner) {
return winner.every(function(n) {
return clicked.indexOf(n) > -1
&& document.querySelector("[id$='" + n + "']")
.innerHTML === "x"
})
});
setTimeout(function() {
if (win) {
alert("winner");
clicked.length = 0;
for (el of p) {
el.innerHTML = "<a href='#'>N/A</a>"
}
}
}, 1000)
}
}
}
</script>
</head>
<body>
<table>
<tr>
<td>
<p id="s1"><a href="#">N/A</a>
</p>
</td>
<td>
<p id="s2"><a href="#">N/A</a>
</p>
</td>
<td>
<p id="s3"><a href="#">N/A</a>
</p>
</td>
</tr>
<tr>
<td>
<p id="s4"><a href="#">N/A</a>
</p>
</td>
<td>
<p id="s5"><a href="#">N/A</a>
</p>
</td>
<td>
<p id="s6"><a href="#">N/A</a>
</p>
</td>
</tr>
<tr>
<td>
<p id="s7"><a href="#">N/A</a>
</p>
</td>
<td>
<p id="s8"><a href="#">N/A</a>
</p>
</td>
<td>
<p id="s9"><a href="#">N/A</a>
</p>
</td>
</tr>
</table>
</body>
</html>
一些问题：
border-length无效CSS，应该是border-width你不是在这个
if语句中做比较，而是赋值：if (!(id1="s1" ...使用三个等号 (
===) 执行（严格）字符串比较。如果您使用数组而不是 9 个单独的变量，您的代码将会大大改进：这将减少几乎相同代码的重复。例如，使用这个作为你的董事会代表：
var board = Array(9);... 并在相应方块接收到 and 'X' 或 and 'O' 时将 0 或 1 放入特定数组元素中。例如：
board[0] = 1通过数组演示，您可以将获胜配置列为该数组中的三元组索引。例如，如果索引 0、1 和 2 处的值均为 1，则玩家 1 ('O') 获胜。所有此类演示文稿可列举如下：
var wins = [ [0, 1, 2], [3, 4, 5], [6, 7, 8], [0, 3, 6], [1, 4, 7], [2, 5, 8], [0, 4, 8], [2, 4, 6] ];检查是否获胜将是检查这些索引处的
board个条目以查看它们包含全 1 还是全 0（请参见下面代码片段中的代码）。最好不要在HTML
onclick属性中写JavaScript代码。其一，它会再次导致代码重复，但在发生错误时也更难调试。总体而言，将代码 (JavaScript) 与布局 (HTML) 分开被认为更好。删除
onclick属性并在脚本中使用addEventListener方法：Array.from(document.querySelectorAll('td a'), function (link, i) { link.addEventListener('click', gotClicked.bind(null, link, i)); }); function gotClicked(link, i) { // From the `turn` value we can know who the current player is: 0 or 1. // We use the modulo operator to get the remainder when dividing by 2: var player = turn % 2; // alternates between 0 and 1. // Use this 0 or 1 as index in the XO string and display it. // When player is 0 this gives 'X', when 1 it gives 'O': link.parentNode.textContent = 'XO'[player]; // Also put the 0 or 1 in our array board[i] = player; // Player played, so now increment `turn`. turn++; }为此，您应该将脚本移动到文档的末尾，就在结束
</body>之前。或者，如果您喜欢它在顶部，则将代码包装在：document.addEventListener('DOMContentLoaded', function () { // your code that needs access to the document elements comes here });点击事件处理程序应防止点击启动导航。为此，您可以使用
e.preventDefault()，但您还必须在函数中获取e参数。function gotClicked(link, i, e) { e.preventDefault(); // ... ETC。 }
当您只想放置文本时不要使用
innerHTML。为此，textContent更合适。
这是一个工作片段：
document.addEventListener('DOMContentLoaded', function () {
// *** Initialise board with "empty" cells -- we use -1 for that:
var board = [-1,-1,-1,-1,-1,-1,-1,-1,-1];
var wins = [
[0, 1, 2],
[3, 4, 5],
[6, 7, 8],
[0, 3, 6],
[1, 4, 7],
[2, 5, 8],
[0, 4, 8],
[2, 4, 6] ];
var turn = 0;
Array.from(document.querySelectorAll('td a'), function (link, i) {
link.addEventListener('click', gotClicked.bind(null, link, i));
});
function gotClicked(link, i, e) {
// Prevent the click on the link to initiate a navigation
e.preventDefault();
// *** call function to perform move: will return true when game is over
if (doMove(i, 'You won!')) return;
// ***Let AI play a move.
randomAi();
}
// ***Separate function to perform a particular move: can be used for
// both players
function doMove(i, msg) {
// *** Get td-element that corresponds to the given index
var td = document.querySelectorAll('td')[i];
// From the `turn` value we can know who the current player is: 0 or 1.
// We use the modulo operator to get the remainder when dividing by 2:
var player = turn % 2;
// Use this 0 or 1 as index in the XO string and display it.
// When player is 0 this gives 'X', when 1 it gives 'O':
td.textContent = 'XO'[player];
// Also put the 0 or 1 in our array
board[i] = player;
// Player played, so now increment `turn`.
turn++;
// Now board has changed, check if there is a 3-in-a-row for this player,
// *** and return it as the result of this function
if (isWinFor(player)) {
// *** Show appropriate message
alert(msg);
return true; // signify end of game
}
// *** Detect a draw
if (turn == 9) {
alert("It's a draw");
return true; // signify end of game
}
}
// *** Modified completely
function randomAi() {
// ***Pick random number among the free cells. Make sure it is integer.
var randomPick = Math.floor(Math.random()*(9-turn));
// ***Find out its position on the board
for (var i in board) {
if (board[i] !== -1) continue; // used cell -- skip it
if (randomPick == 0) break; // found it
randomPick--;
}
// ***Perform this AI move
doMove(i, 'You lost');
}
function isWinFor(player) {
// Player is 0 or 1.
// Iterate over all the 8 potential wins
for (var win of wins) {
// `win` is a triplet of indices, which when they contain the player's value
// constitute a winning position. Let's count how many of those three
// have the player's value (0 or 1)
var count = 0;
for (var index of win) {
// Is the value on the board the value that corresponds to the player?
if (board[index] !== player) break; // don't bother looking further.
count++;
}
// If we have a count of 3 here, it is a winning position.
if (count == 3) {
// Don't try other wins: one is enough :-)
// ***Remove all hyperlinked cells -- no move should be played anymore
Array.from(document.querySelectorAll('td a'), function (link, i) {
link.parentNode.innerHTML = ''; // remove link
});
return true;
}
}
}
});
table,tr,td{
border-style:solid;
border-width:1px;
text-align: center
}
/* ***Fix the size of the board */
td { width: 30px; height: 30px }
<table>
<tr>
<td>
<a href="#">N/A</a>
</td>
<td>
<a href="#">N/A</a>
</td>
<td>
<a href="#">N/A</a>
</td>
<tr/>
<tr>
<td>
<a href="#">N/A</a>
</td>
<td>
<a href="#">N/A</a>
</td>
<td>
<a href="#">N/A</a>
</td>
<tr/>
<tr>
<td>
<a href="#">N/A</a>
</td>
<td>
<a href="#">N/A</a>
</td>
<td>
<a href="#">N/A</a>
</td>
<tr/>
</table>
说明
在您询问这段代码的评论中：
Array.from(document.querySelectorAll('td a'), function (link, i) {
link.addEventListener('click', gotClicked.bind(null, link, i));
});
它查找所有 a 元素，它们是具有 querySelectorAll:
td 元素的后代
document.querySelectorAll('td a')
由于返回的列表不是数组，我使用 Array.from:
Array.from( )
上面的returns数组就是我要访问的每个元素。有很多方法可以做到这一点，但在这里我选择了 Array.from 并使用可以提供给它的回调函数：为第一个参数中的每个元素调用该回调。
在每次调用时，下一个数组元素作为第一个参数传递给它，序列号（数组索引）作为第二个参数传递给它：
function (link, i) { }
在函数中，我在元素（a 元素）上调用 addEventListener 来监听 click 事件：
link.addEventListener('click', );
这确实起到了与 onclick 属性类似的作用。传递给它的第二个参数必须是单击此特定 a 元素时将调用的函数。为此，我参考了您的 gotClicked 函数。但是当我想传递一些参数时，我使用 bind:
gotClicked.bind(null, link, i)
bind 的第一个参数是 this 应该在 gotClicked 中的任何内容。因为我不关心那个，所以我通过了 null。但我确实关心传递给 gotClicked 的实际参数：link（单击的元素）和 i（该元素的索引）。请注意，bind 不会调用该函数，它只是创建一个对函数的引用，该函数已经指定一旦函数被调用将作为参数传递的内容。