【JavaScript】五个常用功能/案例:计时器 | 流程控制 | 闭包应用 | arguments剩余参数 | 二次封装函数

CSDN话题挑战赛第2期
参赛话题:学习笔记

🖥️ NodeJS专栏:Node.js从入门到精通
🖥️ 博主的前端之路:前端之行,任重道远(来自大三学长的万字自述)
🧧 个人社区:海底烧烤店ai(从前端到全栈)
🧑‍💼个人简介:即将大三的学生,一个不甘平庸的平凡人🍬
👉 你的一键三连是我更新的最大动力❤️!
🏆分享博主自用牛客网🏆:一个非常全面的面试刷题求职网站,点击跳转🍬


前言

最近博主一直在牛客网刷题巩固基础知识,牛客网不仅具有公司真题专项练习面试题库在线编程等功能,还具有非常强大的AI模拟面试功能,简直是求职者的福音!

牛客网里的题库非常全面的,无论你是前端还是后端,是想要备考还是准备面试又或者是想要提高自己,你都能在牛客网上找到适合自己的题,赶快点击链接去注册登录吧:点我进入牛客网

牛客网牛客网
在这里插入图片描述在这里插入图片描述

本篇文章所有示例来自于牛客网题库/在线编程/JS篇,这些都是前端开发中常用的功能,借此记录一下刷题过程,巩固基础!

一、计时器

实现一个打点计时器,要求:

1、从 startend(包含 startend),每隔 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函数returncancelcancel内是一个清除定时器的操作(引用了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” 函数,包含四个参数:

    • 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修改调用的这个slicethis指向,使其指向到arguments,这样就相当于是在arguments上使用slice方法。

call修改函数this指向并立即调用该函数,call第一个参数表示需要修改的this指向,之后的所有参数都会作为原函数的参数传递到原函数中。

slice(begin,end) 方法能切割数组,返回一个新的数组对象,这一对象是一个由 beginend 决定的原数组的浅拷贝(包括 begin,不包括end)。原始数组不会被改变。
不加end参数表示从 begin一直切割到最后。

结语

这篇文章的所有内容都出自于牛客网的JS篇题库
在这里插入图片描述

牛客网的JS题库非常贴合实际的,在写的过程中自己查漏补缺,收获了很多,强烈将牛客网推荐给大家!

如果本篇文章对你有所帮助,还请客官一件四连!❤️

基础不牢,地动山摇! 快来和博主一起来牛客网刷题巩固基础知识吧!

  • 61
    点赞
  • 61
    收藏
  • 打赏
    打赏
  • 56
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:Age of Ai 设计师:meimeiellie 返回首页
评论 56

打赏作者

海底烧烤店ai

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值