纯净、安全、绿色的下载网站

首页|软件分类|下载排行|最新软件|IT学院

当前位置:首页IT学院IT技术

React与Redux之数组处理 React与Redux之数组处理讲解

多纤果冻   2021-09-11 我要评论
想了解React与Redux之数组处理讲解的相关内容吗多纤果冻在本文为您仔细讲解React与Redux之数组处理的相关知识和一些Code实例欢迎阅读和指正我们先划重点:React与Redux数组处理,React与Redux数组处理详解下面大家一起来学习吧

本文将介绍一些常用的数组处理函数和语法如reduce()、filter()、map()、every()、some()、展开运算符这些知识和React与Redux本身没有直接关系但是本章的示例中包含了这些函数和语法的用法我们正好可以在程序中学习它们另外值得一提的是reduce()、filter()、map()等函数的思想来自函数式编程感谢JavaScript是一门函数式编程语言让原本复杂的逻辑处理变得如此简单

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.
追历数组todos的第一个值的时候count为0.todo是todos的第一项返回值加一或者不变(如果todo.completed为true,则返回count+1,否则返回count).
遍历数组todos的第二个值的时候count为上一个返回值todo是todos的第二项返回值加一或者不变
遍历结束后即可得到数组中completed属性为true的个数也就是已完成的任务的个数

filter()

概述

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

语法

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则保留当前项反之则移除当前项
该代码段的作用是过滤掉任务数组中id与指定id相同的任务返回一个新的任务数组

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匹配则通过0bject.assign()合并一个新的属性也就是给todo添加或者重写一个text属性属性值为action.text
Object.assign()方法可以把任意数目的源对象自身的可枚举属性拷贝给目标对象然后返回目标对象

语法为Object.assign(target,...sources).target是目标对象sources是任意数目的源对象
这段代码的作用是为数组中指定的任务更新text属性

every()

概述

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

语法

array.every(callback,thisArg)

callbak:用来测试每个元素的函数
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)

遍历任务数组、只要有一项任务的completed属性为true返回true.

展开运算符

概述

展开运算符允许一个表达式在某处展开常用的场景包括:函数参数、数组元素、解构赋值
另外JSX中的组件props也可以使用展开运算符来赋值
解构赋值(destructuring assignment)语法是一个 JavaScript表达式它使得从数组或者对象中提取数据赋值给不同的变量成为可能

语法

用于函数参数:

myFunction(...iterable0bj);

用于数组元素:

[...iterableobj,4,5,6]

用于解构赋值:

const [a,b,...rest]=[1,2,3,4,5]
const {a,b,...rest}={a:1,b:2,c:3,d:4}

用于React 组件的props:

<App...iterable0bj/>

示例

展开state
数组的每一项到当前的数组 

return[
id:state.reduce((maxId,todo)=>Math,max(todo,id,maxId),-1)+1,
{
completed:false,
text:action.text,
},
...state,
];

展开actions的每一个属性到组件中

<TodoItem key={todo.id}todo={todo}{...actions}/>

总结

reduce()方法接收一个函数作为累加器(accumulator),数组中的每个值(从左到右)开始合并最终为一个值
·filter()方法使用指定的函数测试所有元索并创建一个包含所有通测试的元素的新数组
map()方法返回一个由原数组中的每个元素调用一个指定方法后的返回值组成的新数
·every()方法测试数组的所有元素是否都通过了指定函数的测试
·some()方法用于测试数组中是否至少有一·项元素通过了指定函数的测试
·展开运算符允许一个表达式在某处展开常用的场量包托函数参数、数组构赋值另外JSX中的组件props也可以使用展开运算符来赋值 


相关文章

猜您喜欢

网友评论

Copyright 2020 www.sopisoft.net 【绿软下载站】 版权所有 软件发布

声明:所有软件和文章来自软件开发商或者作者 如有异议 请与本站联系 点此查看联系方式