JS 배열의 반복 방법: 필터, 감소, 모든, 일부

Guanhui
풀어 주다: 2020-05-09 09:14:19
앞으로
2557명이 탐색했습니다.

JS에서 배열의 반복 방법은 forEach, map, filter, Reduce, Every, some입니다.

JS에서 일상적인 배열 처리 과정에서 우리는 일반적으로 for 루프를 사용하여 이를 구현합니다. 루프를 제외하고 사용됨

forEach(루프)

배열의 각 항목이 각각 한 가지 작업을 수행하도록 합니다.

let a = [1,2,3];
a.forEach(function(value,i){
    console.log("第" + (i + 1) + "项 :" +  value)
})
// 第1项 :1
// 第2项 :2
// 第3项 :3
로그인 후 복사

map(mapping)

forEach 함수와 유사하지만 map에는 반환이 있습니다. value , 원래 배열을 변경하지 않고 새 배열을 생성합니다

let a = [1,2,3];
a.map(function(value,i){
    return value * 2
})
// 第1项 :2
// 第2项 :4
// 第3项 :6
로그인 후 복사

map과 forEach의 비교:

// 没有返回值的forEach:
let a = [1, 2, 3];
a = a.forEach(function (value, i) {
    return value * 2 // undefine
})
// 有返回值的map:
let b = [1, 2, 3];
b = b.map(function (value, i) {
    return value * 2 // [2,4,6]
})
로그인 후 복사

가능한 함정: map으로 처리된 데이터 사이에 쉼표 구분 기호가 더 많습니다

원인: 맵 순회 후에도 여전히 배열입니다. , 쉼표로 구분된 배열 요소를 DOM에 삽입하면 배열 요소 사이의 쉼표 구분 기호도 가져옵니다. 맵 순회 후 이를 문자열로 직접 연결하면 이 문제가 사라집니다. it : map 뒤에는 .join('')

reduce(누적)

reduce() 메서드가 함수를 누산기로 수신하고 배열의 각 값(왼쪽에서 오른쪽으로)이 감소하기 시작하며 최종 계산은 값입니다.

reduce()는 함수 구성을 위한 고차 함수로 사용될 수 있습니다.

참고: Reduce()는 빈 배열에 대해 콜백 함수를 실행하지 않습니다.

전항과 후항 계산
let a = [1, 2, 3];
a = a.reduce(function (prev, next) {
    return prev + next // 1+2+3 = 6
})
로그인 후 복사

filter(필터)

조건에 맞지 않는 값을 필터링하고 새 배열 반환

let a = [1, 2, 3];
a = a.filter(function (value, i) {
    return value > 2 
})
console.log(a) // 3
로그인 후 복사

모든(모두)

여부 판단 각 요소가 만족되면 조건이 충족되고, 그렇지 않으면 false

let a = [1, 2, 3];
a = a.every(function (value, i) {
    return value > 2 
})
console.log(a) // false
로그인 후 복사

일부(임의)

각 요소의 요소가 조건을 만족하는지 판단하고, 그렇다면 true를 반환하고, 그렇지 않으면 false

let a = [1, 2, 3];
a = a.every(function (value, i) {
    return value > 2 
})
console.log(a) // true
로그인 후 복사

추천 튜토리얼: "

JS 튜토리얼"

위 내용은 JS 배열의 반복 방법: 필터, 감소, 모든, 일부의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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