Shulou(Shulou.com)06/03 Report--

This article focuses on "React and Redux commonly used array processing functions and syntax", interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Now let the editor to take you to learn "React and Redux commonly used array processing functions and syntax" it!

Reduce ()

Overview

The reduce () method takes a function as an accumulator (accumulator), and each value in the array (from left to right) starts merging and ends up as a value.

Grammar

Array.reduce (callback,initialValue)

The parameters are explained as follows.

Callback: a function (also called reducer) that executes each value in the array and contains four parameters.

PreviousValue: the value returned by the last callback, or the initial value provided (initialValue).

CurrentValue: the element currently being processed in the array.

Index: the index of the current element in the array.

Array: an array of calls to reduce

InitialValue: as the first argument to call callback for the first time. This parameter is not required.

Example

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

Code interpretation:

Todos is an array.

The first argument to reduce () is the arrow function, where the first argument count is the previous return value, and the second argument todo is the value of the current element.

The second parameter 0 of reduce () is an initialization value, which makes the initial value of count 0. 0.

When tracing the first value of the array todos, count is 0.todo is the first item of todos, and the return value is added by one or unchanged (if todo.completed is true, count+1 is returned, otherwise count is returned).

When iterating through the second value of the array todos, count is the previous return value. Todo is the second item of todos, and the return value is added to one or the same.

When the traversal is over, you can get the number of tasks in the array whose completed attribute is true, that is, the number of tasks that have been completed.

Filter ()

Overview

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

Grammar

Array.filter (callback,thisArg)

The parameters are explained as follows.

Callback: a function used to test each element of an array, containing three parameters. Returning true indicates that the meta is retained.

Plain (passed the test), return false is not retained.

CurrentValue: the element currently passed in the array.

Index: the index of the element.

Array: the array that is traversed.

ThisArg: optional. The value of this used when executing the callback.

Return state.filter (todo= > todo.idophilized initiative action.id)

Code interpretation:

State is an array of tasks.

The argument to filter () is the arrow function. The arrow function has only one argument, todo, the current item element of the array

Element, the judgment statement after the arrow, if true is returned, the current item is retained, otherwise, the current item is removed.

The purpose of this code snippet is to filter out the tasks with the same id as the specified id in the task array and return a new task array.

Map ()

Overview

The map () method returns a new array of values returned after each element in the original array calls a specified method.

Grammar

Array.map (callback,thisArg)

The parameters are explained as follows.

Callback: the element in the original array calls this method and returns a new element. The method contains the following three parameters.

CurrentValue: the element currently passed in the array.

Index: the index of the element.

Array: the array that is traversed.

ThisArg: optional. The value of this used when executing the callback.

Example

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

Code interpretation:

State is the state before the change, which is an array.

The argument to map () is an arrow function. The first argument to the arrow function is todo, and the return value is an expression that uses the ternary operator to return the new element. If the id matches, merge a new attribute through 0bject.assign (), that is, add or rewrite a text attribute to the todo with a value of action.text

The Object.assign () method can copy any number of enumerable properties of the source object itself 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.

The purpose of this code is to update the text property for the task specified in the array.

Every ()

Overview

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

Grammar

Array.every (callback,thisArg)

Callbak: the function used to test each element.

CurrentValue: the element currently passed in the array.

Index: the index of the element.

Array: the array that is tracked.

ThisArg: optional. The value of this used when executing the callback.

Example

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

Traverses the task array and returns true. True when the completed property of each task is true.

Some ()

Overview

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

Grammar

Array.some (callback [, thisArg])

The parameters are explained as follows.

Callback: the function used to test each element.

CurrentValue: the element currently passed in the array.

Index: the index of the element.

Array: the array that is traversed.

ThisArg: optional. The value of this used when executing the callback.

Example

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

Traversing the task array returns true. True as long as the completed property of one task is true.

Unfold operator

Overview

The unfold operator allows an expression to expand somewhere. Common scenarios include: function parameters, array elements, deconstruction assignments.

In addition, the component props in JSX can also be assigned using the expansion operator.

The destructuring assignment syntax is an JavaScript expression that makes it possible to extract data from an array or object to assign values to different variables.

Grammar

For function parameters:

MyFunction (. Iterable0bj)

For array elements:

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

Used to deconstruct assignments:

Const [a recalcitrant blemagne... rest] = [1meme 2je 3je 4je 5] const {arecrome bmeme. Rest} = {arese 1rect brego 2je cju 3je dju 4}

Props for React components:

Example

Expand state

Each item of the array 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 the actions into the component.

Summary

The reduce () method takes a function as an accumulator (accumulator), and each value in the array (from left to right) starts merging and ends up as a value.

The filter () method tests all meta-strings using the specified function and creates a new array of elements that all pass the test.

The map () method returns a new number consisting of the return value of each element in the original array after calling a specified method.

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 at least one element in the array has passed the test of the specified function.

The unfold operator allows an expression to expand somewhere. Commonly used field quantity package, function parameters, array structure assignment. In addition, the component props in JSX can also be assigned using the expansion operator.

At this point, I believe that you have a deeper understanding of the "React and Redux commonly used array processing functions and syntax", might as well come to the actual operation! Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.