Vue Element前端應用開發(fā)之常規(guī)的JS處理函數(shù)
1、常規(guī)集合的filter、map、reduce處理方法
filter函數(shù)的主要用途是對數(shù)組元素進行過濾，并返回一個符合條件的元素的數(shù)組
const nums = [10,20,30,111,222,333]
let newNums=nums.filter(function(n){
return n<100
})
輸出：
[10,20,30]
map函數(shù)是對數(shù)組每個元素的映射操作，并返回一個新數(shù)組，原數(shù)組不會改變將newNums中每個數(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ù)主要用于對數(shù)組所有元素的匯總操作，如全部相加、相乘等
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
另外還有一個數(shù)組集合的find方法，和filter方法類似。
find()方法主要用來返回數(shù)組中符合條件的第一個元素（沒有的話，返回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集合，根據(jù)某個關鍵屬性進行查詢，這種處理方式就要用到遞歸了。
例如我定義的一個菜單集合里面，就是這樣一個嵌套的結構，需要根據(jù)名稱來獲得對應的對象的時候，就涉及到了一個遞歸處理函數(shù)。
首先我們來看看菜單的JSON集合。
// 此菜單數(shù)據(jù)一般由服務器端返回
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'
}
]
}
]
}
]
如果我們需要根據(jù)ID來遍歷查詢，就是一個典型的遞歸查詢處理。
// 根據(jù)菜單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的遍歷處理，如下根據(jù)它的鍵值進行處理，注冊全局過濾器的處理操作
// 導入全局過濾器
import * as filters from './filters'
// 注冊全局過濾器
Object.keys(filters).forEach(key => {
Vue.filter(key, filters[key])
})
或者我們在通過API方式獲取數(shù)據(jù)后，對集合進行處理的操作
// 獲取產品類型，用于綁定字典等用途
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()
}
});
又或者請求字典數(shù)據(jù)的時候，進行一個非空值的判斷處理。
// 使用字典類型，從服務器請求數(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()方法也是用于對數(shù)組中的每一個元素執(zhí)行一次回調函數(shù)，但它沒有返回值（或者說它的返回值為undefined，即便我們在回調函數(shù)中寫了return語句，返回值依然為undefined）
注意：如果forEach里有兩個參數(shù)，則第一個參數(shù)為該集合里的元素，第二個參數(shù)為集合的索引;
4、Object.assign賦值方法
在有些場合，我們需要把全新的集合，復制到另一個對象上，替換原來對象的屬性值，那么我們可以利用Object對象的assign方法。
如在編輯界面展示的時候，把請求到的對象屬性復制到表單對象上。
var param = { id: id }
GetProductDetail(param).then(data => {
Object.assign(this.editForm, data);
})
或者查詢的時候，獲得查詢條件，進行部分替換
// 構造常規(guī)的分頁查詢條件
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() 方法可從已有的數(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)
或者我們結合filter函數(shù)對圖標集合進行獲取部分處理
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前端應用開發(fā)之常規(guī)的JS處理函數(shù)的詳細內容，更多關于Vue Element常規(guī)的JS處理函數(shù)的資料請關注腳本之家其它相關文章！
相關文章
這篇文章主要介紹了Vue中Rule的使用方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-02-02
在 Vue.js 的項目中，如果項目結構簡單， 父子組件之間的數(shù)據(jù)傳遞可以使用 props 或者 $emit 等方式，如果是大型項目，很多時候都需要在子組件之間傳遞數(shù)據(jù)，使用vue的狀態(tài)管理工具vuex很好的解決2018-08-08
這篇文章主要介紹了簡述Vue中容易被忽視的知識點，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-12-12
這篇文章主要為大家詳細介紹了vue實現(xiàn)列表無縫循環(huán)滾動，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
這篇文章主要介紹了Vue3?中的?watchEffect?特性詳解,watchEffect?是?Vue3?中非常有用的一個特性，它可以讓我們輕松地監(jiān)聽響應式數(shù)據(jù)的變化，并在數(shù)據(jù)發(fā)生變化時執(zhí)行指定的回調函數(shù)，從而簡化代碼并提高應用的性能，需要的朋友可以參考下2023-04-04
這篇文章主要介紹了vue各種事件監(jiān)聽實例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-06-06
本篇文章主要介紹了詳解在Vue中有條件地使用CSS類，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
element-ui tree結構實現(xiàn)增刪改自定義功能代碼
這篇文章主要介紹了element-ui tree結構實現(xiàn)增刪改自定義功能代碼，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
這篇文章主要介紹了vuex存取值和映射函數(shù)使用說明，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
vue開發(fā)移動端使用better-scroll時click事件失效的解決方案
這篇文章主要介紹了vue開發(fā)移動端使用better-scroll時click事件失效的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2021-07-07