React中...this.props.pokemon的作用是什么？与直接使用有何区别？

...this.props.pokemon的作用 #

这里的...是JavaScript的数组展开语法（扩展运算符），作用是将this.props.pokemon数组中的所有元素逐一展开，放到新的数组字面量中，最终生成一个和原pokemon数组内容完全一致的全新数组，赋值给hand2变量。

和直接使用this.props.pokemon的差异 #

直接写let hand2 = this.props.pokemon和当前写法的核心区别是引用关系、修改影响范围的不同，具体差异如下：

• 引用指向不同
  直接赋值时，hand2和this.props.pokemon指向内存中的同一个数组对象，两者本质上是同一个数组的不同别名。而用扩展运算符的写法会生成独立的新数组，hand2和原props.pokemon完全是两个独立的数组对象。
• 修改影响范围不同
  你当前代码中用到了hand2.splice()方法，这个方法是会直接修改调用它的原数组的。如果直接赋值hand2 = this.props.pokemon，splice操作会直接修改this.props.pokemon的内容：等循环结束后原props.pokemon会被清空，违反React中props为只读的原则，会导致所有依赖这个props的组件出现渲染异常等不可预期的问题。
  使用扩展运算符拷贝后，所有对hand2的增删修改只会作用于这个新数组，完全不会影响原props.pokemon的内容，符合React的单向数据流规范。
• 适用场景不同
  直接赋值仅适用于仅读取数组内容、不会对数组做任何修改的场景；如果后续需要对数组做增删、排序等修改操作，必须像当前代码一样先做拷贝，避免污染原数据。

补充说明：扩展运算符对数组做的是浅拷贝，如果pokemon数组的元素是对象类型，新数组中保存的仍然是原对象的引用，修改元素的属性值仍然会影响原数组中的对象，但数组本身的增删、替换元素操作不会影响原数组。

内容的提问来源于stack exchange，提问作者Riddhi Suteri