JavaScript 배열에서 특정 객체를 찾는 방법

JavaScript 배열에서 특정 객체를 찾는 방법

주어진 객체 배열에서 특정 객체를 찾아야하는 요구 사항을 발견 한 적이 있습니까? 이 게시물에서는 JavaScript 배열에서 특정 객체를 찾는 다양한 방법을 살펴보겠습니다. 아래 목록에 표시된 것과 같은 배열이 있다고 가정하고 [...]

6min read

주어진 객체 배열에서 특정 객체를 찾아야하는 요구 사항을 발견 한 적이 있습니까? 이 게시물에서는 JavaScript 배열에서 특정 객체를 찾는 다양한 방법을 살펴보겠습니다. 아래 목록과 같은 배열이 있고 id가 '4'인 개체가 있는지 확인해야 한다고 가정해 보겠습니다.

    var tasks = [
                { 'Id': '1', 'Title': 'Go to Market 99', 'Status': 'done' },
                { 'Id': '2', 'Title': 'Email to manager', 'Status': 'pending' },
                { 'Id': '3', 'Title': 'Push code to GitHub', 'Status': 'done' },
                { 'Id': '4', 'Title': 'Go for running', 'Status': 'done' },
                { 'Id': '5', 'Title': 'Go to movie', 'Status': 'pending' },
    ];

특정 개체를 검색하기 위해 Array 프로토타입 find 메소드를 사용합니다. 이것은 주어진 기준에 대한 값을 반환하고, 그렇지 않으면 'undefined'를 반환합니다. 두 개의 매개 변수, 즉 하나의 필수 콜백 함수와 선택적 개체를 사용하며, 이는 콜백 함수 내에서 this의 값으로 설정됩니다.

Array.prototype.find(callbackFunction[,thisArgs])
  1. 콜백 함수는 특정 요소에 대해 주어진 조건이 true가 아닐 때까지 배열의 각 요소에 대해 호출됩니다.
  2. 콜백 함수에서 this의 값이 될 객체는 선택적 매개 변수이며, 전달되지 않으면 콜백 함수에서 값이 undefined로 설정됩니다.

find 메서드의 콜백 함수 매개 변수는 세 개의 매개 변수를 사용합니다.

  1. element: 배열에서 처리되고 있는 현재 요소입니다.
  2. index: 현재 처리 중인 요소의 인덱스
  3. array: find 메서드가 호출되는 배열입니다
배열 find 메소드에 있는 콜백 함수의 매개변수

아래 목록과 같이 콜백 함수가 있다고 가정해 보겠습니다. 현재 요소, 요소의 인덱스 및 배열을 인쇄합니다.

function CallbackFunctionToFindTaskById(element, index, array) {

        console.log(element);// print element being processed 
        console.log(index); // print index of the element being processed 
        console.log(array); // print the array on which find method is called 

    }

find 메소드는 어떻게 작동합니까?

  • JavaScript find 메소드는 배열의 각 요소에 대해 콜백 함수를 실행합니다. 따라서 배열에 5개의 요소가 있으면 콜백 함수가 5번 실행됩니다.
  • JavaScript find 메소드는 특정 요소에 대한 진정한 기준을 찾으면 콜백 함수의 실행을 중단합니다.
  • 주어진 기준이 요소에 대해 true인 경우 JavaScript find 메서드는 해당 특정 요소를 반환하고 나머지 요소에 대해 콜백 함수를 실행하지 않습니다.
  • 요소에 대한 기준이 true가 아닌 경우 JavaScript find 메서드는 undefined를 반환합니다.
  • JavaScript find 메서드는 설정되지 않았거나 삭제된 인덱스에 대해 콜백 함수를 실행하지 않습니다.
  • JavaScript find 메소드는 항상 element, index, array의 세 가지 인수를 사용하여 콜백 함수를 실행합니다.

find 메소드를 사용하는 몇 가지 예를 살펴보겠습니다!

고정된 기준에서 개체 찾기

아래 목록과 같이 tasks 배열이 있습니다.

var tasks = [
             { 'Id': '1', 'Title': 'Go to Market 99', 'Status': 'done' },
             { 'Id': '2', 'Title': 'Email to manager', 'Status': 'pending' },
             { 'Id': '3', 'Title': 'Push code to GitHub', 'Status': 'done' },
             { 'Id': '4', 'Title': 'Go for running', 'Status': 'done' },
             { 'Id': '5', 'Title': 'Go to movie', 'Status': 'pending' },
];

id가 '4'인 객체를 찾고 싶습니다. 아래 목록에 표시된 대로 그렇게 할 수 있습니다.

function CallbackFunctionToFindTaskById(task) {
   return task.Id === '4';
}

var task = tasks.find(CallbackFunctionToFindTaskById);
console.log(JSON.stringify(task));

위 목록에서는 tasks 배열의 find 메소드에 콜백 함수 CallbackFunctionToFindTaskById를 전달하고 있습니다.  항상 콜백 함수의 첫 번째 매개 변수는 요소 매개 변수를 나타냅니다. 여기서 작업은 콜백 함수 내부의 요소를 나타냅니다. 따라서 작업은 현재 처리 중인 요소를 나타냅니다.

콜백 함수에서 현재 작업의 Id를 확인하고 4와 같으면 작업을 반환합니다.  이 시나리오에서는 조건이 콜백 함수 내에서 고정됩니다.

콜백 함수에서 전달된 기준에 대한 객체 찾기

이전 예제에는 id가 '4'인 개체를 반환하는 고정 기준이 있었습니다. 그러나 콜백 함수를 호출하는 동안 기준을 전달해야 하는 요구 사항이 있을 수 있습니다. 콜백 함수에서 this의 값으로 객체를 전달할 수 있습니다. 다음 목록에 표시된 동일한 tasks 배열을 다시 고려해 보겠습니다

var tasks = [
         { 'Id': '1', 'Title': 'Go to Market 99', 'Status': 'done' },
         { 'Id': '2', 'Title': 'Email to manager', 'Status': 'pending' },
         { 'Id': '3', 'Title': 'Push code to GitHub', 'Status': 'done' },
         { 'Id': '4', 'Title': 'Go for running', 'Status': 'done' },
         { 'Id': '5', 'Title': 'Go to movie', 'Status': 'pending' },
];

다음으로 아래 목록과 같이 콜백 함수 FindTaskById를 생성해 보겠습니다.

function FindTaskById(task) {        
   console.log(this);
}

아시다시피 콜백 함수 내부에 "this"의 값을 인쇄하고 있습니다. 다음으로, 아래 목록과 같이 tasks 배열의 find 메소드에 FindByTask 콜백 함수를 전달합니다.

var task = tasks.find(FindTaskById,['4','67']);

이 경우 이 내부 콜백 함수의 값은 4와 67의 두 값을 가진 개체로 설정되었습니다. 콘솔에서 아래와 같은 출력을 가져와야 합니다.

this의 값은 tasks 배열에 5개의 요소가 있기 때문에 5번 인쇄됩니다. Id가 4로 설정된 개체를 반환하려면 아래 목록과 같이 콜백 함수를 수정해야 합니다

   function FindTaskById(task) {

        if (task.Id === this[0]) {
            return task;
        }
    }

    var task = tasks.find(FindTaskById, ['4', '67']);
    console.log(JSON.stringify(task));

콜백 함수에서 첫 번째 속성이 4로 설정된 이 개체의 값을 전달합니다. 따라서 작업이 있는지 확인합니다. id 가 this[0] 과 같거나 그렇지 않으면 id 가 4 인 객체를 반환합니다.

결론

이 게시물에서는 JavaScript Array find 메소드와 콜백 함수의 다양한 옵션에 대해 배웠습니다. 보다 생산적인 JavaScript 개발자가 되려면 find 메소드를 더 잘 이해하는 것이 필수적이며 즐겁게 읽으셨기를 바랍니다!

어떻게
데모 요청