> 웹 프론트엔드 > JS 튜토리얼 > JS 배열 순회 방법 요약

JS 배열 순회 방법 요약

零到壹度
풀어 주다: 2018-04-21 15:24:17
원래의
1652명이 탐색했습니다.

JS 배열 순회는 프로젝트에서 사용해야 합니다. 우아한 코드를 작성하려면 올바른 위치에 메서드를 사용해야 합니다. 여기서는 es6을 사용하여 변환을 빌드해야 합니다. es5 환경에서는 이것이 이 기사의 초점이 아니며 다음 기사에서 이에 대해 쓸 수 있습니다.

1. for 루프

는 가장 자주 사용되며 프런트 엔드에서 사용되므로 처음에는 for 루프만 사용한다는 의미입니다. . .

let arr = [&#39;123&#39;, &#39;456&#39;, &#39;789&#39;];for (let i = 0; i < arr.length; i ++) {
    console.log(arr[i]);
}
로그인 후 복사

가장 일반적으로 사용되지만 최적화할 여지가 있습니다.

for (let i = 0, len = arr.length; i < len; i ++) {
    console.log(arr[i]);
}
로그인 후 복사

임시 변수를 사용하여 배열 길이를 반복적으로 얻지 않도록 길이 값을 저장합니다.

2. for...of 루프

es6의 새로운 루프 방법은 es5의 for 루프보다 더 간단하고 효율적입니다. 또한 세 가지 새로운 방법을 제공합니다.

  1. key()는 키 이름을 순회하는 것입니다.

  2. value()는 키 값 순회입니다.

  3. entries()는 키-값 쌍 순회입니다.

let arr = [&#39;科大讯飞&#39;, &#39;政法BG&#39;, &#39;前端开发&#39;];
for (let item of arr) {  
  console.log(item);
}
// 输出数组索引
for (let item of arr.keys()) {  
  console.log(item);
}
// 输出内容和索引
for (let [item, val] of arr.entries()) {  
  console.log(item + &#39;:&#39; + val);
}
로그인 후 복사

3. foreach 루프

배열의 foreach 메서드가 사용됩니다. 더 자주 발생하지만 성능이 좋지 않습니다. for 루프보다 약합니다. 빈 배열 요소를 자동으로 생략할 수 있다는 장점이 있으며 이는 자동으로 비우는 것과 같습니다.

let arr = [&#39;科大讯飞&#39;, ,  &#39;政法BG&#39;, , &#39;前端开发&#39;];
arr.forEach((val,index)=>console.log(index,val));
로그인 후 복사

4. 필터 루프

에는 주로 배열을 필터링하는 데 사용되는 루프 함수가 있으며 함수에 맞는 요소 모음을 반환하는 메서드를 받습니다.

let arr = [{
    label: &#39;科大讯飞&#39;,    
    value: 1
}, {
    label: &#39;政法BG&#39;,    value: 2
}, {
    label: &#39;前端开发&#39;,    value: 3
}];

const arr1 = arr.filter(list => list.value === 1);
console.log(arr1);
로그인 후 복사

5. 일부 루프

는 필터와 동일한 기능을 가지고 있습니다. 차이점은 배열에 개체가 있는지 확인하는 데 사용되는 부울 값을 반환한다는 것입니다.

if (arr.some(list => list.value === 1)) {
    console.log(&#39;执行了!&#39;)
}
로그인 후 복사

그래서 if에서 자주 사용됩니다.

6. 맵 루프

교체 기능은 원래 배열의 각 요소에 대해 콜백 함수를 호출하여 반환된 값 집합을 반환합니다.

let arr = [1, 2, 3, 4];
onst arr1 = arr.map(list => list * 2);
console.log(arr1);
로그인 후 복사

위는 일반적으로 사용되는 배열 순회 방법입니다. 앞으로는 여기저기서 for 루프를 사용하는 대신 실제 상황에 따라 하나의 방법을 사용할 수 있습니다. ㅋㅋㅋ Java 8의 HashMap(저장소 구조, 함수 구현) , 확장 최적화, 스레드 안전성, 순회 방법)


데이터 구조 재검토: 이진 트리의 일반적인 방법과 세 가지 순회 방법 Java 구현

위 내용은 JS 배열 순회 방법 요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