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

reduce()

概述

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

語法

array.reduce(callback,initialValue)

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

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

代碼解釋：

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

filter()

概述

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

語法

array.filter(callback,thisArg)

參數(shù)解釋如下。

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

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

代碼解釋：

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

map()

概述

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

語法

array.map(callback,thisArg)

參數(shù)解釋如下。

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

示例 

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

代碼解釋：

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

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

every()

概述

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

語法

array.every(callback,thisArg)

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

示例

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

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

some()

概述

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

語法

array.some(callback[,thisArg])

參數(shù)解釋如下。

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

示例

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

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

展開運算符

概述

展開運算符允許一個表達式在某處展開。常用的場景包括：函數(shù)參數(shù)、數(shù)組元素、解構(gòu)賦值。
另外，JSX中的組件props也可以使用展開運算符來賦值。
解構(gòu)賦值（destructuring assignment)語法是一個 JavaScript表達式，它使得從數(shù)組或者對象中提取數(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ù)組的每一項到當前的數(shù)組。 

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}/>

總結(jié)

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

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

最新評論