js 用迭代器模式優雅的處理遞迴問題
阿新 • • 發佈:2019-04-02
什麼是迭代器
迴圈陣列或物件內每一項值,在 js 裡原生已經提供了一個迭代器。
var arr = [1, 2, 3]
arr.forEach(function (item) {
console.log(item)
})
實現一個迭代器
var iterator = function (arr, cb) { for (let i = 0; i < arr.length; i++) { cb.call(arr[i], arr[i], i) } } var cb = function (item, index) { console.log('item is %o', item) console.log('index is %o', index) } var arr = [1, 2, 3] iterator(arr, cb) /* 列印: item is 1 index is 0 item is 2 index is 1 item is 3 index is 2 */
實際應用
需求:
- Antd 的巢狀表格元件的資料來源有要求,如果沒有子元素,children 屬性應該設定為 null 或者刪除 children 屬性,實際開發中後端返回的介面卻是沒有子元素時,children 屬性設定為一個空陣列;
- 後端返回的欄位名 categoryId 欄位名更改為 value,name 欄位名更改為 label。
資料結構修改前後示例。
var categoryList = [ { categoryId: 1, name: '1級', children: [ { categoryId: 11, name: '11級', children: [], }, ], }, { categoryId: 2, name: '2級', children: [] } ] // 處理之後資料結構如下 var categoryList = [ { value: 1, label: '1級', children: [ { value: 11, label: '11級', }, ], }, { value: 2, label: '2級', } ]
使用迭代器模式優雅的處理遞迴類問題。
// 資料來源 var categoryList = [ { categoryId: 1, name: '1級', children: [ { categoryId: 11, name: '11級', children: [], }, ], }, { categoryId: 2, name: '2級', children: [] } ] // 迭代器 var iterator = function (arr, cb) { for (let i = 0; i < arr.length; i++) { cb.call(arr[i], arr[i]) } } // 處理每一項 var changeItem = function (item) { // 更改欄位名稱 item.value = item.categoryId item.label = item.name delete item.categoryId delete item.name // 當 children 為空陣列時,刪除 children 屬性 if (item.children == false) { delete item.children } else { iterator(item.children, changeItem) } } // 呼叫迭代器 iterator(categoryList, changeItem) console.log(JSON.stringify(categoryList, null, 4)) /* 列印: [ { "children": [ { "value": 11, "label": "11級" } ], "value": 1, "label": "1級" }, { "value": 2, "label": "2級" } ] */
總結
凡是需要用到遞迴的函式參考迭代器模式,能寫出更優雅,可讀性