最近面试遇到的问题

最新推荐文章于 2022-03-28 00:13:06 发布

small-xin

最新推荐文章于 2022-03-28 00:13:06 发布

阅读量190

点赞数

文章标签： vue.js html

本文链接：https://blog.csdn.net/qq_45914577/article/details/106636830

版权

1.Vue的两种路由模式

1.hash模式：原理是onhashchange事件，url都会被浏览器记录下来，只能改变#后面的url片段
2.history模式：根据history api中的pushState,replaceState两个方法

2.v-if 和v-show有什么区别？

v-if 操作的实际上是dom元素的创建或销毁。

v-show 不管初始条件是什么，元素总是会被渲染，操作display:none/block属性。

v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。频繁切换，使用 v-show ；条件很少改变，使用 v-if 。

3.async await 是什么？它有哪些作用？

async await 的作用就是 async 用于申明一个 function 是异步的，而 await 用于等待一个异步方法执行完成。它可以很好的替代promise 中的then async函数返回一个 Promise 对象，可以使用then方法添加回调函数。当函数执行的时候，一旦遇到await就会先返回，等到异步操作完成，再接着执行函数体内后面的语句

4.什么是闭包？闭包有哪些优缺点

一个作用域可以访问另一个函数内部的局部变量，可以延长作用域，但是容易造成内存泄漏，因为闭包中的局部变量永远不会被回收

function fn() {
    var num = 10;
    function fun() {
        console.log(num); 
    }
    return fun;
}
var f = fn(); 
f();

5.常见的数组方法

concat() 用于数组合并，返回新数组

indexof() 在数组中可以找到一个给定元素的第一个索引，如果不存在，则返回-1

push() 数组末尾添加，改变原数组

pop() 数组末尾删除，改变原数组

unshift() 数组头部添加，改变原数组

shift() 数组头部删除，改变原数组

reverse() 数组颠倒，改变原数组

splice(index,删除位数,添加) 对数组进行删除修改，改变原数组

sort() 数组排序，改变原数组 array.sort(function(a,b){ return a-b; }); console.log(array) 升序 1,2,3,4,5

join() 数组转字符串不改变原数组，返回转换后的字符串

isArray() 判断一个元素是否为数组

6.数组有哪几种循环方式？分别有什么作用？

every() 方法测试一个数组内的所有元素是否都能通过某个指定函数的测试。它返回一个布尔值。

filter() 方法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。

forEach() 方法对数组的每个元素执行一次提供的函数。

some() 方法测试是否至少有一个元素可以通过被提供的函数方法。该方法返回一个Boolean类型的值。

7.常用的字符串方法

cancat() 字符串拼接

trim() 去除左右空格

charAt() 从一个字符串中返回指定的字符

slice() 截取字符串的某个部分，返回新字符串

substring(start,end) 字符串截取从start截取到end

split(’,’) 将字符串分隔为数组

8.什么是原型链

每个实例对象都有一个__proto__属性，当一个对象在查找一个属性的时候，自身没有就会根据__proto__向它的原型进行查找，如果没有，则向原型的原型继续查找，这样就形成了原型链

9.跨域实现方式

1.通过jsonp跨域

2.通过cors跨域

3.代理

10.性能优化

利用webpack进行合并压缩，动态渲染组件，CDN加载包，减少操作dom，图片预加载，路由懒加载

11.什么是递归

递归，就是在运行的过程中调用自己，结构清晰，可读性强，但是效率低，可能会栈溢出

12.js的执行机制

单线程，异步执行机制，分为同步任务和异步任务，先走同后走异，异步分为宏任务和微任务，先走微后走宏

13.数组去重

//利用filter
function unique(arr) {
  return arr.filter(function(item, index, arr) {
    //当前元素，在原始数组中的第一个索引==当前索引值，否则返回当前元素
    return arr.indexOf(item, 0) === index;
  });
}
    var arr = [1,2,3,4,5,6,7,1,2,3,4,5,6,7]
        console.log(unique(arr))

//利用双重for
var arr = [1,2,3,4,5,6,7,1,2,3,4,5,6,7]
        function unque(arr) {
            for(var i=0; i<arr.length; i++) {
                for(var j=i+1; j<arr.length; j++) {
                    if(arr[i] === arr[j]) {
                        arr.splice(j)
                    }
                }
            }
            return arr
        }
