reduce()、filter()、map()、some()、every()、…展开属性这些概念属于es5、es6中的语法,跟React+Redux并没有什么联系,我们直接在https://developer.mozilla.org/en-US/ 这里可以搜索到相关api文档。
但是Redux的官方示例中包含了这些语法的用法,我们正好可以在程序中学习这些语法。这里全部默认使用es6的写法。
例子
这是官方的todomvc的例子(https://github.com/lewis617/react-redux-tutorial/tree/master/redux-examples/todomvc):
reduce()
遍历数组,在每一项元素后面触发一个回调函数,经过计算返回一个累加的值。
components/MainSection.js 62行
1 | const completedCount = todos.reduce((count, todo) => |
todos
是个数组,reduce()
的第一个参数是个箭头语法,也就是个回调函数,这个回调函数的第一个参数是上一个返回值(但是这里被初始化为0
),第二个参数是当前元素的值。reduce()
的第二个参数是个初始化值(不必需),初始化了上一个元素的值(这里是count
)
遍历数组todos
的第一个值的时候,count
为0,todo
是todos
的第一项,返回值加一或者不变。(条件 ? 结果1 : 结果2三元运算)
遍历数组todos
的第二个值的时候,count
为上一个返回值,todo
是todos
的第二项,返回值加一或者不变。
……
遍历结束后,即可得到数组中,completed
属性为true
的个数,也就是已完成的任务的个数。
filter()
遍历数组,在每一项元素后面触发一个回调函数,通过判断,保留或移除当前项,最后返回一个新数组。
顾名思义就是过滤。
reducers/todos.js 24行
1 | return state.filter(todo => |
state
是个任务数组,filter()
里面只有一个参数,就是个箭头函数,该函数只有一个参数是todo
,也就是数组的每一项元素,箭头后面那个判断语句,如果返回true
则保留当前项,反之移除当前项。
有的同学会问,todo.id !==action.id
前为什么没有return
,这是箭头函数的语法,箭头两端就是输入输出,不用写return
。如果用es5的写法就是:
1 | return state.filter(function(todo) { |
该代码段的作用是,过滤掉任务数组中,id
与指定id
相同的任务。返回一个新的任务数组。
map()
遍历数组,在每一项元素后面触发一个回调函数,通过计算,返回一个新的当前项,最后返回一个新数组。
reducers/todos.js 29行
1 | return state.map(todo => |
箭头后面的值是个三元运算符,也就是return
的新元素。如果id
匹配,则通过Object.assign()
合并一个新的属性,也就是给todo
添加或者重写一个text
属性,属性值为action.text
。
Object.assign()
第一个参数是target
,就是目标,第二个第三个以及后面的参数都是source
,也就是拷贝的源,是不是很像jquery插件中的extend
?
这个代码的作用是给数组中指定的任务更新text
属性。
some()、every()
遍历数组,在每一项元素后面触发一个回调函数,通过判断,返回一个布尔值。some()
是只要有一个满足判断,就返回true
,every()
是只要有一项不满足判断,就返回false
。
components/MainSection.js 19 行
1 | const atLeastOneCompleted = this.props.todos.some(todo => todo.completed) |
遍历任务数组,有一个任务的属性completed
为true
,就返回true
。
reducers/todos.js 43行
1 | const areAllMarked = state.every(todo => todo.completed) |
遍历任务数组,每一项任务的completed
属性均为true
时候,返回true
。
…展开属性
reducers/todos.js 20行
1 |
|
展开state
数组的每一项到当前的数组
components/MainSection.js 72 行
1 | <TodoItem key={todo.id} todo={todo} {...actions} /> |
展开actions
的每一个属性到组件中,最后在props上可以获取到。
教程示例代码及目录
示例代码:https://github.com/lewis617/react-redux-tutorial