7个提高JavaScript代码质量的优秀实践，前端开发工程师面试

2、箭头函数(Arrow Functions)

作为新近被引入JavaScript的一项重要功能，箭头函数具有许多优点。首先，它们能够让JavaScript的函数看起来更加整洁，并且更便于开发者的编写。

let x = [1, 2, 3, 4] x.map(val => val * 2) // [2, 4, 6, 8] x.filter(val => val % 2 == 0) // [2, 4] x.reduce((acc, val) => acc + val, 0) // 10

如上述示例所示，“=>”后面的函数以一种简洁的语法，替换了传统函数。

• 如果函数主体是单个表达式，则已经隐含了作用域括号{}和return关键字，所以无需额外写入。

• 如果函数只有一个参数，则也已经隐含了参数括号()，同样无需额外写入。

• 如果函数体的表达式是一套字典(dictionary)，则必须将其括入括号()中。

箭头函数的另一个优势在于：为了避免由于使用this关键字，而引起的诸多不便，箭头函数并不会定义作用域，而是会存在于其父作用域中。也就是说，箭头函数没有任何针对this的绑定。

在箭头函数中，this的值与父作用域中的值是相同的。因此，箭头函数不能被用作各种方法或构造函数。它们既不适用于apply、bind或call，也没有针对super的绑定。

此外，箭头函数还会受到诸如：缺少可供传统功能访问的arguments对象，以及缺少函数体中的yield等其他限制。

可以说，箭头函数并非是与标准函数的1：1替代，而是向JavaScript中添加了额外的功能集。

3、可选链(Optional Chaining)

让我们来试想一个类似person对象的、具有深层嵌套的数据结构。业务应用需要访问到该对象的名字和姓氏。由此，我们可以编写出如下JavaScript代码：

public class HelloWorld { public static void main(String[] args) { System.out.println(“Hello World”); } }

然而，如果person对象并不包含嵌套的name对象，则可能会出现如下错误。

person = { age: 42 } person.name.first // TypeError: Cannot read property ‘first’ of undefined person.name.last // TypeError: Cannot read property ‘last’ of undefined

对此，开发人员往往需要通过如下代码，来予以解决。显然，这些代码不但冗长难写，而且可读性较差。

person && person.name && person.name.first // undefined

而作为JavaScript的一项新功能，可选链的语法允许您访问嵌套得更深的对象属性，而不用担心属性是否真的存在。

也就是说，如果可选链在挖掘过程遇到了null或undefined的值，那么就会通过短路(short-circuit)计算，返回undefined，而不会报错。

person?.name?.first // undefined

如上述代码所示，其结果代码简洁且明了。

4、空值合并(Null-ish Coalescing)

在引入空值合并运算符之前，在输入为空的情况下，JavaScript开发人员需要使用OR运算符–||，以回退到默认值。这就会导致：即使出现合法的、但属于虚假值(falsy values)，也会被回退到默认值的情况。

function print(val) { return val || ‘Missing’ } print(undefined) // ‘Missing’ print(null) // ‘Missing’ print(0) // ‘Missing’ print(‘’) // ‘Missing’ print(false) // ‘Missing’ print(NaN) // ‘Missing’

如今，JavaScript推出了null合并运算符–??。它能够保证只有在前面的表达式为null-ish的情况下，才会触发回退。值得注意的是，此处的空值是指null或undefined。

function print(val) { return val ?? ‘Missing’ } print(undefined) // ‘Missing’ print(null) // ‘Missing’ print(0) // 0 print(‘’) // ‘’ print(false) // false print(NaN) // NaN

如此，您可以确保自己的程序能够接受虚假值作为合法输入，而不会最终被回退。

5、逻辑赋值(Logical Assignment)

假设您需要先判断是否为空，再为变量分配数值，那么如下代码便展示了这样的基本逻辑：

if (x === null || x == undefined) { x = y }

如果您熟悉上面提到的短路计算的工作原理，则可能会使用null-ish合并运算符(coalescing operator)，将上述三行代码替换为如下更简洁的版本。

x ?? (x = y) // x = y if x is nullish, else no effect

