정보실

웹학교

정보실

javascript JavaScript 단순화 – .some() 및 .find() 사용

본문

.map(), .reduce() 및 .filter()에 대한 기사의 엄청난 양의 뷰에 따라 JavaScript 개발자의 무기고에 유용한 도구 인 두 가지 배열 메소드를 더 공유해야 한다고 생각했습니다. .some() 및 .find().


https://medium.com/poka-techblog/simplify-your-javascript-use-some-and-find-f9fb9826ddfd 


.some() 


이 배열 방법을 사용하면 하나 이상의 값이 원하는 것과 일치하는지 확인할 수 있습니다. 그 말이 잘 들리지 않으면 예를 들어 설명해 드리겠습니다.


비밀 조직을 위해 일하는 요원 목록은 다음과 같습니다.


var operatives = [
{ id: 12, name: 'Baze Malbus', pilot: false },
{ id: 44, name: 'Bodhi Rook', pilot: true },
{ id: 59, name: 'Chirrut Îmwe', pilot: false },
{ id: 122, name: 'Jyn Erso', pilot: false }
]; 


당신의 요원들 사이에 조종사가 있는지 알고 싶습니다. 그 목표를 달성하는 방법에는 여러 가지가 있습니다. 대부분의 사람들은 아마도 .forEach()를 사용하고 다음과 같이 할 것입니다.


var listHasPilots = false;operatives.forEach(function (operative) {
if (operative.pilot) {
listHasPilots = true;
}
});


목록에 파일럿이 포함되어 있는지 확인하기 위해 많은 줄이 있습니다. 

.some()을 사용해 봅시다!


var listHasPilots = operatives.some(function (operative) {
return operative.pilot;
}); 


화살표 함수로 더 간결해질 수도 있습니다 (ES6 지원, Babel 또는 TypeScript 필요).


const listHasPilots = operatives.some(operative => operative.pilot); 


어떻게 작동합니까? 


.some() 함수를 인수로 전달합니다. 이 함수는 배열의 각 값에 대해 실행됩니다. 그런 다음 값이 작성한 조건에 맞는지 확인할 수 있습니다.

함수는 부울 값을 반환해야 합니다 (진실 / 거짓 값도 작동 함).

하나의 true가 반환되면 .some() 자체가 true를 반환합니다.

조건에서 처리 될 때 값이 없으면 true를 반환하고 (모두 false를 반환하면) .some()은 false를 반환합니다.


단일 true가 반환 되자마자 .some()은 다른 배열 값 확인을 중지합니다. 위의 예에서, 두 번째 요원인 Bodhi Rook이 조종사이므로 이 기능은 두 번만 실행됩니다. 다른 조종사를 확인할 필요가 없습니다.


TL; DR : 일부 배열 값이 원하는 값과 일치하면 .some()이 true를 반환합니다. 그렇지 않으면 false를 반환합니다.


.every() 


주석에서 지적했듯이 .every()를 사용하여 배열의 모든 값이 조건과 일치하는지 확인할 수도 있습니다. .some()과 똑같이 작동하지만 모든 발생이 일치하는 경우에만 true를 반환합니다.


.find() 


이 배열 방법은 원하는 대로 정확하게 수행합니다. 원하는 것을 찾습니다. 간단히 말해 .find ()는 전달 된 조건에 해당하는 첫 번째 값을 반환합니다. 이전과 동일한 데이터로 작동하는 것을 보겠습니다.


다음은 요원 목록입니다.


var operatives = [
{ id: 12, name: 'Baze Malbus', pilot: false },
{ id: 44, name: 'Bodhi Rook', pilot: true },
{ id: 59, name: 'Chirrut Îmwe', pilot: false },
{ id: 122, name: 'Jyn Erso', pilot: false }
]; 


우리가 순위에 조종사가 있는지 묻는 대신이 시간을 제외하고는 이전과 동일합니다. .find() 사용하여 필요한 값을 출력 해 봅시다 :


var firstPilot = operatives.find(function (operative) {
return operative.pilot;
}); 


ES6의 화살표 함수로 더 짧게 :


const firstPilot = operatives.find(operative => operative.pilot); 


보시다시피 코드는 .some()과 정확히 동일합니다. 유일한 차이점은 찾기 위해 일부를 변경했다는 것입니다! 그러나 이제 부울을 반환하는 대신 목록의 첫 번째 파일럿을 반환합니다.


강조하겠습니다 : .find() 첫 번째 일치를 반환합니다. 조건에 맞는 값이 더 있으면 중요하지 않습니다. 첫 번째 경기만 반환됩니다. 모든 일치하는 목록이 필요한 경우 .find() 대신 .filter()를 사용해야 합니다.


일치하는 것이 없으면 .find()는 undefined를 반환합니다.


장점 


.for 또는 .forEach()와 같은 일반적인 루프 대신 .find() 및 .some()을 사용하면 코드가 짧아질뿐 아니라 의도도 더 명확 해집니다.

루프는 무엇이든 할 수 있지만 .find() 사용하면 특정 배열 항목을 찾고 있다고 나타납니다. .some()에 대해서는 배열에 필요에 맞는 항목이 포함되어 있는지 명확하게 확인하고 있습니다.


코드를 더 명확하게 만드십시오! 관련된 경우 .find() 및 .some()을 사용하십시오.



  • 트위터로 보내기
  • 페이스북으로 보내기
  • 구글플러스로 보내기
  • 카카오톡으로 보내기

페이지 정보

조회 8회 ]  작성일19-09-07 21:40

웹학교