初级前端面试题（简化版）

最新推荐文章于 2024-08-08 16:36:05 发布

原创最新推荐文章于 2024-08-08 16:36:05 发布 · 820 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #vue

本文整理了适用于中小公司面试的HTML+CSS+JS简化面试题，包括DOCTYPE的作用、盒子居中、0.5px线实现、字符串处理、数组操作、对象遍历等基础知识，并提及Vue.js的重要知识点，如双向数据绑定、监听、计算属性等。还提供了几道面试题供读者自我检测。

近期有一朋友开始面试，刚开始面试比较紧张，网上找的面试题，一般都比较大且多，不能很高效的去面试。所以再面试知识准备的时候费了不少时间。

这里我结合了朋友的经历，然后整理了一份个人觉得够用的，简化面试题（面向部分中小公司）。

1.html+css

1. DOCTYPE ：<!DOCTYPE> 声明不是 HTML 标签，这个实际用处就是规定了浏览器文档使用哪种html或者xhtml规范。

2.盒子居中方式（写出俩到三种方式，这里写一种）

    <style>
        .fahther_box{
            position: relative;
        }
        .child_box{
            width: 100px;
            height: 100px;
            position: absolute;
               left: 50%;
               top:50%;
               transform: translate(-50%,-50%);
            }
    </style>

3.0.5px的线（实际就是用的transform）

transform: scale(0.5,0.5);

个人感觉实现的效果，还是有问题，感觉颜色会淡。有人说还可以用阴影和渐变色处理，不过我没试过。现在大多数面试都是vue,所以再html和css方面侧重没有那么多。

2.Js

不管用啥框架，实际咱们都是再写JavaScript。所以往往面试的时候，这块是大头。问的也比较多。我这里会写一些基础且够用的，那种比较绕的promise嵌套就不写了。

1.字符串处理

常见: toString,slice,charAt,charCodeAt,length,substr,substring，indexOf,trim，toLowerCase，toUpperCase。

1.toString(): 转字符串用法。

      const num  = 10;
      console.log(num.toString()); // '10'
      console.log(typeof num.toString()); // 'string'
       
      console.log((num+'').toString()); // '10' //实际开发咱们一般会用这个方法处理

2.slice，substr ，substring 都是截取的方法，用法差不多，slice用负数比较友好

   const demoStr = '摸鱼写文章'
      console.log(demoStr.slice(-1)); // 章

其他方法用起来差不多，具体自己看，这里举例一种。

3.charAt，charCodeAt 这俩一般没有用处

      const demo1Sre ='asdewwsdd';
      console.log(demo1Sre.charAt(0)); // 'a'
      console.log(demo1Sre.charCodeAt(0)); // 97 a的ASCII码

4.indexOf 这个可以用的场景比较多（例如：去重）PS:它不只是字符串方法

      const demo1Sre ='asdewwsdd';
      console.log(demo1Sre.indexOf('a')); // 0 这个是下标，返回第一个符合条件值得下标
      // indexOf(target,index) 这个有俩参数，第二参数是开始查找得下标。不写默认从0开始。

去重我就不写了，毕竟去重有太多得方法了，这个不是最好得，主要也是我懒，毕竟摸鱼得时候，还是想多休息休息（笑脸）。

5.trim 去除字符串首尾空格

    const demo1Sre ='     asdewwsdd       ';
      console.log(demo1Sre.trim());//'asdewwsdd'

这个不能出去中间得，中间得可以用正则，我一样不写。

6.toUpperCase，toLowerCase 这俩就是一个把字符串转大写，一个转小写，你们说要是字符串里面不全是英文，用起来会是咋样？

2.数组

写到这里，我发现我好像写得有点详细了，不应该是简化版吗？？？

从这里开始就不会展开说了

1.数组去重


    const arr = [1,2,3,1,4,6,8,2];
    const target = [...new Set(arr)];
    console.log(target); // [1, 2, 3, 4, 6, 8]

2.数组求最大值

    const arr = [1,2,3,1,4,6,8,2];
    console.log(Math.max.apply(Math,arr)); // 8

这个会引申出来改变this指向得方法，call, apply ,bind 自己去查

3.数组排序

    const arr = [1,2,3,4,6,8];
    console.log(arr.sort((a,b)=>a-b));//[1, 2, 3, 4, 6, 8]
    console.log(arr.sort((a,b)=>b-a));//[8, 6, 4, 3, 2, 1]

4.数组扁平化（这个有flat函数直接可以用，不过一般面试都是手撸一个）

处理这个方法比较多，reduce,递归啥的，都可以。这里写一个

   let arr = [1, [2, [3, 4]]];


   flatArray = (source) => {
      if(!Array.isArray(source)) return
      while(source.some(item=>Array.isArray(item))){
        source = [].concat(...source)
      }
      return source;
   }

   console.log(flatArray(arr)); // [1, 2, 3, 4]

直接解决就完事了，实际开发用flat就可以了。

数组这块实际有一些方法没有说，splice。find 。。。都比较重要，你们可以自己看。

3.对象

这个里面东西实际比较多。这里写一点普通得。够用的

1.循环 for in

这个不写了。

2.拓展方法(就给你拓展俩)

    const obj = {
       name:[1,2,3],
       age:[4,5,6]
    }
    console.log(Object.values(obj)); // [[1, 2, 3],[4, 5, 6]]
    console.log(Object.keys(obj));  //  ['name', 'age']

3.一维数据深拷贝

    const temp = {
        name:'zs',
        age:18
    }
    const newObj = JSON.parse(JSON.stringify(temp))

4.深拷贝

我写了一个普通的深拷贝，另外一个文章。

3. ajax封装，（这玩意太多了，过几天重新开一篇）

ajax和axios的关系，axios就是用promise封装的ajax.

axios俩拦截器，请求拦截器，用来种token,响应拦截器可以做全局数据处理和弹错等等。

4. vue知识点

1. 双向数据绑定 v-modal 原理 Object.defineProperty

2. 监听watch,深浅监听（深监听会引起页面卡顿，可以转浅监听）

3. 计算属性compute，这个定义的数据，不能再data内出现

4.为啥data要用函数: 独立作用域。防止变量不同页面变量覆盖。

5.页面传参，父子组件，子父组件，路由传参（不同的方式）。

6.vuex 用法，助手函数，namespace modal的命名空间。

不要问我为啥，越写越少，我累了。

附加几道题（没有答案那种，可以自己打印）

      // 1. 以下每行输出的结果是什么？

      !!(0 == null);

      undefined == null;

      isNaN('123') == NaN;

      typeof [];

      typeof null;

    // 2 下面代码输出结果
      
    (function (){
        var a = b = 5
    })();
    console.log(a);
    console.log(b);

    //3.输出结果
     
    for(var i = 0 ; i <5 ; i++){
        setTimeout(()=>{
            console.log(i);
        },1000*i)
    }
    
    for(var i = 0 ; i < 3 ; i ++){
        setTimeout(()=>{
            console.log(i);
        },(()=>{
            var b= i *1000;
            console.log(b);
            return b
        }))
    }

好了，就到这里了。部分知识点，我没有展开，你可以复制去C一下。