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]
맵 함수는 그룹의 모든 요소에 대한 매핑 작업이며, 새로운 그룹을 되돌려줍니다. 원수 그룹은 newNums의 모든 숫자를 2에 곱하는 것을 바꾸지 않습니다.

const nums = [10,20,30,111,222,333]
let newNums=nums.map(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 방법도 있습니다.
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의 처리 메커니즘은 파일을 훑어보고 처리하기 위해 필터를 사용해야 합니다. 아래 코드와 같습니다.
다음 코드는 내가 어떤 폴더 안의 파일을 필터 처리하는 것이다

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입니다.)
주의: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)

또는 필터 함수와 결합하여 아이콘 집합을 일부 처리합니다

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 처리 함수에 대한 자료는 저희 다른 관련 글을 주목해 주십시오!