CSDN话题挑战赛第2期

参赛话题：学习笔记

🖥️ NodeJS专栏：Node.js从入门到精通

🖥️ 博主的前端之路：前端之行                  ，任重道远（来自大三学长的万字自述）

🧧 个人社区：海底烧烤店ai（从前端到全栈）

🧑‍💼个人简介：即将大三的学生  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
，一个不甘平庸的平凡人🍬

👉 你的一键三连是我更新的最大动力❤️！

🏆分享博主自用牛客网🏆：一个非常全面的面试刷题求职网站

















，点击跳转🍬

前言

最近博主一直在牛客网刷题巩固基础知识
  
  
  
  
  
  
  
  
  ，牛客网不仅具有公司真题
  
  
  
  
  
  
  
  
  、专项练习 
  
  
  
  
  
  
  
  
 、面试题库 


 


 


 


 


 


 


 


 


、在线编程等功能  
  
  
  
  
  
  
  
  
，还具有非常强大的AI模拟面试功能
 


 


 


 


 


 


 


 


 

，简直是求职者的福音！

牛客网里的题库非常全面的
 
 
 
 
 
 
 
 
 ，无论你是前端还是后端   
   
   
   
   
   
   
   
   
，是想要备考还是准备面试又或者是想要提高自己
 

 

 

 

 

 

 

 

 
，你都能在牛客网上找到适合自己的题

 

 

 

 

 

 

 

 

 ，赶快点击链接去注册登录吧：点我进入牛客网

牛客网 牛客网

本篇文章所有示例来自于牛客网题库/在线编程/JS篇                  ，这些都是前端开发中常用的功能
 
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 
，借此记录一下刷题过程

















，巩固基础！

一
 
 
 
 
 
 
 
 
 、计时器

实现一个打点计时器                           ，要求：

1  
   
   
   
   
   
   
   
   
 、从 start 到 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                  ” 函数

















，包含四个参数： 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一直切割到最后                  。

结语

这篇文章的所有内容都出自于牛客网的JS篇题库：

牛客网的JS题库非常贴合实际的  
  
  
  
  
  
  
  
  
，在写的过程中自己查漏补缺
 


 


 


 


 


 


 


 


 

，收获了很多
 
 
 
 
 
 
 
 
 ，强烈将牛客网推荐给大家！

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

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