目錄1、常規(guī)集合的filter、map、reduce處理方法2、遞歸處理3、forEach遍歷集合處理4、Object.assign賦值方法5、slice() 方法1、常規(guī)集合的filter、map、reduce處理方法

filter函數(shù)的主要用途是對(duì)數(shù)組元素進(jìn)行過濾，并返回一個(gè)符合條件的元素的數(shù)組

const nums = [10,20,30,111,222,333]let newNums=nums.filter(function(n){ return n<100})

輸出：

[10,20,30]

map函數(shù)是對(duì)數(shù)組每個(gè)元素的映射操作，并返回一個(gè)新數(shù)組，原數(shù)組不會(huì)改變將newNums中每個(gè)數(shù)字乘2

const nums = [10,20,30,111,222,333]let newNums=nums.map(function(n){ return n*2})

輸出：

[20,40,60,222,666]

reduce函數(shù)主要用于對(duì)數(shù)組所有元素的匯總操作，如全部相加、相乘等

const nums = [10,20,30,111,222,333]let newNums=nums.reduce(function(preValue,n){ return PreValue+n},0)

輸出：

726

有時(shí)候可以結(jié)合幾種處理方式一起，如下綜合案例所示。

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)

結(jié)果：

120

另外還有一個(gè)數(shù)組集合的find方法，和filter方法類似。

find()方法主要用來返回?cái)?shù)組中符合條件的第一個(gè)元素（沒有的話，返回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的處理機(jī)制，遍歷文件進(jìn)行處理，也需要用到了filter，如下代碼所示。

下面代碼是我對(duì)某個(gè)文件夾里面的文件進(jìn)行一個(gè)過濾處理操作

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 vueAwesomeIcons2、遞歸處理

有時(shí)候，我們需要從一個(gè)JSON集合里面，由于集合是嵌套的，如children里面還有chilren集合，根據(jù)某個(gè)關(guān)鍵屬性進(jìn)行查詢，這種處理方式就要用到遞歸了。

例如我定義的一個(gè)菜單集合里面，就是這樣一個(gè)嵌套的結(jié)構(gòu)，需要根據(jù)名稱來獲得對(duì)應(yīng)的對(duì)象的時(shí)候，就涉及到了一個(gè)遞歸處理函數(shù)。

首先我們來看看菜單的JSON集合。

// 此菜單數(shù)據(jù)一般由服務(wù)器端返回export const asyncMenus = [ { id: ’1’, pid: ’-1’, text: ’首頁(yè)’, icon: ’dashboard’, name: ’dashboard’ }, { id: ’2’, pid: ’-1’, text: ’產(chǎn)品信息’, icon: ’table’, children: [ {id: ’2-1’,pid: ’2’,text: ’產(chǎn)品展示’,name: ’product-show’,icon: ’table’ }] }, { id: ’3’, pid: ’-1’, text: ’雜項(xiàng)管理’, icon: ’example’, children: [ {id: ’3-1’,pid: ’3’,text: ’圖標(biāo)管理’,name: ’icon’,icon: ’example’ }, {id: ’3-3’,pid: ’3’,text: ’樹功能展示’,name: ’tree’,icon: ’tree’ }, {id: ’3-2’,pid: ’3’,text: ’二級(jí)菜單2’,icon: ’tree’,children: [ { id: ’3-2-2’, pid: ’3-2’, text: ’三級(jí)菜單2’, name: ’menu1-1’, icon: ’form’ }] } ] }]

如果我們需要根據(jù)ID來遍歷查詢，就是一個(gè)典型的遞歸查詢處理。

// 根據(jù)菜單id來獲取對(duì)應(yīng)菜單對(duì)象 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 }} } }

這里值得注意的是，不能在遞歸的時(shí)候，使用下面直接返回

return this.FindMenuById(item.children, menuid)

而需要判斷是否有結(jié)果在進(jìn)行返回，否則嵌套遞歸就可能返回undefined類型

var foundItem = this.FindMenuById(item.children, menuid) if (foundItem) { // 只有找到才返回 return foundItem }3、forEach遍歷集合處理

在很多場(chǎng)合，我們也需要對(duì)集合進(jìn)行一個(gè)forEach的遍歷處理，如下根據(jù)它的鍵值進(jìn)行處理，注冊(cè)全局過濾器的處理操作

// 導(dǎo)入全局過濾器import * as filters from ’./filters’// 注冊(cè)全局過濾器Object.keys(filters).forEach(key => { Vue.filter(key, filters[key])})

或者我們?cè)谕ㄟ^API方式獲取數(shù)據(jù)后，對(duì)集合進(jìn)行處理的操作

// 獲取產(chǎn)品類型，用于綁定字典等用途 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() } });

又或者請(qǐng)求字典數(shù)據(jù)的時(shí)候，進(jìn)行一個(gè)非空值的判斷處理。

// 使用字典類型，從服務(wù)器請(qǐng)求數(shù)據(jù) GetDictData(this.typeName).then(data => {if (data) { data.forEach(item => { if (item && typeof (item.Value) !== ’undefined’ && item.Value !== ’’) { that.dictItems.push(item) } });} })

forEach()方法也是用于對(duì)數(shù)組中的每一個(gè)元素執(zhí)行一次回調(diào)函數(shù)，但它沒有返回值（或者說它的返回值為undefined，即便我們?cè)诨卣{(diào)函數(shù)中寫了return語句，返回值依然為undefined）

注意：如果forEach里有兩個(gè)參數(shù)，則第一個(gè)參數(shù)為該集合里的元素，第二個(gè)參數(shù)為集合的索引;

4、Object.assign賦值方法

在有些場(chǎng)合，我們需要把全新的集合，復(fù)制到另一個(gè)對(duì)象上，替換原來對(duì)象的屬性值，那么我們可以利用Object對(duì)象的assign方法。

如在編輯界面展示的時(shí)候，把請(qǐng)求到的對(duì)象屬性復(fù)制到表單對(duì)象上。

var param = { id: id }GetProductDetail(param).then(data => {Object.assign(this.editForm, data);})

或者查詢的時(shí)候，獲得查詢條件，進(jìn)行部分替換

// 構(gòu)造常規(guī)的分頁(yè)查詢條件 var param = {type: this.producttype === ’all’ ? ’’ : this.producttype,pageindex: this.pageinfo.pageindex,pagesize: this.pageinfo.pagesize }; // 把SearchForm的條件加入到param里面，進(jìn)行提交查詢 param.type = this.searchForm.ProductType // 轉(zhuǎn)換為對(duì)應(yīng)屬性 Object.assign(param, this.searchForm);5、slice() 方法

slice() 方法可從已有的數(shù)組中返回選定的元素。

語法如下所示。

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)

或者我們結(jié)合filter函數(shù)對(duì)圖標(biāo)集合進(jìn)行獲取部分處理

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; }}

以上就是Vue Element前端應(yīng)用開發(fā)之常規(guī)的JS處理函數(shù)的詳細(xì)內(nèi)容，更多關(guān)于Vue Element常規(guī)的JS處理函數(shù)的資料請(qǐng)關(guān)注好吧啦網(wǎng)其它相關(guān)文章！