reduce()、filter()、map()、some()、every()、...展开属性
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行
const completedCount = todos.reduce((count, todo) =>
todo.completed ? count + 1 : count,
0
)
todos是个数组,reduce()的第一个参数是个箭头语法,也就是个回调函数,这个回调函数的第一个参数是上一个返回值(但是这里被初始化为0),第二个参数是当前元素的值。reduce()的第二个参数是个初始化值(不必需),初始化了上一个元素的值(这里是count)
遍历数组todos的第一个值的时候,count为0,todo是todos的第一项,返回值加一或者不变。(条件 ? 结果1 : 结果2三元运算)
遍历数组todos的第二个值的时候,count为上一个返回值,todo是todos的第二项,返回值加一或者不变。
……
遍历结束后,即可得到数组中,completed属性为true的个数,也就是已完成的任务的个数。
filter()
遍历数组,在每一项元素后面触发一个回调函数,通过判断,保留或移除当前项,最后返回一个新数组。
顾名思义就是过滤。
reducers/todos.js 24行
return state.filter(todo =>
todo.id !== action.id
)
state是个任务数组,filter()里面只有一个参数,就是个箭头函数,该函数只有一个参数是todo,也就是数组的每一项元素,箭头后面那个判断语句,如果返回true则保留当前项,反之移除当前项。
有的同学会问,todo.id !== action.id前为什么没有return,这是箭头函数的语法,箭头两端就是输入输出,不用写return。如果用es5的写法就是:
return state.filter(function(todo) {
return todo.id !== action.id
}
)
该代码段的作用是,过滤掉任务数组中,id与指定id相同的任务。返回一个新的任务数组。
map()
遍历数组,在每一项元素后面触发一个回调函数,通过计算,返回一个新的当前项,最后返回一个新数组。
reducers/todos.js 29行
return state.map(todo =>
todo.id === action.id ?
Object.assign({}, todo, { text: action.text }) :
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 行
const atLeastOneCompleted = this.props.todos.some(todo => todo.completed)
遍历任务数组,有一个任务的属性completed为true,就返回true。
reducers/todos.js 43行
const areAllMarked = state.every(todo => todo.completed)
遍历任务数组,每一项任务的completed属性均为true时候,返回true。
...展开属性
reducers/todos.js 20行
return [
{
id: state.reduce((maxId, todo) => Math.max(todo.id, maxId), -1) + 1,
completed: false,
text: action.text
},
...state
]
展开state数组的每一项到当前的数组
components/MainSection.js 72 行
<TodoItem key={todo.id} todo={todo} {...actions} />
展开actions的每一个属性到组件中,最后在props上可以获取到。
最新文章
- 无法解析指定对象的 TargetProperty (UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)“的异常解决
- C# 如何获取当前应用程序的上一级路径
- 【转】给Windows + Apache 2.2 + PHP 5.3 安装PHP性能测试工具 xhprof
- (整理)SQLServer 大数据的插入与查询
- 设置navigationBar上面的item
- JavaScript库开发者们的规则
- 深入浅出ES6(五):不定参数和默认参数
- Spark系列(五)Master主备切换机制
- sql 判断表是否存在
- xstream 别名的用法<;转>;
- 织梦dedecms后台发布文章不自动更新首页与栏目列表页
- [LeetCode]题解(python):018-4Sum
- 【转】android动画之Tween动画 (渐变、缩放、位移、旋转)
- 浅谈Android studio中OKHttp安装及简单使用
- 服务器配置java
- ARP欺骗配置及演示过程
- thinkphp通用控制器
- Mysql基础之 binary关键字
- [development][security][suricata] suricata 使用与调研
- goreplay 输出流量捕获数据到 elasticsearch
热门文章
- Scrapy采集某小说网站的全部小说
- Java8使用Stream优雅地处理集合
- robot framework 命令行执行用例与自带的run configurations运行用例
- python导入第三方库
- 吴裕雄 Bootstrap 前端框架开发——Bootstrap 表单:复选框(Checkbox)和单选框(Radio)
- C. Book Reading 求在[1,n]中的数中,能整除m的数 的个位的和
- Vue二次精度随笔(2)
- JavaNIO第一话-Buffer
- Git如何修改一个过去的Commit
- Java对比两个数据库中的表和字段,写个冷门的东西