react+redux教程(三)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/myReact/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上可以获取到。

时间: 2024-10-02 05:23:35

react+redux教程(三)reduce()、filter()、map()、some()、every()、...展开属性的相关文章

react+redux教程(五)异步、单一state树结构、componentWillReceiveProps

教程目录 react+redux教程(一)connect.applyMiddleware.thunk.webpackHotMiddleware react+redux教程(二)redux的单一状态树完全替代了react的状态机? react+redux教程(三)reduce().filter().map().some().every()....展开属性 react+redux教程(四)undo.devtools.router react+redux教程(五)异步.单一state树结构.compo

react+redux教程(四)undo、devtools、router

上节课,我们介绍了一些es6的新语法:react+redux教程(三)reduce().filter().map().some().every()....展开属性 今天我们通过解读redux-undo的官方示例代码来学习,在redux中使用撤销功能.devtools功能.以及router. 例子 这个例子是个计数器程序,包含计数器.右边的redux开发工具.还有一个路由(不过只有“/”这一个地址). 源代码: https://github.com/lewis617/myReact/tree/ma

react+redux教程(六)redux服务端渲染流程

教程目录 react+redux教程(一)connect.applyMiddleware.thunk.webpackHotMiddleware react+redux教程(二)redux的单一状态树完全替代了react的状态机? react+redux教程(三)reduce().filter().map().some().every()....展开属性 react+redux教程(四)undo.devtools.router react+redux教程(五)异步.单一state树结构.compo

react+redux教程(七)自定义redux中间件

教程源代码及目录 https://github.com/lewis617/myReact 今天,我们要讲解的是自定义redux中间件这个知识点.本节内容非常抽象,特别是中间件的定义原理,那多层的函数嵌套和串联,需要极强逻辑思维能力才能完全消化吸收.不过我会多罗嗦几句,所以不用担心. 例子 例子是官方的例子real-world,做的是一个获取github用户.仓库的程序. 本例子源代码: https://github.com/lewis617/myReact/tree/master/redux-e

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/r

Python的lambda, filter, reduce 和 map简介

Lambda 操作 Lambda操作——有些人喜欢,有些人讨厌,还有很多人害怕.当你看完了我们这章的介绍后,我们很自信你会喜欢上它.要不然,你可以去学习Guido van Rossums更喜欢去用的“list comprehensions”(递推式构造列表)了,因为他也不喜欢Lambda, map filter 和reduce. Lambda操作或者lambda函数是一种创建小型匿名函数的方式,即:函数都没有函数名.这些函数都是投掷(throw-away)函数,即:它们只会在我们需要的地方创建,

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

python内置函数map/reduce/filter 这三个函数用的顺手了,很cool. filter()函数:filter函数相当于过滤,调用一个bool_func(只返回bool类型数据的方法)来迭代遍历每个序列中的元素. 返回bool_func结果为true的元素的序列(注意弄清楚序列是什么意思)http://blog.csdn.net/bolike/article/details/19997465序列参考</a> 如果filter参数值为None,list参数中所有为假的元 素都将被

Python进阶:函数式编程(高阶函数,map,reduce,filter,sorted,返回函数,匿名函数,偏函数)...啊啊啊

函数式编程 函数是Python内建支持的一种封装,我们通过把大段代码拆成函数,通过一层一层的函数调用,就可以把复杂任务分解成简单的任务,这种分解可以称之为面向过程的程序设计.函数就是面向过程的程序设计的基本单元. 而函数式编程(请注意多了一个"式"字)--Functional Programming,虽然也可以归结到面向过程的程序设计,但其思想更接近数学计算. 我们首先要搞明白计算机(Computer)和计算(Compute)的概念. 在计算机的层次上,CPU执行的是加减乘除的指令代码

python几个重要的函数(lambda,filter,reduce,map,zip)

一.匿名函数lambda lambda argument1,argument2,...argumentN :expression using arguments 1.lambda是一个表达式,而不是一个语句. 因为这一点,lambda可以出现在python语法不允许def出现的地方---例如,在一个列表常量中或者函数调用的参数中,此外,作为一个表达式,lambda返回一个值一个值(一个新的函数),可以选择性地值给一个变量名.相反,def语句总是得在头部将一个新的函数赋值给一个变量名,而不是将这个