前端测试题

HTML+CSS

1.div垂直水平居中？
2.css盒子模型包含哪些？
3.如何实现左边固定宽度右边自适应？
4.什么是BFC,BFC是怎么出现的？
5.清除浮动有哪些方式？
6.css有哪些选择器？
7.选择器的优先级？
8.html新增的标签有哪些？
9.哪些是行内元素，哪些是块级元素？
10.有哪些语义化标签？
11.移动端适配有哪几种方式？
12.从地址栏输入url这个过程说下发生了什么？
13.网页加载慢，因为什么？(最少说五种)
14.link和@import有什么区别？
15.display:none和visibility:hidden的区别？
16.IE 8以下版本的浏览器中的盒模型有什么不同?

js

1.数组中常用方法有哪些？
2.in 和 for in的区别？
3.js的数据类型有哪些？
4.原型是什么？原型链是什么？
5.闭包是怎么出现的？如果不回收有什么影响？
6.继承的实现方式有哪些？
7.防抖和节流的实现方式及应用场景说一下。
8.浏览器跨域怎么出现的，如何解决？
9.常见的ajax请求头Content-Type有哪些？
10.typeof和instanceof的区别？
11.let,var,const这三个关键字的区别是什么？
12.作用域有哪些？
13.cookie和session区别？
14.sessionstorage和localstorage的区别？
15.箭头函数和普通函数的区别？
16.await和.then的区别？
17.常见的ajax的请求方式有哪些？
18.浏览器状态码有哪些？
19.call和apply的区别？
20.说一下ES6的新增方法。
21.说一下事件机制流？（冒泡捕获）
22.队列和栈得区别？
23.null和undefined的区别？

vue

1.vue的生命周期有哪些？
2.父子组件的生命周期顺序是什么？
3.vue父子组件互相传值有哪些方式？
4.v-if和v-show的区别？
5.v-if和v-for的优先级？
6.vue是如何实现双向绑定的？
7.MVVM模式是什么？
8.v-model是什么原理？
9.为什么v-for的时候一定要传key？
10.vue-router的hash和history有什么区别？

拓展

1.git常用命令有哪些？
2.https 和 http优略？
3.两个项目用到相同组件你如何做？
4.请说出几种减少页面加载时间的方法？
5.如何防止xss注入？
6.GET和POST的区别，何时使用POST？

代码问题

1.打印输出是什么？（this的指向问题）

const obj1 = {
    a: function() {
        console.log(this)
        window.setTimeout(() => { 
            console.log(this) 
        }, 1000)
    }
}
const obj2 = {
    a: function() { console.log(this) },
    b: {
        c: () => {console.log(this)}
    }
}
var circle = {
    radius: 10,
    outerDiameter() {
        var innerDiameter = function() {
             console.log(2 * this.radius);
        };
        innerDiameter();
    }
};
obj1.a()
obj2.b.c() 
circle.outerDiameter()

2.打印输出是什么？（js引用关系）

var a = 2
var b= a
b = 30
var c = {
    a:1
}
var d = c
d.a = 3
console.log(a,b)
console.log(c.a,d.a);

3.打印输出顺序（Promise）

const fun = function (params) {
    return new Promise((resolve, reject) => {
        resolve("fun1")
    })
}

function fun5() {
    return fun().then(res => {
        if (res == "fun1") {
            console.log(res)
            return Promise.resolve("fun2")
        }
    }).then(res => {
        console.log(res)
        return Promise.resolve("fun3")
    }).then(res => {
        console.log(res)
        return Promise.resolve("fun4")
    })
}
fun5().then(res => {
    console.log(res)
})

4.输出打印顺序 (消息队列--宏任务微任务)

Promise.resolve().then((res) => {
  console.log(1);
  setTimeout(() => {  
    console.log(2);
    Promise.resolve().then((res) => {
      console.log(3);
    });
  }, 0);
});
setTimeout(() => {   
  console.log(4);
  setTimeout(() => { 
    console.log(5);
    Promise.resolve().then((res) => {
      console.log(6);
    });
  }, 0);
    Promise.resolve().then((res) => {
        console.log(7);
    });
}, 0);
(async function () {  
  await name();
  console.log(8);
})();
function name() {
  console.log(9);
}

5.输出什么？

var A = function() {

}
A.prototype.n = 1

var b = new A()

A.prototype = {
  n: 2,
  m: 3
}

var c = new A()
console.log(b.n, b.m, c.n, c.m) 

6.输出什么？

var c = 1
function c(c) {
  console.log(c)
  var c = 3
}
c(2)

7.结果输出多少?

var x = 10;
function fn(x) {
  console.log(x);
}
function show(f) {
  var x = 20;
  f(x);
}
show(fn);

8.输出什么?

var b = 2;
var a = b = c = d = 1;

console.log(a, b, c, d);

9.输出什么?

var a = {
        num: 0,
        toString: function () {
          console.log('toString()');
          return ++a.num
        },
        valueOf: function () {
          console.log('valueOf()');
          return {}
        }
      }
console.log(a++);

10.输出什么?

var a = 123;
function a() {

}
console.log(typeof a) 

11.输出什么?

var obj = {
  fn2: function () {
      console.log(1);
    console.log(fn2)
  }
};
obj.fn2() 

12.输出什么?

var name = "The Window";
var object = {
  name: "My Object",
  getNameFunc: function () {
    return function () {
      return this.name;
    };
  }
};
console.log(object.getNameFunc()());

13.输出什么?

var name = "The Window";
var object = {
  name: "My Object",
  getNameFunc: function () {
    console.log(this)
    return () => {
      return this.name;
    };
  }
};
console.log(object.getNameFunc()());

14.输出什么?

console.log('global begin: '+ i) // undefined
var i = 1；
foo(i);
function foo(i) {
  if (i === 4) {
    return;
  }
  console.log('foo() begin:' + i);
  foo(i + 1);
  console.log('foo() end:' + i);
}
console.log('global end: ' + i);

15.输出什么?

if (!(b in window)) {
  var b = 1;
}
console.log(b) 

16.输出什么?

var c = 1
function c(c) {
  console.log(c)
  var c = 3
}
c(2)

17.请写一个方法，返回传入数字每一位的平方。如 9119 输出811181,9的平方81，1平方1.

function squareDigits(num) {
  if (typeof num === "number") {
    const s = num.toString().split("");
    const result = s.map(item => {
      const r = item * item;
      return r;
    })
    return result.join("");
  }
}
squareDigits(321654)