Javascript 这三个点的作用是什么？

…

在这个React（使用JSX）代码中做了什么？它叫什么

<Modal {...this.props} title='Modal heading' animation={false}>

那太好了。它是在ES2018中添加的（阵列/iterables的扩展更早，ES2015），但它在React项目中通过transfilation得到了很长时间的支持（作为“”，尽管您也可以在其他地方进行，而不仅仅是属性）

{…this.props}

将

props

中的“自己的”可枚举属性作为正在创建的

Modal

元素上的离散属性展开。例如，如果

this.props

包含

a:1

和

b:2

，则

<Modal {...this.props} title='Modal heading' animation={false}>

。首先{
颜色：绿色；
}
.第二{
颜色：蓝色；
}

---

JavaScript中的三个点是扩展/rest操作符

扩展运算符

允许在需要多个参数的位置展开表达式

myFunction(...iterableObj);

[...iterableObj, 4, 5, 6]

[...Array(10)]

休息参数

this.props = 
 { 
    firstName: 'Dan', 
    lastName: 'Abramov', 
    city: 'New York',
    country: 'USA' 
}

 var shooterGames = ['Call of Duty', 'Far Cry', 'Resident Evil'];
 var racingGames = ['Need For Speed', 'Gran Turismo', 'Burnout'];
 var games = [...shooterGames, ...racingGames];

 console.log(games)  // ['Call of Duty', 'Far Cry', 'Resident Evil',  'Need For Speed', 'Gran Turismo', 'Burnout']

 var myCrush = {
   firstname: 'Selena',
   middlename: 'Marie'
 };

 var lastname = 'my last name';

 var myWife = {
   ...myCrush,
   lastname
 }

 console.log(myWife); // {firstname: 'Selena',
                      //   middlename: 'Marie',
                      //   lastname: 'my last name'}

参数语法用于参数数目可变的函数

function(a, b, ...theArgs) {
  // ...
}

let numbers = [9, 4, 7, 1];
Math.min(...numbers); // 1

中介绍了阵列的扩展/静止运算符。对象排列/静止属性有状态2

TypeScript还支持扩展语法，并可以使用minor将其转换为旧版本的ECMAScript。

三个点

（…）

称为扩展运算符，这在概念上类似于ES6数组扩展运算符JSX 利用这些受支持和正在开发的标准，以便在JSX中提供更清晰的语法

对象初始值设定项中的扩展属性复制自己的可枚举项 属性从提供的对象复制到新创建的对象上

let n = { x, y, ...z };
n; // { x: 1, y: 2, a: 3, b: 4 }

参考资料：

---

…

称为扩展属性，其名称表示允许扩展表达式

var parts = ['two', 'three'];
var numbers = ['one', ...parts, 'four', 'five']; // ["one", "two", "three", "four", "five"]

在这种情况下（我将简化它）

这：

等于

<Modal name={person.name} age={person.age} title='Modal heading' animation={false} />

---

简而言之，我们可以说，这是一条简洁的捷径。

这是ES6的一个特性，它也用于React。请看下面的示例：

function Sum(x, y, z) {
   return x + y + z;
}
console.log(Sum(1, 2, 3)); // 6

如果我们最多有三个参数，这种方法就可以了。但是，如果我们需要添加，例如，110个参数呢。我们是否应该定义它们并逐个添加它们

当然，还有一种更简单的方法，称为扩展。 而不是传递您编写的所有这些参数：

function (...numbers){} 

我们不知道我们有多少参数，但我们知道有很多参数

基于此，我们可以将上述函数重写如下，并使用它们之间的扩展和映射，使其变得非常简单：

let Sum = (...numbers) => {
    return numbers.reduce((prev, current) => prev + current);
}
console.log(Sum(1, 2, 3, 4, 5, 6, 7, 8, 9)); // 45

---

对于那些来自Python世界的人来说，JSX扩展属性相当于 （Python

**

-运算符）

---

我知道这是一个JSX问题，但使用类比有时有助于加快速度。

这只是在JSX中以不同的方式定义道具

它在ES6中使用了

…

数组和对象操作符（对象一还不完全支持），因此基本上，如果您已经定义了道具，您可以通过这种方式将其传递给元素

因此，在您的情况下，代码应该是这样的：

function yourA() {
  const props = {name='Alireza', age='35'};
  <Modal {...props} title='Modal heading' animation={false} />
}

     function HelloUser() {
       const props = {Name: 'ABC', City: 'XYZ'};
       return <Hello {...props} />;
     }

函数yourA（）{
const props={name='Alireza'，age='35'}；
}

因此，您定义的道具现在已分离，如果需要，可以重复使用

等于：

