JavaScript五个常用功能是什么

2023-06-15 14:03:09 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

中第

个函数，即

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
一直切割到最后。

相关文章