前端面试实习生(基础题)

柠檬4.0

已于 2023-07-16 20:23:11 修改

阅读量409

点赞数

文章标签： javascript 前端 html css

于 2023-07-14 16:01:31 首次发布

本文链接：https://blog.csdn.net/m0_67081826/article/details/131720311

版权

前言:经过一年的学习，我对vue框架有了清楚的认识，我就想着去找实习工作，这些天我投了100多份简历，接到了两个线上笔试。

第一个面试题使用vue完成一个网页的模块，有要有分页与传输数据。这不重要，很容易写出来了。关键是第二个线上笔试题，很基础，但是我没写出来，想必是g。(准备的vue父子传参，防抖与节流啥的，都没用上)。真的奉劝大家如果是面试前端实习生这块的话建议html，css，js这块得好好复习，vue没用到。

废话不多说给大家展示我遇到的三个代码题

1.css样式题

要实现一个容器里每行第三个子元素颜色相同，我没有复习选择器相关的内容，这题没做出来。

代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container{
            width: 1000px;
            border: 1px solid black;
          
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            clear: both;
           
        }
        .item{
            width:20%;
            height:200px;
            background-color: red;
            margin: 20px;
        }
        
        .container .item:nth-child(4n-1){//这步很关键,4n-1,n从0开始取值,即第3,7,11,15...后代元素被添加样式
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
       
    </div>  
</body>
</html>

2.css样式优先级

问两个div字体颜色是什么,其实就是样式覆盖的问题。相同优先级选择器有多种样式，以最后定义样式为主。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .cred{
            color: red;
        }
        .cblue{
            color:blue;
        }
    </style>
</head>
<body>
    <div class="cred cblue">123</div>
    <div class="cblue cred">456</div>
</body>
</html>

3.两个编程题

1)统计字符串中每个字母出现的次数

var str = ‘abcdacbabcbababcbabcabd’
结果: { a: 出现次数， b: 出现次数, …}


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
<script>
    let str='abdfsefd123   3';
    let obj={};//创建一个对象来存储字符和出现的次数。
    for(var i=0;i<str.length;i++){//遍历字符串
        let key=str[i];//让字符成为键
        if(obj[key]){//如果对象中有这个字符，则将它的value++，没有就定为1
            obj[key]++;
        }else{
            obj[key]=1;
        }
    }
for(index in obj ){//for in 遍历对象，index就是键，代表字符
    console.log('字符'+index+'出现了'+obj[index]+'次')
}
</script>
</html>

2)数组扁平化处理去重(所谓扁平化就是将数组里嵌套的数组的数据全部放在第一层里面)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
<script>
    let arr=[1,2,3,4,5,[6,5,7,[1,2,3,4],9],9];
    //扁平化处理Array.prototype.flat方法
    console.log(arr.flat(Infinity))
    //去重Array.from(new Set(arr))
    console.log(Array.from(new Set(arr.flat(Infinity))))
    //排序arr.sort
    console.log(Array.from(new Set(arr.flat(Infinity))).sort((a,b)=>{return a-b}))
</script>
</html>

重点:大家面试的时候注意不要紧张，也不要急，慢慢来，这家不行换下家，也不要听网上说前端已死，重整士气再去面试，祝大家都能面试上满意的公司。