• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25

​ 面试题：new操作符具体做了什么

1. 创建了一个空的对象
2. 将空对象的原型，指向于构造函数的原型
3. 将空对象作为构造函数的上下文（改变this指向）
4. 对构造函数有返回值的处理判断
1
2
3
4

function Fun( age,name ){
	this.age = age;
	this.name = name;
}
function create( fn , ...args ){
	//1. 创建了一个空的对象
	var obj = {}; //var obj = Object.create({})
	//2. 将空对象的原型，指向于构造函数的原型
	Object.setPrototypeOf(obj,fn.prototype);
	//3. 将空对象作为构造函数的上下文（改变this指向）
	var result = fn.apply(obj,args);
	//4. 对构造函数有返回值的处理判断
	return result instanceof Object ? result : obj;
}
console.log( create(Fun,18,'张三')   )
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

​ 面试题：闭包

1. 闭包是什么
	闭包是一个函数加上到创建函数的作用域的连接，闭包“关闭”了函数的自由变量。
2. 闭包可以解决什么问题【闭包的优点】
	2.1 内部函数可以访问到外部函数的局部变量
	2.2 闭包可以解决的问题
			var lis = document.getElementsByTagName('li');
      for(var i=0;i 可说可不说，如果说一定要提到ie
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

​ 面试题：原型链

1. 原型可以解决什么问题
	对象共享属性和共享方法
2. 谁有原型
函数拥有：prototype
对象拥有：__proto__
3. 对象查找属性或者方法的顺序
	先在对象本身查找 --> 构造函数中查找 --> 对象的原型 --> 构造函数的原型中 --> 当前原型的原型中查找
4. 原型链
	4.1 是什么？：就是把原型串联起来
	4.2 原型链的最顶端是null
1
2
3
4
5
6
7
8
9
10

​ 面试题： JS继承有哪些方式

方式一：ES6

class Parent{
	constructor(){
		this.age = 18;
	}
}

class Child extends Parent{
	constructor(){
		super();
		this.name = '张三';
	}
}
let o1 = new Child();
console.log( o1,o1.name,o1.age );
1
2
3
4
5
6
7
8
9
10
11
12
13
14

方式二：原型链继承

function Parent(){
	this.age = 20;
}
function Child(){
	this.name = '张三'
}
Child.prototype = new Parent();
let o2 = new Child();
console.log( o2,o2.name,o2.age );
1
2
3
4
5
6
7
8
9

方式三：借用构造函数继承

function Parent(){
	this.age = 22;
}
function Child(){
	this.name = '张三'
	Parent.call(this);
}
let o3 = new Child();
console.log( o3,o3.name,o3.age );
1
2
3
4
5
6
7
8
9

方式四：组合式继承

function Parent(){
	this.age = 100;
}
function Child(){
	Parent.call(this);
	this.name = '张三'
}
Child.prototype = new Parent();
let o4 = new Child();
console.log( o4,o4.name,o4.age );
1
2
3
4
5
6
7
8
9
10

​ 面试题：说一下call、apply、bind区别

共同点：功能一致

可以改变this指向

语法： 函数.call()、函数.apply()、函数.bind()
1
2
3

区别：

1. call、apply可以立即执行。bind不会立即执行，因为bind返回的是一个函数需要加入()执行。
2. 参数不同：apply第二个参数是数组。call和bind有多个参数需要挨个写。
1
2

场景：

1. 用apply的情况
var arr1 = [1,2,4,5,7,3,321];
console.log( Math.max.apply(null,arr1) )

2. 用bind的情况
var btn = document.getElementById('btn');
var h1s = document.getElementById('h1s');
btn.onclick = function(){
	console.log( this.id );
}.bind(h1s)
1
2
3
4
5
6
7
8
9
10

​ 面试题：sort背后原理是什么？

V8 引擎 sort 函数只给出了两种排序 InsertionSort 和 QuickSort，数量小于10的数组使用 InsertionSort，比10大的数组则使用 QuickSort。

之前的版本是：插入排序和快排，现在是冒泡

原理实现链接：https://github.com/v8/v8/blob/ad82a40509c5b5b4680d4299c8f08d6c6d31af3c/src/js/array.js

***710行代码开始***
1
2
3
4
5
6
7

​ 面试题：深拷贝和浅拷贝

共同点：复制

1. 浅拷贝：只复制引用，而未复制真正的值。
var arr1 = ['a','b','c','d'];
var arr2 = arr1;

var obj1 = {a:1,b:2}
var obj2 = Object.assign(obj1);

2. 深拷贝：是复制真正的值 （不同引用）
var obj3 = {
	a:1,
	b:2
}
var obj4 = JSON.parse(JSON.stringify( obj3 ));

//递归的形式
function copyObj( obj ){
	if(  Array.isArray(obj)  ){
		var newObj = [];
	}else{
		var newObj = {};
	}
	for( var key in obj ){
		if( typeof obj[key] == 'object' ){
			newObj[key] = copyObj(obj[key]);
		}else{
			newObj[key] = obj[key];
		}
	}
	return newObj;
}
console.log(  copyObj(obj5)  );
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

​ 面试题：localStorage、sessionStorage、cookie的区别

公共点：在客户端存放数据
区别：
1. 数据存放有效期
		sessionStorage : 仅在当前浏览器窗口关闭之前有效。【关闭浏览器就没了】
		localStorage   : 始终有效，窗口或者浏览器关闭也一直保存，所以叫持久化存储。
		cookie				 : 只在设置的cookie过期时间之前有效，即使窗口或者浏览器关闭也有效。
2. localStorage、sessionStorage不可以设置过期时间
	 cookie 有过期时间，可以设置过期（把时间调整到之前的时间，就过期了）
3. 存储大小的限制
	cookie存储量不能超过4k
	localStorage、sessionStorage不能超过5M
	
	****根据不同的浏览器存储的大小是不同的。
1
2
3
4
5
6
7
8
9
10
11
12
13

​ 1.4 H5/C3面试题

​ 面试题：什么是语义化标签

1. 易读性和维护性更好。
2. seo成分会更好，蜘蛛抓取更好。
3. IE8不兼容HTML5标签的。解决：可以通过html5shiv.js去处理。
1
2
3

​ 面试题：::before 和 :after中双冒号和单冒号 有什么区别？解释一下这2个伪元素的作用。

1. 区别
	:是伪类、::伪元素  ===》是为了做区分

2.是什么？作用
	元素before之前 、 元素after之后
	作用：清除浮动、样式布局上也有作用
1
2
3
4
5
6

​ 面试题：如何关闭IOS键盘首字母自动大写

1

​ 面试题：怎么让Chrome支持小于12px 的文字？

Chrome默认字体大小是：16px
**每个浏览器默认字体大小可能都不一样


1
2
3
4
5
6
7
8
9
10
11
12

​ 面试题：rem和em区别

相对于font-size

em针对于父元素的font-size
rem针对于根(html)元素的font-size
1
2
3
4

​ 面试题：ios系统中元素被触摸时产生的半透明灰色遮罩怎么去掉

1
2
3
4
5

​ 面试题：webkit表单输入框placeholder的颜色值能改变吗？

1
2
3
4
5

​ 面试题：禁止ios长按时触发系统的菜单，禁止ios&android长按时下载图片

禁止ios 长按时触发系统的菜单，禁止ios&android长按时下载图片
html,body{
	touch-callout: none;
	-webkit-touch-callout: none;
	
	user-select:none;
	-webkit-user-select:none;
}
1
2
3
4
5
6
7
8

​ 面试题：禁止ios和android用户选中文字

html,body{
	user-select:none;
	-webkit-user-select:none;
}
1
2
3
4

​ 面试题：自适应

淘宝无限适配【移动端】：淘宝无限适配 + 布局单位使用rem
1

​ 面试题：响应式

1. 是什么？
	一个URL可以响应多端
2. 语法结构
	@media only screen and (max-width: 1000px){
		ul li:last-child{
			display: none;
		}
	}

	only : 可以排除不支持媒体查询的浏览器
	screen ： 设备类型
	max-width | max-height
	min-width | min-height 
3. 响应式图片【性能优化】
	
		
		
		
	
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

布局方案

一、什么情况下采用响应式布局
	
	数据不是特别多，用户量不是特别大，纯展示类的项目适合响应式布局
	
	例如：公司的官网、专题页面
	
	特别追求性能的项目，不太适合响应式，因为如果添加了很多的响应式就会造成加载速度变慢。

二、pc + 移动端应该做什么样的布局方案
	注意：访问量还可以或者比较大，类似于淘宝网。
	
	pc是一套，会加入一点点响应式。
	移动端是一套，会使用自适应的布局方式。

三、pc的设计图

	ui：1980
	笔记本电脑：1280
	ui图的宽度和电脑的宽度不对应该怎么办？
		1. 把ui图进行等比缩放，缩放成和电脑一样的尺寸
		2. 换1980的电脑
		
四、移动端的设计图

	宽度：750
	因为750设计图/2就是375，正好是iphone6的尺寸，我们要把iphone6的尺寸做为基准点。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

第二章 面试题进阶篇

​ 2.1 ES6面试题

​ 面试题：var、let、const区别

var、let、const 共同点都是可以声明变量的

区别一：
	var 具有变量提升的机制
	let和const没有变量提升的机制
区别二：
	var 可以多次声明同一个变量
	let和const不可以多次声明同一个变量
区别三：
	var、let声明变量的
	const声明常量
	
	var和let声明的变量可以再次赋值，但是const不可以再次赋值了。
区别四：
	var声明的变量没有自身作用域
	let和const声明的变量有自身的作用域
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

​ 面试题：作用域考题

考题一：let和const没有变量提升性

console.log( str );//undefined
var str = '你好';

console.log( num );//报错
let num = 10;
1
2
3
4
5

考题二：

function demo(){
	var n = 2;
	if( true ){
		var n = 1;
	}
	console.log( n );//1
}
demo();


function demo(){
	let n = 2;
	if( true ){
		let n = 1;
	}
	console.log( n );//2
}
demo();
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

考题三：可以修改

const obj = {
	a:1
}
obj.a = 11111;
console.log( obj )

const arr = ['a','b','c'];
arr[0]= 'aaaaa';
console.log( arr );
1
2
3
4
5
6
7
8
9

​ 面试题：将下列对象进行合并

方式一：Object.assign

const a = {a:1,b:4};
const b = {b:2,c:3};

let obj1 = Object.assign(a,b);
console.log( obj1 );
1
2
3
4
5

方式二：…

let obj2 = {...a,...b};
console.log( obj2 );
1
2

方式三：自己封装方法

function extend( target,  source ){
	for(var key in source){
		target[key] = source[key];
	}
	return target;
}
console.log( extend(a,b) );
1
2
3
4
5
6
7

​ 面试题：箭头函数和普通函数有什么区别？

1. this指向的问题
	箭头函数中的this只在箭头函数定义时就决定的，而且不可修改的（call、apply、bind）
	****箭头函数的this指向定义时候、外层第一个普通函数的this
2. 箭头函数不能new（不能当作构造函数）
3. 箭头函数prototype
4. 箭头函数arguments
1
2
3
4
5
6

​ 面试题：Promise有几种状态

有三种状态：
pending（进行中）
fulfilled（已成功）
rejected（已失败）
1
2
3
4

​ 面试题：find和filter的区别

区别一：返回的内容不同
	filter 返回是新数组
	find   返回具体的内容
区别二：
	find ：匹配到第一个即返回
	filter ： 返回整体（没一个匹配到的都返回）
1
2
3
4
5
6

​ 面试题：some和every的区别

some  ==》 如果有一项匹配则返回true
every ==》 全部匹配才会返回true
1
2

​ 2.2 webpack面试题

​ 面试题：webpack插件

​ 2.3 Git面试题

​ 面试题：git常用命令

​ 面试题：解决冲突

​ 面试题：GitFlow

第三章 面试题框架篇

​ 3.1 Vue面试题

​ 面试题：Vue2.x 生命周期

1. 有哪些生命周期
系统自带：
  beforeCreate
  created
  beforeMount
  mounted
  beforeUpdate
  updated
  beforeDestroy
  destroyed
2. 一旦进入到页面或者组件，会执行哪些生命周期，顺序。
 beforeCreate
 created
 beforeMount
 mounted
3. 在哪个阶段有$el，在哪个阶段有$data
	beforeCreate 啥也没有
	created  有data没有el
	beforeMount 有data没有el
	mounted 都有
4. 如果加入了keep-alive会多俩个生命周期
	activated、deactivated
5. 如果加入了keep-alive，第一次进入组件会执行哪些生命？
 beforeCreate
 created
 beforeMount
 mounted
 activated
6. 如果加入了keep-alive，第二次或者第N次进入组件会执行哪些生命周期？
只执行一个生命周期：activated
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

​ 面试题：谈谈你对keep-alive的了解

1. 是什么
vue系统自带的一个组件，功能：是来缓存组件的。===》提升性能
2. 使用场景
就是来缓存组件，提升项目的性能。具体实现比如：首页进入到详情页，如果用户在首页每次点击都是相同的，那么详情页就没必要请求N次了，直接缓存起来就可以了，当然如果点击的不是同一个，那么就直接请求。
1
2
3
4

​ 面试题：v-if和v-show区别

1. 展示形式不同
v-if是 创建一个dom节点
v-show 是display:none 、 block

2. 使用场景不同
初次加载v-if要比v-show好，页面不会做加载盒子
频繁切换v-show要比v-if好，创建和删除的开销太大了，显示和隐藏开销较小
1
2
3
4
5
6
7

​ 面试题：v-if和v-for优先级

v-for的优先级要比v-if高
***是在源码中体现的：function genElement
1
2

​ 面试题：ref是什么？

来获取dom的
1

​ 面试题：nextTick是什么?

获取更新后的dom内容
1

​ 面试题：scoped原理

1. 作用：让样式在本组件中生效，不影响其他组件。
2. 原理：给节点新增自定义属性，然后css根据属性选择器添加样式。
1
2

​ 面试题：Vue中如何做样式穿透

stylus样式穿透使用：>>>
sass和less使用：/deep/
通用使用：  :v-deep
1
2
3

​ 面试题：Vue组件传值

父组件-->子组件：

	1. 父组件：
		
    
    export default {
        components: {
            UserDetail
        }
        ......
    }
  2. 在子组件中使用props（可以是数组也可以是对象）接收即可。可以传多个属性。
  	export default {
      props: ['myName']
 		}

子组件-->父组件：

		1. 子组件
      改变父组件的name
      export default {
          methods: {
              //子组件的事件
              changeParentName: function() {
                  this.$emit('handleChange', 'Jack')
              }
          }
      }
    2. 父组件
      

      methods: {
          changeName(name) {  
              this.name = name
          }
      }

兄弟组件之间：bus.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

​ 面试题：computed、methods、watch有什么区别？

1. computed vs methods区别
	computed是有缓存的
	methods没有缓存
2. computed vs watch区别
	watch是监听，数据或者路由发生了改变才可以响应（执行）
	computed计算某一个属性的改变，如果某一个值改变了，计算属性会监听到进行返回
	watch是当前监听到数据改变了，才会执行内部代码
1
2
3
4
5
6
7

​ 面 试题：props和data优先级谁高？

props ===>  methods ===> data ===> computed ===>watch
1

​ 面试题：Vuex有哪些属性？

state、getters、mutations、actions、modules

state 类似于组件中data，存放数据
getters 类型于组件中computed
mutations 类似于组件中methods
actions 提交mutations的
modules 把以上4个属性再细分，让仓库更好管理
1
2
3
4
5
6
7

​ 面试题：Vuex是单向数据流还是双向数据流？

Vuex是单向数据流
1

​ 面试题：Vuex中的mutaitons和actions区别

mutaitons   :  都是同步事物
actions     :  可以包含任意异步操作

***在调试中就看出来
1
2
3
4

​ 面试题：Vuex如何做持久化存储

Vuex本身不是持久化存储

1. 使用localStorage自己写
2. 使用vuex-persist插件
1
2
3
4

​ 面试题：Vue设置代理

vue.config.js

module.exports = {
  publicPath:'./',
  devServer: {
    proxy: 'http://localhost:3000'
  }
}
1
2
3
4
5
6

​ 面试题：Vue项目打包上线

1. 自测==>修改路由模式
2. 代理不生效，使用ENV
3. 修改路径
1
2
3

​ 面试题：Vue路由模式

路由模式有俩种：history、hash
区别：
	1. 表现形态不同
			history:http://localhost:8080/about
			hash:http://localhost:8080/#/about
	2. 跳转请求
			history : http://localhost:8080/id   ===>发送请求
			hash 	  : 不会发送请求
	3. 打包后前端自测要使用hash，如果使用history会出现空白页
1
2
3
4
5
6
7
8
9

​ 面试题：介绍一下SPA以及SPA有什么缺点

SPA是什么？单页面应用
缺点：
	1. SEO优化不好
	2. 性能不是特别好
1
2
3
4

​ 面试题：Vue路径传值

1. 显式
	http://localhost:8080/about?a=1
	1.1 传：this.$router.push({
  			path:'/about',
  			query:{
  				a:1
  			}
  		})
  1.2 接：this.$route.query.a
  
2. 隐式
	http://localhost:8080/about
	2.1 传：this.$router.push({
  			name:'About',
  			params:{
  				a:1
  			}
  		})
  2.2 接：this.$route.params.a
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

​ 面试题：路由导航守卫有哪些

全局、路由独享、组件内

1. 全局
	beforeEach、beforeResolve、afterEach
2. 路由独享
	beforeEnter
3. 组件内
	beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave
	
使用场景：判断是否登录，如果登录就next否则就跳转到登录页面
1
2
3
4
5
6
7
8
9
10

​ 面试题：Vue动态路由

场景：详情页(文章、商品)
router.js配置：
	{
    path: "/list",
    name: "List",
    children:[
      {
        path:"/list/:id",
        name:'Details',
        component: () =>
          import("../views/Details.vue"),
      }
    ],
    component: () =>
      import("../views/List.vue"),
  },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

​ 面试题：双向绑定原理

vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的。
通过Object.defineProperty()来实现数据劫持的。

1.实现一个解析器Compile，可以扫描和解析每个节点的相关指令，并根据初始化模板数据以及初始化相应的订阅器。

2.实现一个监听器Observer，用来劫持并监听所有属性，如果有变动的，就通知订阅者。

3.实现一个订阅者Watcher，可以收到属性的变化通知并执行相应的函数，从而更新视图。
1
2
3
4
5
6
7
8

​ 面试题：什么是虚拟DOM

其实就是数据，把dom变成数据结构。
1

​ 面试题：diff算法

利用diff算法可以更多提升dom之间对比的性能（采用虚拟dom数据进行对比）。
1

​ 面试题：讲一下MVVM

M就是data的model层
V就是view视图层
VM就是理解为v-model原理实现，通过view更新model
1
2
3

​ 3.2 微信小程序面试题

​ 面试题：如何自定义头部？

app.json进行配置

"window":{
    "navigationStyle":"custom",
}
1
2
3
4
5

​ 面试题：不校验URL

工具==》详情==》本地设置==》不校验合法域名  ： 项目上线前URL一定要请求到（不勾选也可以请求到数据）
1

​ 3.3 uni-app面试题

​ 面试题：生命周期

应用生命周期、页面生命周期、组件生命周期
1

​ 面试题：条件编译

在工具中，打if出现的条件编译

例如：

  	
这是h5端

1
2
3
4
5
6

第四章 面试题性能优化篇

​ 4.1 加载优化

1. http请求
	 能不能减少（能不能合并）
2. 图片的雪碧图
3. script标签位置
4. link标签（css引入）
1
2
3
4
5

​ 4.2 图片优化

1. 图片懒加载
2. 响应式图片
3. webp代替其他格式
4. 小图标可以改用字体图标
1
2
3
4

​ 4.3 渲染优化

1. 减少重绘和回流
2. 改变位置使用transform
3. 动画尽量用requestAnimationFrame，不要用定时器
1
2
3

​ 4.4 首屏优化

1. 长列表
2. 项目的html文件、css文件、图片、js文件压缩打包
1
2

​ 4.5 vue优化

1. keep-alive 缓存组件
2. 路由懒加载
3. 内容使用
	v-if和v-show
	computed、watch、methods
4. Object.freeze ：冻结对象
	纯展示类的接口数据，冻结就可以了
5. 使用ui组件按需引入
1
2
3
4
5
6
7
8

第五章 面试题兼容篇

​ 5.1 页面样式兼容

1. 在ios键盘中首字母大写的问题?
		
2. ios日期转换NAN问题
		具体就是，new Date('2020-11-12 00:00:00')在ios中会为NAN
		解决方案：用new Date('2020/11/12 00:00:00')的日期格式，或者写个正则转换
3. 在移动端使用click事件有300ms延迟的问题
	 	禁止双击缩放===》meta:user-scalabel=no
4. 	移动端touch事件有穿透（点透）的问题，怎么解决？
	 	4.1 阻止默认行为 : e.preventDefault();
	 	4.2 fastclick.js
5. 安卓部分版本input的placeholder偏上
		input{
	  		 line-height:normal;
		}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

第六章 面试题网络请求篇

​ 6.1 跨域面试题

前端：jsonp、vue的项目可以设置代理（打包后无效。解决：.ENV文件）
后端：CORS
1
2

​ 6.2 http和https的区别？

1. 端口不同

	http ：80端口
	https ：443端口
	
2. https比http更加安全
	
	***https就是证书
1
2
3
4
5
6
7
8

第七章 WEB安全篇

​ 7.1 XSS攻击

用户输入的文本框，需要替换某些特殊字符（ <> ... ）
1

​ 7.2 SQL注入

用户输入的文本框中不可以有特殊符号（ 引号、空格 ）
1

​ 7.3 接口安全

第八章 其他类面试题

​ 8.1 token

token是后端生成的

token + cookie  			: 前端判断是否过期
token + localStorage  : 后端判断是否过期给前端返回code码，前端判断code码等于多少
1
2
3
4

​ 8.2 SEO

1. 网站一定要多页面
2. title、描述、关键字
3. 图片、音频、视频、的标签属性特别关键
4. 网站不能出现死链接
1
2
3
4