前端面试题5

1. 入门前端的学习材料主要是哪些？
2. 响应式布局的布局方式有哪几种？
3. 对git的熟练程度？
4. 对docker容器的了解情况
5. 为什么想做前端
6. js的防抖与节流有什么区别？他们一般在什么情况下使用
7. 介绍对webpack的核心概念的理解

在开始前你需要先理解一些核心概念：
入口(entry)
输出(output)
loader
插件(plugin)
模式(mode)
浏览器兼容性(browser compatibility)
环境(environment)

8. webpack的loader和plugin的区别是什么

loader，它是一个转换器，将A文件进行编译成B文件，比如：将A.less转换为A.css，单纯的文件转换过程。
plugin是一个扩展器，它丰富了webpack本身，针对是loader结束后，webpack打包的整个过程，它并不直接操作文件，而是基于事件机制工作，会监听webpack打包过程中的某些节点，执行广泛的任务

9. 如何实现图片响应式处理，即根据pc端和移动端的分辨率和密度加载不同的图片
10. 平常关注前端咨询的公众号/博客/媒体分别是哪几个
11. js定时器有几种

setTiemout、setInterval、setImmediate、requestAnimationFrame

12. null undefined区别
13. 浏览器渲染页面
14. 浏览器缓存
15. 网站性能优化
16. mixin extend
17. 组件通信
18. 封装组件
19. 拖拽
20. 数组求和，手写数组去重
21. jq选择器
22. 浮动方式
23. js原生绑定2个click

 var btn4 = document.getElementById("btn4");
 btn4.addEventListener("click",hello1);
 btn4.addEventListener("click",hello2);
 function hello1(){
   alert("hello 1");
 }
function hello2(){
  alert("hello 2");
}

24. cookie、local storage、session storage区别
25. vue传值方式
26. data为什么是函数不是对象

vue的data数据其实是vue组件原型上的属性，数据存在于内存当中
vue组件为了保证每个实例上的data数据的独立性，规定了必须使用函数，而不是对象。
因为使用对象的话，每个实例（组件）上使用的data数据是相互影响的，这当然就不是我们想要的了。对象是对于内存地址的引用，直接定义个对象的话组件之间都会使用这个对象，这样会造成组件之间数据相互影响。

27. 闭包
28. 原型链
29. node、express启动服务

//1.创建名为app.js的文件
mkdir myapp
//2.使用 npm init 命令为应用程序创建 package.json 文件
npm init
//3.安装express
npm install express --save
//4.在 myapp 目录中，创建名为 app.js 的文件，然后添加以下代码：
const express = require('express')
const app = express()
const port = 3000

app.get('/', (req, res) => {
  res.send('Hello World!')
})

app.listen(port, () => {
  console.log(`Example app listening at http://localhost:${port}`)
})

30. react生命周期
31. 对象继承

设计思想：原型对象的所有属性和方发，都能被实例对象共享。

32. git合并，切换分支合并
33. 简述一下函数防抖和节流
34. flex布局和grid布局的区别，并简单陈述几个他们的主要属性
35. Flex布局怎么纵轴布局
36. Ajax的原理，最大的特点是什么?如何解决跨域问题?优缺点是什么?
37. 画一条0.5像素的线
38. defer 和async的区别
39. forEach的实现原理，它与普通for循环的区别是?

foreach与for循环的明显差别在于，foreach循环时循环对象（数组、集合）被锁定，不能对循环对象中的内容进行增删改操作。

// for循环：可以修改循环语句
var array = ["a","b","c","d"]
for(var i = 0;i < array.length;i++) {
    array[i] = "A";
}
console.log(array) // [ 'A', 'A', 'A', 'A' ]

// foreach循环，不能修改循环语句
var array2 = ["a","b","c","d"];
array2.forEach(function(item) {
    item = "A"
})
console.log(array2) //还是原数组 [ 'a', 'b', 'c', 'd' ]

40. v-bind, v-on的区别

v-bind绑定html属性
v-on绑定html事件

41. 在JavaScript中什么是伪数组?如何将伪数组转化为标准数组?
42. forEach循环数组可以中断吗

除了抛出异常以外，没有办法中止或跳出 forEach() 循环。

