«

JavaScript五个常用功能是什么

时间:2024-4-10 10:24     作者:韩俊     分类: Javascript


这篇文章主要介绍“JavaScript五个常用功能是什么”,在日常操作中,相信很多人在JavaScript五个常用功能是什么问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”JavaScript五个常用功能是什么”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!

一、计时器

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

1、从

start
到
end
(包含
start
和
end
),每隔 100 毫秒
console.log
一个数字,每次数字增幅为 1

2、返回的对象中需要包含一个

cancel
方法,用于停止定时操作

3、第一个数需要立即输出

function count(start, end) {
    console.log(start++); 
    let timer = setInterval(() => {
        if (start  {
            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
一直切割到最后。

标签: javascript

热门推荐