게임의 레벨을 높이는 유용한 JS 배열 방법!

안녕하세요!

오늘은 제가 매일 사용하는 유용한 JS 배열 방법을 공유하겠습니다. 이러한 방법은 초보자로서 게임의 수준을 확실히 높여줄 것입니다. 💪 지금부터 자세히 살펴보겠습니다.

1. 지도()

MDN에 따르면:

The map() method creates a new array populated with the results of calling a provided function on every element in the calling array.

기본적으로 map()는 데이터 변환에 사용됩니다. 이것을 기억!
예를 들어 map() 이해합시다.

// I want squares and cubes of all these numbers
const numbers = [1, 2, 3, 4, 5]

// using forEach()
const squares = []
numbers.forEach(number => squares.push(number**2))
// Output: [1, 4, 9, 16, 25]

// using map()
const cubes = numbers.map(number => number**3)
// Output: [1, 8, 27, 64, 125]

예제에서 cubes 에 비해 squares 계산이 얼마나 쉬운지 알 수 있습니다.map() 함수(여기서는 화살표 함수)를 인수로 사용합니다. 해당 함수는 numbers 배열의 모든 요소에 대해 실행되고 해당 함수의 결과는 새 배열cubes에 저장됩니다.

일부 선택적 인수를 전달할 수도 있습니다. 인수의 순서는 다음과 같습니다.

currentValue - 함수가 실행되는 배열의 값입니다. 우리의 경우 number .

index - 인덱스 currentValue .

array - 지도가 실행되고 있는 배열입니다. 우리의 경우 numbers 입니다.

this - 이 함수를 실행할 때 this로 사용할 값입니다.

2. 필터()

MDN에 따르면:

The filter() method creates a new array with all elements that pass the test implemented by the provided function.

기본적으로 주어진 배열의 모든 요소에 대해 실행되는 함수를 제공합니다. 해당 함수가 true 로 평가되면 해당 요소가 새 배열로 푸시되지 않고 푸시됩니다.
예를 들어 'filter()'를 이해합시다.

// Club entry list
const persons = [
  {
    name : 'Mark',
    age : 19,
    gender: 'M'
  },
  {
    name : 'Jenny',
    age : 17,
    gender: 'F'
  },
  {
    name : 'Ben',
    age : 15,
    gender: 'M'
  },
  {
    name : 'Julia',
    age : 23,
    gender: 'O'
  },
]


const adultsOnlyList = persons.filter(person => person.age > 18)
// Mark and Julia

const noMenList = persons.filter(person => person.gender !== 'M' && person.age > 18)
// Julia

위의 예에서 어떤 사람들은 클럽에 들어가고 싶어하지만 18세 미만은 허용할 수 없습니다. 그래서 adultsOnlyList 함수의 도움으로 filter()를 생성합니다. filter() 내부의 함수는 항상 Boolean 를 반환해야 합니다.
클럽에는 남성이 허용되지 않는 특별한 날도 있습니다. 따라서 이전 함수를 확장하여 또 다른 목록noMenList을 생성합니다. 궁극적으로 함수가 Boolean 를 반환하면 작동합니다.

일부 선택적 인수를 전달할 수도 있습니다. 이러한 인수는 map()에 언급된 것과 동일합니다.

3. 줄이기()

MDN에 따르면:

The reduce() method executes a reducer function (that you provide) on each element of the array, resulting in single output value.

기본적으로 이름에서 알 수 있듯이 배열에서 일부 작업을 수행하고 단일 값으로 줄입니다. 예를 들어 합계, 평균, 계승 등과 같은 연산은 reduce() 로 쉽게 수행할 수 있습니다.
예를 들어 reduce() 이해합시다:

// What's the total for these items?
const shoppingCart = [
  {
    name : 'Potato',
    price: 40,
  },
  {
    name : 'Tomato',
    price: 60
  },
  {
    name: 'Bread',
    price: 21
  }
]

const total = shoppingCart.reduce((sum, item) => sum + item.price, 0)
// 121

사람들은 첫눈에 reduce() 어렵게 찾습니다. 😨 거룩하지 마세요. 분해해 봅시다.reduce() 함수에 두 개의 인수를 전달했습니다. 첫 번째는 각 요소에 대해 실행하려는 함수입니다.(sum, item) => sum + item.price해당 함수에는 sum 및 item 두 개의 인수가 있습니다. sum는 모든 반복 후에 값을 저장하고 item는 항상 현재 반복 중인 요소를 갖습니다.
두 번째 주장은 어떻습니까? 따라서 두 번째 인수는 sum s의 초기 값일 뿐입니다. 전달하지 않으면 shoppingCart 의 첫 번째 요소가 sum에 저장되고 두 번째 요소에서 루핑이 시작됩니다.

4. find() 및 findIndex()

이 두 가지 방법은 매우 유사하기 때문에 함께 사용합시다. 👀

찾기()

MDN에 따르면:

The find() method returns the value of the first element in the provided array that satisfies the provided testing function.

기본적으로 find()에 함수를 전달하면 true로 평가되는 요소가 반환됩니다. 통과하지 못하면 undefined 가 표시됩니다.
예를 들어 이것을 이해합시다.

// I want to buy something for $120
const accounts = [
  {
    name : 'Citi Bank',
    balance: 100
  },
  {
    name : 'Bank of America',
    balance: 150
  },
  {
    name: 'Capital One',
    balance: 170
  }
]


const account = accounts.find(account => account.balance > 120)
// { balance: 150, name: "Bank of America" }

그래서 저는 계정이 여러 개 있고 잔액이 $120 이상인 계정을 찾고 있습니다. 하지만 이 조건을 만족하는 계정이 두 개 있지만 find() 테스트를 통과한 첫 번째 요소를 반환합니다.

인덱스 찾기()

MDN에 따르면:

The findIndex() method returns the index of the first element in the array that satisfies the provided testing function. Otherwise, it returns -1, indicating that no element passed the test.

기본적으로는 find() 와 같습니다. 유일한 차이점은 요소 대신 인덱스를 반환한다는 것입니다. 테스트를 통과한 요소가 없으면 undefined 대신 -1을 반환합니다.
findIndex()를 사용하여 동일한 예제를 실행해 보겠습니다.

const accountIndex = accounts.findIndex(account => account.balance > 120)
// Output: 1

설명할 것이 없습니다. 꽤 직설적 인.

그게 다야! 👋

유용한 JS 배열 방법. 흔하지 않은 것들이 있습니다. 😉

당신이 뭔가를 배웠기를 바랍니다. ✌️