循序漸進VUE+Element 前端應用開發(7)--- 介紹一些常規的JS處理函式
在我們使用VUE+Element 處理介面的時候,往往碰到需要利用JS集合處理的各種方法,如Filter、Map、reduce等方法,也可以涉及到一些物件屬性賦值等常規的處理或者遞迴的處理方法,以前對於這些不是很在意,但往往真正使用的時候,需要了解清楚,否則很容易腦袋出現短路的情況。本篇隨筆列出一些在VUE+Element 前端開發中經常碰到的JS處理場景,供參考學習。
1、常規集合的filter、map、reduce處理方法
filter函式的主要用途是對陣列元素進行過濾,並返回一個符合條件的元素的陣列
const nums = [10,20,30,111,222,333] let newNums=nums.filter(function(n){ return n<100 })
輸出:[10,20,30]
map函式是對陣列每個元素的對映操作,並返回一個新陣列,原陣列不會改變將newNums中每個數字乘2
const nums = [10,20,30,111,222,333] let newNums=nums.filter(function(n){ return n*2 })
輸出:[20,40,60,222,666]
reduce函式主要用於對陣列所有元素的彙總操作,如全部相加、相乘等
const nums = [10,20,30,111,222,333] let newNums=nums.reduce(function(preValue,n){ return PreValue+n },0)
輸出:726
有時候可以結合幾種處理方式一起,如下綜合案例所示。
const nums = [10,20,30,111,222,333] let newNums=nums.filter(function(n){ return n<100 }).map(function(n){ return n*2 }).reduce(function(preValue,n){ return preValue+n },0)
結果:120
同樣我們也可以在vue裡面,利用require.context的處理機制,遍歷檔案進行處理,也需要用到了filter,如下程式碼所示。
下面程式碼是我對某個資料夾裡面的檔案進行一個過濾處理操作
const req = require.context('vue-awesome/icons', true, /\.js$/) const requireAll = requireContext => requireContext.keys() const re = /\.\/(.*)\.js/ const vueAwesomeIcons = requireAll(req).filter((key) => { return key.indexOf('index.js') < 0 }).map(i => { return i.match(re)[1] }) export default vueAwesomeIcons
2、遞迴處理
有時候,我們需要從一個JSON集合裡面,由於集合是巢狀的,如children裡面還有chilren集合,根據某個關鍵屬性進行查詢,這種處理方式就要用到遞迴了。
例如我定義的一個選單集合裡面,就是這樣一個巢狀的結構,需要根據名稱來獲得對應的物件的時候,就涉及到了一個遞迴處理函式。
首先我們來看看選單的JSON集合。
// 此選單資料一般由伺服器端返回 export const asyncMenus = [ { id: '1', pid: '-1', text: '首頁', icon: 'dashboard', name: 'dashboard' }, { id: '2', pid: '-1', text: '產品資訊', icon: 'table', children: [ { id: '2-1', pid: '2', text: '產品展示', name: 'product-show', icon: 'table' }] }, { id: '3', pid: '-1', text: '雜項管理', icon: 'example', children: [ { id: '3-1', pid: '3', text: '圖示管理', name: 'icon', icon: 'example' }, { id: '3-3', pid: '3', text: '樹功能展示', name: 'tree', icon: 'tree' }, { id: '3-2', pid: '3', text: '二級選單2', icon: 'tree', children: [ { id: '3-2-2', pid: '3-2', text: '三級選單2', name: 'menu1-1', icon: 'form' } ] } ] } ]
如果我們需要根據ID來遍歷查詢,就是一個典型的遞迴查詢處理。
// 根據選單id來獲取對應選單物件 FindMenuById(menuList, menuid) { for (var i = 0; i < menuList.length; i++) { var item = menuList[i]; if (item.id && item.id === menuid) { return item } else if (item.children) { var foundItem = this.FindMenuById(item.children, menuid) if (foundItem) { // 只有找到才返回 return foundItem } } } }
這裡值得注意的是,不能在遞迴的時候,使用下面直接返回
return this.FindMenuById(item.children, menuid)
而需要判斷是否有結果在進行返回,否則巢狀遞迴就可能返回undefined型別
var foundItem = this.FindMenuById(item.children, menuid) if (foundItem) { // 只有找到才返回 return foundItem }
3、forEach遍歷集合處理
在很多場合,我們也需要對集合進行一個forEach的遍歷處理,如下根據它的鍵值進行處理,註冊全域性過濾器的處理操作
// 匯入全域性過濾器 import * as filters from './filters' // 註冊全域性過濾器 Object.keys(filters).forEach(key => { Vue.filter(key, filters[key]) })
或者我們在通過API方式獲取資料後,對集合進行處理的操作
// 獲取產品型別,用於繫結字典等用途 GetProductType().then(data => { if (data) { this.treedata = [];// 樹列表清空 data.forEach(item => { this.productTypes.set(item.id, item.name) this.typeList.push({ key: item.id, value: item.name }) var node = { id: item.id, label: item.name } this.treedata.push(node) }) // 獲取列表資訊 this.getlist() } });
又或者請求字典資料的時候,進行一個非空值的判斷處理。
// 使用字典型別,從伺服器請求資料 GetDictData(this.typeName).then(data => { if (data) { data.forEach(item => { if (item && typeof (item.Value) !== 'undefined' && item.Value !== '') { that.dictItems.push(item) } }); } })
4、Object.assign賦值方法
在有些場合,我們需要把全新的集合,複製到另一個物件上,替換原來物件的屬性值,那麼我們可以利用Object物件的assign方法。
如在編輯介面展示的時候,把請求到的物件屬性複製到表單物件上。
var param = { id: id } GetProductDetail(param).then(data => { Object.assign(this.editForm, data); })
或者查詢的時候,獲得查詢條件,進行部分替換
// 構造常規的分頁查詢條件 var param = { type: this.producttype === 'all' ? '' : this.producttype, pageindex: this.pageinfo.pageindex, pagesize: this.pageinfo.pagesize }; // 把SearchForm的條件加入到param裡面,進行提交查詢 param.type = this.searchForm.ProductType // 轉換為對應屬性 Object.assign(param, this.searchForm);
5、slice() 方法
slice() 方法可從已有的陣列中返回選定的元素。
語法如下所示。
arrayObject.slice(start,end)
如下案例所示。
let red = parseInt(color.slice(0, 2), 16) let green = parseInt(color.slice(2, 4), 16) let blue = parseInt(color.slice(4, 6), 16)
或者我們結合filter函式對圖示集合進行獲取部分處理
vueAwesomeIconsFiltered: function() { const that = this var list = that.vueAwesomeIcons.filter(item => { return item.indexOf(that.searchForm.label) >= 0 }) if (that.searchForm.pagesize > 0) { return list.slice(0, that.searchForm.pagesize) } else { return list; } }