Web 前端基础知识面试大全 二

Web 前端基础知识面试大全 一 也是我主页里面，下面的链接地址。

Web 前端基础知识面试大全_studyer网的博客-CSDN博客

有一了为什么还要写这个二呢？因为有的面试时候只需要一些大概的内容不用计那么多。所以这里的面试大全主要目的是言简意赅，让面试的人知道你会即可。至于原理性的东西可以自己多去研究研究。这里以言简意赅为主。

目录

CSS部分

一、盒子水平居中、垂直居中 

JS部分

一、 js的数据类型有哪些？

二、BFC的理解

 三、[‘1‘,‘2‘,‘3‘].map(parseInt)的返回值是什么？

Vue部分 

一、 为什么 data 是函数？

 二、阐述一下vue的双向绑定原理？

三、key的作用

---

CSS部分

一、盒子水平居中、垂直居中 

水平居中

方法一：使用margin: 0 auto;（只适用于子盒子有宽的时候）

方法二：text-align + display（子盒子有或没有宽度的时候都适用） 

 

 方法三：position 定位（只适用于子盒子有宽度和高度的时候）

 

方法四：position + transform（子盒子有或没有宽高的时候都适用） 

 

方法五：flex 布局（弹性布局）（子盒子有或没有宽高的时候都适用） 

 

 垂直居中

方法一：position 定位（适用于子盒子有宽度和高度的时候） 

 方法二：position + transform（子盒子有或没有宽高的时候都适用）

 

 方法三：flex 布局（子盒子有或没有宽高的时候都适用） 

 

水平垂直居中 

方法一：position 定位（适用于子盒子有宽度和高度的时候）

 

方法二：position + transform（子盒子有或没有宽高的时候都适用） 

 

方法三：flex 布局（子盒子有或没有宽高的时候都适用） 

 

 

JS部分

 

 

一、 js的数据类型有哪些？

• 基本数据类型

number、string、boolen、null、undefined

示例解析：

var a=10;
var b=a;
b=20;
console.log(a);  //10

b只是保存a赋值的一个副本，所以b的改变不影响a的值。 

• 引用数据类型 

也就是对象类型 object type  比如：object array funciton data等

var a={};
var b={};
var c=a;
console.log(a===b);  //false
a.name='jack';
a.say= ()=>console.log('hi jack')
console.log( c.name )  //jack
console.log( c.say() )  // hi jack

这些数据是保存在堆内存地址内。c 和 a 的指针都是指向 保存 a.name 属性的内存地址。

二、BFC的理解

 BFC 全称为 块格式化上下文

1.解决文字环绕问题

2.解决外边距折叠问题

3.解决盒子内部盒子浮动以后外边盒子高度塌陷问题

4.解决盒子内部兄弟盒子浮动，兄弟盒子包括外边距大于外边盒子总宽度，最后一个盒子掉下去的问题。

解决办法：1、overflow：hidden；2、overflow:scroll;  3、display:flex;  4、display:table;

5.float:left;

详细讲解参照【web前端面试必问6】什么是BFC?_studyer网的博客-CSDN博客 

 三、[‘1‘,‘2‘,‘3‘].map(parseInt)的返回值是什么？

具体详细解决在链接处

【web前端面试题必问5】[‘1‘,‘2‘,‘3‘].map(parseInt)的返回值是什么？_studyer网的博客-CSDN博客

Vue部分 

一、 为什么 data 是函数？

如果 data 是对象，因为引用data数据的可能有很多个，如果有一个改变data的值，那么其他引用data值得都要发生改变。

functon MyComponent(){};
MyComponent.prototype.data={
  age=18;
}

var jack = new MyComponent();
var tony = new MyComponent();

console.log(jack.data.age === tony.data.age) //true

jack.data.age = 32;

console.log(jack.data.age); //32
console.log(tony.data.age); //32

---

如果data 是函数，则就可以避免这个问题了。如果改变一个实例的data属性的值，那么不会影响到另外一个实例上的data的值。

functon MyComponent(){
  this.data = this.data()
};
MyComponent.prototype.data=function(){
  return {
    age=18;
  }
}

var jack = new MyComponent();
var tony = new MyComponent();

console.log(jack.data.age === tony.data.age) //true

jack.data.age = 32;

console.log(jack.data.age); //32
console.log(tony.data.age); //18

---

 二、阐述一下vue的双向绑定原理？

    vue是通过数据劫持的方式来做数据绑定的，其中最核心的方法便是通过Object.defineProperty()来实现对属性的劫持，那么在设置或者获取的时候我们就可以在get或者set方法里加入其他的触发函数，达到监听数据变动的目的 observer、watcher、compiler

三、key的作用

主要是为了更高效的对比虚拟dom。

vue在执行diff算法比较两个虚拟dom节点是否是相同节点时，会先看key是否相同，再看标签类型等是否相同

实际开发过程中渲染一组列表时，key必须设置（节省性能），且应该尽量避免使用索引作为key（有的时候列表发生排序），这样容易导致一些隐藏bug