...this.props.pokemon 的目的是啥，它与 this.props.pokemon 有何不同 [重复]

Posted 2023-02-22

【中文标题】...this.props.pokemon 的目的是啥，它与 this.props.pokemon 有何不同 [重复]

【英文标题】：what is the purpose of ...this.props.pokemon and how's it different from this.props.pokemon [duplicate]...this.props.pokemon 的目的是什么，它与 this.props.pokemon 有何不同 [重复]

【发布时间】：2021-11-05 17:33:03

【问题描述】：

我一直在做一个简单的反应项目，我在其中找到了这个 sn-p

 let hand1 =[]
    let hand2 =[ ...this.props.pokemon];
    while(hand1.length < hand2.length)
        let randIdx = Math.floor(Math.random()*hand2.length);
        let randPokemon = hand2.splice(randIdx,1)[0];
        hand1.push(randPokemon)
    

..this.props.pokemon 在这里有什么用？

【问题讨论】：

你的意思是Spread operator？

它使用spread syntax 来创建数组的副本，这样你就不会在 props 中改变那个。

【参考方案1】：

是Spread syntax (...)

在您的情况下，它从您的 props 深层复制 pokemon 数组并防止改变原始数组/对象

看看这个没有使用spread syntax的例子：

const firstArray = [1, 2];

const secondArray = firstArray;

secondArray[0] = 9;

console.log(firstArray);

这是使用spread syntax的时候

const firstArray = [1, 2];

const secondArray = [...firstArray];

secondArray[0] = 9;

console.log(firstArray);

【参考方案2】：

let hand2 = [ ...this.props.pokemon]

上面的表达式将this.props.pokemon中的所有值都放入hand2数组中。

例如：

const fruits = ['apple', 'banana']
const breakfast = [...fruits, 'milk']

console.log(breakfast) -> ['apple', 'banana', 'milk']

如果您没有展开运算符 (...)。它会将整个数组放在那里，而不仅仅是值。例如：

const fruits = ['apple', 'banana']
const breakfast = [fruits, 'milk']

console.log(breakfast) -> [['apple', 'banana'], 'milk']