React 与 Redux 中的数组处理

你的名字 2021-09-24 11:22 429阅读 0赞

本文将介绍一些常用的数组处理函数和语法，如reduce()、filter()、map()、every()、some()、展开运算符。这些知识和React与Redux本身没有直接关系，但是本章的示例中包含了这些函数和语法的用法，我们正好可以在程序中学习它们。另外值得一提的是，reduce()、filter()、map()等函数的思想来自函数式编程，感谢JavaScript是一门函数式编程语言，让原本复杂的逻辑处理变得如此简单。

##    reduce() ##

概述  
reduce()方法接收一个函数作为累加器（accumulator),数组中的每个值（从左到右）开始合并，最终为一个值。  
语法

array.reduce(callback,initialValue)

参数解释如下。  
·callback:执行数组中每个值的函数（也可以叫reducer),包含四个参数。   
previousValue:上一次调用回调返回的值，或者是提供的初始值（initialValue).  
currentValue:数组中当前被处理的元素。  
index:当前元素在数组中的索引。  
array:调用reduce的数组  
·initialValue:作为第一次调用callback的第一个参数。这个参数不是必需的。  
示例

const completedCount=todos.reduce(
    (count,todo)=>(todo.completed?count+1:count),
    0);

代码解释：  
·todos是一个数组。  
reduce()的第一个参数是箭头函数，这个箭头函数的第一个参数count是上一个返回值，第二个参数todo是当前元素的值。  
·reduce()的第二个参数0是个初始化值，作用是使count的初始值为0.  
追历数组todos的第一个值的时候，count为0.todo是todos的第一项，返回值加一或者不变（如果todo.completed为true,则返回count+1,否则返回count).  
遍历数组todos的第二个值的时候，count为上一个返回值。todo是todos的第二项，返回值加一或者不变。  
遍历结束后，即可得到数组中completed属性为true的个数，也就是已完成的任务的个数。

##    filter() ##

概述  
filter()方法使用指定的函数测试所有元素，并创建一个包含所有通过测试的元素的新数组。  
语法

array.filter(callback,thisArg)

参数解释如下。  
·callback:用来测试数组的每个元素的函数，包含三个参数。返回true表示保留该元  
素（通过测试），返回false则不保留。  
·currentValue:数组中当前被传递的元素。  
index:元素的索引。  
array:被遍历的数组。  
·thisArg:可选。执行callback时使用的this值。

return state.filter(todo=>
    todo.id!==action.id
    )

代码解释：  
state是个任务数组。  
·filter()的参数是箭头函数。该箭头函数只有一个参数todo,也就是数组的当前项元  
素，箭头后面那个判断语句，如果返回true则保留当前项，反之则移除当前项。  
该代码段的作用是，过滤掉任务数组中id与指定id相同的任务，返回一个新的任务数组。

##    map() ##

概述  
map()方法返回一个由原数组中的每个元素调用一个指定方法后的返回值组成的新数组。  
语法

array.map(callback,thisArg)

参数解释如下。  
·callback:原数组中的元素调用该方法后返回一个新的元素。该方法包含如下三个参数。  
currentValue:数组中当前被传递的元素。  
·index:元素的索引。  
array:被遍历的数组。  
thisArg:可选。执行callback时使用的this值。

示例

return state.map(todo=>(
    todo.id===action.id?
    Object.assign({},todo.{ text:action.text}):
    todo
    ));

代码解释：  
state是变化前的state,是一个数组。  
map()的参数是个箭头函数。该箭头函数的第一个参数是todo,返回值是一个使用三元运算符的表达式，用于返回新元素。如果id匹配，则通过0bject.assign()合并一个新的属性，也就是给todo添加或者重写一个text属性，属性值为action.text  
Object.assign()方法可以把任意数目的源对象自身的可枚举属性拷贝给目标对象，然后返回目标对象。

语法为Object.assign(target,...sources).target是目标对象，sources是任意数目的源对象。  
这段代码的作用是为数组中指定的任务更新text属性。

##    every() ##

概述  
every()方法用于测试数组中所有元素是否都通过了指定函数的测试。  
语法

array.every(callback,thisArg)

callbak:用来测试每个元素的函数。  
currentValue:数组中当前被传递的元素。  
index:元素的索引。  
array:被追历的数组。  
·thisArg:可选。执行callback时使用的this值。

示例

const areAllMarked=state.every(todo=>todo.completed)

遍历任务数组、每一项任务的completed属性均为true时候，返回true.

##    some() ##

概述  
some()方法用于测试数组中是否至少有一项元素通过了指定函数的测试。  
语法

array.some(callback[,thisArg])

参数解释如下。  
·callback:用来测试每个元素的函数。  
currentValue:数组中当前被传递的元素。  
index:元素的索引。  
array:被遍历的数组。  
thisArg:可选。执行callback时使用的this值。  
  
示例

const areAllMarked=state.some(todo=>todo.completed)

遍历任务数组、只要有一项任务的completed属性为true，返回true.

##       展开运算符 ##

概述  
展开运算符允许一个表达式在某处展开。常用的场景包括：函数参数、数组元素、解构赋值。  
另外，JSX中的组件props也可以使用展开运算符来赋值。  
解构赋值（destructuring assignment)语法是一个 JavaScript表达式，它使得从数组或者对象中提取数据赋值给不同的变量成为可能。

语法  
用于函数参数：

myFunction(...iterable0bj);

用于数组元素：

[...iterableobj,4,5,6]

用于解构赋值：

const [a,b,...rest]=[1,2,3,4,5]
    const {a,b,...rest}={a:1,b:2,c:3,d:4}

用于React 组件的props:

<App...iterable0bj/>

示例  
展开state  
数组的每一项到当前的数组。

return[
    id:state.reduce((maxId,todo)=>Math,max(todo,id,maxId),-1)+1,
    {
    completed:false,
    text:action.text,
    },
    ...state,
    ];

展开actions的每一个属性到组件中。

<TodoItem key={todo.id}todo={todo}{...actions}/>

##    总结 ##

reduce()方法接收一个函数作为累加器（accumulator),数组中的每个值（从左到右）开始合并，最终为一个值。  
·filter()方法使用指定的函数测试所有元索，并创建一个包含所有通测试的元素的新数组。  
map()方法返回一个由原数组中的每个元素调用一个指定方法后的返回值组成的新数  
·every()方法测试数组的所有元素是否都通过了指定函数的测试。  
·some()方法用于测试数组中是否至少有一·项元素通过了指定函数的测试。  
·展开运算符允许一个表达式在某处展开。常用的场量包托，函数参数、数组构赋值。另外，JSX中的组件props也可以使用展开运算符来赋值。