React與Redux常用的數組處理函數和語法

本篇內容主要講解“React與Redux常用的數組處理函數和語法”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“React與Redux常用的數組處理函數和語法”吧!

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也可以使用展開運算符來賦值。 

到此，相信大家對“React與Redux常用的數組處理函數和語法”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！