정보실

웹학교

정보실

javascript JavaScript에서 배열 메서드를 사용하는 방법 : Iteration 메서드 - JavaScript guide

본문

목차​

  1. JavaScript 개발자 콘솔을 사용하는 방법
  2. HTML에 JavaScript를 추가하는 방법
  3. JavaScript에서 구문 및 코드 구조 이해
  4. JavaScript로 주석을 작성하는 방법
  5. JavaScript에서 데이터 유형 이해
  6. JavaScript에서 문자열로 작업하는 방법
  7. JavaScript에서 문자열을 인덱싱, 분할 및 조작하는 방법
  8. JavaScript에서 데이터 유형을 변환하는 방법
  9. JavaScript에서 변수, 범위 및 게양 이해
  10. 연산자를 사용하여 JavaScript에서 수학을 수행하는 방법
  11. JavaScript에서 배열 이해
  12. JavaScript에서 배열 메서드를 사용하는 방법 : Mutator 메서드
  13. JavaScript에서 배열 메서드를 사용하는 방법 : Accessor 메서드
  14. JavaScript에서 배열 메서드를 사용하는 방법 : Iteration 메서드
  15. JavaScript에서 객체 이해
  16. JavaScript에서 날짜 및 시간 이해
  17. JavaScript에서 이벤트 이해
  18. JavaScript에서 JSON으로 작업하는 방법
  19. JavaScript로 조건문을 작성하는 방법
  20. JavaScript에서 Switch 문을 사용하는 방법
  21. JavaScript에서 While 및 Do ... While 루프 사용
  22. JavaScript에서 For 루프를 생성하는 방법
  23. JavaScript에서 함수를 정의하는 방법
  24. JavaScript의 프로토 타입 및 상속 이해
  25. JavaScript에서 클래스 이해
  26. JavaScript에서 객체 메소드를 사용하는 방법
  27. JavaScript에서 This, Bind, Call 및 Apply 이해

JavaScript에서 배열 메서드를 사용하는 방법 : Iteration 메서드 


소개 


JavaScript에서 배열 데이터 유형은 요소 목록으로 구성됩니다. JavaScript 개발자가 배열을 사용할 수 있는 유용한 내장 메소드가 많이 있습니다. 원래 배열을 수정하는 메서드는 mutator 메서드라고 하며 새로운 값이나 표현을 반환하는 메서드는 액세서 메서드라고 합니다.


반복 메서드라고 하는 세 번째 종류의 배열 메서드가 있습니다.이 메서드는 한 번에 하나씩 배열의 모든 항목에서 작동하는 메서드입니다. 이러한 메소드는 루프와 밀접하게 연관되어 있습니다. 이 튜토리얼에서는 반복 방법에 중점을 둘 것입니다.


이 자습서를 최대한 활용하려면 배열 만들기, 인덱싱, 수정 및 반복에 익숙해야 합니다.이 자습서는 JavaScript의 배열 이해 자습서에서 검토 할 수 있습니다.


이 자습서에서는 반복 방법을 사용하여 배열을 반복하고, 배열의 각 항목에 대해 기능을 수행하고, 배열의 원하는 결과를 필터링하고, 배열 항목을 단일 값으로 줄이고, 배열을 검색하여 값이나 인덱스를 찾습니다.


참고 : Array.prototype은 Array 객체 자체를 참조하므로 Array 메서드는 Array.prototype.method()로 올바르게 작성됩니다. 간단히하기 위해 단순히 이름을 method()로 나열합니다. 


https://www.digitalocean.com/community/tutorials/how-to-use-array-methods-in-javascript-iteration-methods 


화살표 함수 이해 


이 학습서 전체의 많은 예제는 JavaScript 화살표 함수 표현식을 사용합니다.이 표현식은 등호와 그 뒤에 부호 : =>로 표시됩니다.


함수는 실행할 수 있는 재사용 가능한 코드 블록입니다. 전통적으로 함수는 다음 구문으로 작성 될 수 있습니다.


var example = function() {
  // code to execute
}

example();

작성 당시 최신 버전의 JavaScript는 화살표 함수를 사용할 수 있으며 다음 구문으로 작성할 수 있습니다.


var example = () => {
  // code to execute
}

example();

두 경우 모두 괄호에는 매개 변수가 포함될 수 있습니다. 하나의 매개 변수 만 있는 경우 다음과 같이 괄호를 생략 할 수 있습니다.


var example = parameter1 => {
  // code to execute
}

이 자습서의 예제 전체에서 화살표 함수 구문을 사용합니다. JavaScript의 함수에 대한 자세한 내용을 읽고 이해하려면 Mozilla 개발자 네트워크의 함수 참조를 읽으십시오.


forEach() 


forEach() 메소드는 배열의 각 요소에 대한 함수를 호출합니다.


변수 fish에 할당 된 다음 배열로 시작하겠습니다.


let fish = [ "piranha", "barracuda", "cod", "eel" ];

forEach()를 사용하여 fish 배열의 각 항목을 콘솔에 인쇄 할 수 있습니다.


// Print out each item in the array
fish.forEach(individualFish => {
    console.log(individualFish);
})

그렇게 하면 다음과 같은 결과가 나타납니다.


Output
piranha barracuda cod eel

이를 수행하는 또 다른 방법은 for 루프 키워드를 사용하여 배열의 length 속성에 대해 테스트하는 것입니다.


// Loop through the length of the array
for (let i = 0; i < fish.length; i++) {
    console.log(fish[i]);
}

