React 与 Redux 中的数组处理

昨天把《深入 React 技术栈》翻了一半，头实在是大，今天换一本实体书《React 与 Redux 开发实例精解》。

本篇笔记为《React 与 Redux 开发实例精解》第 15 章内容

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。

filter()

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

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 则保留当前项，反之则移除当前项。

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 匹配，则通过Object.assign()合并一个新的属性，也就是给 todo 添加或者重写一个 text 属性，属性值为action.text

every()

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

array.every(callback[,thisArg])

参数解释：

• callback：原数组中的元素调用该方法后返回一个新的元素。该方法包含如下三个参数
  • 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)