JS 中的展开/休息运算符如何工作？ [复制]

我正在努力完全理解扩展/休息运算符在 JS 中的工作原理。我已经阅读了 MDN 文档，但我仍然不完全清楚。

我在下面提供了一个示例，我在其中使用了它并且它按预期工作。

const users = [
  {
    name: 'Samir',
    age: 27,
    favoriteBooks:[
      {title: 'The Iliad'},
      {title: 'The Brothers Karamazov'}
    ]
  },
  {
    name: 'Angela',
    age: 33,
    favoriteBooks:[
      {title: 'Tenth of December'},
      {title: 'Cloud Atlas'},
      {title: 'One Hundred Years of Solitude'}
    ]
  },
  {
    name: 'Beatrice',
    age: 42,
    favoriteBooks:[
      {title: 'Candide'}
    ]
  }
];

const books = users
  .map(user => user.favoriteBooks.map(book => book.title))
  .reduce((arr, titles) => [...arr, ...titles], []);

如果您四处搜索，除了 MDN 之外，还有很多关于此主题的资源。

JS 中的展开运算符和剩余运算符如何工作？

JavaScript ES6：扩展运算符和剩余参数 https://medium.com/@luke_smaki/javascript-es6-spread-operator-and-rest-parameters-b3e89d112281

Javascript 的三个点 ( ... )：扩展运算符与其余运算符 https://scotch.io/bar-talk/javascripts-three-dots-spread-vs-rest-operators543

剩余参数和扩展语法 https://javascript.info/rest-parameters-spread

Spread

扩展运算符“扩展”可迭代对象（数组、字符串）中的值

本质上，在这种情况下，spread 将迭代数组的每个项目。输出array[0] array[1] array[2] etc.

var a = [1,2,3];
var b = [4,5,6];

console.log([...a, ...b]); // [1,2,3,4,5,6]

or

var a = ['x', 'y', 'z'];
test(...a);

function test(param1, param2, param3) {
    // param1 = 'x'
    // param2 = 'y'
    // param3 = 'z'
}

Rest

剩余参数允许我们将无限数量的参数传递给函数并在数组中访问它们。

Rest 的工作方式与展开运算符类似，但会迭代传递给函数的所有参数，并允许您在数组中访问它们。

test(1,2,3,4,5,6)

function test(...args) {
    console.log(args); // [1,2,3,4,5,6]
    // Instead of ar
}