为什么没有声明参数的 Javascript 函数可以工作？

Question

我正在写一个刽子手游戏。在谷歌的帮助下，我有一个函数来检查单词中是否有字母，但我不明白如何，虽然我从未声明我的函数的参数“chosenLetter”，但它能够准确地给出“chosenLetter”我单击的特定字母的值。 “getElementById(chosenLetter)”也不能准确地选择我点击的字母来禁用按钮。 与“guessedWord”函数相同，其中从未声明“letter”，但它会在“guessed”数组中选择要检查的字母

let answer = '';
let maxWrong = 5;
let mistakes = 0;
let guessed = [];
let wordStatus = null;

function guessedWord() {
wordStatus = answer.split('').map(letter => (guessed.indexOf(letter) >= 0 ? letter : '_')).join('');

document.getElementById('word').innerHTML = wordStatus;}

function generateButtons() {
let buttonsHTML = 'abcdefghijklmnopqrstuvwxyz'.split('').map(letter => 
    `
    <button
        class = "btn"
        id = '` + letter + `'
        onClick = "handleGuess('` + letter + `')"
    >
    ` + letter + `
    </button>
    `).join('');

    document.getElementById('alphabet').innerHTML = buttonsHTML;}

function handleGuess(chosenLetter) {
if (guessed.indexOf(chosenLetter) === -1) {
    guessed.push(chosenLetter)
} else {
    null;
} 

document.getElementById(chosenLetter).setAttribute('disabled', true);

if (answer.indexOf(chosenLetter) >= 0) {
    guessedWord();
    checkIfGameWon();
} else if (answer.indexOf(chosenLetter) === -1) {
    mistakes++;
    updateMistakes();
    checkIfGameLost();
}}

由于我是 javascript 新手，我通常会试图了解未声明的参数怎么可能看起来如此明确地声明自己？我不知道我是否问错了问题，但这是代码中唯一我无法理解或解释的内容

Answer 1

您需要先阅读this 文档。

它说

map() 方法创建一个新数组，其中填充了在调用数组中的每个元素上调用提供的函数的结果。

如果我们试图在单独的语句中打破以下语句，

wordStatus = answer.split('').map(letter => (guessed.indexOf(letter) >= 0 ? letter : '_')).join('');

你会发现，

let splittedAnswer = answer.split(''); // This will split the answer string and crate an array with all the characters in answer.

const callbackFunction = (letter) => {
    return guessed.indexOf(letter) >= 0 ? letter : '_';
}
let newArray = splittedAnswer.map(callbackFunction);
let joinedString = newArray.join('');

如您所见，您正在声明一个回调函数。您正在将该函数传递给 array.map() 方法。现在 array.map() 方法将调用具有 3 个参数 currentItemInTheArray, currentIndex, theSourceArray 的函数。由于您仅在 callbackFunction 中声明了第一个参数，即 currentElementInTheArray，您将获得第一个参数。你可以像这样声明你的回调数组，

const callbackFunction = (item, index, arr) => {
    console.log(item);
    console.log(index);
    console.log(arr);
}

现在如果你打电话

[1,2,3].map(callbackFunction);

你会得到以下输出，

1 //currItem
0 //index
[1,2,3] //source array

2 //currItem
1 //index
[1,2,3] //source array

3 //currItem
2 //index
[1,2,3] //source array

但是你是内联的，这就是你没有关注的原因。我希望现在你已经清楚了。

Answer 2

这就是函数的工作方式，您将参数作为输入传递并在函数中使用该参数，您可以在函数定义中使用参数作为输入的占位符，然后您可以在函数内的任何位置使用参数。

示例：在函数 guessedWord() 中，您正在使用一个将回调函数作为参数的 map 函数。所以letter其实是回调函数的参数，参数不需要声明，只是占位符。

Answer 3

generateButtons 将在 HTML 元素“字母表”中插入如下所示的内容：

    <button
        class = "btn"
        id = 'a'
        onClick = "handleGuess('a')"
    >
      a
    </button>
    <button
        class = "btn"
        id = 'b'
        onClick = "handleGuess('b')"
    >
      b
    </button>
    ...

那些onClick 处理程序将作为函数将各种字母作为第一个（也是唯一一个）参数传递给handleGuess。

handleGuess 是一个声明为采用单个参数的函数，该函数在内部中将其称为chosenLetter。但是当你调用它时，你不必传递一个带有 name chosenLetter 的变量。 Javascript 不关心这一点。您可以将一个名为 foobar 的变量传递给它，这很好，或者您可以只传递原始值。

举个更简单的例子，假设我们有一个简单的函数：

function area (height, width) {
  return height * width
}

我们可以用多种方式称呼它，包括：

const height = 5;
const width = 8;

area (height, width) //=> 40

// or

const h = 6
const w = 7

area (h, w) //=> 42

// or

const rectangle = {
  height: 3,
  width: 10
}

area (rectangle.height, rectangle.width) //=> 30

// or simply

area (4, 9) //=> 36

同样的原则也适用于handleGuess

Answer 4

在 JavaScript 中 未声明的变量将自动分配给全局范围

是简单的词，它会自我声明:)

在你的情况下发生了一些不同的事情

您将字母作为参数传递给函数

onClick = "handleGuess('` + letter + `')"

这就是为什么它让所有的魔法都变得活跃:)

id 属性也是如此

 id = '` + letter + `'

传递有关您按下哪个特定字母的信息，以便 JavaScript 引擎知道正在按下哪个按钮，这就是它如何知道您选择了哪个字母以及他需要禁用什么