초보자가 JavaScript에서 배열을 더 잘 사용할 수 있는 방법은 무엇입니까? (소스 코드)

이 기사의 내용은 초보자가 JavaScript에서 배열을 더 잘 사용할 수 있는 방법에 관한 것입니다. (소스 코드), 특정 참고 가치가 있습니다. 도움이 필요한 친구가 참고할 수 있기를 바랍니다.

Array.filter

Array.filter 대신 Array.find를 사용하는 것은 매우 유용한 방법입니다. 콜백 함수를 통해 원본 배열을 필터링하고 필터링된 항목을 새 배열로 반환합니다. 이름에서 알 수 있듯이 필터링에 이 방법을 사용합니다. 일반적으로 말하면 길이가 더 짧은 새 배열이 생성됩니다.

그러나 콜백 함수로 필터링한 후에 유일한 항목만 남을 것을 안다면 Array.filter를 사용하지 않는 것이 좋습니다. 예를 들어 배열을 필터링하려면 필터 조건으로 고유 ID와 같음을 사용합니다. 이 예에서 Array.filter는 항목이 하나만 있는 새 배열을 반환합니다. 그러나 우리는 특정 ID를 가진 항목을 가져오려고 하기 때문에 이 새로운 배열은 쓸모가 없습니다.

성능에 대해 논의해 보겠습니다. 콜백 함수의 필터 기준과 일치하는 모든 항목을 얻으려면 Array.filter가 전체 배열을 순회해야 합니다. 원본 배열에 수천 개의 항목이 있는 경우 콜백 함수를 상당히 여러 번 실행해야 합니다.

이러한 상황을 방지하려면 Array.find를 사용하는 것이 좋습니다. Array.filter와 같은 콜백 함수가 필요하지만 기준을 충족하는 첫 번째 항목만 반환합니다. 콜백 함수의 필터 조건을 충족하는 첫 번째 요소가 발견되면 즉시 아래쪽 검색을 중지합니다. 더 이상 전체 배열을 반복하지 않습니다.

'use strict';
const characters =[
  { id:1, name:'ironman'},
  { id:2, name:'black_widow'},
  { id:3, name:'captain_america'},
  { id:4, name:'captain_america'},
];
function getCharacter(name){
  return character => character.name === name;
}
console.log(characters.filter(getCharacter('captain_america')));
// [
//   { id: 3, name: 'captain_america' },
//   { id: 4, name: 'captain_america' },
// ]
console.log(characters.find(getCharacter('captain_america')));
// { id: 3, name: 'captain_america' }

Array.find 대신 Array.some을 사용하세요

제가 이런 실수를 꽤 자주 한다는 걸 인정합니다. 그러다가 한 친구가 더 나은 방법을 찾기 위해 MDN 문서를 확인해 보라고 제안했습니다. 실제로(이 오류)는 위의 Array.indexOf/Array.includes 예제와 매우 유사합니다.

위의 예에서 Array.find는 콜백 함수를 매개변수로 요구하고 (정규화된) 첫 번째 요소를 반환한다는 것을 알고 있습니다. 그러나 배열에 요소가 존재하는지 알아야 할 경우 Array.find가 최선의 선택일까요? 반드시 그런 것은 아닙니다. 부울이 아닌 요소를 반환하기 때문입니다.

아래 예에서는 필요한 부울 값을 반환하는 Array.some을 사용하는 것이 좋습니다.

'use strict';
const characters =[
  { id:1, name:'ironman', env:'marvel'},
  { id:2, name:'black_widow', env:'marvel'},
  { id:3, name:'wonder_woman', env:'dc_comics'},
];
function hasCharacterFrom(env){
  return character => character.env === env;
}
console.log(characters.find(hasCharacterFrom('marvel')));
// { id: 1, name: 'ironman', env: 'marvel' }
console.log(characters.some(hasCharacterFrom('marvel')));
// true

