일반적으로 사용되는 JavaScript 함수 5가지 예시(요약 공유)

이 기사에서는 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

示例：

输入：15输出：fizzbuzz

这就是简单的分支判断：

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)
    }}

  🎜 즉시 출력해야 하며, console.log(start++)에서 start++가 먼저 출력된 후 1씩 증가합니다. 🎜🎜그 후, setInterval 타이머, count 함수 return을 사용하여 cancel, cancel을 생성합니다. 내부에는 타이머를 지우는 작업이 있습니다(count 함수에 선언된 timer 변수 참조). 클로저에 대한 지식. 여기에서 사용됩니다. 🎜🎜cancel은 count 함수의 timer 변수에 접근할 수 있는 클로저 함수입니다. /code >JS가비지 수집 메커니즘에 의해 삭제되지 않습니다(개수가 발생하더라도 <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의 나머지 매개변수는 1개 이상의 매개변수를 받을 수 있습니다. 모든 호출 매개변수를 추가한 결과를 반환하려면 <code>useArguments 함수를 구현하세요. 이 문제의 테스트 매개변수는 모두 Number 유형이므로 매개변수 변환을 고려할 필요가 없습니다. 🎜rrreee🎜해결책: 🎜rrreee🎜 인수 변수는 함수에서 직접 액세스할 수 있습니다. 이 변수는 함수에서 수신한 모든 매개변수를 포함하는 의사 배열입니다. 배열의 매개변수) 메소드). 🎜🎜그래서 먼저 ... 구조 분해를 사용하여 인수를 실제 배열로 변환한 다음 배열의 reduce 합계 메서드를 호출했습니다. 합계를 해보세요. 🎜🎜reduce() 메서드는 reducer가 실행될 때마다 배열의 각 요소에 대해 제공한 reducer 함수를 순차적으로 실행합니다. 이전 요소의 계산 결과가 매개 변수로 전달되고 최종적으로 결과가 단일 반환 값으로 요약됩니다. 🎜rrreee🎜매개변수:🎜

• 🎜callbackFn
  4개의 매개변수가 포함된 "reducer" 함수: 🎜
  • previousValue：上一次调用 callbackFn 时的返回值。在第一次调用时，若指定了初始值 initialValue，其值则为 initialValue，否则为数组索引为 0 的元素 array[0]。
  • currentValue：数组中正在处理的元素。在第一次调用时，若指定了初始值 initialValue，其值则为数组索引为 0 的元素 array[0]，否则为 array[1]。
  • currentIndex：数组中正在处理的元素的索引。若指定了初始值
  • initialValue，则起始索引号为 0，否则从索引 1 起始。
  • array：用于遍历的数组。

• initialValue 可选
  作为第一次调用 callback 函数时参数 previousValue 的值。若指定了初始值 initialValue，则 currentValue 则将使用数组第一个元素；否则 previousValue 将使用数组第一个元素，而 currentValue 将使用数组第二个元素。

五、二次封装函数

实现函数 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!