(资料图片仅供参考)
【相关推荐:javascript视频教程、web前端】
一、计时器
实现一个打点计时器,要求:
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
方法。
【相关推荐:javascript视频教程、web前端】
以上就是JavaScript五个常用功能示例(总结分享)的详细内容,更多请关注php中文网其它相关文章!