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

Posted 2023-02-22

【中文标题】JS 中的展开/休息运算符是如何工作的？ [复制]

【英文标题】：How does the spread/rest operator in JS work? [duplicate]

【发布时间】：2020-05-04 15:50:12

【问题描述】：

我很难完全理解传播/休息运算符在 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], []);

【问题讨论】：

[...arr, ...titles] 等价于[arr[0],arr[1],/*etc*/,titles[0],titles[1],/*etc*/]，... 只是将单个元素展开到结构中

***.com/questions/34559918/spread-syntax-es6/57680090

【参考方案1】：

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

JS中的展开和休息运算符是如何工作的？

javascript ES6: Spread Operator and Rest Parameters

Javascript's three dots ( ... ): Spread vs rest operators

Rest parameters and spread syntax

---

传播

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

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

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

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

或

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