이 글은 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('use memorize')
for(var i = 0; i < 100000; i++) {
memoizedAdd(1, 2, 3)
}
console.timeEnd('use memorize')
console.time('not use memorize')
for(var i = 0; i < 100000; i++) {
add(1, 2, 3)
}
console.timeEnd('not use memorize')Chrome에서 메모리를 사용하지 않으면 약 60ms가 걸립니다. 1.3ms
Attention
뭐, 겉으로는 고급 기능 메모리를 사용했지만, 이 예에서는 거의 60배나 더 많은 시간이 소요되는 것으로 나타났습니다!
그래서 함수 메모리는 만능이 아닙니다. 이 간단한 시나리오를 보면 실제로 함수 메모리를 사용하는 데 적합하지 않습니다.
함수 메모리는 단지
프로그래밍기술이라는 점에 유의해야 합니다. 클라이언트 측 JavaScript에서는 코드의 실행 시간 복잡성이 병목 현상을 일으키는 경우가 많습니다. 따라서 대부분의 시나리오에서 프로그램 실행 효율성을 높이기 위해 시간을 위해 공간을 희생하는 이러한 접근 방식은 매우 바람직합니다.
두 번째 버전
첫 번째 버전에서는 Join 메소드를 사용하기 때문에 매개변수가 객체일 경우 자동으로 toString 메소드를 호출하여 [Object 객체]로 변환한 후,
을 키 값으로 사용합니다. 이 문제를 확인하기 위해 데모를 작성해 보겠습니다. var propValue = function(obj){
return obj.value
}
var memoizedAdd = memorize(propValue)
console.log(memoizedAdd({value: 1})) // 1
console.log(memoizedAdd({value: 2})) // 1
// 第二版 (来自 underscore 的实现)
var memorize = function(func, hasher) {
var memoize = function(key) {
var cache = memoize.cache;
var address = '' + (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)) // 7JSON.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 번!신나는 동안 잊지 마세요! 생각하다: 왜 12번인가? 0부터 10까지의 결과를 한 번 저장하면 11번이 되어야겠죠? 이봐, 그 추가 시간은 어디서 나온 거야? 그래서 작성 방법을 주의 깊게 살펴봐야 합니다. 실제로는 생성된 fibonacci 함수로 원래 fibonacci 함수를 덮어쓰는데, 해당 함수는 한 번 실행되고 캐시는 {0입니다. : 0}, 그러나 fibonacci(2)를 실행하면 fibonacci(1) + fibonacci(0)이 실행됩니다. fibonacci(0)의 값이 0이고 아마도 일상적인 개발에서 피보나치가 사용되지 않는다고 느낄 수도 있고, 이 예제는 실제로 사용 시나리오, 즉 많은 수의 반복 계산이 필요한 경우를 설명하기 위해 사용된 것입니다. , 또는 다수의 계산이 이전 결과에 따라 달라지는 경우 함수 메모리 사용을 고려할 수 있습니다. 그리고 이런 장면을 접하게 되면 알게 될 것입니다. 관련 추천: JavaScript 함수의 조절 및 흔들림 방지 디바운스에 대한 자세한 설명 예제를 통한 JavaScript 함수 바인딩 사용법 설명 위 내용은 JavaScript 학습 노트의 기능 메모리의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!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 !cache[address] 의 결과가 true이므로 fibonacci 함수가 실행됩니다. 다시. 추가 시간이 왔다는 것이 밝혀졌습니다!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
