JavaScript 배열 메서드를 잘못 사용한 네 가지 예를 공유하세요.

저는 JavaScript를 처음 배웠을 때 깊이 있게 공부하지 않았고 일부 지식에 대한 이해가 제한적이었습니다. 과거에는 제가 확인한 모든 Pull Request에서 이 4가지 실수가 있었습니다. 내가 이 글을 쓴 또 다른 이유는 나 자신도 이러한 실수를 저질렀기 때문이다. 올바르게 사용하는 방법을 알아봅시다!

1. Array.indexOf를 사용하지 말고 Array.includes를 사용하세요

“배열에서 요소를 찾으려면 Array.indexOf를 사용하세요!” 자바스크립트 강좌를 공부할 때 이 문장이 생각납니다. 이 문장은 맞습니다. 실제로 이런 식으로 사용될 수 있습니다!

MDN 문서에 따르면 "Array.indexOf는 검색 중인 요소의 첫 번째 일치 위치의 첨자를 반환합니다." 따라서 나중에 이 인덱스를 사용해야 하는 경우 Array.indexOf가 좋은 솔루션입니다. 그러나 우리가 해결하고 싶은 문제는 배열에 요소가 포함되어 있는지 확인하는 것입니다. 이것은 예/아니오 질문으로, 부울 유형을 반환하는 참 또는 거짓 질문입니다. 따라서 부울 값을 반환하는 Array.includes를 사용하는 것이 좋습니다.

'use strict';
const characters = [
  'ironman',
  'black_widow',
  'hulk',
  'captain_america',
  'hulk',
  'thor',
];
console.log(characters.indexOf('hulk'));
// 2
console.log(characters.indexOf('batman'));
// -1
console.log(characters.includes('hulk'));
// true
console.log(characters.includes('batman'));
// false

2. Array.filter를 사용하지 말고 Array.find를 사용하세요

Array.filter는 필터링 조건을 충족하는 새로운 배열을 반환하는 매우 유용한 함수입니다. 이름에서 알 수 있듯이 필터링에 사용됩니다.

하지만 원하는 결과에 요소가 하나만 있다는 것을 안다면 사용하지 않는 것이 좋습니다. 예를 들어 콜백 함수 정의가 고유 ID를 사용하여 필터링하는 경우 결과는 고유해야 합니다. 이 경우 Array.filter는 요소가 하나만 있는 배열을 반환합니다. 특정 ID로 검색할 수 있기 때문에 이미 요소가 하나만 있다고 판단했기 때문에 배열을 사용할 필요가 없습니다.

그리고 성능 문제에 대해서도 이야기해 보겠습니다. 일치하는 모든 요소를 ​​반환하려면 Array.filter가 전체 배열을 검색해야 합니다. 필터링 조건을 충족하는 요소가 수백 개 있으면 반환되는 배열이 매우 클 것이라고 상상할 수 있습니다.

이러한 상황을 방지하려면 Array.find를 사용하는 것이 좋습니다. 필터 조건을 만족하는 첫 번째 요소만 반환합니다. 또한 Array.find는 전체 배열을 검색하는 대신 조건을 충족하는 첫 번째 요소를 찾은 후 실행을 종료합니다.

'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' }

3. Array.find를 사용하지 말고 Array.some을 사용하세요

제가 이런 실수를 여러 번 저질렀음을 인정합니다. 나중에 아주 친한 친구가 나에게 MDN 문서를 읽어보라고 했고 더 나은 해결책이 있다고 말했습니다. 이 상황은 방금 언급한 Array.indexOf/Array.includes와 매우 유사합니다.

이전 예에서는 Array.find가 필터 함수를 받아들이고 만족스러운 요소를 반환하는 것을 보았습니다. 그렇다면 배열에 특정 요소가 포함되어 있는지 확인하려면 Array.find가 최선의 솔루션일까요? 부울 값이 아닌 요소별 값을 반환하기 때문에 아마도 그렇지 않을 것입니다.

모든 사람에게 Array.some을 사용하는 것이 좋습니다. 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

4. Array.map과 Array.filter 조합을 사용하지 말고 Array.reduce를 사용하세요

Array.reduce는 이해하기 조금 어렵습니다! 하지만 Array.filter와 Array.map을 매번 동시에 사용하다 보면 뭔가 필요한 게 있다는 걸 아시겠죠?

내 말은 전체 배열을 2번 반복했다는 것입니다. 첫 번째는 새 배열을 필터링하고 반환하는 것이고, 두 번째는 맵을 통해 새 배열을 구성하는 것입니다. 우리는 각각 자체 콜백 함수가 있는 두 가지 배열 메서드를 사용하며 Array.filter에서 반환된 배열은 다시는 사용되지 않습니다.

비효율성을 피하기 위해 Array.reduce를 사용하는 것이 좋습니다. 같은 결과, 더 우아한 코드! 아래 예를 참조하세요.

'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 배열 메서드를 잘못 사용한 네 가지 예를 공유하세요.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!