javascript - 列表赋值在 JavaScript 中是如何工作的？

Question

我正在阅读 Eloquent JavaScript练习部分，我在本书中遇到了以下代码的问题:

function arrayToList(array) {
  let list = null;
  for (let i = array.length - 1; i >= 0; i--) {
    list = {value: array[i], rest: list};
  }
  return list;
}
console.log(arrayToList([10, 20]));
// → {value: 10, rest: {value: 20, rest: null}}

首先，我不明白 console.log 怎么会有那个输出。我对 list = {value: array[i], rest: list}; 部分特别困惑。我知道在第一次迭代中，array[i] 等于 20，因此列表现在是 {value: 20, rest: null}。在第二次迭代中，array[i] 是 10，因此列表现在是 {value: 10, rest: list} 和 list 指的是 {value: 20, rest: null}，因此我们有 list = {value: 10, rest: {value: 20, rest: null}} 。我的理解正确吗？如果是，我发现 list 在被分配时如何仍然记得它之前包含的值，即 {value: 20, rest: null}，这让我非常困惑。有人可以解释一下吗？

其次，我不明白为什么会提到:

'Building up a list is easier when done back to front. So arrayToList could iterate over the array backwards (see the previous exercise) and, for each element, add an object to the list. You can use a local binding to hold the part of the list that was built so far and use an assignment like list = {value: X, rest: list} to add an element.'

为什么从前到后更容易建立列表？但是，是否可以在前后完成时构建一个列表？

第三，当我尝试将上面的代码更改为以下内容时:

function arrayToList(...array) { //Only change is from array to ...array
  let list = null;
  for (let i = array.length - 1; i >= 0; i--) {
    list = {value: array[i], rest: list};
  }
  return list;
}
console.log(arrayToList([10, 20]));
// → {value: [10, 20], rest: null} Why did the output change?

Answer 1

当您在第二个版本中使用扩展语法时，您是在说您希望将函数的所有参数收集到一个数组(称为“数组”)中。当您实际调用 函数时，您传递一个单个 参数:数组[10, 20]。因此，在函数中，array 将是 [[10, 20]] — 一个以该数组作为其单个元素的数组。因此，循环只会经历一次迭代。

如果您要调用第二个版本函数

console.log(arrayToList(10, 20))

您会得到更像您在第一个代码示例中得到的结果。函数中的“数组”参数将是一个包含两个 值的数组，10 和20。

关于“表达式”是什么的问题，这是一种语法结构，很容易直观地“获得”，但(尤其是在 JavaScript 中)在细节上非常复杂。基本上，类似于数学(代数)构造或比较，甚至单个变量引用或函数调用之类的东西都是表达式。 语句 只能包含一个(可能很大)表达式，但语句也可以是 for 循环、var 或let 声明、return 语句和各种其他内容。 JavaScript 语法通常会引入带有特定关键字的语句，except 表达式语句。