Vue 필수 지식 포인트 의 foreach()사용

머리말
전단 개발 에서 순환 을 통 해 원 하 는 내용 을 얻 는 경우 가 많 습 니 다.그리고 이런 상황 이 개발 에 없 는 곳 이 없 으 면 본 박문 은 비교적 자주 사용 되 고 전형 적 인 지식 점 인 foreach()의 사용 을 공유 합 니 다.
foreach()는 전단 개발 에서 배열 을 조작 하 는 방법 입 니 다.주요 기능 은 배열 을 옮 겨 다 니 는 것 입 니 다.사실은 for 순환 의 업그레이드 버 전 입 니 다.이 문 구 는 리 셋 함수 가 있어 야 합 니 다.리 턴 함수 의 형 참 은 다음 과 같다.1.value:배열 의 내용 을 옮 겨 다 니 는 것 이다.2.index:대응 하 는 배열 의 색인,3.array:배열 자체.
Vue 항목 에서 탭 의 순환 은 v-for 를 사용 하고 방법 안의 순환 은 foreach 를 사용 합 니 다.
1.foreach()사용 원리
foreach()방법 은 주로 배열 의 모든 요 소 를 호출 하고 요 소 를 리 셋 함수 에 전달 하 는 데 사 용 됩 니 다.주의해 야 할 것 은:foreach()방법 은 빈 배열 에 대해 서 는 리 셋 함 수 를 실행 하지 않 습 니 다.
foreach:즉,Array.prototype.foreach 는 배열 만 있 는 방법 으로 for 순환 으로 배열 을 옮 겨 다 니 는 것 과 같 습 니 다.용법:arr.foreach(function(item,index,array){...}),리 셋 함 수 는 3 개의 인자 가 있 습 니 다.item 은 현재 옮 겨 다 니 는 요소 이 고 index 는 현재 옮 겨 다 니 는 요소 아래 표 시 됩 니 다.array 는 배열 자체 입 니 다.foreach 방법 은 null 과 undefined 요 소 를 건 너 뛰 지 않 습 니 다.예 를 들 어 배열[1,undefine,null,2]의 네 가지 요 소 는 모두 옮 겨 다 니 며 맵 과 의 차 이 를 주의 합 니 다.
2.forEach()문법
array.forEach(function(currentValue, index, array), thisValue)
예:
array.forEach(function(item,index,array){ ... })
3.foreach()기타 관련 내용
1.foreach()의 continue 와 break:
foreach()자체 가 contine 과 break 문 구 를 지원 하지 않 지만 some 와 every 를 통 해 이 루어 질 수 있 습 니 다.
2.foreach()와 map 의 차이 점:
foreach()는 반환 값 이 없 으 며,성질 상 for 순환 과 같 으 며,항목 마다 function 함 수 를 실행 합 니 다.즉,map 는 새로운 배열 로 돌아 가 고 원래 배열 은 변 하지 않 으 며,foreach 는 원래 배열 을 바 꾸 는 것 입 니 다.
3.foreach()와 for 순환 의 대비:
for 순환 절차 가 많 고 복잡 하 며 foreach 순환 이 간단 하고 사용 하기 쉬 우 며 실수 하기 쉽 지 않 습 니 다.
4.foreach()예:
실례 1:

let array = [1, 2, 3, 4, 5, 6, 7];
array.forEach(function (item, index) {
    console.log(item); //          
});

실례 2:

var array=[1, 2, 3, 4, 5];
array.forEach(function(item, index, array){
    array[index]=4 * item;
});
console.log(array);    //    ：        ，        4

실례 3:

 <el-checkbox v-for="(item) in searchContent"
                       :label="item.id"
                       :key="item.id"
                       class="checkbox">
            <span>{{item.value}}{{item.checked}}</span>
          </el-checkbox>
  handle(index, row) {
        this.selectedCheck=[];
        let a = this;
        this.jurisdiction = true;
        this.roleId = row.id;
        this.$http.get(“/user/resources", {
            params: {userId: this.userId}
          }).then((response) => {
          a.searchContent = response.body;
          a.searchContent.forEach(function (b) {
            if(b[‘checked']){
              a.selectedCheck.push(b.id);
            }
          })
        })

실례 4:

var userList = new Array();
        var data = {};
        if (response.data.userList != null && response.data.userList.length > 0) {
          response.data.userList.forEach((item, index) => {

            data.a = item.a;
            data.b = item.b;
            data.arr1 = new Array();
            data.arr1[0] = item.c;
            data.arr1[1] = item.d;
            data.e = item.e;
            data.f = item.f;
            data.arr2 = new Array();
            data.arr2[0] = item.j;
            data.arr2[1] = item.h;
            userList.push(data);
          });
        }

실례 5:

searchDept(keyWord, callback) {
       if (keyWord) {
        this.$service.data
          .searchDepts({ data: { full_name: keyWord } })
          .then(r => {
            if (r.Success) {
              let arr = [];
              r.Data.Result.forEach(element => {
                arr.push({
                  id: element.work_id,
                  value: element.full_name,
                  dept: element
                });
              });
              callback(arr);
            }
         });
      }
    },

총결산
Vue 필수 지식 포인트 인 foreach()사용 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 Vue foreach()사용 내용 은 저희 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 읽 어 주시 기 바 랍 니 다.앞으로 도 많은 응원 부 탁 드 리 겠 습 니 다!