react+redux教程（三）reduce()、filter()、map()、some()、every()、...展開屬性

標籤：

reduce()、filter()、map()、some()、every()、...展開屬性   這些概念屬於es5、es6中的文法，跟react+redux並沒有什麼聯絡，我們直接在https://developer.mozilla.org/en-US/ 這裡可以搜尋到相關api文檔。

但是redux的官方樣本中包含了這些文法的用法，我們正好可以在程式中學習這些文法。這裡全部預設使用es6的寫法。

例子

這是官方的todomvc的例子（https://github.com/lewis617/myReact/tree/master/redux-examples/todomvc）：

reduce()

遍曆數組，在每一項元素後面觸發一個回呼函數，經過計算返回一個累加的值。

components/MainSection.js 62行

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

 

todos是個數組，reduce()的第一個參數是個箭頭文法，也就是個回呼函數，這個回呼函數的第一個參數是上一個傳回值（但是這裡被初始化為0）,第二個參數是當前元素的值。reduce()的第二個參數是個初始化值（不必需），初始化了上一個元素的值（這裡是count）

遍曆數組todos的第一個值的時候，count為0，todo是todos的第一項，傳回值加一或者不變。（條件 ? 結果1 : 結果2三元運算）

遍曆數組todos的第二個值的時候，count為上一個傳回值，todo是todos的第二項，傳回值加一或者不變。

……

遍曆結束後，即可得到數組中，completed屬性為true的個數，也就是已完成的任務的個數。

filter()

遍曆數組，在每一項元素後面觸發一個回呼函數，通過判斷，保留或移除當前項，最後返回一個新數組。

顧名思義就是過濾。

reducers/todos.js 24行

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

state是個任務數組，filter()裡面只有一個參數，就是個箭頭函數，該函數只有一個參數是todo，也就是數組的每一項元素，箭頭後面那個判斷語句，如果返回true則保留當前項，反之移除當前項。

有的同學會問，todo.id !== action.id前為什麼沒有return，這是箭頭函數的文法，箭頭兩端就是輸入輸出，不用寫return。如果用es5的寫法就是：

return state.filter(function(todo) {
　　return todo.id !== action.id
　　}
)

該程式碼片段的作用是，過濾掉任務數組中，id與指定id相同的任務。返回一個新的任務數組。

map()

遍曆數組，在每一項元素後面觸發一個回呼函數，通過計算，返回一個新的當前項，最後返回一個新數組。

reducers/todos.js 29行

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

箭頭後面的值是個三元運算子，也就是return的新元素。如果id匹配，則通過Object.assign()合并一個新的屬性，也就是給todo添加或者重寫一個text屬性，屬性值為action.text。

Object.assign()第一個參數是target，就是目標，第二個第三個以及後面的參數都是source，也就是拷貝的源，是不是很像jquery外掛程式中的extend？

這個代碼的作用是給數組中指定的任務更新text屬性。

some()、every()

遍曆數組，在每一項元素後面觸發一個回呼函數，通過判斷，返回一個布爾值。some()是只要有一個滿足判斷，就返回true，every()是只要有一項不滿足判斷，就返回false。

components/MainSection.js  19 行

 const atLeastOneCompleted = this.props.todos.some(todo => todo.completed)

遍曆任務數組，有一個任務的屬性completed為true，就返回true。

reducers/todos.js 43行

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

遍曆任務數組，每一項任務的completed屬性均為true時候，返回true。

...展開屬性

reducers/todos.js 20行

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

展開state數組的每一項到當前的數組

components/MainSection.js  72 行

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

展開actions的每一個屬性到組件中，最後在props上可以擷取到。

 

react+redux教程（三）reduce()、filter()、map()、some()、every()、...展開屬性