위의 코드는 forEach() 메소드를 사용하는 것과 동일한 출력을 갖습니다. 배열과 함께 사용하기 위한 반복 방법으로서 forEach()는 이 특정 작업에 대해 더 간결하고 간단합니다.


map() 


map() 메서드는 배열의 각 요소에 대한 함수 호출 결과를 사용하여 새 배열을 만듭니다.


반복 메소드 map()을 사용하는 방법에 대한 예제를 위해 루프의 각 반복을 콘솔에 인쇄 할 수 있습니다. map()은 원래 배열을 변경하지 않고 대신 새 배열 값을 반환합니다. forEach()와 달리 map() 메소드는 새 변수에 지정되어야 합니다.


let fish = [ "piranha", "barracuda", "cod", "eel" ];

// Print out each item in the array
let printFish = fish.map(individualFish => {
    console.log(individualFish);
});

printFish;
Output
piranha barracuda cod eel

map()을 사용하여 배열의 각 항목 값을 변경할 수도 있습니다. 이를 설명하기 위해, 물고기 배열의 각 항목 끝에 s를 추가하여 각 단어를 복수화 합니다.

// Pluralize all items in the fish array
let pluralFish = fish.map(individualFish => {
    return `${individualFish}s`;
});

pluralFish;
Output
[ 'piranhas', 'barracudas', 'cods', 'eels' ]

원래 피쉬 변수는 변경되지 않았지만 pluralFish는 이제 원래 변수의 수정 된 버전을 포함합니다.


filter() 


filter() 메소드는 주어진 테스트 결과를 전달하는 요소로 새 배열을 작성합니다.


filter()를 사용하여 특정 문자로 시작하는 목록의 항목만 포함하는 새 배열을 반환 할 수 있습니다. 이를 위해 문자열 인덱싱을 사용하여 배열의 각 문자열 항목에서 첫 번째 항목 (또는 문자)을 호출 할 수 있습니다.


let seaCreatures = [ "shark", "whale", "squid", "starfish", "narwhal" ];

// Filter all creatures that start with "s" into a new list
let filteredList = seaCreatures.filter(creature => {
  return creature[0] === "s";
});

filteredList;
Output
[ 'shark', 'squid', 'starfish' ]

배열의 어떤 항목이 0 인덱스에 s가 있는지 테스트하고 결과를 새 변수에 할당했습니다.


filter()는 반복 메소드이며 원래 배열을 변경하지 않습니다.


reduce() 


reduce() 메소드는 배열을 단일 값으로 줄입니다.


이것은 배열의 모든 숫자의 합을 찾는 것과 같이 숫자와 함께 일반적으로 나타납니다.


let numbers = [ 42, 23, 16, 15, 4, 8 ];

// Get the sum of all numerical values
let sum = numbers.reduce((a, b) => {
    return a + b;
});

sum;
Output
108

reduce()는 문자열 및 기타 데이터 유형과 함께 사용할 수도 있습니다. reduce()에 의해 리턴 되는 값은 숫자, 문자열, 배열 또는 기타 데이터 유형일 수 있습니다. reduce()는 원래 배열을 변경하지 않는 반복 메소드입니다.


find() 


find() 메소드는 주어진 테스트를 통과 한 배열의 첫 번째 값을 리턴 합니다.

예를 들어, 우리는 바다 생물의 배열을 만들 것입니다.


let seaCreatures = [ "whale", "octopus", "shark", "cuttlefish", "flounder" ];

그런 다음 find() 메소드를 사용하여 배열의 생물이 두족류 인지 테스트합니다.


// Check if a given value is a cephalopod
const isCephalopod = cephalopod => {
    return [ "cuttlefish", "octopus" ].includes(cephalopod);
}

seaCreatures.find(isCephalopod);
Output
octopus

문어는 isCephalopod() 함수의 테스트를 만족시키기 위해 배열의 첫 번째 항목이므로 반환되는 첫 번째 값입니다.


find() 메소드는 많은 값을 포함하는 배열로 작업하는 데 도움이 될 수 있습니다.


findIndex() 


findIndex() 메소드는 주어진 테스트를 통과 한 배열의 첫 번째 인덱스를 리턴합니다.


find() 메소드에서 동일한 seaCreatures 예제를 사용할 수 있습니다.


let seaCreatures = [ "whale", "octopus", "shark", "cuttlefish", "flounder" ];

isCephalopod 테스트를 사용하여 첫 번째 일치 값 대신 인덱스 번호를 찾습니다.


// Check if a given value is a cephalopod
const isCephalopod = cephalopod => {
    return [ "cuttlefish", "octopus" ].includes(cephalopod);
}

seaCreatures.findIndex(isCephalopod);
Output
1

octopus는 테스트와 일치하는 첫 번째 항목이며 인덱스는 1이므로 반환 되는 인덱스 번호입니다.


테스트가 만족 되지 않으면 findIndex()는 -1을 반환합니다.


const isThereAnEel = eel => {
    return [ "eel" ].includes(eel);
}

seaCreatures.findIndex
Output
-1

findIndex() 메소드는 많은 항목을 포함하는 배열로 작업 할 때 특히 유용합니다.


결론 


이 학습서에서는 JavaScript의 기본 제공 반복 배열 메소드를 검토했습니다. 반복 방법은 배열의 모든 항목에서 작동하며 종종 새로운 기능을 수행합니다. 배열을 반복하고 배열의 각 항목 값을 변경하고 배열을 필터링 및 축소하고 값과 색인을 찾는 방법을 살펴 보았습니다.


페이지 정보

조회 125회 ]  작성일19-10-28 09:54

웹학교