鹅厂面试题之字符串拼接，顺带认识箭头函数以及代码规范

php 复制代码

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

}

在做题目之前我想给大家先聊聊公司写代码的规范：

面试的时候我们做这道题面试官是可以看出我们的编程素养和js功底的。当我们拿到一个题目的时候，我们是要实现这个函数的功能，一般人可能就是直接上来去实现功能，其实这样会降低面试官对你的好感度。因为我们在一个公司里去写代码肯定需要给到别人手里，代码需要一个可读性，恰巧这个代码可读性高于一切

如何实现代码的可读性呢？

我们要做的就是多注释，能换行就换行，以及去优化代码。国内很多公司写js代码已经基本上都统一到了es6这一版本。就比如我们的函数，函数我们就用es6新出的箭头函数。箭头函数我们稍后优化代码的时候再进行详细介绍。不过国外的公司还是在用es5的老版本函数，也就是这里面试题给出的function函数。

好，现在我们进入正题，分析下这个题目。

看下函数的注释部分，函数需要实现的功能就是要返回固定格式的电话号码并且它给出的参数是一个数组返回的值，在原来的数组中穿插了（）和空格，最后的注释是作者，以后我们在公司写代码也需要学习这一点，前面的注释按照这个规范来。

题目其实很简单，我们可以在循环中在特定的下标位置添加特殊符号即可，或者更直接，直接return原地拼接，这里我们优先考虑后者。

css 复制代码

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

运行结果：(123) 456-7890

这里用return的好处便是可以进行换行，换行不影响输出。有些萌新这里写代码可能就是直接一行不换行，这样的习惯非常不好，公司如果看到你写出这样的代码，可能第二天就被开除了[doge]，所以一定要记得换行！

箭头函数

es6引入了箭头函数（Arrow Functions），它是一种更简洁的函数定义方式。箭头函数通常用于匿名函数或函数表达式，并且有一些特性。

如果函数只有一个参数，可以省略括号
如果函数体只包含一个表达式，你还可以省略花括号和return关键字

这题函数我们换成箭头函数

ini 复制代码

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

我们发现箭头函数在函数定义上相比老版本函数少写了个function。

字符串模板

这里我们可以换个方式写输出内容，采用es6新出的字符串模板

javascript 复制代码

newPhoneNumber = (numbers) => `(${numbers[0]}${numbers[1]}${numbers[2]}) ${numbers[3]}${numbers[4]}${numbers[5]}-${numbers[6]}${numbers[7]}${numbers[8]}${numbers[9]}`
console.log(newPhoneNumber([1,2,3,4,5,6,7,8,9,0]))

这里是没有换行的，如果强制换行写字符串模板那么输出结果也会进行换行，所以这里为了代码的可读性，我们还是更推荐使用return。注意字符串模板，${value}用一个美元符号然后花括号里面放值，并且最外层有个云符号 `` 也就是tab键上面的符号。这里一个函数体内一个语句，我们省去了{}和return。

Hackathon

在智商游戏Hackathon里面这道题的解法非常精彩

ini 复制代码

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

}

这里用了模板思想和replace字符串方法，replace字符串方法在这里就可以看出，里面有两个参数，第一个参数被第二个参数给替代，这个方法考的非常多。

BEM（Block Element Modifier）

上面的面试题已经讲完了，说起这个代码规范问题，其实还有个学术名词叫做BEM，下面顺便带大家认识下BEM

BEM（Block Element Modifier）是一种命名规范，用于编写可维护和可扩展的CSS和HTML代码。BEM的主要目标是提高代码的可读性，减少样式冲突，并使代码更易于维护。

为了方便大家认识BEM命名规范，我们引用WeUI一段按钮组件代码给大家举例子。

有些人可能不太清楚WeUI这个名词，下面给出解释：

"WeUI" 是一个用于移动端Web应用开发的UI框架，特别是针对微信公众号开发而创建。它是一套基于HTML、CSS和JavaScript的开源前端框架，旨在帮助开发者轻松构建具有优秀用户体验的移动Web应用

xml 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WEUI源码</title>
    <style>
        .weui-btn {
            /* 内部元素可以针对这里相对定位     relative考虑全面 */
            position: relative;
            /* 让它变成一个块级的盒子 */
            display: block;
            width: 184px;
            /* margin: 0 auto; */
            margin-left: auto;
            margin-right: auto;
            padding: 12px 24px;
            box-sizing: border-box;
            font-size: 17px;
            font-weight: 500;
            text-align: center;
            text-decoration: none;
            color: white;
            line-height: 1.41176471;
            border-radius: 8px;
            /* 按上去的时候高亮 0000就是把他去掉  css reset不同的浏览器有不同的效果 */
            -webkit-tap-highlight-color: rgba(0,0,0,0);
            /* 让用户无法选中上面的文字,按钮上的字不用选中复制 */
            user-select: none;
        }
        .weui-btn_primary{
            background-color: green;
        }
    </style>
</head>
<body>
    <!-- css 国际命名规范BEM weui-btn Block 状态 _primary -->
    <!-- 按钮我们不用button button太复杂 而且不跳转 -->
    <a href="javascript:;" class="weui-btn weui-btn_primary">主要操作</a>
</body>
</html>

运行画面：

是不是感觉非常符合微信的按钮。

这里如何体现出BEM的呢：

首先按钮会有很多种，因此有很多共性，共性我们就用class来写，比如 .btn 这是个基类在腾讯里面这是个组件名

腾讯命名就会是.weui-btn_primary 组件名前面的是项目代号，如果以后你写代码也这样去命名，一般公司就可能清楚你的成分了[doge]

好了，如果觉得本文对你有帮助的话，求个免费的点赞，不过分吧?