2024年前端最全【面试题】ES6语法五之箭头函数_es6 箭头函数 面试题，【面试宝典】

专业技能

一般来说，面试官会根据你的简历内容去提问，但是技术基础还有需要自己去准备分类，形成自己的知识体系的。简单列一下我自己遇到的一些题

• HTML+CSS
• JavaScript
• 前端框架
• 前端性能优化
• 前端监控
• 模块化+项目构建
• 代码管理
• 信息安全
• 网络协议
• 浏览器
• 算法与数据结构
• 团队管理
• 开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

最近得空把之前遇到的面试题做了一个整理，包括我本人自己去面试遇到的，还有其他人员去面试遇到的，还有网上刷到的，我都统一的整理了一下，希望对大家有用。

其中包含HTML、CSS、JavaScript、服务端与网络、Vue、浏览器等等

由于文章篇幅有限，仅展示部分内容

箭头函数是这一部分(x, y) => x + y, 然后这个函数引用被赋给变量foo。

函数体如果只有一个表达式可以省略{..},并且前面有一个隐含的return。

箭头函数总是函数表达式，并不存在箭头函数声明，它还是匿名的函数表达式。它们没有用于递归或者事件绑定/解绑定的命名引用。

箭头函数支持普通函数参数所有功能：默认值，解构，rest参数等。如果这个函数越长, => 带来的好处越小，反之越大。

this指向 在普通函数中，this指向是动态的，而在箭头函数中，是可以预测的。this在箭头函数中，和词法作用域有关。

var ctrl = {
    makeRequest: function(){
        var self = this;
        btn.addEventListener('click', function (){
            self.makeRequest()
        }, false)
    }
}

上述代码修改成箭头函数的话，是这样的：

var ctrl = {
    makeRequest: function(){
        btn.addEventListener('click',  ()=>{
            this.makeRequest()
        }, false)
    }
}

这样，省略了var self = this关键字function。

但如果全部改为箭头函数的话，this就会乱套。此时指向全局对象。

// 不推荐， 改变了函数原有的本意
var ctrl = {
    makeRequest: ()=>{
        btn.addEventListener('click',  ()=>{
            this.makeRequest()
        }, false)
    }
}

如果要还原函数原来的意思，我们需要把var self = this这样的hack，或者通过var arg=Array.prototype.slice.call(..)词法复制。这样就达到了安全的全部替换成箭头函数的目的了。

结语：虽然箭头函数给我带来了便利，但是我们在使用的过程中还是要注意一些隐秘的坑。this的指向问题，是否需要递归？是否需要硬绑定或者是解绑… 判断函数体的长度是否适用箭头函数，可读性如何？

学习分享，共勉

题外话，毕竟我工作多年，深知技术改革和创新的方向，Flutter作为跨平台开发技术、Flutter以其美观、快速、高效、开放等优势迅速俘获人心

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

[外链图片转存中…(img-J8WntGXA-1715520179308)]