React與Redux之數組處理講解

Posted on by

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

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之數組處理講解的文章就介紹到這瞭,更多相關React與Redux之數組處理內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：