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上可以获取到。

reduce()、filter()、map()、some()、every()、...展开属性的更多相关文章

  1. python中reduce filter map lambda函数

    lambda函数 python 使用 lambda 来创建匿名函数,lambda返回值是一个函数的地址,也就是函数对象. 语法:lambda [arg1 [,arg2,.....argn]]:expr ...

  2. reduce/filter/map/zip/isinstance/list列表推导式

  3. react+redux教程(三)reduce()、filter()、map()、some()、every()、...展开属性

    reduce().filter().map().some().every()....展开属性   这些概念属于es5.es6中的语法,跟react+redux并没有什么联系,我们直接在https:// ...

  4. python--函数式编程 (高阶函数(map , reduce ,filter,sorted),匿名函数(lambda))

    1.1函数式编程 面向过程编程:我们通过把大段代码拆成函数,通过一层一层的函数,可以把复杂的任务分解成简单的任务,这种一步一步的分解可以称之为面向过程的程序设计.函数就是面向过程的程序设计的基本单元. ...

  5. filter,map,reduce,lambda(python3)

    1.filter filter(function,sequence) 对sequence中的item依次执行function(item),将执行的结果为True(符合函数判断)的item组成一个lis ...

  6. (Python)list的内建函数 filter(), map(), 和 reduce()

    这一节,我们将主要学习用于list的三个内建函数: filter(), map(), 和 reduce(). 1.filter(function, sequence)  逐个从sequence中取一个 ...

  7. paip.提升效率---filter map reduce 的java 函数式编程实现

    #paip.提升效率---filter map reduce 的java 函数式编程实现 ======================================================= ...

  8. [python基础知识]python内置函数map/reduce/filter

    python内置函数map/reduce/filter 这三个函数用的顺手了,很cool. filter()函数:filter函数相当于过滤,调用一个bool_func(只返回bool类型数据的方法) ...

  9. Python中Lambda, filter, reduce and map 的区别

    Lambda, filter, reduce and map Lambda Operator Some like it, others hate it and many are afraid of t ...

随机推荐

  1. D. Cow and Snacks 并查集

    D. Cow and Snacks 题意:有n种小吃,m个人,每个人有两种喜欢的小吃,当一个人遇到两种自己都喜欢的小吃,可以都吃掉,问在最优的吃小吃顺序下,不能吃到自己喜欢的小吃的人数最少是多少? 题 ...

  2. 简述javascript的解析与执行

    我们知道浏览器中javascript程序的执行是基于变量与函数的.那么浏览器是如何保存数据,又是如何执行的呢?今天我们一起来探究一下! 0.写在前 最新的 ECMAScript 标准定义了 8 种数据 ...

  3. LeetCode206. Reverse Linked List(反转链表)

    题目链接:https://leetcode.com/problems/reverse-linked-list/ 方法一:迭代反转 https://blog.csdn.net/qq_17550379/a ...

  4. CentOS配置源、wget、ifconfig基础环境

    执行命令: curl http://10.200.0.14:8000/portal.cgi -X POST -d 'username=lishuai&password=test@cetc38& ...

  5. Spark教程——(2)编写spark-submit测试Demo

    创建Maven项目: 填写Maven的pom文件如下: <?xml version="1.0" encoding="UTF-8"?> <pro ...

  6. Android View转换成图片保存

    package zhangphil.viewtoimage; import java.io.File;import java.io.FileOutputStream; import android.o ...

  7. 分布估计算法解决TSP问题

    分布估计算法解决旅行商问题(TSP) TSP问题(Traveling Salesman Problem,旅行商问题),由威廉哈密顿爵士和英国数学家克克曼T.P.Kirkman于19世纪初提出.问题描述 ...

  8. 搭建solr集群的时候出现 ./zkcli.sh:行13: unzip: 未找到命令

    主要的原因是: linux系统下面没有安装压缩解压工具    zip 和 unzip:需要我们自己手动的安装: 利用yum命令安装即可: yum install -y unzip zip

  9. 51nod 1099:任务执行顺序 贪心

    1099 任务执行顺序 基准时间限制:1 秒 空间限制:131072 KB 分值: 20 难度:3级算法题  收藏  取消关注 有N个任务需要执行,第i个任务计算时占R[i]个空间,而后会释放一部分, ...

  10. docker中使用mongodb

    连接mongodb容器,下拉alpine应用测试连接