React and Redux array processing explanation

This article will introduce some commonly used array processing functions and syntax, such as reduce(), filter(), map(), every(), some(), and spread operator. This knowledge is not directly related to React and Redux itself, but the examples in this chapter include the usage of these functions and syntax, so we can learn them in the program. It is also worth mentioning that the ideas of functions such as reduce(), filter(), map() come from functional programming. Thanks to JavaScript being a functional programming language, the originally complex logic processing has become so simple.

reduce()

Overview

The reduce() method receives a function as an accumulator, and each value in the array (from left to right) is merged to form a single value.

grammar

array.reduce(callback,initialValue)

The parameters are explained below.
callback: A function (also called a reducer) that executes each value in the array, containing four parameters.
previousValue: The value returned by the last callback call, or the provided initial value (initialValue).
currentValue: The element currently being processed in the array.
index: The index of the current element in the array.
array: the array to call reduce on · initialValue: the first parameter of the first callback call. This parameter is not required.
Example

const completedCount = todos.reduce(
(count,todo)=>(todo.completed?count+1:count),
0);

Code explanation:

todos is an array.
The first parameter of reduce() is an arrow function. The first parameter count of this arrow function is the previous return value, and the second parameter todo is the value of the current element.
The second parameter 0 of reduce() is an initialization value, which is used to make the initial value of count 0.
When tracing back to the first value of the array todos, count is 0. todo is the first item in todos, and the return value is increased by one or unchanged (if todo.completed is true, count+1 is returned, otherwise count is returned).
When traversing the second value of the todos array, count is the previous return value. todo is the second item in todos, and the return value is increased by one or remains unchanged.
After the traversal is completed, the number of tasks in the array whose completed attribute is true can be obtained, that is, the number of completed tasks.

filter()

Overview

The filter() method tests all elements with the specified function and creates a new array containing all elements that pass the test.

grammar

array.filter(callback,thisArg)

The parameters are explained below.

callback: A function used to test each element of the array, containing three parameters. Return true to keep the element (pass the test), false to not keep it.
currentValue: The element in the array currently being passed.
index: The index of the element.
array: The array to be traversed.
thisArg: Optional. The this value to use when executing the callback.

return state.filter(todo=>
todo.id!==action.id
)

Code explanation:

state is an array of tasks.
The parameter of filter() is an arrow function. The arrow function has only one parameter, todo, which is the current item in the array. If the judgment statement after the arrow returns true, the current item will be retained, otherwise the current item will be removed.
The purpose of this code snippet is to filter out tasks in the task array whose id is the same as the specified id and return a new task array.

map()

Overview

The map() method returns a new array consisting of the return values ​​of calling a specified method on each element in the original array.

grammar

array.map(callback, thisArg)

The parameters are explained below.

callback: This method is called on the element in the original array and returns a new element. This method contains the following three parameters.
currentValue: The element in the array currently being passed.
·index: The index of the element.
array: The array to be traversed.
thisArg:Optional. The this value to use when executing the callback.

Example

return state.map(todo=>(
todo.id === action.id?
Object.assign({},todo.{ text:action.text}):
todo
));

Code explanation:

state is the state before the change, which is an array.
The argument to map() is an arrow function. The first parameter of the arrow function is todo, and the return value is an expression using the ternary operator to return a new element. If the id matches, a new attribute is merged through 0bject.assign(), that is, a text attribute is added or rewritten to todo, and the attribute value is action.text
The Object.assign() method can copy any number of the source object's own enumerable properties to the target object and then return the target object.

The syntax is Object.assign(target,...sources). target is the target object, and sources is any number of source objects.
This code updates the text property for the tasks specified in the array.

every()

Overview

The every() method is used to test whether all elements in an array pass the test of the specified function.

grammar

array.every(callback,thisArg)

callbak: The function used to test each element.
currentValue: The element in the array currently being passed.
index: The index of the element.
array: The array to be traced.
thisArg: Optional. The this value to use when executing the callback.

Example

const areAllMarked = state.every(todo=>todo.completed)

When the task array is traversed and the completed attribute of each task is true, it returns true.

some()

Overview

The some() method is used to test whether there is at least one element in the array that passes the test of the specified function.

grammar

array.some(callback[,thisArg])

The parameters are explained below.

callback: The function used to test each element.
currentValue: The element in the array currently being passed.
index: The index of the element.
array: The array to be traversed.
thisArg:Optional. The this value to use when executing the callback.

Example

const areAllMarked = state.some(todo=>todo.completed)

Traverse the task array, and return true as long as there is a task whose completed property is true.

Spread Operator

Overview

The spread operator allows an expression to be expanded at some point. Common scenarios include: function parameters, array elements, and deconstruction assignment.
In addition, component props in JSX can also be assigned using the spread operator.
The destructuring assignment syntax is a JavaScript expression that makes it possible to extract data from an array or object and assign it to different variables.

grammar

For function parameters:

myFunction(...iterable0bj);

For array elements:

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

For destructuring assignment:

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

Props for React components:

<App...iterable0bj/>

Example

Expand state
Each item of an array is added to the current array.

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

Expand each property of actions into the component.

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

Summarize

The reduce() method receives a function as an accumulator, and each value in the array (from left to right) is merged to form a single value.
The filter() method tests all elements using the specified function and creates a new array containing all elements that pass the test.
The map() method returns a new array consisting of the return values ​​of calling a specified method on each element in the original array. The every() method tests whether all elements of the array pass the test of the specified function.
The some() method is used to test whether there is at least one element in the array that passes the test of the specified function.
The spread operator allows an expression to be expanded at some point. Commonly used field variables, function parameters, and array construction and assignment. In addition, component props in JSX can also be assigned using the spread operator.

This is the end of this article about array processing in React and Redux. For more information about array processing in React and Redux, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!