댓글 검색 목록

[javascript] JavaScript의 어려운 부분 마스터하기 : 콜백 II

페이지 정보

작성자 운영자 작성일 20-09-05 10:25 조회 617 댓글 0

연습 8

입력 배열을 비교하고 모든 요소를 포함하는 새 배열을 반환하는 함수 공용체를 생성합니다. 중복 요소가 있는 경우 새 배열에 한 번만 추가하십시오. 첫 번째 입력 배열의 첫 번째 요소부터 시작하는 요소의 순서를 유지합니다. 보너스 : reduce를 사용하십시오!

https://dev.to/ryanameri/mastering-hard-parts-of-javascript-callbacks-ii-1n3

console.log (union ([5, 10, 15], [15, 88, 1, 5, 7], [100, 15, 10, 1, 5]));

[5, 10, 15, 88, 1, 7, 100]을 출력해야 합니다.

해결책 8

function union(...arrays) {
  return arrays.reduce((acc, array) => {
    const newItem = array.filter((item) => !acc.includes(item));
    return acc.concat(newItem);
  });
}

여기서 다시 우리는 reduce와 filter를 사용하고 있지만 로직은 filter 메소드 내부에서 뒤집혀 있습니다.

acc 배열은 다시 첫 번째 항목으로 설정되지만 이후 배열의 모든 항목을 확인하고 해당 항목이 acc 배열에 포함되어 있지 않으면 항목을 추가하고 마지막으로 누산기를 반환합니다.

연습 9

두 개의 배열과 하나의 콜백을 받는 함수 objOfMatches를 생성합니다. objOfMatches는 객체를 빌드하고 반환합니다.

객체를 빌드하기 위해 objOfMatches는 콜백을 사용하여 첫 번째 배열의 각 요소를 테스트하여 출력이 두 번째 배열의 해당 요소 (인덱스 기준)와 일치하는지 확인합니다. 일치하는 항목이 있으면 첫 번째 배열의 요소가 개체의 키가 되고 두 번째 배열의 요소가 해당 값이 됩니다.

console.log(
  objOfMatches(
    ["hi", "howdy", "bye", "later", "hello"],
    ["HI", "Howdy", "BYE", "LATER", "hello"],
    function (str) {
      return str.toUpperCase();
    }
  )
);

{hi : 'HI', bye : 'BYE', 나중에 : 'LATER'}를 기록해야 합니다.

해결책 9

function objOfMatches(array1, array2, callback) {
  return array2.reduce((res, value, index) => {
    if (value === callback(array1[index])) {
      res[array1[index]] = value;
    }
    return res;
  }, Object.create(null));
}

여기서 비결은 reduce에 들어가는 누산기가 기본 유형일 필요가 없으며 배열이나 객체 일 수도 있다는 점입니다.

따라서 여기에서 누산기 res를 빈 객체로 설정 한 다음 array1에서 콜백을 호출하면 배열 2의 항목과 동일한 값이 생성되는지 확인합니다.

두 항목이 같으면 누산기에 추가하고 마지막으로 반환합니다. 우리 축적 기. 감소의 힘은 이제 분명해졌지만,이 문제에 대해 머리를 감싸는 데 약간의 시간과 연습이 필요할 수 있습니다. 괜찮아! 우리는 다음 연습에서 많이 줄일 것입니다 ?.

연습 10

두 개의 배열, 즉 값 배열과 콜백 배열을 허용하는 함수 multiMap을 생성합니다. multiMap은 키가 값 배열의 요소와 일치하는 객체를 반환합니다.

키에 할당되는 해당 값은 각 콜백에 대한 입력이 키인 콜백 배열의 출력으로 구성된 배열입니다.

console.log(
  multiMap(
    ["catfood", "glue", "beer"],
    [
      function (str) {
        return str.toUpperCase();
      },
      function (str) {
        return str[0].toUpperCase() + str.slice(1).toLowerCase();
      },
      function (str) {
        return str + str;
      },
    ]
  )
);

결과 {catfood : 'CATFOOD', 'Catfood', 'catfoodcatfood', glue : 'GLUE', 'Glue', 'glueglue', beer : 'BEER', 'Beer', 'beerbeer'] }

해결책 10

function multiMap(arrVals, arrCallbacks) {
  return arrVals.reduce((accum, item) => {
    accum[item] = arrCallbacks.map((fn) => fn(item));
    return accum;
  }, Object.create(null));
}

실습을 읽으면 약간 어려울 수 있지만 예상되는 결과를 보면 상황이 좀 더 명확 해집니다. 우리의 함수는 두 개의 매개 변수, 값의 배열과 함수의 배열을 받습니다. 그런 다음 어떤 방식으로 개체를 구성해야 합니다. 따라서 배열에서 객체를 구성하는 즉시 염두에 두어야 합니다.

다음 난이도는 물체 내부의 각 소품의 가치를 파악하는 것입니다. 예제 출력을 기반으로 값이 배열이어야 한다는 것을 알 수 있습니다. 배열은 콜백 함수가 항목에서 하나씩 호출 된 배열입니다. 그래서 우리는 입력으로 배열을 제공하고 출력으로 다른 배열을 원합니다.

이것이 함수형 프로그래밍에서 콜백의 요점이며, reduce와 map을 사용하는 이 예제는 약간의 선언적 코드를 사용하여 얼마나 많은 것을 얻을 수 있는지 보여줍니다.

연습 11

객체를 첫 번째 매개 변수로 받아들이고 콜백 함수를 두 번째 매개 변수로 받는 objectFilter 함수를 생성합니다. objectFilter는 새 개체를 반환합니다. 새 객체에는 입력 객체의 속성 만 포함되어 속성의 값이 콜백에 전달 된 속성의 키와 동일합니다.

const cities = {
  London: "LONDON",
  LA: "Los Angeles",
  Paris: "PARIS",
};
console.log(objectFilter(cities, (city) => city.toUpperCase()));

{London : 'LONDON', Paris : 'PARIS'}를 출력해야 합니다.

솔루션 11

function objectFilter(obj, callback) {
  const newObj = Object.create(null);
  for (let [key, value] of Object.entries(obj)) {
    if (
      Object.prototype.hasOwnProperty.call(obj, key) &&
      callback(key) === value
    )
      newObj[key] = value;
  }
  return newObj;
}

여기서 유일한 트릭은 객체를 적절하게 반복하는 것입니다. 예전에는 의도하지 않은 부작용을 일으킬 수 있는 for ... in 루프를 사용하는 것이 어려웠습니다. 다행히 오늘날 우리는 안전하게 반복 할 수 있는 객체의 키와 값의 멋진 배열을 제공하는 Object.entries ()가 있습니다.

조건부 if 문에서는 일반적으로 if (obj.hasOwnProperty (key))를 사용했지만 ESLint는 나에게 소리를 지르며 안전하지 않다고 말했습니다.이 방식으로 프로토 타입 메서드를 호출하여 코드를 더 안전하게 만들어야 합니다. 기술적으로 이 검사는 주어진 예제에서는 필요하지 않지만 객체가 현대 JS에서 속성을 가지고 있는지 안전하게 확인하는 방법을 보여주고 싶었습니다.