>  기사  >  웹 프론트엔드  >  자바스크립트 순회 방법 소개(코드 예)

자바스크립트 순회 방법 소개(코드 예)

不言
不言앞으로
2018-10-24 17:38:492077검색

이 글은 JavaScript 순회 방법(코드 예제)을 소개합니다. 필요한 친구들이 참고할 수 있기를 바랍니다.

오브젝트객체를 배열로 변환하면 유용할텐데 그러다가 순회방법이 생각나서 저도 기록해보고싶다

#🎜 🎜#1. 루프 종료 또는 중단

  • 루프에서 벗어나 루프 본문이 종료됨

  • continueout 이 루프는 다음 루프로 진행되며 루프 본문은 아직 끝나지 않았습니다

  • return 함수 실행을 종료합니다

for (let i = 0; i < 5; i++) {
    if (i == 3) break;
    console.log("The number is " + i);
    /* 只输出 0 , 1 , 2 , 到3就跳出循环了 */
}
for (let i = 0; i <= 5; i++) {
    if (i == 3) continue;
    console.log("The number is " + i);
    /* 不输出3,因为continue跳过了,直接进入下一次循环 */
}
#🎜 🎜#2. 순회 방법

    가짜 데이터
  • #🎜🎜 #

    const temporaryArray = [6,2,3,4,5,1,1,2,3,4,5];
    const objectArray = [
        {
            id: 1,
            name: &#39;d&#39;
        }, {
            id: 2,
            name: &#39;d&#39;
        }, {
            id: 3,
            name: &#39;c&#39;
        }, {
            id: 1,
            name: &#39;a&#39;
        }
    ];
    const temporaryObject = {
        a: 1,
        b: 2,
        c: 3,
        d: 4,
    };
    const length = temporaryArray.length;

    # 🎜🎜#
  • 일반적인 for 루프 탐색
  • for(let i = 0; i < length; i++) {
        console.log(temporaryArray[i]);
    }

  • for in 루프
    #🎜🎜 #
    /* for in 循环主要用于遍历普通对象,
    * 当用它来遍历数组时候,也能达到同样的效果,
    * 但是这是有风险的,因为 i 输出为字符串形式,而不是数组需要的数字下标,
    * 这意味着在某些情况下,会发生字符串运算,导致数据错误
    * */
    for(let i in temporaryObject) {
        /* hasOwnProperty只加载自身属性 */
        if(temporaryObject.hasOwnProperty(i)) {
            console.log(temporaryObject[i]);
        }
    }
  • for of 루프, 반복 가능한 객체를 순회하는 데 사용됨
    for(let i of temporaryArray) {
        console.log(i);
    }
    #🎜🎜 #
  • forEach의 첫 번째 값은 배열의 현재 인덱스 값이고 두 번째 값은 배열을 순회할 수만 있고 반환 값이 없으며 이탈할 수 없습니다. 루프.

let a = temporaryArray.forEach(function(item, index) {
    console.log(index, item);
});
    # 🎜🎜#
  • map은 새 배열을 반환하고 배열을 순회만 할 수 있습니다

    #🎜🎜 #
    temporaryArray.map(function(item) {
        console.log(item);
    });
    filter는 배열의 내장 객체이며 변경되지 않습니다. 원래 배열에는 반환 값이 있습니다
  • temporaryArray.filter(function(item) {
        console.log(item%2 == 0);
    });
    #🎜 🎜#
some은 일치하는 값이 있는지 확인합니다
  • let newArray = temporaryArray.some(function(item) {
        return item > 1;
    });
    console.log(newArray);
    every는 모든 값이 있는지 여부를 결정합니다. ​​배열에서 조건을 충족합니다
    • let newArray1 = temporaryArray.every(function(item) {
          return item > 6;
      });
      console.log(newArray1);
    reduce( function(total, currentValue, currentIndex, array) {}, [] )
    • total: 초기값 또는 계산 후 반환값, currentValue를 순회할 때 현재 요소 Value, currentIndex 현재 인덱스 값, 배열 현재 배열
    • If no 매개변수 지정 - 빈 배열[], 누적 변수 total은 첫 ​​번째 요소의 값으로 기본값
    매개변수 빈 배열을 지정한 후 누적 변수 total 초기 값은 빈 배열이 됩니다
      let temporaryObject3 = {};
      let newArray2 = objectArray.reduce(function(countArray, currentValue) {
          /* 利用temporaryObject3里存放id来判断原数组里的对象是否相同,若id相同,则继续下一步,不同则将该对象放入新数组中
           * 则countArray为去重后的数组
            * */
          temporaryObject3[currentValue.id] ? '' : temporaryObject3[currentValue.id] = true && countArray.push(currentValue);
          return countArray;
      }, []);
      console.log(newArray2);
      #🎜 🎜#
    • 위 내용은 자바스크립트 순회 방법 소개(코드 예)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

    성명:
    이 기사는 segmentfault.com에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제