蓝桥杯前端真题笔记

箭头函数用法汇总

箭头函数是 ES6 中的一个新特性，它可以简化函数的定义和使用方式。以下是箭头函数的一些使用场景和技巧：

1. 简单的箭头函数

const double = num => num * 2;

上面的代码定义了一个名为 double 的箭头函数，它接收一个参数 num，将其乘以 2 并返回结果。箭头函数的语法非常简洁，只需要一个参数和一个表达式，并且可以省略大括号和 return 语句。

2. 多参数的箭头函数

const sum = (a, b) => a + b;

这个例子定义了一个名为 sum 的函数，使用箭头函数的语法将参数 a 和 b 的和返回了出来。

3. 不带参数的箭头函数

const sayHi = () => console.log('Hi there!');

上面这个例子定义了一个名为 sayHi 的箭头函数，它没有参数，只输出一个简单的字符串。

4. 箭头函数作为高阶函数的参数

const numbers = [1, 2, 3, 4, 5];

const doubledNumbers = numbers.map(num => num * 2);

这个例子使用了箭头函数作为 map 函数的参数，将数组 numbers 中的每个元素都乘以 2 并返回一个新的数组 doubledNumbers。在这里，箭头函数作为高阶函数的参数，简化了代码的书写，让代码更易读。

5. 箭头函数的this指向
箭头函数的 this 绑定是词法作用域的，因此它的 this 指向的是外部函数的 this 值，而不是箭头函数本身的 this。因此，箭头函数不能用作构造函数，也无法使用 arguments 对象。以下是一个例子：

const person = {
  name: 'Alice',
  greet: function() {
    console.log(`Hello, my name is ${this.name}.`);
  },
  greetArrow: () => {
    console.log(`Hello, my name is ${this.name}.`);
  }
};

person.greet(); // 输出: Hello, my name is Alice.
person.greetArrow(); // 输出: Hello, my name is undefined.

乾坤大挪移心法

乾坤大挪移心法

• 代码版本一

function mentalMethod(...args) { 
    if (args.length) {
        return mentalMethod;
      }  
      return '战胜峨眉,武当,少林'

}
console.log(mentalMethod('峨眉')('武当')('少林')());
console.log(mentalMethod('峨眉', '武当')('少林')());
console.log(mentalMethod('峨眉', '武当', '少林')());

代码解析：这段代码定义了一个 mentalMethod 函数，其参数使用了扩展运算符 ...args，表示函数可以接收任意数量的参数。当调用 mentalMethod 函数时，如果不传入任何参数，则返回字符串 '战胜峨眉,武当,少林'。

当函数 mentalMethod 接收到参数时，返回一个函数本身，这个函数继续接收一个参数，如果该函数被调用时参数为空，则返回前面累计的参数字符串，这些参数都是各组织的名称，用逗号隔开。

例如，mentalMethod('峨眉')('武当')('少林')() 相当于 mentalMethod('峨眉')('武当')('少林')()，因此它将返回一个函数，这个函数可以接收参数。接下来，('武当') 将作为这个函数的参数传入，结果又返回一个函数，接收的参数是('少林')，最后调用结果为空，则返回字符串 '战胜峨眉,武当,少林'。其他两个 console.log 语句也是类似的用法，只是参数的数量和名称不同。通过这种方式，程序可以动态构造和调用函数，并依据所传递的参数返回不同的结果。

• 代码版本二

function mentalMethod(...args) {
        return (...arg1) =>  !arg1.length ?  `战胜${args.join(',')}` : mentalMethod(...args,...arg1)

}
console.log(mentalMethod('峨眉')('武当')('少林')());
console.log(mentalMethod('峨眉', '武当')('少林')());
console.log(mentalMethod('峨眉', '武当', '少林')());

在这个例子中，person.greet() 方法是个普通的函数，它的 this 指向 person 对象。而 person.greetArrow() 是个箭头函数，它的 this 指向外层作用域的 this（在浏览器环境下，是 Window 对象），因此输出的结果是 undefined。

综上所述，箭头函数是 ES6 中的一个新特性，通常用于简化函数的定义和使用方式，并优化代码的可读性和可维护性。使用箭头函数需要注意其语法和特点，并且需要根据不同的场景选择合适的使用方式。
代码解析：这段代码定义了一个 mentalMethod 函数，其参数列表使用了扩展运算符 ...args，表示函数可以接收任意数量的参数。当调用 mentalMethod 函数时，返回一个箭头函数。如果该箭头函数被调用时参数为空，则返回拼接起来的字符串'战胜${args.join(',')}'，其中 args.join(',') 表示将 args 数组中的元素用逗号连接起来。

