陈悦玲 2020.10.14
前端常见问题
1. html+css
- 页面布局问题（html+css），考点在position
- 清除浮动问题：重点在BFC
1.父级添加overflow: hidden；
2.通过属性clear:both;达到清除浮动的目的；在浮动元素添加多一个块级元素
3.通过给父级元素添加伪类after，达到清除浮动的目的；
.cc:after {
content: '';
height: 0;
line-height: 0;
display: block;
visibility: hidden;
clear: both;}
4.使用双伪类；
此方式和三原理一样，代码更简洁。
.cc:after,.cc:before {
content: "";
display: block;
clear: both;
} - CSS盒子模型
就像是对元素进行了一个包装，丰富了元素的内容，方便了设计与布局。
盒子模型（Box Model）具体包括了外边距（Margin），边框（Border），内边距（Padding）和内容（Content）。
怪异盒子： border+padding+content - 标签语义问题
语义是指对一个词或者句子含义的正确解释。很多html标签也具有语义的意义，也就是说元素本身传达了关于标签所包含内容类型的一些信息。
代码结构+有利于SEO（爬虫依赖，搜索引擎权重更高）+提升用户体验+便于团队开发和维护+方便其他设备解析 - DTD、BFC介绍
BFC：overflow：hidden；也就是能让浮动的元素也能包含在父级的盒子中 - HTML5的语义化
- 响应式布局+流式布局
流式布局：固定布局：浏览器大小不影响内部元素大小。
em是根据自己的font-size×em尺寸得到最终的像素值；rem是根据html的font-size的大小来得到最终的尺寸
响应式布局：根据不同的屏幕显示不同的页面布局，通过css3中的媒体查询media screen and(min-width:480px)可以实现 - get请求和post请求的区别？
get是不安全的，因为在传输过程中，数据被放在请求的url中；get传送的数据量较小，因为url的长度受限制
post的所有操作对用户来说都是不可见的，post的传送数据量较大，一般默认不受限制 - css hack（浏览器内核）
- 像素问题
- 弹性布局问题
- 元素属性继承问题
作者式样>用户式样>浏览器默认式样；#:1000, - margin的问题
- 精灵图问题
- 减少图片的字节；
2.减少网页的http请求，提高页面性能
3.解决设计师的图片命名困绕
缺点：
1.开发时还需要测量，比较繁琐
2.维护不方便
3.不能随意改变大小和位置
4.宽屏高分辨率的屏幕下，容易出现背景断裂
2. JS
-
变量的声明问题
变量提升，函数提升（只定义未赋值），函数表达式只进行变量提升不进行函数提升 -
数据类型的隐式转换问题，重点在隐式转换*
主要分为三种情况：-
转换为布尔类型
能转换为false的值有：0/""/NAN/undefined/null
new操作符创建的对象隐式转换为boolean类型都是true，哪怕是new String(”);
-
转换为number类型
-
转换为string类型
-
-
++ -- == === != !==的问题
-
排序问题：冒泡、快速、插入
-
冒泡排序：
依次对比相邻两个数字，前者比后者大就调换位置
-
快速排序：
找基准（一般是以中间项为基准）
遍历数组，小于基准的放在left[]，大于基准的放在right[]
递归
function quickSort(arr){ //如果数组<=1,则直接返回
if(arr.length<=1){return arr;}
var pivotIndex=Math.floor(arr.length/2);
//找基准，并把基准从原数组删除
var pivot=arr.splice(pivotIndex,1)[0];
//定义左右数组
var left=[], right=[];
//比基准小的放在left，比基准大的放在right
for(var i=0;i<arr.length;i++){
if(arr[i]<=pivot){
left.push(arr[i]);
}else{
right.push(arr[i]);
}
}
//递归
return quickSort(left).concat(pivot, quickSort(right));
}
-
-
递归、循环问题
-
创建函数、对象的方式
-
创建对象的5种方式(第六种：混合模式)
-
工厂模式(解决每次使用统一接口创建多个对象时，产生大量重复代码的问题)
function create(name,age,sex){ var obj = new Object()
obj.name = name;
obj.age = age;
obj.sex = sex;
obj.say = function(){}
}
var show = create("cyl",18,"女") -
new操作符+object创建对象
var person = new Object(); person.name = "lisi";
person.age = 21;
person.family = ["lida","lier","wangwu"];
person.say = function(){
alert(this.name);
} -
字面量创建对象
var person ={ name: "lisi",
age: 21,
family: ["lida","lier","wangwu"],
say: function(){
alert(this.name);
}
}; -
构造函数模式
function Person(name,age){ this.name = name;
this.age = age;
this.say = function(){}
}
var person1 = Person("cyl",18) -
原型模式
我们创建的每个函数都有一个prototype属性，这个属性是一个指针，指向一个对象，而这个对象的用途是包含可以由特定类型的所有实例共享的属性和方法。prototype是通过调用构造函数而创建的那个对象实例的对象原型，使用原型对象的好处是可以让所有对象实例共享它所包含的属性和方法。
function Person(){} Person.prototype.name = "cyl";
Person.prototype.say = function(){}
var person1 = new Person()
//原型模式简写：(相当于是一个对象 原型对象)
function Person(){}
Person.prototype={
name:"cyl",
say:function(){}
}
-
-
创建函数
创建函数有3种方式：
-
函数关键字（function）语句
function fn(x){} -
函数字面量(与构造函数的区别：字面量是一个匿名函数，但语法允许为其指定任意一个函数名，当写递归函数时可以调用它自己，使用构造函数就不行)
var fn = function(x){} -
构造函数
var fn = new Function(a,b){ this.a = a;
this.b = b
}
-
-
-
this指针问题
this跟函数在哪里定义没有半毛钱关系，函数在哪里调用才决定了this到底引用的是啥。也就是说this跟函数的定义没关系，跟函数的执行有大大的关系。所以，记住，“函数在哪里调用才决定了this到底引用的是啥”。
this机制的四种规则
this到底绑定或者引用的是哪个对象环境决定于函数被调用的地方。而函数的调用有不同的方式，在不同的方式中调用决定this引用的是哪个对象是由四种规则确定的。
-
默认绑定全局变量
这条规则是最常见的，也是默认的。当函数被单独定义和调用的时候，应用的规则就是绑定全局变量。
function fn(){ console.log(this.a)
}
var a = 1
fn() // 1 -- fn单独调用，this引用window
//如果是这样
function fn(){
console.log(this.a)
}
fn()
var a = 1
//那么就会输出undefined，很清楚的体现了this指针绑定的是函数被调用的地方 -
隐式绑定
隐式调用的意思是，函数调用时拥有一个上下文对象，就好像这个函数是属于该对象的一样。
function fn(){ console.log(this.a)
}
var obj = {
a:2,
fn:fn
}
obj.fn() //输出2 this引用的obj
//需要说明的一点是，最后一个调用该函数的对象是传到函数的上下文对象
function fn(){
console.log(this.a)
}
var obj1 = {
a:2,
fn:fn
}
var obj2 = {
a:42,
obj1:obj1
}
obj2.obj1.fn() //输出2 -
显示绑定
学过bind()\apply()\call()函数的都应该知道，它接收的第一个参数即是上下文对象并将其赋给this。
function fn(){ console.log(this.a)
}
var obj = {
a:2
}
fn.call(obj) //2
//如果我们传递第一个值为简单值，那么后台会自动转换为对应的封装对象。如果传递为null，那么结果就是在绑定默认全局变量
function fn(){
console.log(this.a)
}
var obj = {
a:2
}
var a = 10;
fn.call(null) //10 -
new新对象绑定
如果是一个构造函数，如果用new来调用，那么绑定的将是新创建的对象。
function fn(){ console.log(this.a)
}
var bar = new fn(2);
console.log(bar.a)
-
-
解释你对面向对象的理解（可能会涉及到面向过程）？
js面向对象理解
-
封装、继承、多态
-
对象的分类，即内置对象的方法
-
break和continue的区别
-
数组去重（准备三种方法）
-
随机数问题
-
split join的区别？
-
call 和apply的区别？
-
数组合并、删除数组元素问题
-
截取字符串问题（字符串的API），查找某个字符的出现次数问题
-
DOM中添加、移除、替换、创建、插入和查找节点
-
事件绑定
-
DOM事件流
-
冒泡问题
-
DOM中获取元素方法的拼写问题
-
编写代码实现页面中某个元素样式的改变
-
定时器问题
-
promise问题（能手写，说优点和缺点）
-
作用域和作用域链问题，一般会同this指针出题
-
原型和原型链（概述题+代码题）
-
正则常用的几个规则（邮箱、手机号、密码强度等...）可能会结合空白字符
-
js的优缺点
-
语言的注释形式
-
clientWidth,clientHeight,offsetWidth,offsetHeight,scrollWidth,scrollHeigh区别
-
对闭包的理解
-
对象合并
-
对象的深拷贝和浅拷贝
-
死锁问题
-
js异步加载机制
-
节流和防抖问题
-
typeof、instanceof等（检测数据类型）
-
es5、es6的新特性，es7能加就加
-
for in 和 for of可能出现
-
懒加载问题（可能会考虑到）
-
前端性能优化问题
-
变量声明提前问题(函数声明提前)
三、vue -
什么是MVVM/MVC，他们的区别?
-
vue常见错误
-
v-for为什么一定要加key？
-
vue的双向绑定（解释原理）
-
列举出vue的生命周期以及几个关键的钩子函数？
-
手写一个vue父子互相通讯的例子(写出关键步骤即可)
-
虚拟DOM树问题
-
什么是vue？什么时候使用？为什么使用？
-
vue的父传子，子传父（传值问题）
-
vue.js的核心思想
-
vue的优缺点
-
组件之间的传值问题
-
vue的路由跳转问题
-
vue-cli怎样自定义组件？会有哪些问题？
-
vuex是什么？如何使用？什么时候使用？
-
v-show 和 v-if 的相同点和不同点？
-
的作用？ -
vue中使用插件的步骤？
-
vue-router怎么定义动态路由？写出怎么获取传过来的动态参数？
-
DOM渲染在哪个周期完成？
-
详尽介绍vue的各个生命周期？
-
vue-loader是什么？有什么用？
-
为什么避免 v-if 和 v-for 用在一起？
-
VNode 是什么？
-
vue 首屏加载过慢如何解决？
-
vue 中的单项数据流和双向数据绑定是什意思？
-
为什么 vue 组件中的 data 必须是函数？
-
$route 和 router 的区别？
近期评论