What does '...' in React-Native mean?

Question

A piece of react-native code:

enderScene(route, navigator) {
   let Component = route.component;
   return (
      <Component {...route.params} navigator={navigator}></Component>
   );
}

this code returns a Component Object ,

But I don't understand this code ---> {...route.params}

Question：

1. What is meant by '...' ?
2. Can you tell me what is meant by " {...route.params}" ?

Answer 1

The '...' is called Spread syntax.

The spread syntax allows an expression to be expanded in places where multiple arguments (for function calls) or multiple elements (for array literals) or multiple variables (for destructuring assignment) are expected.

Example :

var car = ["door", "motor", "wheels"];
var truck = [...car, "something", "biggerthancar"];

// truck  = ["door", "motor", "wheels", "something", "biggerthancar"]

If you want to know more about spread operator :

https://rainsoft.io/how-three-dots-changed-javascript/

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator