2020年前端面试集锦（HTML CSS 原生JS ）

2019-12-09  本文已影响0人  缺月楼

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

技巧

HTML

参考答案：最简单的演示

<header>
  <nav></nav>
</header>
<main>
  <section></section>
</main>
<footer></footer>

CSS

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

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

原生JS

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()

 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()

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 的值到底是什么？一次说清楚

  1. 递归
    2.判断类型
    3.检查环(循环引用)
    4.需要忽略原型
String.prototype.trim = function(){
    return this.replace(/^\s+|\s+$/g, '')
}
//或者 
function trim(string){
    return string.replace(/^\s+|\s+$/g, '')
}

 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(){}
 }
上一篇 下一篇

猜你喜欢

热点阅读