如果该箭头函数被调用时有参数传入，则接收这些参数，并将它们合并到之前调用 mentalMethod 函数时传入的 args 数组中，形成一个新的参数列表 ...arg1。然后再次返回 mentalMethod 函数本身，并传入新的参数列表 ...args,...arg1。这个过程一直循环下去，直到最后 (...arg1) 为空时，通过 join 方法将数组元素用逗号连接起来，形成最终的字符串。

这种实现方式与之前的实现方式思想相同，都是通过返回函数的方式实现动态构造和调用函数的功能。不同之处在于，这种实现方式使用了箭头函数的语法来简化代码，同时使用了递归调用的方法简化了之前嵌套调用函数的方式。

return (...arg1) =>  !arg1.length ?  `战胜${args.join(',')}` : mentalMethod(...args,...arg1)

• 这行代码是一个箭头函数的定义，其参数列表也使用了扩展运算符 ...arg1，表示函数可以接收任意数量的参数。箭头函数体里面包含了一个条件语句，其中 !arg1.length 表示如果 arg1 数组为空，即没有传入任何参数，则返回一个字符串，字符串的值为 '战胜${args.join(',')}'，其中 args.join(',') 表示将 args 数组中的元素用逗号连接起来形成字符串。

• 如果 arg1 数组不为空，则继续调用 mentalMethod 函数，传递参数列表 ...args,...arg1，即将之前传入的 args 数组和现在传入的 arg1 数组连接起来，形成一个新的参数列表。

• 这段代码使用了箭头函数的语法，将函数的定义和函数的实现写在了一起，并以一个函数对象的形式返回。如果传入参数，则返回一个新的函数对象，并将参数传递给新的函数对象。若参数为空，则直接返回字符串。可以通过这种方式实现函数的动态构造和调用。

定时器

在JavaScript中，可以使用setTimeout()函数和setInterval()函数来实现定时器功能。

setTimeout()函数用于在指定的时间后执行一次指定的函数，语法如下：

setTimeout(function, milliseconds);

其中，function是要执行的函数，milliseconds是时间，以毫秒为单位。

示例代码：

setTimeout(function(){
  console.log("定时器到期了。");
}, 2000);

上述代码会使定时器延迟2秒后输出"定时器到期了。"

setInterval()函数用于间隔指定的时间重复执行一个指定的函数，语法如下：

setInterval(function, milliseconds);

其中，function是要执行的函数，milliseconds是时间间隔，以毫秒为单位。

示例代码：

var i = 0;
setInterval(function(){
  i++;
  console.log("定时器已经运行了" + i + "次。");
}, 1000); //每隔1秒输出一次

上面的代码会使定时器每隔1秒输出一次"定时器已经运行了x次"。

怎么销毁定时器

要销毁定时器，可以使用clearTimeout()和clearInterval()函数。

clearTimeout()函数用于取消由setTimeout()函数创建的定时器，语法如下：

clearTimeout(timeoutID);

其中，timeoutID是由setTimeout()返回的定时器ID，可以使用它来取消该定时器。

示例代码：

var timeoutID = setTimeout(function(){
  console.log("定时器到期了。");
}, 2000);

//取消定时器
clearTimeout(timeoutID);

上述代码会创建一个定时器，并在2秒后输出"定时器到期了。"，但是在定时器到期前，clearTimeout()函数被调用，因此定时器被取消了，程序不会输出任何内容。

clearInterval()函数用于取消由setInterval()函数创建的定时器，语法如下：

clearInterval(intervalID);

其中，intervalID是由setInterval()返回的定时器ID，可以使用它来取消该定时器。

示例代码：

var i = 0;
var intervalID = setInterval(function(){
  i++;
  console.log("定时器已经运行了" + i + "次。");
}, 1000);

//取消定时器
clearInterval(intervalID);

上面的代码会使定时器每隔1秒输出一次"定时器已经运行了x次"，但是在定时器运行了一段时间后，调用了clearInterval()函数，因此定时器被取消了，程序不会再输出任何内容。