JavaScript 배열 메서드:맵 및 Reduce 사용 방법

방법은 우리가 함수에 분배할 수 있는 속성 이름이다.이름만 사용해서 함수를 실행하면 언제든지 호출할 수 있다.수조 대상은 대상에서 수정하거나 조회할 수 있는 방법과 속성이 있습니다.
JavaScript에서는 배열 방법을 사용하여 데이터를 쉽게 관리하고 구성할 수 있습니다.오늘 우리는 두 가지 유행하는 수조 방법인 map()과 reduce을 깊이 있게 연구할 것이다.이 방법들은 수조의 수정 버전을 제공하여 수조를 더욱 편리하게 한다.
오늘 우리는 다음과 같이 공부할 것이다.

JavaScript arrays refresher

What are array methods?

JavaScript map() method

map() examples and uses

JavaScript reduce method

reduce examples and uses

Using reduce and map() together

What to learn next

JavaScript 배열 새로 고침기

JavaScript에서 변수를 만들 때 일련의 값에 액세스하기가 어려울 수 있습니다.이와 유사하게, 창설 대상은 모든 데이터에 키 이름을 만들어야 하기 때문에 혼란을 초래할 수 있습니다.어레이는 솔루션입니다.이것data structure은 하나의 인터페이스에서 질서정연한 데이터를 관리한다.
그룹은 쉼표로 구분된 단일 값의 집합으로 값마다 자신의 색인/위치가 있다.수조는 데이터 항목을 질서 있게 관리하는 방법과 속성을 가진 대상이다.
그것들은 유사한 목록의 데이터 구조로 데이터를 한데 묶어 디지털 인덱스를 통해 접근할 수 있다.

배열은 JavaScript에서 쉽게 선언됩니다.다음은 일련의 과일 종류를 만들고 질서정연하게 저장합니다.

var fruit = [
  "Orange",
  "Apple",
  "Banana"
];

JavaScript의 배열에는 다음과 같은 특별한 기능이 있습니다.

동적

그것들은 희소할 수도 있고 밀집할 수도 있다

그것들은 가변적

그들은 조직을 편리하게 하는 방법과 특성이 있다

무엇이 수조 방법입니까?

그룹 대상은 방법과 속성을 가지고 있으며, 대상에서 수정하거나 조회할 수 있습니다.이것은 데이터 관리, 접근, 조직을 더욱 쉽게 한다.이렇게 하면 우리는 사용자 정의 대상을 만들 필요가 없다.
배열의 속성은 길이나 메모리 크기와 같은 배열의 속성입니다.이러한 값은 일반적으로 정적 값이며 객체의 특정 품질을 변경하는 데 사용됩니다.prototype와 length는 공공 속성이다.
수조의 방법은 우리가 수조의 조작에 응용할 수 있는 것이다.이러한 속성은 속성과 유사하지만 함수 유형에 속한다.push()와 pop()는 우리가 요소를 추가하거나 삭제할 수 있도록 하는 일반적인 수조 방법이다.

Refresher: Functions are a set of instructions that carry out a task. They allow us to reuse code anywhere in the program.

수조 방법은 당신의 프로그램을 더욱 편리하고 유용하게 하는 데 도움이 된다.다음으로 우리는 두 가지 독특한 자바스크립트 배열 방법을 연구하여 배열을 더욱 편리하게 할 것이다. map() 와 reduce.

JavaScript map() 메서드

map() 방법은 리셋 함수를 사용하여 수조의 수정 버전이나 감소된 값을 얻는 데 사용된다.map() 모든 그룹 요소에 함수를 적용하고 새로운 반환값 그룹을 만듭니다.
이 방법의 구문은 다음과 같습니다.

array.map(function(currentValue, index, arr), thisValue)

map() 방법은 두 개의 매개 변수를 받아들인다.

function(currentValue, index, arr): 이것은 그룹의 모든 요소에서 실행되는 필수 매개 변수입니다.그것은 세 가지 파라미터를 포함한다. currentValue, index, arr.

thisValue: 이 매개변수는 선택 사항입니다.그것은 함수에 전달되는 값을 저장한다.

