初级前端经典面试题收录
简介: 收录整理前端面试题,面试前花半个小时看一下,马道成功。
一、前端基础
1.Js基础
1 let var 和 const
var 定义一个变量,未赋值时,它的值为undefined,var的作用域为方法作用域,在方法内定义时在整个方法中都可以使用
let 定义一个变量,不能重复定义,其作用域为块级作用域,不能提前调用 会报错
const 定义一个常量,在声明的时候必需初始化,在后面不能修改常量的值,const实际上保证的,并不是变量的值不能改变,而是变量指向的那个内存地址不能变动,所以可以用来声明对象和数组等引用类型
2.js 数据类型
Js数据类型分为基本数据类型和引用数据类型
基本数据类型:
Number String Boolean null undefined
symbol bigint(es6 新增)
引用数据类型:
Object 和function
Object: 普通对象,Math,Regexp,Date,Array 等
两种数据的储存方式:
基本数据类型储存在栈中,占据空间小,大小固定读取频繁
引用数据类型存储在堆中,占据空间大,大小不固定,引用数据类型在栈中存储了指针,当解释器查找引用值时会检索其在栈中的地址,取得地址后从堆中获得实体
3.Object.assign的理解
作用: Object 可以实现对象的合并
语法: Object.assign(target,…source)
解析:
Object.assign 会将source里面的可枚举属性复制到target,如果有同名属性则会覆盖
如果属性值是一个引用类型,那么复制的就是引用地址,会存在引用共享的问题
4.map和forEach的区别
相同点:
1.都是数组遍历
2.每次执行匿名函数都支持三个参数item(每一项) index (索引值)arr(原数组)
3.匿名函数的this指向 window
4.只能遍历数组
不同点:
map会返回一个新创建的数组
forEach 返回值为undefined
5.for of 可以遍历那些对象
for of 是es6新增的一个遍历方法,但只限于迭代器(iterator),
可以的遍历的对象有 Map Set Arrray argument等
6.作用域与作用域链
在es6之前js只有全局作用域和函数作用域,在es6中新增了块级作用域,通过声明let和const实现
作用域链,即在访问变量的时候,函数可以访问全局的变量,而外部不能访问函数内部的变量,大概这么个意思回头查一下资料
7.闭包与应用
闭包是什么?
闭包通常是指函数内部返回另一个函数
闭包特点: 函数内部的变量会一直存储在开辟的一个单独内存空间中,不会消失,所以可以用作私有变量
使用不当容易导致内存泄露
- 应用:
手写防抖:
//防抖 手写未测试
var debounce = function(fn,delay){
let timer = null,
isFirstTime = true
return function(){
if(isFirstTime){ //第一次执行不延时
fn.apply(this,arguments)
isFirstTime = false
}
clearTimeout(timer)
timer = setTimeout(()=>{
clearTimeout(timer)
timer = null
fn.apply(this,arguments)
},delay|| 500)
}
}
//测试
window.resize = debounce(()=>{
console.log(1)
},1000)
手写节流(throttle)
var throttle = function(fn,delay){
let timer = null,
isFirstTime = true
return function(){
if(isFirstTime){
fn.apply(this,arguments)
isFirstTIme = false
}
if(timer){
return false
}
timer = setTimeout(()=>{ //箭头函数不用保存this
fn.apply(this,arguments)
clearTimeout(timer)
timer = null
},delay||500)
}
}
//测试
window.onresize = throttle(()=>console.log(1),dellay||500)
设计模式:
单例:
var Singleton = function(name){
this.name = name
}
Singleton.getInstance = (function(){
return function(name){
if(!this.instance){
this.instance = new Singleton(name)
}
return this.instance
}
})()
//测试
var a = Sinngton.getInstance('single1')
var b = Singleton.getInstance('single2')
console.log(a === b)
8.this指向和箭头函数
9.原型链
创建一个构造函数的时候
function A(){
}
let a = new A()
构造函数有一个prototype属性 指向原型对象
每个对象(函数)和实例都有一个__proto__ 隐藏属性指向构造函数的原型
A.prototpe === a.__prototype //true
当查找对象的属性时会沿着__proto__即原型链一直向上查找,直到找到Object.prototype (null)为止
10.数组判断
判断数组的方法有哪些
1.最简单的Array.isArray()
2.instanceof
const a = [1,2,3];
a instanceof Array //true
3.construcor
a.constructor === Array
4.Object.prototype.toString.call(a) === ‘[Object Array]’
11.es6 异步
Promise
async await
二、框架
Vue
1.v- if 和 v-show的区别
v-if 移除节点 消耗性能高
v-show 隐藏节点 消耗性能低
- 组件通信
父子组件通信 props 和 emit 单向数据流 子组件不能改变父组件的属性
eventBus (vue2) mitt(vue3) 可以实现兄弟组件通信,其原理是发布订阅者模式
provide inject 祖先和孙子组件通信
vuex pinia 插件
3.vue常用指令
v-if v-show v-bind v-on v-model
- 生命周期
beforeCreate created 创建实例之前和创建实例之后 vue3使用setup
beforeMount mounted 挂载实例前后 挂载之前不能访问dom
vue3 setup语法 中使用onMounted
beforeDestory destoryed 销毁组件实例 回收资源时使用如释放timeout interval等
beforeUpdate update 组件更新时调用
5.vue中的data为什么是函数
组件中的data函数的作用是使每一个组件的数据都有一个单独的
- computed 和 watch 的区别
- vue和react的异同
- vue-router
- vuex pinia
10.vue 响应式原理
微信小程序
三、前端进阶
1.浏览器
1.事件循环机制,宏任务和微任务
2.垃圾回收机制
2.移动端
1.移动端适配方案
3.性能优化
4.安全
5.网络传输
6.node
四、业务场景
1.组件库、UI库
2.uniapp
3.移动端适配
五、计算机基础
1.操作系统
·linux
windows
2.设计模式
六、开发工具
1.git
2.webpack
3.vite
4.vscode