初级前端面试题收录（上

Robo12138

已于 2023-02-15 21:36:09 修改

阅读量1.4k

点赞数

分类专栏： js笔记面试题文章标签：前端面试

于 2022-09-25 11:14:46 首次发布

本文链接：https://blog.csdn.net/Eilan_Chiu/article/details/123863063

版权

js笔记同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

面试题

1 篇文章 0 订阅

订阅专栏

初级前端经典面试题收录

简介：收录整理前端面试题，面试前花半个小时看一下，马道成功。

一、前端基础

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函数的作用是使每一个组件的数据都有一个单独的