知识精华—前端面试题大全2（含答案）

最新推荐文章于 2024-04-09 23:39:20 发布

GllWyz

最新推荐文章于 2024-04-09 23:39:20 发布

阅读量515

点赞数

分类专栏： # 知识精华总结文章标签：面试题前端面试题

本文链接：https://blog.csdn.net/zhumizhumi/article/details/105538294

版权

知识精华总结专栏收录该内容

12 篇文章 0 订阅

订阅专栏

一、JS方面

1、this指向
2、闭包功能，出现的原因，缺点

有关闭包很好的例子解释博客：https://blog.csdn.net/zhumizhumi/article/details/86306192
3、ES6的东西
4、LET、Const、Var

let: 块级作用域、不能变量提升、可以修改

const: 块级作用域、不能变量提升、定义常量不可修改且必须初始化

var: 函数作用域、可以变量提升、可以修改
5、防抖和节流【重绘和重排】

https://zhuanlan.zhihu.com/p/103527326

防抖：是输入框属入一个内容，不是每输入一个就去服务器进行搜索，而是输入完之后进行搜索，用settimeout在几秒之内没有变化的就是开始搜索，这就是放抖的一个例子

节流：监测浏览器窗口的onsize时间，每次改变都会触发，节流就是隔一段时间进行触发一次，就是节流
6、求组 Array
7、for和foreach的区别 filter过滤 reduce any some的方法

（1）reduce

计算数组元素相加后的总和

 JS
var numbers = [65, 44, 12, 4];
 
function getSum(total, num) {
    return total + num;
}
function myFunction(item) {
    document.getElementById("demo").innerHTML = numbers.reduce(getSum);
}


VUE
computed: {
   quantityNum() { // 商品总数
     return this.selectTableData.reduce((count, item) => {
       return count + item.amount
     }, 0)
   }
 }

（2）some

some() 方法用于检测数组中的元素是否满足指定条件（函数提供）。

some() 方法会依次执行数组的每个元素：

如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测。
如果没有满足条件的元素，则返回false。

注意： some() 不会对空数组进行检测

注意： some() 不会改变原始数组

var ages = [3, 10, 18, 20];

function checkAdult(age) {
    return age >= 18;
}

function myFunction() {
    document.getElementById("demo").innerHTML = ages.some(checkAdult);
}

8、排序的方法冒泡排序 sort也可以进行排序为什么要排序
9、作用域

浏览器给js的生存环境叫作用域
10、原型链

函数内部的变量被使用时，首先会在自己的私有作用域下查找是否有这个变量，有就直接使用，没有就向他的上一级查找，父级有就使用父级的，父级没有就以此继续向上查找直到查找带window有就使用没有就是is not defined。这种查找机制我们叫原型链。
11、性能优化

12、数据达到上万的时候，从中查找一个数据，怎么处理

二、Vue方面

1、vue中的双向绑定讲解原理 + 自己如何实现双向绑定

https://blog.csdn.net/weixin_36852235/article/details/81434619
https://www.cnblogs.com/beevesnoodles/p/9844854.html

（1）双向绑定的原理

目前前端框架基本上都是采用 MVVM 模式实现双向绑定，Vue 自然也不例外。但是各个框架实现双向绑定的方法略有所不同，目前大概有三种实现方式。

发布订阅模式
Angular 的脏查机制
数据劫持

Vue 是通过数据劫持结合发布订阅模式来实现双向绑定的

当data 有变化的时候它通过Object.defineProperty(）方法中的set方法进行监控，并调用在此之前已经定义好data 和view的关系了的回调函数，来通知view进行数据的改变
而view 发生改变则是通过底层的input 事件来进行data的响应更改

vue是通过Object.defineProperty()来实现数据劫持的。它可以来控制一个对象属性的一些特有操作，比如读写权、是否可以枚举，Observer（Objec.defineProperty中的set）监听data的变化，当data有变化的时候通知观察者列表Dep（里面有与data变化对应的update函数）,watcher负责向观察者列表里添加（订阅）对应的更新函数，Dep里的更新函数执行完了之后将最新的值更新到view上

（2）如何实现双向绑定

https://segmentfault.com/a/1190000011225943

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>双向绑定最最最初级demo</title>
        <meta charset="UTF-8">
    </head>
    <body>
        <div id="app">
            <input type="text" id="txt">
            <p id="show-txt"></p>
        </div>
    </body>
    <script>
        var obj={}
        Object.defineProperty(obj,'txt',{
            get:function(){
                return obj
            },
            set:function(newValue){
                document.getElementById('txt').value = newValue
                document.getElementById('show-txt').innerHTML = newValue
            }
        })
        document.addEventListener('keyup',function(e){
            obj.txt = e.target.value
        })
    </script>
</html>

2、v-if和v-show的区别

https://blog.csdn.net/weixin_42614080/article/details/97950234

v-if是动态的向DOM树内添加或者删除DOM元素；v-show是通过设置DOM元素的display样式属性控制显隐

v-if适合运营条件不大可能改变；v-show适合频繁切换
3、VUE生命周期函数

4、VUX的五大组成部分
5、路由守卫
6、VUE中的Data为什么一定要是个函数
7、组件之间的通信方式