Array.some과 Array.includes 사용의 차이점을 추가하세요. 둘 다 항목이 배열에 존재하는지 여부를 나타내는 부울 값을 반환하고 해당 항목이 발견되면 배열 순회를 중지합니다. 차이점은 Array.some의 매개변수는 콜백 함수인 반면 Array.includes의 매개변수는 값이라는 점입니다(두 번째 선택적 매개변수는 고려되지 않음).

값이 value인 항목이 배열에 존재하는지 알고 싶다고 가정해 보겠습니다. [].includes(value) 코드를 작성하거나 item => item === value를 Array.some에 전달할 수 있습니다. 콜백 함수. Array.includes는 사용하기 쉽고 Array.some은 더 쉽게 제어할 수 있습니다.

Array.filter와 Array.map을 조합하는 대신 Array.reduce를 사용하세요

사실 Array.reduce는 이해하기 쉽지 않습니다. 그러나 먼저 Array.filter를 사용하여 원래 배열을 필터링한 다음 결과에 대해 Array.map을 호출하면(새 배열을 얻습니다). 이것이 문제인 것 같습니다. 우리가 간과한 것이 있습니까?

이 문제는 배열을 두 번 반복한다는 것입니다. 첫 번째는 원본 배열을 필터링하여 약간 더 짧은 길이의 새 배열을 얻는 것입니다. 두 번째 순회(번역자 참고: Array.map)는 Array.filter에서 반환된 새 배열을 처리하고 다시 새 배열을 만드는 것입니다. 최종 결과를 얻기 위해 두 가지 배열 방법을 조합하여 사용했습니다. 각 메서드에는 고유한 콜백 함수가 있으며 Array.map에서 사용하는 임시 배열은 Array.filter에서 제공되며 일반적으로 재사용할 수 없습니다.

이러한 비효율적인 시나리오를 피하려면 Array.reduce를 사용하는 것이 좋습니다. 같은 결과, 더 나은 코드! Array.reduce를 사용하면 필터링되고 축소된 항목을 누산기에 넣을 수 있습니다. 누산기는 증가할 숫자, 채워질 객체, 연결될 문자열 또는 배열 등이 될 수 있습니다.

위의 예에서는 Array.map을 사용했지만 (그 이상) 접합할 배열이 누산기인 Array.reduce를 사용하는 것이 좋습니다. 다음 예에서는 변수 env의 값에 따라 이를 누산기에 추가하거나 누산기를 변경하지 않고 그대로 둡니다(즉, 아무것도 하지 않음).

'use strict';
const characters =[
  { name:'ironman', env:'marvel'},
  { name:'black_widow', env:'marvel'},
  { name:'wonder_woman', env:'dc_comics'},
];
console.log(
  characters    .filter(character => character.env ==='marvel')
    .map(character =>Object.assign({}, character,{ alsoSeenIn:['Avengers']}))
);
// [
//   { name: 'ironman', env: 'marvel', alsoSeenIn: ['Avengers'] },
//   { name: 'black_widow', env: 'marvel', alsoSeenIn: ['Avengers'] }
// ]
console.log(
  characters    .reduce((acc, character)=>{
      return character.env ==='marvel'
        ? acc.concat(Object.assign({}, character,{ alsoSeenIn:['Avengers']}))
        : acc;
    },[])
)
// [
//   { name: 'ironman', env: 'marvel', alsoSeenIn: ['Avengers'] },
//   { name: 'black_widow', env: 'marvel', alsoSeenIn: ['Avengers'] }
// ]

위 내용은 초보자가 JavaScript에서 배열을 더 잘 사용할 수 있는 방법입니다. (소스 코드) 전체 소개, JavaScript 비디오 튜토리얼에 대해 더 알고 싶다면 PHP 중국어 웹 사이트를 주목하세요.

위 내용은 초보자가 JavaScript에서 배열을 더 잘 사용할 수 있는 방법은 무엇입니까? (소스 코드)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!