2道js基础面试题与1道css基础面试题

最新推荐文章于 2024-04-07 17:31:03 发布

Code_Dreaming

最新推荐文章于 2024-04-07 17:31:03 发布

阅读量68

点赞数 1

文章标签： css js

本文链接：https://blog.csdn.net/weixin_45704555/article/details/119549318

版权

js面试题

No.1 字符串处理

编写一个函数，它接受一个由10个整数组成的数组（0-9之间），
该函数以形似（123）456-7890 的美国电话号码的形式返回这个数字的字符串

思路1 字符串增强模板

将数组元素转化为字符，在通过字符串拼接完成效果展示，其中返回时使用的反引号可以在字符串当中嵌入变量，是es6中的增强字符串模板。

代码实现：

function createPhoneNumber(nums) {
    return `(${nums[0]}${nums[1]}${nums[2]}) ${nums[3]}${nums[4]}${nums[5]}-${nums[6]}${nums[7]}${nums[8]}${nums[9]}`;
}

思路2 字符串replace函数

这里我们调用了js中字符串的api ： replace，逐一将我们定义好的format形式中的‘x’替换掉，使获取最终的期望结果

代码实现：

const createPhoneNumber = (nums) => {
    let format = '(xxx)xxx-xxxx';
    for (let i = 0; i < nums.length; i++) {
        format = format.replace('x', nums[i]);
    }
    return format;
}

No.2 情形分类讨论

facebook 实现一个函数，它的输入是一个数组，其中包含喜欢该项目的人的姓名，返回值是如下格式：

输入1：[]
输出1： “no one likes this”

输入2：[“Peter”]
输出2：“Peter likes this”

输入3：[“Jacob”, “Alex”]
输出3：“Jacob and Alex like this”

输入4：[“Max”, “John”, “Mark”]
输出4：“Max, John and Mark like this”

输入5：[“Max”, “Jacob”, “Mark”, “Max”]
输出5：“Max,Jacob and 2 others like this”

思路1 字符串replace函数

本题我们可以通过switch-case语句来枚举，但更优美的做法是字符串替换，与上题思路相似，我们先定义好一个题目给的基本模板，再根据具体情况，去replace掉模板中的变量内容；
在实现时，这里有个问题，即当喜欢的人数大于4后，输出结果形式就固定了，一般我们是想用if语句去判断一下，但更好的解法是调用Math.min()函数，将实际人数与上限人数相比较，取小的，这样的代码会更加简洁

代码实现：

function likes(names) {
    let templates = [
        'no one likes this',
        '{name} likes this',
        '{name} and {name} like this',
        '{name}, {name} and {name} like this',
        '{name}, {name} and {n} others like this' 
    ]
    // 根据数组的长度 取出相应的模板
    // if(names.length > 4) names.length = 4;
    let idx= Math.min(names.length, 4); //Math.min() 很常用，取较小的值 
    // idx为经过处理后的人数
    // console.log(idx);
    let str = templates[idx];
    for(let i = 0; i < names.length; i ++) {
        str = str.replace("{name}", names[i]);
    }
    // if (idx == 4) {
    //     str = str.replace("{n}", names.length - 2);
    // }
  
}

思路2 正则表达式

虽然上面的做法已经很好了，但把{name}和{n}的处理分开来，还是太冗长了，我们可以利用正则表达式，再利用三元运算符 [条件] ? [符合条件的结果] : [不符合的结果] 去同时处理这两种情况

代码实现：

function likes(names) {
    let templates = [
        'no one likes this',
        '{name} likes this',
        '{name} and {name} like this',
        '{name}, {name} and {name} like this',
        '{name}, {name} and {n} others like this' 
    ]
    let idx= Math.min(names.length, 4); //Math.min() 很常用，取较小的值 
	return templates[idx].replace(/{name}|{n}/g, function(val) {
		// 'g'表示的是替换 ！
		// console.log(val, '-------');
		return val == '{name}'?names.shift():names.length;
	});

css面试题

No.1 提示隐藏

实现按钮上的隐藏提示，当用户把鼠标放在按钮上时，按钮下的提示会显现出来，否则隐藏，具体效果如下：

正常状态：
在这里插入图片描述
鼠标在提示框上的悬浮状态：

代码实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        a {
            text-decoration: none;
        }
        .hover-tips {
            display: block;
            width: 100px;
            text-align: center;
            color: #fff;
            position: relative;
            padding: 0 20px;
            border-radius: 10px;
            height: 40px; /* 标准盒子模型，这个高度是不包括padding和margin党的， box-sizing:border-box; */
            background-color: #66f;
            line-height: 40px;
        }
        .hover-tips + .hover-tips {
            margin-top: 10px;
        }
        .btn-1::after {  /* 伪元素 */
            position: absolute;
            left: 0;
            top: 0;
            border-radius: 5px;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0, .5);
            opacity: 0;
            text-align: center;
            font-size: 12px;
            content: attr(data-msg);
            /* 这是本格css中较为精彩的部分，在伪元素中使用attr抓取节点的属性，显示hello world */
            transition: all 300ms;
            /* 这是为了使设置的动画效果更加流畅 */
        }
        .btn-1:hover::after { 
            /* 利用hover伪类，当鼠标经过时，会改变位置，与transition配合使用！ */
            left: calc(100% + 20px); 
            /* calc是一个函数，离自身的宽度的100%的20个像素 */
            opacity: 1; /* 刚开始透明度为0，处于隐藏状态；当用户的鼠标悬浮在其上后，恢复可见状态 */
        }
    </style>
</head>
<body>
    <div class="bruce flex-ct-y" data-title="使用attr(抓取节点属性)">
        <a href="http://www.baidu.com" data-msg="Hello World" 
        class="hover-tips btn-1">提示框</a>
        <a href="http://www.baidu.com" class="hover-tips btn-2"></a>
    </div>
</body>
</html>

Code_Dreaming

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2道js基础面试题与1道css基础面试题

js面试题No.1编写一个函数，它接受一个由10个整数组成的数组（0-9之间），该函数以形似（123）456-7890 的美国电话号码的形式返回这个数字的字符串思路1在这里插入代码片思路2在这里插入代码片No.2facebook 实现一个函数，它的输入是一个数组，其中包含喜欢该项目的人的姓名，返回值是如下格式：输入1：[] 输出1： “no one likes this”输入2：[“Peter”]输出2：“Peter likes this”输入3：[“Jac
复制链接

扫一扫