function yourA() {
  <Modal name='Alireza' age='35' title='Modal heading' animation={false} />
}

函数yourA（）{
}

以下是React团队在JSX中对spread operator的引用：

JSX扩展属性 如果您知道要放置在零部件上的所有特性 提前使用JSX很容易：

var组件=；

变异道具不好
如果您不知道要设置哪些属性，您可能会在以后尝试将它们添加到对象中：

var组件=；
component.props.foo=x；//坏的
component.props.bar=y；//也不好

这是一个反模式，因为这意味着我们无法帮助您检查 正确的道具类型，直到以后。这意味着你的道具类型 错误以一个神秘的堆栈跟踪结束

这些道具应该被认为是不可变的。改变道具对象 在其他地方可能会造成意想不到的后果，所以理想情况下它会 此时将成为冻结对象

扩展属性
现在您可以使用JSX的一个新功能，称为扩展属性：

var-props={}；
props.foo=x；
props.bar=y；
var分量=；

传入的对象的特性将复制到 组件的道具

可以多次使用此属性，也可以将其与其他属性组合使用。 规格顺序很重要。稍后的属性覆盖 以前的

var-props={foo:'default'}；
var分量=；
console.log（component.props.foo）；/'覆盖'

奇怪的是什么。。。符号？
表示。。。ES6中的阵列已支持运算符（或扩展运算符）。还有 对象静止和排列属性的ECMAScript建议。我们是 利用这些支持和开发的标准 在JSX中提供更清晰的语法

这是和声中的一个新功能。它被称为扩展运算符

 let person= {
        name: 'Alex',
        age: 35
    }
person2 = {...person};

person2.name = "Shahzad";

console.log(person.name); // Output: Alex

var arr = [1,2,3];
var arr2 = [...arr];
// arr2 = [1,2,3]

它允许您分离数组/对象的组成部分，或者获取多个项/参数并将它们粘合在一起。 以下是一个例子：

let array = [1,2,3]
let array2 = [...array]
// array2 is now filled with the items from array

并使用对象/键：

// Let’s pass an object as props to a react component
let myParameters = {myKey: 5, myOtherKey: 7}
let component = <MyComponent {...myParameters}/>
// This is equal to <MyComponent myKey=5 myOtherKey=7 />

用于以简单方式传递多个属性的排列属性

   var shooterGames = ['Call of Duty', 'Far Cry', 'Resident Evil'];
   var [first, ...remaining] = shooterGames;
   console.log(first); //Call of Duty
   console.log(remaining); //['Far Cry', 'Resident Evil']

  function fun1(...params) {

  }

{…this.props}持有this.props的属性

将{…}扩展运算符与下面的道具一起使用

this.props = 
 { 
    firstName: 'Dan', 
    lastName: 'Abramov', 
    city: 'New York',
    country: 'USA' 
}

 var shooterGames = ['Call of Duty', 'Far Cry', 'Resident Evil'];
 var racingGames = ['Need For Speed', 'Gran Turismo', 'Burnout'];
 var games = [...shooterGames, ...racingGames];

 console.log(games)  // ['Call of Duty', 'Far Cry', 'Resident Evil',  'Need For Speed', 'Gran Turismo', 'Burnout']

 var myCrush = {
   firstname: 'Selena',
   middlename: 'Marie'
 };

 var lastname = 'my last name';

 var myWife = {
   ...myCrush,
   lastname
 }

 console.log(myWife); // {firstname: 'Selena',
                      //   middlename: 'Marie',
                      //   lastname: 'my last name'}

没有{…}排列

带有{…}排列

<ChildComponent username={this.props.username} email={this.props.email} />

let a = [1, 2, 3, 4];
let b = [...a, 4, 5, 6];
let c = [7, 8, ...a];

console.log(b);

console.log(c);

 var shooterGames = ['Call of Duty', 'Far Cry', 'Resident Evil'];
 var racingGames = ['Need For Speed', 'Gran Turismo', 'Burnout'];
 var games = [...shooterGames, ...racingGames];

 console.log(games)  // ['Call of Duty', 'Far Cry', 'Resident Evil',  'Need For Speed', 'Gran Turismo', 'Burnout']

   var shooterGames = ['Call of Duty', 'Far Cry', 'Resident Evil'];
   var [first, ...remaining] = shooterGames;
   console.log(first); //Call of Duty
   console.log(remaining); //['Far Cry', 'Resident Evil']

 var myCrush = {
   firstname: 'Selena',
   middlename: 'Marie'
 };

 var lastname = 'my last name';

 var myWife = {
   ...myCrush,
   lastname
 }

 console.log(myWife); // {firstname: 'Selena',
                      //   middlename: 'Marie',
                      //   lastname: 'my last name'}

  function fun1(...params) {

  }

