React與Redux常用的數(shù)組處理函數(shù)和語(yǔ)法

本篇內(nèi)容主要講解“React與Redux常用的數(shù)組處理函數(shù)和語(yǔ)法”，感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“React與Redux常用的數(shù)組處理函數(shù)和語(yǔ)法”吧!

reduce()

概述

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

語(yǔ)法

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);

代碼解釋?zhuān)?/p>

·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è)包含所有通過(guò)測(cè)試的元素的新數(shù)組。

語(yǔ)法

array.filter(callback,thisArg)

參數(shù)解釋如下。

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

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

代碼解釋?zhuān)?/p>

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

map()

概述

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

語(yǔ)法

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
));

代碼解釋?zhuān)?/p>

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

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

every()

概述

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

語(yǔ)法

array.every(callback,thisArg)

callbak:用來(lái)測(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)元素通過(guò)了指定函數(shù)的測(cè)試。

語(yǔ)法

array.some(callback[,thisArg])

參數(shù)解釋如下。

·callback:用來(lái)測(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.

展開(kāi)運(yùn)算符

概述

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

語(yǔ)法

用于函數(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/>

示例

展開(kāi)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,
];

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

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

總結(jié)

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

到此，相信大家對(duì)“React與Redux常用的數(shù)組處理函數(shù)和語(yǔ)法”有了更深的了解，不妨來(lái)實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！