每日五道前端面试题--day5

以下题目来自掘金等其它博客，但是问题的答案都是根据笔者自己的理解做出的。如果你最近想要换工作或者巩固一下自己的前端知识基础，不妨和我一起参与到每日刷题的过程中来，如何？

第五天要刷的面试题如下：

1. 箭头函数的this指向
2. 对比普通函数和箭头函数
3. 谈一谈对rest参数的理解
4. 对比map和object
5. 列举常见的正则表达式

下面是我自己的理解：

1. 箭头函数的this指向

• 与普通的函数不同，js的箭头函数并没有属于自己的this，实际上我更愿意将this看成是传入函数的一个参数（尽管不是通过参数列表而是通过调用的方式传入的）；
• 从这个角度去理解的话，箭头函数实际上在调用的时候并没有被传入这个参数；
• 取而代之的是，在函数执行的过程中，箭头函数使用的是固化/内置的this值，这个值就是箭头函数在创建的时候所在作用域的一个对象。

下面使用babel转换箭头函数之后的结果说明这个问题：

// 源码
const obj = {
    getArrow () {
        return () => {
            console.log(this);
        }
    }
}

// 经过babel转译之后的结果
var obj = {
    getArrow: function getArrow () {
        var _this = this;
        return function () {
            console.log(_this);
        }
    }
}

2. 对比普通函数和箭头函数

• 1. 从形式的角度来看：箭头函数更加的简洁：
  • 无参数的情况使用括号代替之
  • 有一个参数的时候可以不使用括号
  • 可以省略大括号
  • 使用void表达式表示返回值为undefined的情况

let fn = () => void doSomething();

• 2. 箭头函数没有自己的this，使用call apply bind的时候也不会改变this的指向；本质上就是使用a.b格式调用箭头函数的时候不会将this传入运行时；所以和this相关的操作不生效（比无法改变this的指向更加贴切）
• 3. 箭头函数没有自己的原型对象，也就是没有prototype属性；而在实例化一个对象的时候必须要用到构造函数的原型对象，所以箭头函数充当构造函数也是非常的不合适的。
• 4. 箭头函数上没有arguments属性，自然也就没有length和callee等
• 5. 箭头函数不可以作为生成器，原因为：内部缺少[[Generator]]属性;这其实是一个伪命题，因为不应该将function*看成是function的衍生物，它们只是长得比较像而已；应该这样理解：function function* 和箭头函数是三种不同的东西。

补充js中的几种作用域：

• 1. 全局作用域
• 2. 函数作用域
• 3. eval作用域
• 4. with作用域
• 5. 模块作用域
• 6. try catch中的作用域

3. 谈一谈对rest参数的理解

1. rest参数功能由扩展运算符实现；扩展运算符在此处的作用是将分离参数整合成为一个数组。而在rest之前，想要实现相同的功能只能通过Function.prototype.apply。

2. rest参数的特点为：

   • 不计入函数参数长度
   • 只能放在最后，并且只能有一个

3. 手动实现剩余函数的功能

function getRest (arguments, num) {
    const _arr = Array.prototype.slice.call(null, arguments);
    const _rest = _arr.splice(0, num);
    return [..._arr, _rest];
}

4. 对比map和object

• 1. 键：map上的键是有顺序的，顺序就是插入的顺序，并且可以是任何类型的；而object中的键是没有顺序的，并且只能是string number symbol;此外object中还有多余的键
• 2. 大小和可迭代性：map可以通过封装好的接口直接进行迭代或者获取大小;但是object需要经过预先的处理才能显现相同的效果
• 3. 性能：在频繁的增删键值对的场景下，map的性能高于object；这是因为map中做了优化；map基于哈希表，object中有哈希表的思想，但是不是通过哈希表实现的；map使用的哈希表的容量比较大，所以占用的内存多一些，但是速度快，本质上是通过空间换时间。

总之：在场景简单，数据结构也简单的情况下优先使用object可以节省内存；而在复杂情况下使用map可以提高效率。

5. 列举常见的正则表达式

• 1. 16进制的颜色值：/#([0-9a-zA-Z]{6}|[0-9a-zA-Z]{3})/g
• 2. 匹配日期：/^(0-9{4})-(0[1-9]|1[0-2])-(0[1-9][12][0-9]|3[0-1])$/g
• 3. 匹配qq号码：/^[1-9][0-9]{4,10}$/g
• 4. 匹配手机号码：/^1[34578]\d{9}$/g
• 5. 常见的用户名：/^[a-zA-Z\$][a-zA-Z0-9_\$]{4,16}$/g