map 방법은 그룹의 모든 요소에 함수를 입력으로 호출합니다.함수가 전달하는 맵 매개 변수의 순서는 다음과 같다.

function callbackfn(value: any, index: number, array: any[])

각 요소에 대해 전달callbackfn하고 요소의 값은 첫 번째 매개 변수로 하고 요소의 인덱스는 두 번째 매개 변수로 한다.마지막으로, 수조 자체를 세 번째 매개 변수로 한다.이 callbackfn 함수는 0에서 3개의 매개 변수를 받아들인다.
마지막으로 맵 방법은 callbackfn 함수를 포함하는 모든 값을 포함하는 새로운 그룹을 되돌려줍니다.아래의 예를 보아라.

var arr = [10, 20, 30, 40, 50]; // initialise an array and assign to arr
var arr1 = arr.map(a => a * 2); // double the element in the array
console.log("arr:",arr); // print original array
console.log("doubled array:",arr1); // print doubled array 

Note: You can see that the map method maps the arrow function to each element and returns a new array. The original array remains unchanged.

map () 예제 및 사용

map() JavaScript 코드에는 여러 가지 사용법이 있습니다.우리 가장 흔히 볼 수 있는 분류를 합시다.

map () 의 일반적인 사용 방법

다음은 String 에서 이 방법을 사용하여 ASCII 인코딩으로 바이트 그룹을 만드는 방법을 보여 줍니다.

let map = Array.prototype.map
let a = map.call('Hello World', function(x) { 
  return x.charCodeAt(0)
})

제곱근 그룹에 숫자 그룹을 비추기

다음에, 우리 코드는 숫자 그룹을 가져오고, 모든 숫자의 제곱근으로 새 그룹을 만듭니다.

let numbers = [3, 25, 100]
let roots = numbers.map(function(num) {
    return Math.sqrt(num)
})

매개 변수를 포함하는 함수로 숫자 그룹을 비추다

다음 코드는 map() 매개 변수만 있는 함수와 어떻게 사용하는지 보여 줍니다.매개 변수는 그룹의 모든 요소에서 자동으로 값을 부여합니다.

let numbers = [3, 25, 100]
let doubles = numbers.map(function(num) {
  return num * 2
})

참고: map() 새 배열이 생성되었으므로 다음과 같은 경우에는 이 메서드를 사용할 수 없습니다.

되돌아오는 그룹을 사용하지 않았습니다

콜백

에서 반환된 값이 없습니다.

공부를 계속하다.

Learn how to build with JavaScript without scrubbing through videos or documentation. Educative's text-based courses are easy to skim and feature live coding environments, making learning quick and efficient.

JavaScript in Detail: From Beginner to Advanced

JavaScript reduce 메서드

reduce 방법은 수조를 왼쪽에서 오른쪽으로 단일 값으로 축소한다.이 방법은 원시 그룹을 변하지 않게 유지합니다.
이 방법의 구문은 다음과 같습니다.

arr.reduce(<function>);

reduce 방법은 수조의 모든 요소가 호출하는 함수로 받아들인다.이것은 이전 원소의 축소값을 다음 원소에 사용합니다.reduce 메서드는 전달된 함수에 대해 다음 순서로 매개변수를 제공합니다.

function callbackfn(prev: any, curr: any, index: number, array: number[])

모든 원소에 대해 callbackfn는 전달되고 전callbackfn 함수의 반환값은 첫 번째 매개 변수로 하고 원소의 값은 두 번째 매개 변수로 한다.
그 다음은 원소의 인덱스로 세 번째 인자로 한다.마지막으로, 그룹 자체는 네 번째 매개 변수로 간주된다.callbackfn 함수는 callbackfn 함수에 전달된 다음 원소의 값을 되돌려줍니다.만약 그룹이 하나의 값만 있다면, 이 값을 되돌려줍니다.빈 그룹에 대해 오류가 발생합니다.
아래의 예는 reduce에 대한 정보를 더 많이 알아보겠습니다.

var arr = [10, 20, 30, 40, 50]; // initialise an array and assign to arr
var val = arr.reduce((prev, curr) => prev + curr); // reduce element to sum
console.log("arr:",arr); // print original array
console.log("reduced val:",val); // print element returned by reduce 