由上述代码可知，如果x为null-ish的话，我们可以使用null-ish合并运算符的短路功能，来执行第二部分(x = y)。这段代码虽然非常简洁，但是不太容易被阅读或理解。而我们完全可以使用如下代码，根据逻辑上的null-ish分配，来消除此类变通方法。

x ??= y // x = y if x is nullish, else no effect

同样，JavaScript还引入了逻辑AND赋值–&&=、逻辑OR赋值–||=的运算符。这些运算符仅在满足特定条件时被执行赋值，否则并不起作用。

x ||= y // x = y if x is falsy, else no effect x &&= y // x = y if x is truthy, else no effect

专家建议：如果您有过Ruby的编程经验，那么您会一眼识别出||=和&&=运算符。毕竟Ruby并没有虚假值的概念。

6、已命名捕获组(Named Capture Groups)

不知您是否知晓正则表达式中的“捕获组”的相关概念?如下面的代码段所示，它是与括号中的正则表达式部分匹配的字符串。

let re = /(\d{4})-(\d{2})-(\d{2})/ let result = re.exec(‘Pi day this year falls on 2021-03-14!’) result[0] // ‘2020-03-14’, the complete match result[1] // ‘2020’, the first capture group result[2] // ‘03’, the second capture group result[3] // ‘14’, the third capture group

一直以来，正则表达式都能够支持已命名捕获组。这是一种通过引用名称、而非索引，来捕获各个组的方式。

目前，在ES9中，该功能已被JavaScript实现。正如下面的代码段所示，其结果对象包含了一个嵌套的组对象，其中每个捕获组的值都能够映射到其名称上。

let re = /(?\d{4})-(?\d{2})-(?\d{2})/ let result = re.exec(‘Pi day this year falls on 2021-03-14!’) result.groups.year // ‘2020’, the group named ‘year’ result.groups.month // ‘03’, the group named ‘month’ result.groups.day // ‘14’, the group named ‘day’

而且，新的API与JavaScript的解构分配功能，也能够完美地结合在一起(请参见下面的代码段)。

let re = /(?\d{4})-(?\d{2})-(?\d{2})/ let result = re.exec(‘Pi day this year falls on 2021-03-14!’) let { year, month, day } = result.groups year // ‘2020’ month // ‘03’ day // ‘14’

7、async和await

众所周知，异步性是JavaScript的一项强大功能。许多可能长时间运行、或较为耗时的函数，能够返回Promise，而不会被阻止运行。

const url = ‘https://the-one-api.dev/v2/book’ let prom = fetch(url) prom // Promise {} // wait a bit prom // Promise {: Response}, if no errors // or prom // Promise {: Error message}, if any error

在上述代码段中，针对fetch的调用返回了一个状态为“待处理(pending)”的Promise。而当API返回响应时，它将会转换为“已实现(fulfilled)”的状态。

在Promises中，你可以执行如下操作，来通过API的调用，将响应解析成为JSON。

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）

最后

基础知识是前端一面必问的，如果你在基础知识这一块翻车了，就算你框架玩的再6，webpack、git、node学习的再好也无济于事，因为对方就不会再给你展示的机会，千万不要因为基础错过了自己心怡的公司。前端的基础知识杂且多，并不是理解就ok了，有些是真的要去记。当然了我们是牛x的前端工程师，每天像背英语单词一样去背知识点就没必要了，只要平时工作中多注意总结，面试前端刷下题目就可以了。

什么？你问面试题资料在哪里，这不是就在你眼前吗（滑稽

些内容对你有帮助，可以扫码获取！！（备注：前端）**

最后

基础知识是前端一面必问的，如果你在基础知识这一块翻车了，就算你框架玩的再6，webpack、git、node学习的再好也无济于事，因为对方就不会再给你展示的机会，千万不要因为基础错过了自己心怡的公司。前端的基础知识杂且多，并不是理解就ok了，有些是真的要去记。当然了我们是牛x的前端工程师，每天像背英语单词一样去背知识点就没必要了，只要平时工作中多注意总结，面试前端刷下题目就可以了。

什么？你问面试题资料在哪里，这不是就在你眼前吗（滑稽

资料领取方式：戳这里免费领取