const objA = { a: 1, b: 2, c: 3 }
const objB = { ...objA, d: 1 }
/* Result of objB will be { a: 1, b: 2, c: 3, d: 1 } */
console.log(objB)

const objC = { ....objA, a: 3 }
/* result of objC will be { a: 3, b: 2, c: 3, d: 1 } */
console.log(objC)

var component = <Component foo={x} bar={y} />;

var component = <Component />;
component.props.foo = x; // bad
component.props.bar = y;

var props = {};
props.foo = x;
props.bar = y;
var component = Component(props); // Where did my JSX go?

var props = {};
props.foo = x;
props.bar = y;
var component = <Component {...props} />;

var props = { foo: 'default' };
var component = <Component {...props} foo={'override'} />;
console.log(component.props.foo); // 'override'

var oldObj = { foo: 'hello', bar: 'world' };
var newObj = { ...oldObj, foo: 'hi' };
console.log(newObj.foo); // 'hi';
console.log(newObj.bar); // 'world';

var ab = { ...a, ...b }; // merge(a, b)

function App1() {
  return <Greeting firstName="Ben" lastName="Hector" />;
}



function App2() {
  const props = {firstName: 'Ben', lastName: 'Hector'};
  return <Greeting {...props} />;
}

const SomeStyle = {
   margin: 10,
   background: #somehexa
}

let hello={name: '',msg:''}
let hello1={...hello}

    function HelloUser() {
      return <Hello Name="ABC" City="XYZ" />;
    }

     function HelloUser() {
       const props = {Name: 'ABC', City: 'XYZ'};
       return <Hello {...props} />;
     }

React.createElement(Modal, { ...this.props, title: "Modal heading", animation: false }, child0, child1, child2, ...)

let person= {
    name: 'Alex',
    age: 35
}
person1 = person;

person1.name = "Raheel";

console.log( person.name); // Output: Raheel

 let person= {
        name: 'Alex',
        age: 35
    }
person2 = {...person};

person2.name = "Shahzad";

console.log(person.name); // Output: Alex

var arr1 = ['two', 'three'];
var arr2 = ['one', ...arr1, 'four', 'five'];

// arr2 = ["one", "two", "three", "four", "five"]

var arr = [1,2,3];
var arr2 = [...arr];
// arr2 = [1,2,3]

function doStuff (x, y, z) { }
var args = [0, 1, 2];

// Call the function, passing args
doStuff.apply(null, args);

doStuff(...args);

let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
console.log(x); // 1
console.log(y); // 2
console.log(z); // { a: 3, b: 4 }

function f(a, b, ...args) {
  console.log(args);
}

f(1,2,3,4,5);
// [ 3, 4, 5 ]

let numbers = [9, 4, 7, 1];
Math.min(...numbers); // 1

var carType = {
  model: 'Toyota',
  yom: '1995'
};

var carFuel = 'Petrol';

var carData = {
  ...carType,
  carFuel
}

console.log(carData);
// {
//  model: 'Toyota',
//  yom: '1995',
//  carFuel = 'Petrol'
// }

let chars = ['A', ...'BC', 'D'];
console.log(chars); // ["A", "B", "C", "D"]

const [myState, setMyState] = useState({
    variable1: 'test',
    variable2: '',
    variable3: ''
});

setMyState({...myState, variable2: 'new value here'});

const user = {
  "name"=>"Joe",
  "age"=>"50"
  "test"=>"test-val"
};

<UserTag name="Supun" gender="male"  {...user} age="66" />

<UserTag name="Joe" gender="male" test="test-val" age="66" />

var peaks = ["Tallac", "Ralston", "Rose"]
var canyons = ["Ward", "Blackwood"]
var tahoe = [...peaks, ...canyons]
console.log(tahoe.join(', ')) // Tallac, Ralston, Rose, Ward, Blackwood

var lakes = ["Donner", "Marlette", "Fallen Leaf", "Cascade"]
var [first, ...rest] = lakes
console.log(rest.join(", ")) // "Marlette, Fallen Leaf, Cascade"

function directions(...args) {
    var [start, ...remaining] = args
    var [finish, ...stops] = remaining.reverse()
    console.log(start, finish)
}

var morning = {
    breakfast: "oatmeal",
    lunch: "peanut butter and jelly"
}
var dinner = "mac and cheese"
var backpackingMeals = {
    ...morning,
    dinner
}
console.log(backpackingMeals) // {breakfast: "oatmeal", lunch: "peanut butter and jelly", dinner: "mac and cheese"}

//Passing elements of the array as arguments to the Math Object
const arr = [1,2,500,-1,.20,0,-10];
console.log(Math.min(...arr));
console.log(Math.max(...arr));