> 웹 프론트엔드 > JS 튜토리얼 > 동일한 함수를 두 번 호출하지 마세요(메모이제이션 사용)

동일한 함수를 두 번 호출하지 마세요(메모이제이션 사용)

WBOY
풀어 주다: 2024-07-31 07:42:12
원래의
1163명이 탐색했습니다.

Never call the same function twice (with memoization)

그래서 메모이제이션이라는 재미있는 작은 개념을 발견했습니다.

관련 기사를 읽기 시작했는데 아이디어의 꼬리를 잡자마자 멈췄어요.

그러다가 제가 이해하는 방식으로 저만의 간단한 해결책을 찾아보기로 했습니다.

들어본 적이 없다면 메모이제이션은 함수 실행 결과를 저장하는 프로세스이므로 다음에 동일한 인수를 사용하여 해당 함수를 실행할 때 작은(또는 그렇지 않은) 캐시에서 가져올 수 있습니다.

실제로 이는 리소스를 많이 소모하는 기능에 유용할 수 있습니다. 추가 공간을 캐시로 사용하는 데 드는 비용이 발생합니다. 하지만 코드 속도와 이를 사용하는 사용자의 경험을 향상시킬 수 있습니다.

JS 코드를 조금 사용해 본 결과 다음 솔루션이 나왔습니다.

const memoize = fn => {
  const cache = {}
  return (...args) => {
    const fnKey = `${fn.name}(${args})`;
    if(!cache[fnKey]) {
      cache[fnKey] = fn(...args);
    }

    return cache[fnKey]
  };
}
로그인 후 복사
로그인 후 복사

그러면 다음과 같이 실행할 수 있습니다.

function _add(x, y) {
  console.log("function runs", x, y);
  return x + y;
}

const add = memoize(_add)

add(42, 69)
add(10, 15)
add(10, 15)
로그인 후 복사

이로 인해 함수가 두 번 실행됩니다(#1 및 #2 'add' 호출). 세 번째 '추가' 호출은 #2 호출과 동일하므로 캐시를 사용합니다.

'function runs' 42 69
'function runs' 10 15
로그인 후 복사

'함수 실행' 10 15가 한 번만 호출되는 것을 볼 수 있습니다. 2번째 호출시 캐시를 사용하고 있기 때문입니다.

이제 무슨 일이 일어나고 있는지 빠르게 분석해 보겠습니다.

이 예에서는 폐쇄 메커니즘을 활용하여 캐시를 저장합니다.

const memoize = fn => {
  const cache = {}
  return () => {

  };
}
로그인 후 복사

이를 통해 우리는 "fn" 인수를 사용할 수 있습니다. 이는 우리가 작업하려는 함수와 정확히 일치하므로 각 실행을 "수신"할 수 있습니다.

정말 단순하고 순진하게 썼네요. 따라서 인수가 포함된 함수 이름을 캐시의 키로 사용하고 실행 결과를 값으로 사용하겠습니다.

즉, 다음을 실행한다는 의미입니다.

add(2, 2)
로그인 후 복사

결과

// Our cache
{
  'add(2, 2)': 4
}
로그인 후 복사

캐시 값.

저는 이것이 "올바른 방법"으로 수행되어야 하는 방식이 아닐 수도 있다는 것을 알고 있습니다. 하지만 이 연습과 기사의 아이디어는 잘 테스트된 안전하고 극단적인 경우가 없는 솔루션에 관한 것이 아닙니다.

학습과 간단한 구현에 관한 내용입니다. 개념에 대해. 그래서 지금은 구현의 세부 사항에 초점을 맞추고 있지 않습니다.

이제 먼저 함수 호출의 키를 알아봅니다.

const memoize = fn => {
  const cache = {}
  return (...args) => {
    const fnKey = `${fn.name}(${args})`;
  };
}
로그인 후 복사

함수 실행 결과를 캐시에 저장하는 데 사용하겠습니다.

그런 다음 이 키(fnKey)가 이미 존재하는지 확인합니다. 그렇지 않은 경우 전달된 함수 실행의 결과로 해당 값으로 키를 설정합니다.

결국 우리는 항상 캐시에서 결과를 반환합니다. 따라서 memoize 메소드에 전달된 함수의 실행은 항상 클로저("캐시" 객체)에서 끝납니다.

지금은 이 개체로만 작업합니다.

const memoize = fn => {
  const cache = {}
  return (...args) => {
    const fnKey = `${fn.name}(${args})`;
    if(!cache[fnKey]) {
      cache[fnKey] = fn(...args);
    }

    return cache[fnKey]
  };
}
로그인 후 복사
로그인 후 복사

그리고 그게 다입니다.

이제 가서 어떻게 "제대로" 해야 하는지 살펴보겠습니다. 하지만 이 내용이 흥미롭다면 알려주세요. 이 접근 방식에 불분명하거나 잘못된 부분이 있는 경우(취향에 따라) 댓글을 삭제하고 이에 대해 이야기해 보세요.

고마워요, 또 봐요!

위 내용은 동일한 함수를 두 번 호출하지 마세요(메모이제이션 사용)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:dev.to
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