JS小白请看！一招让你的面试成功率大大提高——规范代码

前言

规范的代码是可以帮你进入优秀的企业的。一个规范的代码，通常能起到事半功倍的作用。并非规范了就代表高水平，实际上是规范的代码更有利于帮助你理解开发语言理解模式理解架构，能够帮助你快速提升开发水平。今天我们就来聊聊，如何规范我们的代码，如何优化我们的代码，如何使我们的代码可读性提高。

正文

• 这里我们先放出一道面试题

输入一个数组，例如：array [1, 2, 3, 4, 5, 6, 7, 8, 9, 0]，
返回一个固定格式的电话号码 例如：（123）456-789

function phoneNumber(numbers){

}

• 注释

当我们拿到这道题时，我们需要先做什么呢？是一上来直接实现这个函数的功能吗？一般人可能就这样上了，但是，如果面试官看到你这样去写代码，这样会显现你的编程素养特别差，面试官对你的好感度肯定也会随之下降。那我们应该怎么做呢？我们需要先写一个良好的注释

/**
 * @func 返回固定格式的电话号码     函数功能
 * @params array [1, 2, 3, 4, 5, 6, 7, 8, 9, 0]
 * @return (123) 456-7890
 * @author  jser
 */
 // 函数定义
 function phoneNumber(numbers) {
 
 }

良好的注释可以提高代码的可读性。小伙伴们要记住，代码的可读性高于一切！

在大公司中，一份代码可能会经过许多的程序员阅读或修改。如果你写了良好的注释，当你的代码被他人阅读时，其他程序员可以快速读懂这份代码，或者根据自己的需要去修改这份代码，这样大大节省了时间，也提高了团队的效率。

• 换行

当我们把良好的注释写好之后，就可以写代码去实现功能了。

function phoneNumber(numbers) {
    return "(" + numbers[0] + numbers[1] + numbers[2]+ ")" + " " + numbers[3]+numbers[4]+numbers[5] + "-" + numbers[6] + numbers[7] + numbers[8] + numbers[9]+""
 }

"什么？这是什么代码，还需要我拖动去查看后面的，你可以走了！"

相信很多小伙伴看到这串代码时，也跟小编一样的头疼，这代码也看的太费劲了吧，怎么全部都挤在一行里去了。运行了一下之后，发现运行结果是对的，但是小编是不建议大家这样写代码的，我们要适当的进行换行操作，这样同样提高了代码的可读性。

function phoneNumber(numbers) {
       return "(" + numbers[0] + numbers[1] + numbers[2]
       + ")" + " " + numbers[3] + numbers[4] + numbers[5] 
       + "-" + numbers[6] + numbers[7] + numbers[8] + numbers[9] + ""
 }

ES6

ES5和ES6都是JavaScript语言的版本。ES5是ECMAScript 5的简称。自ES6（ECMAScript2015）出来后，ES6引入了一些新的语法和关键字，使得代码更加易读、易写，提高了可维护性，例如解构赋值、箭头函数、模板字符串等。

• 箭头函数

在ES5旧版本中，很多小伙伴会觉得function很繁琐，而且到处都是function。而箭头函数可以算是函数的简版，它的结构变得比函数简单。那我们如何使用箭头函数呢？

1. 去掉function，在()和{}之间加=>
2. 如果参数列表只有一个形参，可省略()
3. 如果函数体只有一句话，可省略{},如果仅有的一句话函数体是return xxx，就必须省略return

在上面那个例子里，我们可以这样写箭头函数

phoneNumber = (numbers) =>"(" + numbers[0] + numbers[1] + numbers[2]
    + ")" + " " + numbers[3] + numbers[4] + numbers[5] 
    + "-" + numbers[6] + numbers[7] + numbers[8] + numbers[9] + ""
   

可以看出，箭头函数的结构比我们使用旧版的函数会简单许多，小伙伴们可以选择使用啊。

• 模板字符串

模板字符串，也称为模板字面量，是 ECMAScript 6（ES6）引入的一种新的字符串表示法。它允许在字符串中嵌入变量和表达式，使用反引号（``）包围字符串内容。与传统字符串拼接相比，模板字符串具有以下优势：

模板字符串允许在字符串中插入变量值或表达式，使用 ${} 语法。这使得代码更加清晰和可读，不需要繁琐的字符串拼接。

const name = 'junjun'; 
const greeting = `Hello, ${name}!`; // 使用模板字符串插入变量 
console.log(greeting);// 输出：Hello, junjun!

那机灵的小伙伴就问了，电话号码那个例子是不是也可以使用模板字符串，我们直接上代码

phoneNumber = (numbers) => `(${numbers[0]}${numbers[1]}${numbers[2]})
 ${numbers[3]}${numbers[4]}${numbers[5]}
 -${numbers[6]}${numbers[7]}${numbers[8]}${numbers[9]}`
 //输出 (123)
 //     456
 //   -7890

根据结果可以看到，使用模板字符串时，当我们进行换行操作时，模板字符串也会换行。模板字符串虽然方便，但小伙伴们要记住，不是在所有情况下，都可以使用模板字符串的。

总结

代码的可读性高于一切。我们作为小白，在慢慢成长的过程中，一定要尽早的规范自己的代码，提高代码的可读性，学习ES6的语法。当我们以后进入企业工作之后，公司会统一我们的代码风格，并且规定使用哪些语句。