43. 运用递归实现12+23+… +(n-1)*n

    // 实现 n*(n-1) +...+ 4*3 + 3*2 + 2*1
    function reference(n) {
        return n <= 1 ? (arguments[1] || 0) : reference(n - 1, (arguments[1] || 0) + n * (n - 1))
    }

    reference(0); // 0
    reference(1); // 0
    reference(2); // 2
    reference(3); // 8
    reference(4); // 20
    reference(5); // 40

44. 实现一个深拷贝(不使用json方法)
45. 如何实现一个链式调用，比如a. a1(). a2()
46. 写一个function,清除字符串前后的空格

//1.使用正则
if(!String.prototype.trim){
	String.prototype.trim=function(){
		//利用正则匹配去除字符串前后空格
		return this.replace(/(^\s+)|(\s+$)/g,"");
	}
}

47. Promise 是用来解决什么问题的原理? Promise对象是什么? 如何同时用promise请求两个异步操作

Promise解决了ajax请求过程中的回调地狱的问题

48. 为什么在Vue3.0采用了Proxy, 抛弃了Object. defineProperty?

Object.defineProperty存在几个缺点：

1. 无法发现对象中新增和被删除的属性：当你给一个对象添加一个新的属性时，这个新增的属性没有被添加到 Vue 的数据更新侦查机制里。vue.$set可以让Vue知道你新增了一个属性，其实Vue.$set内部也是通过调用 Object.defineProperty() 来实现的。
2. 当你利用索引直接设置一个数组项或修改数组长度时，Vue 不能检测到数组的变动。
3. 当对象嵌套层数特别深时，递归遍历带来的性能开销就会比较大

Proxy的好处：

1. Proxy能解决使用defineProperty的缺点，本质的原因在于 Proxy 是一个内置了拦截器的对象，所有的外部访问都得先经过这一层拦截。不管是先前就定义好的，还是新添加属性，访问时都会被拦截。
2. Proxy可以劫持整个对象，并返回一个新的对象。Proxy不仅可以代理对象还可以代理数组

49. Vuex 的muation和action的作用
50. axios拦截器和响应器的使用场景
51. 小程序开发流程
52. 微信小程序中的双向绑定和vue有什么不同

在vue中进行数据绑定后,当数据修改了会直接更新到视图上
但是在小程序中呢,data数据修改是不会直接同步到,必须调用this.setData()这个方法

data:{
 arr:[{name:"小李"},{name:"小王八"}],
 list:[{name:"小明"},{name:"小红"}]
},
setMsg(){  //该方法可以绑定到事件上也可以在onLoad里面调用  
  this.data.arr = this.data.list
   this.setData({
    arr:this.data.arr, // 简单粗暴直接修改
    ["list[0].name"]:"小姚"  //也可以只修改里面的一项,
   })
}

53. 微信小程序页面代码如何快速转换为Uni -app?
54. vue3 什么版本还没有出来，了解吗？
55. 讲一下vue双向绑定，v-model，更深层次的东西，defineproperty知道吗？
56. css要实现一个0.5px的线，怎么做，默认的是1px的线
57. 熟悉flex吗？flex：0 1 是什么的缩写
58. vue中，v-for， v-if想要同时使用应该怎么做？

v-for的优先级是高于v-if的，如果两者同时使用，那么v-if会在每一个v-for循环渲染出来的项上作用，造成性能上的浪费。

59. 盒模型知道吗？讲一下一般的盒模型和怪异盒模型
60. react用过class类组件和函数式组件吗？
61. vue v-if， v-show的区别，创建dom的区别

1.v-if在条件切换时，会对标签进行适当的创建和销毁，而v-show则仅在初始化时加载一次，因此v-if的开销相对来说会比v-show大。
2.v-if是惰性的，只有当条件为真时才会真正渲染标签；如果初始条件不为真，则v-if不会去渲染标签。v-show则无论初始条件是否成立，都会渲染标签，它仅仅做的只是简单的CSS切换。

62. vuex新特性
    TS 4.1 新特性
63. 手写冒泡排序 快速排序
64. 手写继承的几种方法
65. 垂直居中css
66. 性能优化
67. promise 一道流程题
68. 事件委托 代理
69. v-if v-show
70. 冒泡 捕获
71. vue keep-alive
72. mvvm 理解
73. 完整项目流程
74. 路由 router route