本文將介紹一些常用的數(shù)組處理函數(shù)和語法，如reduce()、filter()、map()、every()、some()、展開運(yùn)算符。這些知識(shí)和React與Redux本身沒有直接關(guān)系，但是本章的示例中包含了這些函數(shù)和語法的用法，我們正好可以在程序中學(xué)習(xí)它們。另外值得一提的是，reduce()、filter()、map()等函數(shù)的思想來自函數(shù)式編程，感謝JavaScript是一門函數(shù)式編程語言，讓原本復(fù)雜的邏輯處理變得如此簡單。

reduce()

概述

reduce()方法接收一個(gè)函數(shù)作為累加器（accumulator),數(shù)組中的每個(gè)值（從左到右）開始合并，最終為一個(gè)值。

語法

array.reduce(callback,initialValue)

參數(shù)解釋如下。
·callback:執(zhí)行數(shù)組中每個(gè)值的函數(shù)（也可以叫reducer),包含四個(gè)參數(shù)。 
previousValue:上一次調(diào)用回調(diào)返回的值，或者是提供的初始值（initialValue).
currentValue:數(shù)組中當(dāng)前被處理的元素。
index:當(dāng)前元素在數(shù)組中的索引。
array:調(diào)用reduce的數(shù)組
·initialValue:作為第一次調(diào)用callback的第一個(gè)參數(shù)。這個(gè)參數(shù)不是必需的。
示例

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

代碼解釋：

·todos是一個(gè)數(shù)組。
reduce()的第一個(gè)參數(shù)是箭頭函數(shù)，這個(gè)箭頭函數(shù)的第一個(gè)參數(shù)count是上一個(gè)返回值，第二個(gè)參數(shù)todo是當(dāng)前元素的值。
·reduce()的第二個(gè)參數(shù)0是個(gè)初始化值，作用是使count的初始值為0.
追歷數(shù)組todos的第一個(gè)值的時(shí)候，count為0.todo是todos的第一項(xiàng)，返回值加一或者不變（如果todo.completed為true,則返回count+1,否則返回count).
遍歷數(shù)組todos的第二個(gè)值的時(shí)候，count為上一個(gè)返回值。todo是todos的第二項(xiàng)，返回值加一或者不變。
遍歷結(jié)束后，即可得到數(shù)組中completed屬性為true的個(gè)數(shù)，也就是已完成的任務(wù)的個(gè)數(shù)。

filter()

概述

filter()方法使用指定的函數(shù)測(cè)試所有元素，并創(chuàng)建一個(gè)包含所有通過測(cè)試的元素的新數(shù)組。

語法

array.filter(callback,thisArg)

參數(shù)解釋如下。

·callback:用來測(cè)試數(shù)組的每個(gè)元素的函數(shù)，包含三個(gè)參數(shù)。返回true表示保留該元
素（通過測(cè)試），返回false則不保留。
·currentValue:數(shù)組中當(dāng)前被傳遞的元素。
index:元素的索引。
array:被遍歷的數(shù)組。
·thisArg:可選。執(zhí)行callback時(shí)使用的this值。

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

代碼解釋：

state是個(gè)任務(wù)數(shù)組。
·filter()的參數(shù)是箭頭函數(shù)。該箭頭函數(shù)只有一個(gè)參數(shù)todo,也就是數(shù)組的當(dāng)前項(xiàng)元
素，箭頭后面那個(gè)判斷語句，如果返回true則保留當(dāng)前項(xiàng)，反之則移除當(dāng)前項(xiàng)。
該代碼段的作用是，過濾掉任務(wù)數(shù)組中id與指定id相同的任務(wù)，返回一個(gè)新的任務(wù)數(shù)組。

map()

概述

map()方法返回一個(gè)由原數(shù)組中的每個(gè)元素調(diào)用一個(gè)指定方法后的返回值組成的新數(shù)組。

語法

array.map(callback,thisArg)

參數(shù)解釋如下。

·callback:原數(shù)組中的元素調(diào)用該方法后返回一個(gè)新的元素。該方法包含如下三個(gè)參數(shù)。
currentValue:數(shù)組中當(dāng)前被傳遞的元素。
·index:元素的索引。
array:被遍歷的數(shù)組。
thisArg:可選。執(zhí)行callback時(shí)使用的this值。

