每日五道前端面试题--day5-CSDN博客

本文链接：https://blog.csdn.net/Likestarr/article/details/134179435

如果你最近想要换工作或者巩固一下自己的前端知识基础，不妨和我一起参与到每日刷题的过程中来，如何？

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

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

下面是我自己的理解：

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

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

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


var obj = {
    getArrow: function getArrow () {
        var _this = this;
        return function () {
            console.log(_this);
        }
    }
}

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

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

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

补充js中的几种作用域：

1. 全局作用域
1. 函数作用域
1. eval作用域
1. with作用域
1. 模块作用域
1. try catch中的作用域

rest参数功能由扩展运算符实现；扩展运算符在此处的作用是将分离参数整合成为一个数组。而在rest之前，想要实现相同的功能只能通过Function.prototype.apply。
rest参数的特点为：
- 不计入函数参数长度
- 只能放在最后，并且只能有一个
手动实现剩余函数的功能

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

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

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