web前段面试题总结

swallow_HC

已于 2023-09-13 16:42:22 修改

阅读量92

点赞数

文章标签：前端

于 2023-08-29 11:57:37 首次发布

本文链接：https://blog.csdn.net/anye_zhuzai/article/details/132557548

版权

js系列

面试题:0.1+0.2===0.3为true??

var a ={
    count: 1,
    valueof(){
        return a.count ++
},
    toString(){}
}
 if(a == 1 && a == 2 & a == 3){
    console.1og('我被打印了')
}

面试题:all方法什么时候执行then方法，什么时候执行catch方法?是所有的成功整体才算成功，还是有一个成功整体就成功了??

const p2 = new Promise((resolve, reject)=>{
setTimeout(o=>resolve( 'p2异步请求')，500)
}
const p3 = new Promise((resolve,reject) =>{
setTimeout(()=>resolve('p3异步请求'),1500)y
const p4 = new Promise((resolve, reject) =>{
setTimeout(=>reject( 'p4异步请求:)，100)
})
Promise.al1([p2,p3，p4]). then((res) =>{i
console.log(res, 'al1方法:)
}).catch(err =>{
console.error(err, "all方法异常报错)
})

静态方法: Promise.all()方法，Promise.resolve()方法，Promise.reject()方法

Promise本身是一个构造函数,使用new进行实例化

面试题:new关键字做了哪些事情?

1、创建一个空对象 2、构造函数中this指向这个对象3、执行这个构造函数4、返回这个对象

面试题:call/apply/bind的作用和区别?
共同点:都是改变this的指向
区别:1、call和bind从第二个开始是以逗号分隔的参数，也叫不定参数。fn.call(this0bj,a,b,c,
d, .. .)，apply第二个参数是一个数组。fn.apply(this0bj，[a,b,c,d,.. .])
2、call/apply绑定this后会立即执行，bind只是绑定this不会立即执行

// this的指向问题。在javascript中this对象不是一成不变的，它的指向随着代码的执行会有相应变化，变化如下:
1、函数调用。fn()中的this指向window
2、方法调用。a.fn()中的this指向这个对象a
3、构造函数。var b = new People()中的this指向实例化对象b
4、call/apply/bind。fn.call(c, d, e)中的this指向第一个参数c
5、箭头函数。()=>{}中的this指向上一级作用域的this。箭头函数本身没有自己的this

面试题:下面打印的结果是什么?如何让打印的结果是0 1 2 3 4

问:for(var j=0;j< 5;j++){
setTimeout(() => console.log(j),200)
}
答:for(let j =0;j< 5;j++){
setTimeout(O) =>console.log(j)，200)
}

面试题:如何中断当前的Promise代码?
答:在new Promise里返回一个空的Promise即可

闭包:跨作用域访问变量
回调函数:开始不调,回头再调
传统的异步解决方案:是通过回调的形式解决异步数据加载和渲染的问题

reject函数作用是把等待/进行中状态改成失败状态（已拒绝）
实例可以使用then方法，then方法里有两个回调函数的参数，分别接收成功/失败两种状态传递回来的数据
promise的特点：promise对象代表一个异步操作，有三种状态分别是：pending（进行中，等待） fulfilled（已成功）
rejected（失败）
状态的改变：由等待变成功，由等待变失败
缺点：无法取消promise，一旦新建它就会立即执行，无法中断，其次，如果不设置回调函数，promise内部抛出问题，错误，不会反应到外部。

数组

1. push()：向数组末尾添加一个或多个元素，并返回新数组的长度。
2. pop()：删除数组最后一个元素，并返回被删除的元素。
3. shift()：删除数组第一个元素，并返回被删除的元素。
4. unshift()：向数组开头添加一个或多个元素，并返回新数组的长度。
5. concat()：合并两个或多个数组，并返回新数组。
6. slice()：截取数组的一部分，并返回新数组。
7. splice()：从数组中删除、替换或插入元素，并返回被删除的元素。
8. indexOf()：返回指定元素在数组中首次出现的索引，如果不存在则返回 -1。

vue系列

面试题:v-for和v-if为什么不推荐同时使用?
vue2中v-for的优先级比v-if高，写在一起的话，先执行循环，再执行判断

vue3中v-if的优先级高于v-for，写在一起的话，先执行判断，再执行循环

面试题:v-show和v-if的区别？
v-show是通过样式display来控制显示隐藏的，安全性较低，性能较高，适合频繁操作DOM并安全性不高的场景

v-if是通过pOw元素的增删来控制的，安全性较高，性能较低，适合安全性较高的场景
面试题:为什么data必须是一个函数?

如果data是对象，对象是引用类型，多个vue组件实例会共享一个对象，此时会造成变量污染的问题，所以data要写成一个函数，每个实例都会执行该函数生成一个新的对象I
面试题:created和mounted的区别?

created一般用来发送异步请求操作数据，mounted可以操作DOM，也可以发送异步请求。在mounted里发异步请求白屏时间长一点，此时可以在created里发请求即可

路由vuetouter有几种模式？

三种：hash 哈希模式纯前段默认模式

history 历史模式需要后端支持

abstract 绝对模式

路由传参常用的两种方式;
1、path + query搭配跳转传参,此种方式传参类似于get请求，参数名和参数值都会拼接在url后，页面刷新数据不会丢失
2、name + params搭配跳转传参，此种方式传参方式url中只会显示参数值不会显示参数名，较为安全，页面刷新数据会丢失，可以在路由配置对象的path后增加需要保留的参数配置:id
3、使用router- link进行跳转，传参方式可以参照上面两种，也可以直接拼接在path后面

面试题：computed，computedfilters，watch，methods四者的区别？
computed: 计算属性，有依赖缓存，本身没有该数据，依赖现有的数据生成的一个新的数据，如果说依赖的数据不改变，该属性值不会重新执行，该属性纯粹是为了提升性能的。使用的时候直接当成变量来使用，不能加小括号。使用场景:前端需要的数据接口没有返回，但是可以通过接口返回的数据处理计算出来，此时可以使用计算属性

computedfilters: 过滤器，没有依赖缓存。对已有的数据进行处理，不会生成新的数据，只是改变已有数据的格式，函数的参数里可以拿到当前的数据。使用场景:状态码，时间戳等等用户看不懂的数据

watch: 侦听器，监听一些数据的变化，数据一旦变化了就会执行相应的代码，可以拿到被侦听的数据修改前后的值。如果侦听的数据内部有嵌套的引用数据类型，要使用对象的形式来监听，增加deep属性为true为深度监听，增加immediate:true立即监听一次。使用场景: 监听输入框值的变化，监听路由数据的变化
methods: 普通的函数/方法，每次都会执行