이 기사에서는 JavaScript에 대한 관련 지식을 제공합니다. 여기서는 타이머, 프로세스 제어, 클로저 애플리케이션, 인수 잔여 매개변수 및 보조 캡슐화된 함수를 포함한 5가지 공통 함수와 해당 예제를 주로 소개합니다. 아래에서 관련 문제를 살펴보겠습니다. 모두에게 도움이 될 것입니다.
[관련 권장사항: javascript 비디오 튜토리얼, 웹 프론트엔드]
1. 타이머
도트 타이머를 구현하려면 요구사항:
1. end(start 및 end 포함), console.log 100밀리초마다 숫자, 매번 숫자 증가는 1start 到 end（包含 start 和 end），每隔 100 毫秒 console.log 一个数字，每次数字增幅为 1
2、返回的对象中需要包含一个 cancel 方法，用于停止定时操作
3、第一个数需要立即输出
function count(start, end) {
console.log(start++);
let timer = setInterval(() => {
if (start <= end) {
console.log(start++);
}
}, 100);
return {
cancel: () => {
clearInterval(timer);
},
};}로그인 후 복사
第一个数立即输出，console.log(start++) 中start++是先输出再自加1。
之后使用setInterval定时器，count函数return出cancel，cancel内是一个清除定时器的操作（引用了timer这个在count函数中声明的变量），这里用到了闭包的知识。
cancel是一个闭包函数，它能访问count函数中的变量timer，这时这个timer不会被JS垃圾回收机制清除（会永驻内存，即使count函数被销毁），这就是可以在外部调用cancel清除timer这个定时器的原因。
闭包是指有权访问另外一个函数作用域中的局部变量的函数。声明在一个函数中的函数，叫做闭包函数。而且内部函数总是可以访问其所在的外部函数中声明的参数和变量，即使在其外部函数被返回（寿命终结）了之后。
二、流程控制
实现 fizzBuzz 函数，参数 num 与返回值的关系如下：
1、如果 num 能同时被 3 和 5 整除，返回字符串 fizzbuzz
2、如果 num 能被 3 整除，返回字符串 fizz
3、如果 num 能被 5 整除，返回字符串 buzz
4、如果参数为空或者不是 Number 类型，返回 false
5、其余情况，返回参数 num
示例：
这就是简单的分支判断：
function fizzBuzz(num) {
if (!num || typeof num !== "number") return false;
if (num % 3 === 0 && num % 5 === 0) return "fizzbuzz";
if (num % 3 === 0) return "fizz";
if (num % 5 === 0) return "buzz";
return num;}로그인 후 복사
三、闭包应用
实现函数 makeClosures，调用之后满足如下条件：
1、返回一个函数数组 result，长度与 arr 相同
2、运行 result 中第 i 个函数，即 result[i]()，结果与 fn(arr[i]) 相同
示例：
var arr = [1, 2, 3];var fn = function (x) {
return x * x;};var result = makeClosures(arr, fn);result[1]() === fn(arr[1]) ? console.log("yes") === 4 : console.log("no"); // yes로그인 후 복사
解：
function makeClosures(arr, fn) {
const result = []
arr.forEach(item=>{
result.push(function(){
return fn(item)
})
})
return result}로그인 후 복사
这题一眼看上去感觉是比较绕，但你从上到下去梳理就很容易找到解决的方法：
makeClosures返回一个数组- 数组中每个元素都是一个函数
- 并且这些函数执行的结果要与使用
arr中对应元素作为参数调用fn的结果一致
四、arguments剩余参数
函数 useArguments 可以接收 1 个及以上的参数。请实现函数 useArguments，返回所有调用参数相加后的结果。本题的测试参数全部为 Number 类型，不需考虑参数转换。
输入：1, 2, 3, 4输出：10
로그인 후 복사
解：
function useArguments() {
return [...arguments].reduce((a, b) => a + b);}로그인 후 복사
函数中能直接访问arguments变量，这个变量是一个含有该函数接收的所有参数的伪数组（不具有数组的全部方法）。
所以我是先使用...解构来将arguments转换成一个真正的数组，之后调用数组的reduce求和方法进行求和即可。
reduce() 方法对数组中的每个元素按序执行一个由您提供的 reducer 函数，每一次运行 reducer 会将先前元素的计算结果作为参数传入，最后将其结果汇总为单个返回值。
Array.prototype.reduce(callbackFn, initialValue)
로그인 후 복사
参数：
callbackFn
一个 “reducer
2입니다. 반환된 개체에는 타이밍 작업을 중지하는 데 사용되는 cancel 메서드가 포함되어야 합니다.🎜🎜3 첫 번째 숫자는 즉시 출력되어야 합니다🎜function partialUsingArguments(fn) {
const arr = [].slice.call(arguments,1)
return function (...arr2) { // ...arr2表示用arr2接收所有参数，arr2是一个数组
return fn(...arr,...arr2)
}}로그인 후 복사
로그인 후 복사
start++가 먼저 출력된 후 1씩 증가합니다. 🎜🎜그 후, setInterval 타이머, count 함수 return을 사용하여 cancel, cancel을 생성합니다. 내부에는 타이머를 지우는 작업이 있습니다(count 함수에 선언된 timer 변수 참조). 클로저에 대한 지식. 여기에서 사용됩니다. 🎜🎜cancel은 count 함수의 timer 변수에 접근할 수 있는 클로저 함수입니다. /code >JS가비지 수집 메커니즘에 의해 삭제되지 않습니다(개수</strong>가 발생하더라도 <strong>메모리에 영구적으로 저항</strong>). code> 함수가 소멸됨), <code>cancel을 호출하여 타이머 timer를 외부에서 지울 수 있는 이유입니다. 🎜🎜클로저란 다른 함수의 범위에 있는 지역 변수에 접근할 수 있는 함수를 말합니다. 함수 내에 선언된 함수를 클로저 함수라고 합니다. 그리고 내부 함수는 외부 함수가 반환된 후에도(수명 종료), 자신이 위치한 외부 함수에 선언된 매개변수와 변수에 항상 액세스할 수 있습니다. 🎜
🎜2. 프로세스 제어🎜🎜 fizzBuzz 함수를 구현합니다. num 매개변수와 반환 값의 관계는 다음과 같습니다.
1 . num 을 3과 5로 동시에 나눌 수 있는 경우 fizzbuzz
문자열을 반환합니다. 2. num이 될 수 있는 경우 3으로 나눌 수 있으면 fizz
문자열을 반환합니다. 3. num을 5로 나눌 수 있으면 buzz
문자열을 반환합니다. 4. 매개변수가 비어 있거나 숫자 유형이 아닌 경우 false
를 반환합니다. 5. 그 외의 경우 매개변수 num🎜🎜를 반환합니다. 예: 🎜rrreee🎜간단한 분기 판단입니다:🎜 rrreee🎜3. 클로저 적용🎜🎜makeClosures 함수를 구현하고 호출 후 다음 조건을 충족합니다.
1. 함수 반환 배열 result, 길이는 arr와 동일
2. result에서 <code>i번째 함수를 실행합니다. , 즉 result[i]()이고 결과는 fn(arr[i])와 동일합니다. 🎜🎜예: 🎜rrreee🎜해결책: 🎜rrreee🎜이 질문은 언뜻 복잡해 보일 수 있지만 위에서 아래로 빗어보면 쉽게 답을 찾을 수 있습니다. 방법: 🎜makeClosures는 배열을 반환합니다- 배열의 각 요소는 함수이고
- 이 함수의 결과가 실행됩니다. <의 해당 요소를 사용하여
fn을 호출한 결과와 일치해야 합니다. code>arr를 매개변수로
🎜4. 인수🎜🎜함수 useArguments< /code>의 나머지 매개변수는 1개 이상의 매개변수를 받을 수 있습니다. 모든 호출 매개변수를 추가한 결과를 반환하려면 <code>useArguments 함수를 구현하세요. 이 문제의 테스트 매개변수는 모두 Number 유형이므로 매개변수 변환을 고려할 필요가 없습니다. 🎜rrreee🎜해결책: 🎜rrreee🎜 인수 변수는 함수에서 직접 액세스할 수 있습니다. 이 변수는 함수에서 수신한 모든 매개변수를 포함하는 의사 배열입니다. 배열의 매개변수) 메소드). 🎜🎜그래서 먼저 ... 구조 분해를 사용하여 인수를 실제 배열로 변환한 다음 배열의 reduce 합계 메서드를 호출했습니다. 합계를 해보세요. 🎜🎜reduce() 메서드는 reducer가 실행될 때마다 배열의 각 요소에 대해 제공한 reducer 함수를 순차적으로 실행합니다. 이전 요소의 계산 결과가 매개 변수로 전달되고 최종적으로 결과가 단일 반환 값으로 요약됩니다. 🎜rrreee🎜매개변수:🎜五、二次封装函数
实现函数 partialUsingArguments，调用之后满足如下条件：
1、返回一个函数 result
2、调用 result 之后，返回的结果与调用函数 fn 的结果一致
3、fn 的调用参数为 partialUsingArguments 的第一个参数之后的全部参数以及 result 的调用参数
解：
function partialUsingArguments(fn) {
const arr = [].slice.call(arguments,1)
return function (...arr2) { // ...arr2表示用arr2接收所有参数，arr2是一个数组
return fn(...arr,...arr2)
}}로그인 후 복사
로그인 후 복사
第一个arr数组表示的是partialUsingArguments接收的第一个参数之后的全部参数数组。
因为arguments是伪数组，不具有slice方法，所以这里通过随便一个数组（我选的是空数组[]）来调用slice，然后通过call修改调用的这个slice的this指向，使其指向到arguments，这样就相当于是在arguments上使用slice方法。
call修改函数this指向并立即调用该函数，call第一个参数表示需要修改的this指向，之后的所有参数都会作为原函数的参数传递到原函数中。
slice(begin,end) 方法能切割数组，返回一个新的数组对象，这一对象是一个由 begin 和 end 决定的原数组的浅拷贝（包括 begin，不包括end）。原始数组不会被改变。
不加end参数表示从 begin一直切割到最后。
【相关推荐：javascript视频教程、web前端】
위 내용은 일반적으로 사용되는 JavaScript 함수 5가지 예시(요약 공유)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![자바스크립트 심층 분석 [웹 프론트엔드의 기본은 알아야 한다]](https://img.php.cn/upload/course/000/000/041/61d3ff1c83b43350.jpg)
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
