在我們使用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
另外還有一個數組集合的find方法，和filter方法類似。
find()方法主要用來返回數組中符合條件的第一個元素（沒有的話，返回undefined）
var Array = [1,2,3,4,5,6,7]; var result = Array.find(function(value){ return value > 5; //條件 }); console.log(result);//6 console.log(Array);//[1,2,3,4,5,6,7]
同樣我們也可以在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) } }); } })
forEach()方法也是用於對數組中的每一個元素執行一次回調函數，但它沒有返回值（或者說它的返回值為undefined，即便我們在回調函數中寫了return語句，返回值依然為undefined）
注意： 如果forEach里有兩個參數，則第一個參數為該集合里的元素，第二個參數為集合的索引;
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; } }
本站聲明:網站內容來源於博客園,如有侵權,請聯繫我們,我們將及時處理
【其他文章推薦】
※網頁設計一頭霧水該從何著手呢? 台北網頁設計公司幫您輕鬆架站!
※台北網頁設計公司全省服務真心推薦
※想知道最厲害的網頁設計公司"嚨底家"!
※推薦評價好的iphone維修中心
※網頁設計最專業,超強功能平台可客製化
※別再煩惱如何寫文案,掌握八大原則!