示例 

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

代碼解釋：

state是變化前的state,是一個(gè)數(shù)組。
map()的參數(shù)是個(gè)箭頭函數(shù)。該箭頭函數(shù)的第一個(gè)參數(shù)是todo,返回值是一個(gè)使用三元運(yùn)算符的表達(dá)式，用于返回新元素。如果id匹配，則通過0bject.assign()合并一個(gè)新的屬性，也就是給todo添加或者重寫一個(gè)text屬性，屬性值為action.text
Object.assign()方法可以把任意數(shù)目的源對(duì)象自身的可枚舉屬性拷貝給目標(biāo)對(duì)象，然后返回目標(biāo)對(duì)象。

語法為Object.assign(target,...sources).target是目標(biāo)對(duì)象，sources是任意數(shù)目的源對(duì)象。
這段代碼的作用是為數(shù)組中指定的任務(wù)更新text屬性。

every()

概述

every()方法用于測(cè)試數(shù)組中所有元素是否都通過了指定函數(shù)的測(cè)試。

語法

array.every(callback,thisArg)

callbak:用來測(cè)試每個(gè)元素的函數(shù)。
currentValue:數(shù)組中當(dāng)前被傳遞的元素。
index:元素的索引。
array:被追歷的數(shù)組。
·thisArg:可選。執(zhí)行callback時(shí)使用的this值。

示例

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

遍歷任務(wù)數(shù)組、每一項(xiàng)任務(wù)的completed屬性均為true時(shí)候，返回true.

some()

概述

some()方法用于測(cè)試數(shù)組中是否至少有一項(xiàng)元素通過了指定函數(shù)的測(cè)試。

語法

array.some(callback[,thisArg])

參數(shù)解釋如下。

·callback:用來測(cè)試每個(gè)元素的函數(shù)。
currentValue:數(shù)組中當(dāng)前被傳遞的元素。
index:元素的索引。
array:被遍歷的數(shù)組。
thisArg:可選。執(zhí)行callback時(shí)使用的this值。

示例

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

遍歷任務(wù)數(shù)組、只要有一項(xiàng)任務(wù)的completed屬性為true，返回true.

展開運(yùn)算符

概述

展開運(yùn)算符允許一個(gè)表達(dá)式在某處展開。常用的場(chǎng)景包括：函數(shù)參數(shù)、數(shù)組元素、解構(gòu)賦值。
另外，JSX中的組件props也可以使用展開運(yùn)算符來賦值。
解構(gòu)賦值（destructuring assignment)語法是一個(gè) JavaScript表達(dá)式，它使得從數(shù)組或者對(duì)象中提取數(shù)據(jù)賦值給不同的變量成為可能。

語法

用于函數(shù)參數(shù)：

myFunction(...iterable0bj);

用于數(shù)組元素：

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

用于解構(gòu)賦值：

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
數(shù)組的每一項(xiàng)到當(dāng)前的數(shù)組。 

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

展開actions的每一個(gè)屬性到組件中。

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

總結(jié)

reduce()方法接收一個(gè)函數(shù)作為累加器（accumulator),數(shù)組中的每個(gè)值（從左到右）開始合并，最終為一個(gè)值。
·filter()方法使用指定的函數(shù)測(cè)試所有元索，并創(chuàng)建一個(gè)包含所有通測(cè)試的元素的新數(shù)組。
map()方法返回一個(gè)由原數(shù)組中的每個(gè)元素調(diào)用一個(gè)指定方法后的返回值組成的新數(shù)
·every()方法測(cè)試數(shù)組的所有元素是否都通過了指定函數(shù)的測(cè)試。
·some()方法用于測(cè)試數(shù)組中是否至少有一·項(xiàng)元素通過了指定函數(shù)的測(cè)試。
·展開運(yùn)算符允許一個(gè)表達(dá)式在某處展開。常用的場(chǎng)量包托，函數(shù)參數(shù)、數(shù)組構(gòu)賦值。另外，JSX中的組件props也可以使用展開運(yùn)算符來賦值。 

到此這篇關(guān)于React與Redux之?dāng)?shù)組處理講解的文章就介紹到這了,更多相關(guān)React與Redux之?dāng)?shù)組處理內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論