초보자가 사용하는 forEach (), sort () 및 filter ()

7730 단어 webdevjavascript

forEach()


ES6는 그룹에서 순환할 수 있도록 forEach() 방법을 도입했습니다.그룹의 형식이 "object"라는 것을 알고 있을 수도 있습니다.기본 데이터 유형인 문자열, 숫자, 부울, 정의되지 않음 및 기호 유형과 다릅니다.예를 들어 우리 컨트롤러가typeof 연산자를 기록하여 배열의 typeof를 찾으면 * 객체*가 다음과 같이 기록됩니다.
const yummies = ['Ice-cream','Cupcake','Donut','Cupcake'];
console.log(typeof yummies)// will log "object"
좋습니다. 이것은 우리가 토론한 forEach 방법의 상하문에서 무엇을 의미하는지 알 수 있습니다.다시 거슬러 올라가면 방법은 대상에 특정한 함수이다.따라서 "slice()"라는 배열 방법을 적용할 수 있습니다. 이 방법은 2개의 인자를 받아들일 것입니다.
  • 수조에서 절편 방법을 시작하는 시작 색인
  • 그룹의 마지막 인덱스입니다. 그 전에 슬라이스를
  • 로 끝내십시오.
    절편 방법이 "yummies"수조에 적용되면 절편 요소가 있는 새로운 수조로 되돌아옵니다.예:
    const slicedYummies = yummies.slice(0,3);
    console.log(slicedYummies);
    */
    will console.log["Ice-cream", "Cupcake", "Donut"]
    As the slice() method  starts at index 0 and ends just before index 3. Which is index 2,. Therefore, the 2nd Cupcake which is at index 3 isn't present
    */
    
    
    이와 유사하게 우리는 JavaScript의 모든 그룹에 forEach () 방법을 적용할 수 있다.이 방법은 매개 변수가 더 필요하다.먼저 문법을 윤색하다.

    구문:


    arr.forEach(함수 fxnName(currentItem, index,arr),thisArg) {
    //여기 코드가 있어요.
    });
    forEach() 메서드는 다음 매개변수를 사용합니다.

    forEach() 메서드의 첫 번째 매개변수:


    첫 번째 매개 변수는 그룹의 모든 요소에 대한 함수입니다.이것을 콜백 함수라고 하는데, 이것은 거꾸로 세 개의 매개 변수를 받아들일 수 있다.
  • 현재 항목: 그룹의 현재 항목.필수 매개변수입니다.예를 들어, 아이스크림은 배열의 시작/현재 항목이 됩니다.
  • 인덱스: 그룹의 현재 항목의 인덱스입니다.선택 가능한 매개변수입니다.예를 들어 색인 0.
  • 배열: forEach () 가 실행할 배열입니다.선택 가능한 매개변수입니다.예를 들어 본 예에서 ['아이스크림','종이컵 케이크','도넛','종이컵 케이크'].

  • forEach() 메서드의 두 번째 매개변수:


    forEach 메서드에서 사용할 수 있는 두 번째 매개변수는 다음과 같습니다.
    1.thisArg: 콜백을 실행할 때 사용하는 값입니다.선택 가능한 매개변수입니다.이것은 뒤의 다른 문장에서 소개될 것이다.
    yummies 배열의 forEach () 방법을 살펴보겠습니다.
    yummies.forEach(function logYummies(item,index, yummies){
      console.log(item + ' The index is ' + index +' The whole array is: ' + arr);
    });
    
    /*
    Console.logs the following:
    
    "Ice-cream The index is 0 The whole array is: Ice-cream,Cupcake,Donut,Cupcake"
    
    "Cupcake The index is 1 The whole array is: Ice-cream,Cupcake,Donut,Cupcake"
    
    "Donut The index is 2 The whole array is: Ice-cream,Cupcake,Donut,Cupcake"
    
    "Cupcake The index is 3 The whole array is: Ice-cream,Cupcake,Donut,Cupcake"
    
    
    */
    
    위의 예에서 forEach () 방법은 "."를 통해 yummies 그룹에 적용됩니다.부호가 이렇게 맛있어.forEach().forEach () 방법은 logYummies라는 함수를 매개 변수로 하고, 이 함수는 항목, 인덱스, 전체 그룹 등 세 개의 매개 변수를 순서대로 받아들인다.
    우리 또 다른 간단한 예를 봅시다.5개의 디지털 데이터 형식 요소를 포함하는 그룹이 있습니다.따라서 각 요소에 2를 곱하여 숫자를 곱하기를 원합니다.
    for 순환은 다음과 같이 보입니다.
    let myMultiplier = [1,2,3,4,5];
    
    for(let i =0; i < myMultiplier.length; i++){
      myMultiplier[i] = myMultiplier[i] * 2;
    }
    console.log(myMultiplier)// will log to [2, 4, 6, 8, 10]
    
    forEach 방법을 사용하면 다음과 같습니다.
    
    myMultiplier.forEach(function multiply(item, index, myMultiplier){
    myMultiplier[index] = item * 2
    })
    
    console.log(myMultiplier)// will log to [2, 4, 6, 8, 10]
    

    필터()


    ES6 filter() 메서드는 JavaScript의 배열에도 사용됩니다.그것은 일부 필터 조건에 따라 하나의 그룹을 필터하고 새로운 그룹으로 되돌아갈 것이다
    필터링된 요소를 사용합니다.

    문법


    forEach() 방법과 유사:
    무더기필터(함수 fxnName(currentItem, index,array),thisArg) {
    //일부 코드
    });

    filter () 메서드의 첫 번째 매개변수:


    첫 번째 매개 변수는 그룹의 요소에서 실행될 함수입니다.이것을 콜백 함수라고 하는데, 이것은 거꾸로 세 개의 매개 변수를 받아들일 수 있다.
  • 현재 항목: 그룹의 현재 항목.필수 매개변수입니다.예를 들어, 아이스크림은 배열의 시작/현재 항목이 됩니다.
  • 인덱스: 그룹의 현재 항목의 인덱스입니다.선택 가능한 매개변수입니다.예를 들어 색인 0.
  • 그룹: filter () 에서 실행될 그룹입니다.선택 가능한 매개변수입니다.예를 들어 본 예에서 ['아이스크림','종이컵 케이크','도넛','종이컵 케이크'].

  • filter () 메서드의 두 번째 매개변수:


    필터링 방법에서 사용할 수 있는 두 번째 매개변수는 다음과 같습니다.
    1.thisArg: 콜백을 실행할 때 사용하는 값입니다.선택 가능한 매개변수입니다.이것은 뒤의 다른 문장에서 소개될 것이다.
    유미스 그룹을 필터링하고 중복된 종이컵 케이크를 삭제합시다.

    const yummies = ['Ice-cream','Cupcake','Donut','Cupcake'];
    const  filteredYummies = yummies.filter(function filterYums(currentItem,index,yummies) {
      if (yummies.indexOf(currentItem) === index) {
        return currentItem;
      }
    })
    console.log(filteredYummies);//will log ["Ice-cream", "Cupcake", "Donut"];
    
    /*
    The indexOf() method returns the **index/POSITION** of the first occurrence of a specified string value (example 0,1,2 etc)
    The filter() method 'filters' through each index and applies 
    the indexOf method on an array item at a particular index
    We check if the index of the currentItem in the yummies array is it's first occurrence 
    if so then it is part of the filteredYummies array
    So during the 4th iteraton , index or  *i* is 3 and the *first* occurrence of *Cupcakes* using yummies.indexOf("Cupcake) was 1.
    Therefore 3 === 1 is false
    All in All:  the indexOf/position of the item in the array should be equal to *i*
    */
    
    

    정렬 ()


    말 그대로sort() 방법은 그룹의 요소를 정렬합니다.기본적으로 배열의 요소는 오름차순이나 알파벳순으로 정렬됩니다.

    문법


    패턴 이름입니다.정렬 (),

    예:



    const yummies = ['Ice-cream','Cupcake','Donut','Cupcake'];
    yummies.sort();
    console.log(yummies)
    
    /* 
    console.log will output the following in alphabetical order:
    ["Cupcake", "Cupcake", "Donut", "Ice-cream"]
    */
    

    내림차순과 같은 대체 순서에 따라 정렬할 수도 있습니다.이 경우sort () 방법에 비교기 함수를 전달합니다.현재 구문은 다음과 같습니다.
    패턴 이름입니다.정렬 (비교 함수);
    또 다른 예를 들어 Z-a의 알파벳 내림차순으로 유미스 수조 항목을 정렬합니다.

    예제 2


    const yummies = ['Ice-cream','Cupcake','Donut','Cupcake'];
    function descendingOrder(a,b){
      return b > a;
    }
    yummies.sort(descendingOrder);
    console.log(yummies)// will output ["Ice-cream", "Donut", "Cupcake", "Cupcake"]
    
    

    좋은 웹페이지 즐겨찾기