前言

一名优秀的程序员，往往不仅仅是能够实现各种功能！而是能够写出让所有人都能读的,规范的代码！今天要学习的内容就是如何提高我们代码的可读性，优化我们的代码，规范化我们的代码！

正文

代码如何登堂入室?

本文主要归纳于如何提高代码的可读性！如何优化代码！

我们拿一个coding案例来进行分析：

javascript 复制代码

题目名称：返回一个固定格式的电话号码。
例：(123) 456-789

拿到这样的题目，相信很多大佬已经可以信手拈来！

但是我们今天的主题不是如何实现功能，而是将自己的代码可读性不断提高！

首先拿到代码，大部分人就开始一股脑的去开始实现功能！

记住一句话！

代码的可读性高于一切！

我们开始的时候就要编写注释！有助于我们功能构思的思路，也能让我们的代码看起来Professional（专业的）。

那么注释该怎么写？直接展示：

javascript 复制代码

/**
 * @func 返回固定格式的电话号码 (123)456-7890 功能
 * @params array[1,2,3,4,5,6,7,8,9,0] 参数
 * @return (123)456-7890
 * @author JSsolder-路修远i
 */

相信大家看到这里，欸，这不是刷题经常能看到的嘛。没错！就是它。

我们要学会自己编写，养成良好的习惯，这样当我们同事，老板，面试官看到我们的代码，首先就能有一个整体的印象！规范使用注释可以提高代码的可读性和可维护性。我们总结一下注释的使用方法：以下是一些规范使用注释的技巧：

在需要解释代码的地方添加注释，特别是函数、类、模块等的定义和重要代码段。
注释应该清晰、简洁，并解释代码的功能和目的。避免使用模糊的注释或解释过于复杂的代码。
使用有意义的注释，避免使用无关的缩写或俚语。
对于每个函数或方法，应该在其上方添加注释，说明其功能、参数和返回值。
对于复杂的逻辑或算法，应该在其上方或下方添加注释，解释其思路和实现细节。
对于需要特殊处理的代码，应该在其上方或下方添加注释，说明其特殊之处和注意事项。
对于需要调试的代码，应该在其上方或下方添加注释，说明其调试方法和思路。
在需要引用其他文件或资源的地方，应该在其上方或下方添加注释，说明其用途和来源。
在需要使用特定编程技巧或方法的地方，应该在其上方或下方添加注释，说明其技巧或方法的特点和使用注意事项。
遵循一致的注释风格和规范，例如使用单行注释或多行注释，以及适当的缩进和对齐

补充学习一些知识点：对象函数也是对象 js除了基本数据类型其余全是对象，日期等等等；变量的类型由值来决定；

好！来到功能环节！我们就以最简单的形式进行展示！

我们可以这样写：

javascript 复制代码

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

javascript 复制代码

console.log(phoneNumber([1,2,3,4,5,6,7,8,9,0]));
输出：(123) 456-7890

在平常的工作当中，我们常常要去优化自己的代码，例如：让原本200行的代码优化到50行。

观察上文代码，我们要如何对这一段代码进行优化呢？

在ES5版本，我们按照上文编写是没有问题的，但是ES6版本给我们带来了很多优化代码的方式!

例如上文代码：我们可以由ES5老版本 =>ES6简版

我们可以在这里使用箭头函数 ，并且我们可以少写一个Function

javascript 复制代码

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

javascript 复制代码

console.log(phoneNumber([1,2,3,4,5,6,7,8,9,0]));
输出:(123) 456-7890

这样，我们代码的高级感就慢慢展露出来了。

当然也有不少大佬肯定想到了**字符串模板！**于是我们的代码可以写成这个丫子：

javascript 复制代码

phoneNumber = (numbers) => `(${numbers[0]}${numbers[1]}${numbers[2]}) ${numbers[3]}${numbers[4]}${numbers[5]}-${numbers[6]}${numbers[7]}${numbers[8]}${numbers[9]}`

同时，在ES6版本中有这样一条：如果函数表达式只有一条代码可以去掉{}花括号

什么是函数表达式？

在JavaScript中，函数表达式是一种可以赋值给变量的函数。换句话说，它是一种可以作为表达式一部分的函数，并且可以分配给变量。

javascript 复制代码

console.log(phoneNumber([1,2,3,4,5,6,7,8,9,0]));
输出：(123) 456-7890

注意！！在我们Coding的时候，不会自动换行！！字符串模板不会自动换行，导致我们的代码过分冗长了！可读性不好！

所以在这个案例当中，字符串模板并不适合。

所以说，有时候换行也是提高我们代码可读性的一个手段。

我们再讲一个！hackthon 智商游戏！

题目这样改一下

javascript 复制代码

题目名称：返回一个固定格式的电话号码。
给你一个:"(xxx) xxx-xxxx"给你一个模板返回电话号码

相信，还是有很多大佬轻轻松松实现！

今天我们就最后介绍一个方法！replace()方法,面试题常考,有了这个方法，上述题目，我们也无需过多思考，直接这样做:

javascript 复制代码

function createPhoneNumber(numbers){
    var format = "(xxx) xxx-xxxx";//这是一个模板
    for (let i = 0;i<numbers.length;i++){
        format = format.replace('x',numbers[i])//replace 方法考的最多，考点常有
    }
    return format;
}

javascript 复制代码

console.log(createPhoneNumber([1,2,3,4,5,6,7,8,9,0]))
输出:(123) 456-7890

这样就，轻松解决了此类问题。

总结

写代码如何登堂入室?作为一名新手小白，我们不能单单只顾代码功能的实现，而忽略了代码的规范性和可读性，代码新手的编程素养和JS功底也是非常重要的！

想要成为一名优秀的程序员，我们要学的第一步往往是注释，接下来就是如何优化我们的代码。统一使用es6风格，统一全篇风格！

利用注释和换行等操作提高我们的代码可读性！

永远记住一句话：代码的可读性高于一切

当然公司手册也是很重要的哦!!

好了我们今天的学习就到此为止啦！欢迎大家分享自己的见解和指正！点个小赞鼓励一下吧！！

JS代码小技巧-代码这样写，老板都夸你行！-小白篇

前言

正文

总结