console.log(unque(arr));

var arr = [1,2,3,4,5,6,7,1,2,3,4,5,6,7]
// 利用new Set()
function unque(arr) {
   return [...new Set(arr)]
}
// function unque(arr) {
        //     return Array.from(new Set(arr))
        // }
console.log(unque(arr));

14.es6新增方法

let,const方法，不存在变量提升，const不可改值，箭头函数，简化了定义函数的写法，新增了模块化、利用import 、export来实现导入、导出。新增了结构赋值，ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。新增了class类的概念，它类似于对象

15.vue中是怎么实现父向子、子向父、兄弟之间的传值的

父向子传值用props传值

子向父用$emit()

兄弟组件传值用事件总线

16.什么是同源策略？

所谓同源策略是浏览器的一种安全机制，来限制不同源的网站不能通信。同源就是域名、协议、端口一致

17.post和get 请求有哪些区别？

GET：一般用于信息获取，使用URL传递参数，对所发送信息的数量也有限制，一般在2000个字符

POST：一般用于修改服务器上的资源，对所发送的信息没有限制

18.http状态码分别代表什么意思？

1xx 表示HTTP请求已经接受，继续处理请求
2xx 表示HTTP请求已经处理完成(200)
3xx 表示把请求访问的URL重定向到其他目录(304资源没有发生变化，会重定向到本地资源)
4xx 表示客户端出现错误(403禁止访问、404资源不存在)
5xx 表示服务端出现错误

19.js的数据类型

js的数据类型分为：

基本数据类型（string、number、boolean、null、undefined、symbol）

复杂数据类型：array function

基本数据类型的特点：直接存储在栈中的数据

复杂数据类型的特点：存储的是该对象在栈中引用，真实的数据存放在堆内存里

20.什么vuex ,谈谈你对它的理解？

首先vuex的出现是为了解决web组件化开发的过程中，各组件之间传值的复杂和混乱的问题
将我们在多个组件中需要共享的数据放到store中，
要获取或格式化数据需要使用getters，
改变store中的数据，使用mutation，但是只能包含同步的操作，在具体组件里面调用的方式this.$store.commit('xxxx')
Action也是改变store中的数据，不过是提交的mutation，并且可以包含异步操作，在组件中的调用方式this.$store.dispatch('xxx')；在actions里面使用的commit(‘调用mutation’)

21.防抖节流

防抖（debounce）

所谓防抖，就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间

<div id="content" style="height:150px;line-height:150px;text-align:center; color: #fff;background-color:#ccc;font-size:80px;"></div>
<script>
    let num = 1;
    let content = document.getElementById('content');

    function count() {
        content.innerHTML = num++;
    };
    content.onmousemove = count;
</script>

非立即执行版意思是触发事件后函数不会立即执行，而是在 n 秒后执行，如果在 n 秒内又触发了事件，则会重新计算函数执行时间
function debounce(func, wait) {
    let timeout;
    return function () {
        let context = this;
        let args = arguments;

        if (timeout) clearTimeout(timeout);
        
        timeout = setTimeout(() => {
            func.apply(context, args)
        }, wait);
    }
}
content.onmousemove = debounce(count,1000)

立即执行版的意思是触发事件后函数会立即执行，然后 n 秒内不触发事件才能继续执行函数的效果
function debounce(func,wait) {
    let timeout;
    return function () {
        let context = this;
        let args = arguments;

        if (timeout) clearTimeout(timeout);

        let callNow = !timeout;
        timeout = setTimeout(() => {
            timeout = null;
        }, wait)

        if (callNow) func.apply(context, args)
    }
}

节流（throttle）

所谓节流，就是指连续触发事件但是在 n 秒中只执行一次函数。节流会稀释函数的执行频率。对于节流，一般有两种方式可以实现，分别是时间戳版和定时器版

时间戳版:
function throttle(func, wait) {
    let previous = 0;
    return function() {
        let now = Date.now();
        let context = this;
        let args = arguments;
        if (now - previous > wait) {
            func.apply(context, args);
            previous = now;
        }
    }
}
content.onmousemove = throttle(count,1000)

定时器版:
function throttle(func, wait) {
    let timeout;
    return function() {
        let context = this;
        let args = arguments;
        if (!timeout) {
            timeout = setTimeout(() => {
                timeout = null;
                func.apply(context, args)
            }, wait)
        }

    }
}