前端面试集锦(HTML CSS 原生JS )

发布时间:2024年01月13日

2020年 ,即将到来,金三银四面试黄金季,一定要抓住。本博客总结常见的面试题,查漏补缺,希望对你有所帮助。

技巧

  • 遇到比较抽象的问题就具体化(举例子),遇到比较具体的题目就抽象化(阐述)。
  • 抽象题目搜知乎,代码题目搜Stackoverflow 或者博客。
  • 『XXX 的原理』这种题目一般来说都是说一下源代码的思路,但不需要看源代码,直接看别人总结好的博客即可。(尽量不要使用百度)

HTML

  • 你是如何理解HTML 语义化的?
    参考答案
    1.举例法
    HTML 语义化就是使用正确的标签(总结)。段落就写 p 标签,标题就写h1标签,
    文章就写article标签,视频就写video标签,等等。
    2.阐述法
    首先将以前后台开发人员使用 table布局,然后将美工人员使用div+css布局,最后讲专业的前端会使用正确的标签进行页面开发。

  • meta viemport 是 做什么的,怎么写?
    参考答案
    举例法 :
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1">
    然后逐个解释每个单词的意思即可。

  • 你平时用过哪些HTML5标签?
    你平时用的html5标签列举出来即可,要注意如果这个标签的用法比较复杂,你要先看一下MDN的文档 ,如果你说出的标签,却不知道它有哪些API,那就会比较麻烦。

参考答案:最简单的演示

<header>
  <nav></nav>
</header>
<main>
  <section></section>
</main>
<footer></footer>
  • H5 是什么?

CSS

  • 两种盒模型 说一下??
    参考答案
    IE盒模型border-box和W3C盒模型content-box。区别在于IE的content部分把 border 和 padding计算了进去。box-sizing:border-box; border-box更好用,我平时更喜欢。

  • 如何垂直居中??
    参考答案
    如果父元素height不定,直接子元素padding:10px 0;就垂直居中了
    如果父元素给定height:
    ·table标签自带。
    ·子元素用两个span包起来,子元素和span display:inline-block,vertical-align: middle;,
    span height:100%。
    ·子元素position:absolute;top: 50%;margin-top: -50px;或者用translate(-50%,-50%);
    ·子元素position:absolute;left:0;top:0;margin: auto;
    ·父元素display: flex; justify-content: center;align-items: center;

  • flex怎么用?常用的属性有哪些??
    参考答案
    ·flex-direction: row左起 | row-reverse右起 | column上起 | column-reverse下起;
    ·flex:无单位值(flex-grow),无单位值(flex-shrink),有效宽度值(flex-basis)后两个
    值可选 flex:auto(0,1,auto),flex:none(0,0auto),flex:initial(1,1auto)

  • BFC 是什么??
    参考答案
    BFC是什么(参考)

  • CSS 选择器优先级
    简答
    1.越具体的优先级就越高
    2.同样优先级写在后面的会覆盖前面的
    3.!important 优先级最高,(谨慎使用)

  • 清除浮动说一下 背代码

    clearfix:after{
    content: ‘’;
    display: block; /* 或者table*/
    clear: both;
    }

    .clearfix{
    zoom: 1; /* IE 兼容*/
    }

原生JS

  • ES6语法知道那些,分别怎么用?
    参考答案
    举例法
    let const 箭头函数 promise 展开操作符 默认参数 import export 等,具体的请参考这里ES 6 新特性列表

  • Promise Promise.all Promise.rase 分别怎么用
    参考答案
    先理解一下 [MDN]对Promise的描述。Promise 对象是一个代理对象(代理一个值),被代理的值在Promise对象创建时可能是未知的。它允许你为异步操作的成功和失败分别绑定相应的处理方法(handlers)。 这让异步方法可以像同步方法那样返回值,但并不是立即返回最终执行结果,而是一个能代表未来出现的结果的promise对象.

    function fn() {
    return new Promise((resolve, reject) => {
    setTimeout(() => {
    // 返回一个随机数 1-6
    let n = parseInt(Math.random() * 6 + 1, 10);
    resolve(n);
    }, 3000);
    });
    }
    // 如果成功了 resolve(n) 的结果 会 传给 .then()的第一个参数 x
    fn().then(
    x => {
    console.log(“筛子的点数是” + x);
    },
    () => {
    console.log(“摇色子不会失败”);
    }
    );