arrow 함수가 이전의 값 prev 을 가져와 수조에서 교체된 값 curr 에 추가하는 것을 볼 수 있습니다.reduce 방법은 전체 수조에 대해 화합을 구한다.

Note: We can use the reduceRight method to apply the reduce method in the opposite direction.

예제 및 사용 감소

reduce JavaScript 코드에는 여러 가지 사용법이 있습니다.우리 가장 흔히 볼 수 있는 분류를 합시다.

수조의 값을 구하다

우리는 reduce로 간단하게 하나의 수조의 모든 값의 합을 구할 수 있다.

let sum = [0, 1, 2, 3].reduce(function (accumulator, currentValue) {
  return accumulator + currentValue
}, 0)

패턴 벤드펴기

let flattened = [[0, 1], [2, 3], [4, 5]].reduce(
  function(accumulator, currentValue) {
    return accumulator.concat(currentValue)
  },
  []
)

속성별로 객체 그룹화

let people = [
  { name: 'Matt', age: 25 },
  { name: 'Asma', age: 23 },
  { name: 'Cami', age: 29 }
];

function groupBy(objectArray, property) {
  return objectArray.reduce(function (acc, obj) {
    let key = obj[property]
    if (!acc[key]) {
      acc[key] = []
    }
    acc[key].push(obj)
    return acc
  }, {})
}

let groupedPeople = groupBy(people, 'age')

Reduce와 맵을 모두 사용()

이제 우리는 이 두 가지 방법을 어떻게 사용해서 어떤 임무를 간소화하는지 배울 것이다.일반적으로 우리는 특정 조건을 만족시키는 수조 원소를 계산해야 한다.다음은 어떻게 할 것인가:

수조를 0과 1의 수조로 비추다.

0과 1의 수조를 합으로 줄인다.

최종 출력은 주어진 조건을 만족시키는 원소수다.

var arr = ['Hello', 1, true, NaN, 'Bye']; // initialise an array of elements
var countArr = arr.map(ele => typeof ele === 'string' ? 1 : 0); // map to 0 and 1
var sum = countArr.reduce((prev, curr)=> prev + curr); // reduce for sum
console.log("arr:",arr); // print original array
console.log("array from map:", countArr); // print array returned from map method
console.log("number of Strings:",sum); // print number of strings 

두 번째 줄에서, 우리는 맵을 응용하여 1과 0의 그룹을 얻는다.모든 만족스러운 원소는 하나의 값을 가지고 있다.세 번째 줄에서, 우리는 리듀스를 사용하여 수조의 합을 구한다.이것은 우리가 계수가 있다는 것을 의미한다.그리고 combo를 사용하면 arr 분배된 그룹에서 원소 계수를 찾을 수 있습니다. 그 중에서 원소는 문자열입니다.

Note: We can also use these methods together to find the number of elements in a two-dimensional array.

이제 뭘 배워요?

축하합니다!현재 자바스크립트의 map() 및 reduce 배열 방법에 대해 깊이 있게 알고 있습니다.이것들은 당신의 코드를 크게 개선할 것입니다.수조 방법에 대해서는 아직 배워야 할 것이 많다.다음에는 다음을 확인해야 합니다.

some()

every()

flat()

filter()

forEach()

flatMap()

이 수조 방법을 사용하고 연습map()과reduce를 시작하려면 Educational의 과정JavaScript in Detail: From Beginner to Advanced을 보십시오.프로젝트 기반 교육 과정에서는 처음부터 고급 단계까지 JavaScript의 모든 부분을 분석합니다.너는 너의 학습을 공고히 하기 위해 네 가지 실천 항목과 정식 테스트를 배정받을 것이다.마지막으로, 당신은 숙련된 자바스크립트 개발자가 될 것입니다.
즐겁게 공부하세요!

JavaScript에 대한 기사 계속 보기

7 JavaScript data structures you must know

Understanding and Using Prototypical Inheritance in JavaScript

JavaScript Loops Tutorial: for loop, while loop, and more