1、常規集合的filter、map、reduce處理方法

filter函式的主要用途是對陣列元素進行過濾，並返回一個符合條件的元素的陣列

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

輸出：

[10,30]

map函式是對陣列每個元素的對映操作，並返回一個新陣列，原陣列不會改變將newNums中每個數字乘2

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

輸出：

[20,40,60,666]

reduce函式主要用於對陣列所有元素的彙總操作，如全部相加、相乘等

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

輸出：

726

程式設計客棧

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

const nums = [10,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,7]

同樣我們也可以在vue裡面，利用require.context的處理機制，遍歷檔案進行處理，也需要用到了filter，如下程式碼所示。

下面程式碼是我對某個資料夾裡面的檔案進行一個過濾處理操作

const req = require.context('vue-awesome/icons',true,/\.js$/)
const requireAll = requireContext => requireContext.keys()

const re = /\.\/(.*)\.jswww.cppcns.com/

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',text: '產品資訊',icon: 'table',children: [
      {
        id: '2-1',pid: '2',text: '產品展示',name: 'product-show',icon: 'table'
      }]
  },{
    id: '3',text: '雜項管理',icon: 'example',children: [
      {
        id: '3-1',pid: '3',text: '圖示管理',name: 'icon',icon: 'example'
      },{
        id: '3-3',text: '樹功能展示',name: 'tree',icon: 'tree'
      },{
        id: '3-2',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;
  }
}

以上就是Vue Element前端應用開發之常規的JS處理函式的詳細內容，更多關於Vue Element常規的JS處理函式的資料請關注我們其它相關文章！