javascript - javascript什么时候返回函数值?

最近我一直在学习 react js这段代码,我的导师使用这里代码来重置状态中的值。


 handleDelete = counterId => {


 const tempCounter = this.state.counters.filter(c => c.id!== counterId);


 this.setState({ counters: tempCounter });


 };



 reset = () => {


 const resetCounters = this.state.counters.map(c => {


 c.value = 0;


 return c;


 });


 this.setState({ counters: resetCounters });


 };



在'handledelete'函数中,我的导师没有在'tempcounter'变量中返回值,但在'reset'函数中返回了'c'值,为什么?

时间:

this.state.counter.filter()内的箭头函数返回表达式c.id!== counterId的布尔值。 当在声明箭头函数之后不放置括号"{}"时,它意味着箭头"=>"的返回值将被视为返回值。

因为函数map正在查看整个数组并将所需结果返回到一个新数组,这将是tempCounter的值。

这个函数:


 handleDelete = counterId => {


 const tempCounter = this.state.counters.filter(c => c.id!== counterId);//implicit return 


 this.setState({ counters: tempCounter });


 };



或者


handleDelete = counterId => {


 const tempCounter = this.state.counters.filter(c => {


 return c.id!== counterId;//explicit return 


 });


 this.setState({ counters: tempCounter });


};



更有创意的例子:


const people = [


 { name: 'Bob', age: 20 },


 { name: 'Jane', age: 30 },


 { name: 'Mike', age: 40 },


 { name: 'Smith', age: 50 },


];



const under35implicit = people.filter(person => person.age <35)



//same as 



const under35explicit = people.filter(person => {


 return person.age <35


})



console.log(under35implicit)



console.log(under35explicit)

那有意义吗?

在箭头函数中,如果箭头后面有一个表达式,则将隐式返回它。 如果有大括号,则需要显式返回语句来返回值。 你可以重写第一个函数,如下所示:


const tempCounter = this.state.counters.filter(c => {


 return c.id!== counterId


});



但第一种方法更简洁。

第二个函数也可以反转使用显式返回,使用扩展:


const resetCounters = this.state.counters.map(c => ({.. .c, value: 0 }));



我们需要将对象包装在括号中,否则它将成为包含在大括号中的函数体。

请仔细查看返回的值 c 不是函数 reset的返回值,而是函数的返回值。 c => { c.value = 0; return c; } 作为参数,你在 this.state.counters.map 中使用。

这同时阐明了函数 resethandleDelete 不返回任何值。 因为它们很可能用作事件处理程序( 按钮单击,等等 ),所以它们甚至不需要。 因此,他们使用 this.setState 触发一个状态改变。

...