背代码 Promise.all 用法
Promise.all([promise1, promise2]).then(success1, fail1)
promise1和promise2都成功才会调用success1

背代码 Promise.race 用法
Promise.race([promise1, promise2]).then(success1, fail1)
promise1和promise2只要有一个成功就会调用success1

背代码
// 节流(一段时间执行一次之后,就不执行第二次)

 function throttle(fn, delay){
     let canUse = true
     return function(){
         if(canUse){
             fn.apply(this, arguments)
             canUse = false
             setTimeout(()=>canUse = true, delay)
         }
     }
 }

 const throttled = throttle(()=>console.log('hi'))
 throttled()
 throttled()

注意,有些地方认为节流函数不是立刻执行的,而是在冷却时间末尾执行的(相当于施法有吟唱时间),那样说也是对的。

背代码
// 防抖(一段时间会等,然后带着一起做了)

     let timerId = null
     return function(){
         const context = this
         if(timerId){window.clearTimeout(timerId)}
         timerId = setTimeout(()=>{
             fn.apply(context, arguments)
             timerId = null
         },delay)
     }
 }
 const debounced = debounce(()=>console.log('hi'))
 debounced()
 debounced()
  • 手写AJAX
    参考答案
    背代码,完整版

    var request = new XMLHttpRequest()
    request.open(‘GET’, ‘/a/b/c?name=ff’, true);
    request.onreadystatechange = function () {
    if(request.readyState === 4 && request.status === 200) {
    console.log(request.responseText);
    }};
    request.send();

背代码,简化版

 var request = new XMLHttpRequest()
 request.open('GET', '/a/b/c?name=ff', true)
 request.onload = ()=> console.log(request.responseText)
 request.send()
  • 这段代码里的 this 是什么?
    参考答案

    1.fn() // this => window/global
    2.obj.fn() // this => obj
    3.fn.call(xxx) // this => xxx
    4.fn.apply(xxx) // this => xxx
    5.fn.bind(xxx) // this => xxx
    6.new fn() // this => 这个新的对象
    7.fn = ()=>{} // this => 外面的this

看调用 参考 方方的文章 [this 的值到底是什么?一次说清楚]

  • 闭包/立即执行函数是什么?
    参考答案
    直接看文章
    [闭包]
    [什么是立即执行函数?有什么作用?]

  • 什么是 JSONP,什么是 CORS,什么是跨域?
    参考答案
    [跨域的几种实现方式与原理]

  • async/await怎么用?如何捕获异常
    参考答案
    [await 和 async 的用法]

  • 如何实现深拷贝?
    参考答案: 要点

  1. 递归
    2.判断类型
    3.检查环(循环引用)
    4.需要忽略原型
  • 如何用正则实现trim() (去除字符串左右两端的空格)
    参考答案

    String.prototype.trim = function(){
    return this.replace(/^\s+|\s+KaTeX parse error: Expected 'EOF', got '}' at position 9: /g, '') }? //或者 function…/g, ‘’)
    }

  • 不用class 如何实现继承 ? 用class又如何实现
    参考答案: 背代码
    不用 class 这样实现

    function Animal(color){
    this.color = color
    }
    Animal.prototype.move = function(){} // 动物可以动
    function Dog(color, name){
    Animal.call(this, color) // 或者 Animal.apply(this, arguments)
    this.name = name
    }
    // 下面三行实现 Dog.prototype.proto = Animal.prototype
    function temp(){}
    temp.prototye = Animal.prototype
    Dog.prototype = new temp()

    Dog.prototype.constuctor = Dog // 这行看不懂就算了,面试官也不问
    Dog.prototype.say = function(){ console.log(‘汪’)}

    var dog = new Dog(‘黄色’,‘阿黄’)

用class 实现

class Animal{
     constructor(color){
         this.color = color
     }
     move(){}
 }
 class Dog extends Animal{
     constructor(color, name){
         super(color)
         this.name = name
     }
     say(){}
 }
  • 如何实现数组去重?
    参考答案
    1 .计数排序变形,背代码
    2.使用 Set(面试已经禁止这种了,因为太简单)
    3.使用 Weak Map
  • == 相关题目 (没有规律 ) 建议反着答即可
  • 手写一个 Promise (极难) 抽空有时间 建议 学会
文章来源:https://blog.csdn.net/baidu_33164415/article/details/135517161
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。