집 > 기사 > 웹 프론트엔드 > JavaScript 학습 노트의 기능 메모리

JavaScript 학습 노트의 기능 메모리

韦小宝원래의: 2018-01-25 11:03:041514검색

이 글은 JavaScript 스터디 노트의 함수 메모리를 주로 소개합니다. 편집자는 꽤 좋다고 생각합니다. 이제 JavaScript 소스 코드를 공유하고 참고용으로 제공하겠습니다. JavaScript에 관심이 있으신 분은 에디터를 따라가서 봐주세요

이 글에서는 함수 메모리와 피보나치 수열의 구현을 설명하고 모두와 공유합니다. 자세한 내용은 다음과 같습니다

Definition

Function memory 마지막 시간을 나타냅니다. 계산 결과가 캐시됩니다. 다음 호출 시 동일한 매개변수가 발견되면 캐시에 있는 데이터가 직접 반환됩니다.

예:

function add(a, b) {
  return a + b;
}

// 假设 memorize 可以实现函数记忆
var memoizedAdd = memorize(add);

memoizedAdd(1, 2) // 3
memoizedAdd(1, 2) // 相同的参数，第二次调用时，从缓存中取出数据，而非重新计算一次

Principle

이러한 암기 기능을 구현하는 것은 원칙적으로 매개변수와 해당 결과 데이터만 개체에 저장하면 됩니다. 해당 매개변수에 해당하는 데이터가 존재하는 경우 해당 결과 데이터가 반환됩니다.

첫 번째 버전

버전을 작성해 보겠습니다.

// 第一版 (来自《JavaScript权威指南》)
function memoize(f) {
  var cache = {};
  return function(){
    var key = arguments.length + Array.prototype.join.call(arguments, ",");
    if (key in cache) {
      return cache[key]
    }
    else return cache[key] = f.apply(this, arguments)
  }
}

테스트해 보겠습니다.

var add = function(a, b, c) {
 return a + b + c
}

var memoizedAdd = memorize(add)

