前端面试题5

古城微笑少年丶 2021-09-09 00:46 331阅读 0赞

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

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

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

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

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

> setTiemout、setInterval、setImmediate、requestAnimationFrame

1.  [null undefined区别][null undefined]
2.  [浏览器渲染页面][Link 3]
3.  [浏览器缓存][Link 4]
4.  [网站性能优化][Link 5]
5.  [mixin extend][]
6.  [组件通信][Link 6]
7.  [封装组件][Link 7]
8.  [拖拽][Link 8]
9.  [数组求和][Link 9]，手写[数组去重][Link 10]
10. [jq选择器][jq]
11. 浮动方式
12. 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");
    }

1.  [cookie、local storage、session storage区别][cookie_local storage_session storage]
2.  [vue传值方式][Link 6]
3.  data为什么是函数不是对象

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

1.  [闭包][Link 11]
2.  [原型链][Link 12]
3.  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}`)
    })

1.  react生命周期
2.  [对象继承][Link 13]

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

1.  git合并，切换分支合并
2.  [简述一下函数防抖和节流][Link 14]
3.  [flex布局和grid布局的区别，并简单陈述几个他们的主要属性][flex_grid]
4.  [Flex布局][Flex]怎么纵轴布局
5.  [Ajax的原理][Ajax]，最大的特点是什么?如何解决跨域问题?优缺点是什么?
6.  [画一条0.5像素的线][0.5]
7.  [defer 和async的区别][defer _async]
8.  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' ]

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

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

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

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

1.  运用递归实现1*2+2*3+… +(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

1.  [实现一个深拷贝(不使用json方法)][json]
2.  如何实现一个[链式调用][Link 15]，比如a. a1(). a2()
3.  写一个function,清除字符串前后的空格

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

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

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

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

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

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

1.  [Vuex 的muation和action的作用][Vuex _muation_action]
2.  axios拦截器和响应器的使用场景
3.  小程序开发流程
4.  [微信小程序中的双向绑定和vue有什么不同][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"]:"小姚"  //也可以只修改里面的一项,
       })
    }

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

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

1.  [盒模型知道吗？讲一下一般的盒模型和怪异盒模型][Link 16]
2.  [react用过class类组件和函数式组件吗？][react_class]
3.  vue [v-if， v-show的区别][v-if_ v-show]，创建dom的区别

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

1.  [vuex新特性][vuex]  
    [TS 4.1 新特性][TS 4.1]
2.  [手写冒泡排序 快速排序][Link 17]
3.  [手写继承的几种方法][Link 18]
4.  [垂直居中css][css]
5.  [性能优化][Link 5]
6.  promise 一道流程题
7.  [事件委托 代理][Link 19]
8.  v-if v-show
9.  [冒泡 捕获][Link 20]
10. vue [keep-alive][]
11. [mvvm 理解][mvvm]
12. [完整项目流程][Link 21]
13. [路由 router route][router route]

[Link 1]: https://www.html.cn/qa/frontend/20057.html
[docker]: https://zhuanlan.zhihu.com/p/57029638
[Link 2]: https://segmentfault.com/a/1190000018445196
[pc]: https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images
[js]: http://caibaojian.com/javascript-timer.html
[null undefined]: https://juejin.cn/post/6844903777506426893
[Link 3]: https://developer.mozilla.org/zh-CN/docs/Web/Performance/How_browsers_work
[Link 4]: https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Caching
[Link 5]: https://segmentfault.com/a/1190000022205291
[mixin extend]: https://www.w3cplus.com/preprocessor/sass-mixin-or-extend.html
[Link 6]: https://juejin.cn/post/6844903887162310669
[Link 7]: https://segmentfault.com/a/1190000022389034
[Link 8]: https://juejin.cn/post/6844903513491767303
[Link 9]: https://segmentfault.com/a/1190000023556599
[Link 10]: https://segmentfault.com/a/1190000016418021
[jq]: https://www.w3school.com.cn/jquery/jquery_selectors.asp
[cookie_local storage_session storage]: https://www.huaweicloud.com/articles/7d0abb2dc14fbb9188ed8af9136bd111.html
[Link 11]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Closures
[Link 12]: https://segmentfault.com/a/1190000021232132
[Link 13]: https://wangdoc.com/javascript/oop/prototype.html
[Link 14]: https://www.jianshu.com/p/4ee9b64a86a3
[flex_grid]: https://juejin.cn/post/6940627375537258527
[Flex]: https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
[Ajax]: https://www.runoob.com/ajax/ajax-intro.html
[0.5]: https://juejin.cn/post/6844903582370643975
[defer _async]: https://segmentfault.com/q/1010000000640869
[JavaScript]: https://blog.csdn.net/xiasohuai/article/details/81030291
[forEach]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach
[json]: https://zhuanlan.zhihu.com/p/336283847
[Link 15]: https://www.cnblogs.com/tarol/p/5336666.html
[Promise _ Promise_ _promise]: https://juejin.cn/post/6844903919517171719
[Vuex _muation_action]: http://www.cxyzjd.com/article/qq_37734787/109541198
[vue]: https://blog.csdn.net/listStyleScript/article/details/105955510
[Uni -app]: https://ask.dcloud.net.cn/article/35786
[flex_0 1_]: https://juejin.cn/post/6844904182156115982
[vue_v-for_ v-if]: https://blog.csdn.net/weixin_43554584/article/details/111462519
[Link 16]: https://segmentfault.com/a/1190000025121604
[react_class]: https://www.huaweicloud.com/articles/d0001c19a0f7b0ee78b6a2dcab5fd2b0.html
[v-if_ v-show]: https://segmentfault.com/a/1190000038641354
[vuex]: https://zhuanlan.zhihu.com/p/212858363
[TS 4.1]: https://www.freesion.com/article/95121287846/
[Link 17]: https://www.cnblogs.com/echolun/p/12638903.html
[Link 18]: https://www.huaweicloud.com/articles/12665474.html
[css]: https://juejin.cn/post/6844903550909153287
[Link 19]: https://juejin.cn/post/6844903589052153869
[Link 20]: https://zh.javascript.info/bubbling-and-capturing
[keep-alive]: https://cn.vuejs.org/v2/guide/components-dynamic-async.html
[mvvm]: https://www.cnblogs.com/WindrunnerMax/p/13287278.html
[Link 21]: https://www.163.com/dy/article/FM33ML7M05444M2Q.html
[router route]: https://segmentfault.com/a/1190000022666268