console.time(&#39;use memorize&#39;)
for(var i = 0; i < 100000; i++) {
  memoizedAdd(1, 2, 3)
}
console.timeEnd(&#39;use memorize&#39;)

console.time(&#39;not use memorize&#39;)
for(var i = 0; i < 100000; i++) {
  add(1, 2, 3)
}
console.timeEnd(&#39;not use memorize&#39;)

Chrome에서 메모리를 사용하지 않으면 약 60ms가 걸립니다. 1.3ms

Attention

뭐, 겉으로는 고급 기능 메모리를 사용했지만, 이 예에서는 거의 60배나 더 많은 시간이 소요되는 것으로 나타났습니다!

그래서 함수 메모리는 만능이 아닙니다. 이 간단한 시나리오를 보면 실제로 함수 메모리를 사용하는 데 적합하지 않습니다.

함수 메모리는 단지

프로그래밍

기술이라는 점에 유의해야 합니다. 클라이언트 측 JavaScript에서는 코드의 실행 시간 복잡성이 병목 현상을 일으키는 경우가 많습니다. 따라서 대부분의 시나리오에서 프로그램 실행 효율성을 높이기 위해 시간을 위해 공간을 희생하는 이러한 접근 방식은 매우 바람직합니다.

두 번째 버전

첫 번째 버전에서는 Join 메소드를 사용하기 때문에 매개변수가 객체일 경우 자동으로 toString 메소드를 호출하여 [Object 객체]로 변환한 후,

string

을 키 값으로 사용합니다. 이 문제를 확인하기 위해 데모를 작성해 보겠습니다.

var propValue = function(obj){
  return obj.value
}

var memoizedAdd = memorize(propValue)

console.log(memoizedAdd({value: 1})) // 1
console.log(memoizedAdd({value: 2})) // 1

둘 다 1을 반환하는데 이는 분명히 문제이므로 밑줄의 메모 기능이 어떻게 구현되었는지 살펴보겠습니다.

// 第二版 (来自 underscore 的实现)
var memorize = function(func, hasher) {
  var memoize = function(key) {
    var cache = memoize.cache;
    var address = &#39;&#39; + (hasher ? hasher.apply(this, arguments) : key);
    if (!cache[address]) {
      cache[address] = func.apply(this, arguments);
    }
    return cache[address];
  };
  memoize.cache = {};
  return memoize;
};

이 구현에서 볼 수 있듯이 밑줄 기본값은 다음을 사용합니다. 함수의 첫 번째 매개변수를 키로 사용하므로

var add = function(a, b, c) {
 return a + b + c
}

var memoizedAdd = memorize(add)

memoizedAdd(1, 2, 3) // 6
memoizedAdd(1, 2, 4) // 6

를 직접 사용하면 분명히 문제가 발생합니다. 여러 매개변수를 지원하려면 해셔 함수를 전달하고 저장된 키 값을 맞춤설정해야 합니다. 그래서 JSON.stringify 사용을 고려합니다.

var memoizedAdd = memorize(add, function(){
  var args = Array.prototype.slice.call(arguments)
  return JSON.stringify(args)
})

console.log(memoizedAdd(1, 2, 3)) // 6
console.log(memoizedAdd(1, 2, 4)) // 7

JSON.stringify를 사용하면

객체 직렬화

이후의 문자열이 저장되므로 매개변수가 객체라는 문제도 해결할 수 있습니다.

적용 가능한 시나리오

피보나치 수열을 예로 들어 보겠습니다.

var count = 0;
var fibonacci = function(n){
  count++;
  return n < 2? n : fibonacci(n-1) + fibonacci(n-2);
};
for (var i = 0; i <= 10; i++){
  fibonacci(i)
}

console.log(count) // 453

최종 개수는 453이며 이는 피보나치 함수가 453번 호출되었음을 의미합니다! 방금 10까지 반복했는데 왜 그렇게 많이 호출되었느냐고 생각하실 수도 있습니다. 자세히 분석해 보겠습니다.

fib(0)이 실행될 때 1번 호출됩니다.

fib(1)이 실행될 때 , 1번 호출됨

fib(2)를 실행하면 이번에는 fib(1) + fib(0) + fib(2) 자체와 동일하므로 총 1 + 1 + 1 = 3번 실행됩니다

실행시 fib(3 ), 이번에는 fib(2) + fib(1) 더하기 fib(3) 자체와 동일하며, 총 3 + 1 + 1 = 5번입니다.

fib(4)가 실행되면 다음과 같습니다. 이번에는 fib(3) + fib(2) 더하기 fib(4) 자체와 동일하므로 총 5 + 3 + 1 = 9번입니다

fib(5)를 실행하면 fib(4) + fib와 동일합니다. (3) 더하기 fib(5) 이번에는 총 9 + 5 + 1 = 15번이 됩니다

fib(6)이 실행되면 fib(5) + fib(4) 더하기 fib(6)과 같습니다. ) 자체는 이번에는 총 15 + 9 + 1 = 25번입니다

fib(7)을 실행하면 이번에는 fib(6) + fib(5) 더하기 fib(7) 자체와 동일하므로 총 25 + 15 + 1 = 41회

fib(8 )을 실행하면 이번에는 fib(7) + fib(6) + fib(8) 자체와 동일하므로 총 41 + 25 + 1 = 67회가 됩니다.

fib(9)가 실행되면 이번에는 fib(8) + fib(7) 더하기 fib(9) 자체와 동일하므로 총 67 + 41 + 1 = 109번이 됩니다

fib(10을 실행하면 ), 이는 fib(9) + fib(8) + fib(10)과 동일합니다. 이번에는 총 109 + 67 + 1 = 177회입니다

따라서 총 실행 횟수는 177 + 109 + 67 + 41 + 25 + 15 + 9 + 5 + 3 + 1 + 1 = 453 번!

함수 메모리를 사용하면 어떨까요?

var count = 0;
var fibonacci = function(n) {
  count++;
  return n < 2 ? n : fibonacci(n - 1) + fibonacci(n - 2);
};

fibonacci = memorize(fibonacci)

for (var i = 0; i <= 10; i++) {
  fibonacci(i)
}

console.log(count) // 12

함수 메모리 사용으로 인해 호출 횟수가 453회에서 12회로 감소한 것을 확인하실 수 있습니다.

신나는 동안 잊지 마세요! 생각하다: 왜 12번인가?

0부터 10까지의 결과를 한 번 저장하면 11번이 되어야겠죠? 이봐, 그 추가 시간은 어디서 나온 거야?

그래서 작성 방법을 주의 깊게 살펴봐야 합니다. 실제로는 생성된 fibonacci 함수로 원래 fibonacci 함수를 덮어쓰는데, 해당 함수는 한 번 실행되고 캐시는 {0입니다. : 0}, 그러나 fibonacci(2)를 실행하면 fibonacci(1) + fibonacci(0)이 실행됩니다. fibonacci(0)의 값이 0이고 !cache[address] 의 결과가 true이므로 fibonacci 함수가 실행됩니다. 다시. 추가 시간이 왔다는 것이 밝혀졌습니다!

아마도 일상적인 개발에서 피보나치가 사용되지 않는다고 느낄 수도 있고, 이 예제는 실제로 사용 시나리오, 즉 많은 수의 반복 계산이 필요한 경우를 설명하기 위해 사용된 것입니다. , 또는 다수의 계산이 이전 결과에 따라 달라지는 경우 함수 메모리 사용을 고려할 수 있습니다. 그리고 이런 장면을 접하게 되면 알게 될 것입니다.

JavaScript 학습 노트의 기능 메모리

관련 기사