web前端面试必问的面试题

比眉伴天荒 2022-10-15 04:00 307阅读 0赞

#### 1.Vue 组件中 data 为什么必须是函数？ ####

在 new Vue() 中，data 是可以作为一个对象进行操作的，然而在 component 中，data 只能以函数的形式存在，不能直接将对象赋值给它。  
当data选项是一个函数的时候，每个实例可以维护一份被返回对象的独立的拷贝，这样各个实例中的data不会相互影响，是独立的。

#### 2. watch，conputed，methods的区别 ####

methods 普通方法 没缓存,只有重新渲染页面的时候就会触发他

watch 监听属性 想监听哪个属性,那起名字的时候就要用这个属性名,一般用在异步操作,或者开销比较大的操作时候

computed 计算属性 有缓存,当你调用多次的时候只会计算一次,其他的值都是从缓存中直接拿的,当你依赖的属性发生变化时,计算属性会重新计算

#### 3.分别简述computed和watch的使用场景 ####

答：computed:  
　　　　当一个属性受多个属性影响的时候就需要用到computed  
　　　　最典型的栗子： 购物车商品结算的时候  
watch:  
　　　　当一条数据影响多条数据的时候就需要用watch  
　　　　栗子：搜索数据

#### 4.Vue的特点和优势、缺点 ####

vue两大特点：**响应式编程**、**组件化**。

vue的优势：轻量级框架、简单易学、**双向数据绑定**、**组件化**、数据和结构的分离、**虚拟DOM**、运行速度快。

vue是单页面应用，使页面局部刷新，**不用每次跳转页面都要请求所有数据和dom**，这样大大加快了访问速度和提升用户体验。而且他的第三方ui库很多节省开发时间。

vue的缺点

1、Vue 不缺入门教程，可是很缺乏高阶教程与文档。同样的还有书籍。

2、VUE不支持IE8

3、生态环境差不如angular和react

4、社区不大

#### 5.src和href的区别 ？ ####

（1） href是Hypertext Reference的缩写，表示超文本引用。用来建立当前元素和文档之间的链接。常用的有：link、a。  
（2）在请求 src 资源时会将其指向的资源下载并应用到文档中，常用的有script，img 、iframe；

#### 6.说出几种vue当中的指令和它的用法？ ####

**v- 开头的特殊属性叫做指令这些是内置指令**

v-html: 可以解析html标签 innerHTML

v-text : 不能解析标签,如果里面有标签会按照文本格式直接输出 textContent

v-if : 如果为true，当前标签才会输出到页面

v-else : 如果为false，当前标签才会输出到页面

v-show : 通过控制display样式来控制显示/隐藏

v-on : 绑定事件监听 缩写 @click v-on:click 一样

v-bind : 强制绑定解析表达式， 修改属性 简写 : v-bind:title="‘哈哈’" :title="‘哈哈’"

v-for : 遍历数组/对象

v-model : 双向数据绑定

v-once : 只会渲染一次

v-cloak : 解决闪现\{ \{\}\}问题 与css配合 \[v-cloak\]\{ display:none \}

#### 7.v-show和v-if的区别 ####

v-if 当值等true的时候创建节点,等false的时候销毁节点,切换销毁性能更多

v-show 创建的时候消耗更大,切换的时候反而小一些,直接修改css, 当值等false 修改css的style display:none让标签隐藏起来

#### 8.页面元素隐藏方式 和各自特点？ ####

display:none; 设置为display:none;的元素将不会再占用页面空间，其占用的空间会被其他元素所占有，从而会引起浏览器的重排和重汇。  
visibility: hidden 这种做法虽然能够隐藏元素，但是该元素仍会占用页面空间，因此只会导致浏览器的重汇而不 会引起重排。  
opacity:0 设置元素透明度opacity属性为0，也可以隐藏页面元素。在呈现上与visibility:hidden;方式一样， 同样会占据页面空间。  
Overflow:hidden; 超出区域隐藏

#### 8.用过哪些盒模型，以及他们各自的区别？ ####

IE盒子模型box-sizing:border-box;（怪异模式）  
W3C标准盒子模型 box-sizing:content-box;（标准模式）默认模式

content-box:这是默认样式指定CSS标准。测量width和height属性只包括的内容，但不是border, margin, 或者 padding。  
padding-box:width和height属性包括padding的大小，不包括border和margin  
border-box:width和height属性包括padding和border，但不是margin。这是盒模型的文档时，Internet Explorer使用Quirks模式。  
content-box不包含padding，border-box包含padding。所以如果你设置的大小是一样的，content-box看起来，会比border-box大

#### 9. 在js中普通事件函数和监听事件函数的区别在哪里啊？ ####

打个比方，一个是你给按钮A加了一个click的普通事件，这是没问题的，但是如果你再通过js或者其他方法动态又加了一个按钮A，那么这个按钮A点击了是不会触发的，但是你要是用了监听，比如on()来绑定一个click事件，那么他再次添加的按钮点击后也是可以触发的

#### 10.jQuery中`$.get()`提交和`$.post()`提交有区别吗？ ####

`$.get()`方法使用get方法来进行异步请求的，`$.post()`方法使用post方法来进行异步请求的；  
  get请求会将参数跟在URL后进行传递，而post请求则是作为HTTP消息的实体内容发送给Web服务器的；  
  get方式传输的数据大小不能超过2KB，而post要大得多；  
  get方式的请求的数据会被浏览器缓存起来，因此有安全问题。

### 11.事件委托是什么 ###

答案: 利用事件冒泡的原理，让自己的所触发的事件，让他的父元素代替执行！

### 12.添加 删除 替换 插入到某个接点的方法 ###

答案：

1）创建新节点  
createElement() //创建一个具体的元素  
createTextNode() //创建一个文本节点

2）添加、移除、替换、插入  
appendChild() //添加  
removeChild() //移除  
replaceChild() //替换  
insertBefore() //插入

3）查找  
getElementsByTagName() //通过标签名称  
getElementsByName() //通过元素的Name属性的值  
getElementById() //通过元素Id，唯一性

#### 13. jQuery 库中的 $() 是什么？ ####

$()函数是**jQuery()函数**的别称。() 函数用于将任何对象包裹成 jQuery 对象，接着你就被允许调用定义在 jQuery 对象上的多个不同方法。你可以将一个选择器字符串传入 $() 函数，**它会返回一个包含所有匹配的 DOM 元素数组的 jQuery 对象**。

**就是jquery对象，$()就是jQuery()，在里面可以传参数，作用就是获取元素**

#### 14. jQuery中 detach() 和 remove() 方法的区别是什么? ####

尽管 detach() 和 remove() 方法都被用来移除一个DOM元素,detach()方法是jQuery1.4版本中添加的，作用是删除掉所有匹配的元素，作用和remove()很像，但是它们还是有些不同之处。

**remove()的作用是移除元素及其子元素，所有的绑定事件，附加元素也会被删除。**  
**detach()的作用和remove()很像，不同的是它会保留绑定事件和附加元素。**

#### 15.ES6中class语法 ####

class 的本质是 function。

它可以看作一个语法糖，让对象原型的写法更加清晰、更像面向对象编程的语法  
使用class 定义的类 没有变量提升  
使用extends 关键字继承  
构造方法 constructor()\{ this.name = name\}  
子类必须在constructor方法中调用super(name,age)方法用来新建父类的this对象  
static 静态方法  
静态方法是通过类名去访问,通过这个类 实例化出来的对象不能访问静态方法  
继承的子类通过使用 类名.方法() 访问父类上的静态方法

#### 16.理解 async/await以及对Generator的优势 ####

async await 是用来解决异步的，async函数是Generator函数的语法糖  
使用关键字async来表示，在函数内部使用 await 来表示异步  
async函数返回一个 Promise 对象，可以使用then方法添加回调函数  
当函数执行的时候，一旦遇到await就会先返回，等到异步操作完成，再接着执行函数体内后面的语句> **async较Generator的优势：**  
（1）内置执行器。Generator 函数的执行必须依靠执行器，而 Aysnc 函数自带执行器，调用方式跟普通函数的调用一样  
（2）更好的语义。async 和 await 相较于 \* 和 yield 更加语义化　　  
（3）更广的适用性。yield命令后面只能是 Thunk 函数或 Promise对象，async函数的await后面可以是Promise也可以是原始类型的值  
（4）返回值是 Promise。async 函数返回的是 Promise 对象，比Generator函数返回的Iterator对象方便，可以直接使用 then() 方法进行调用

#### 17.let const 和 var 的区别 ？ ####

let 用来声明变量

声明变量,注意不能被定义过,变量不能被重复定义

let 声明的变量,没有变量提升 var声明的变量，有变量提升

let 声明变量后会生成块级作用域,比如 if 后的 \{ \} , switch 的 \{ \} 都能生成块级作用域,作用域外部不能在访问这个变量了

const 用来声明一个只读的常量,一旦声明,常量的值就不能改变

const 声明变量必须要赋值

使用 const 定义的对象或者数组,是可变的.

const一但被定义不能重新赋值,数组可以通过下标操作、或者用一些数组函数操作比如push()

const 关键字声明的变量要有初始值

const 在 \{ \} 里面也能生成块级作用域

#### 18.let有什么用，有了var为什么还要用let？ ####

var存在因变量提升而导致的泄漏、覆盖等一些列问题，而let拥有自己的块级作用域而且修复了声明带来的变量提升问题

#### 19.说明原生ajax的实现步骤？ ####

//1.创建ajax对象
    try{
    		var ajax = new XMLHttpRequest();  //IE8以下不兼容
    }catch(e){
    		//IE8以下的声明方法
    		var ajax = new ActiveXObjec(Microsoft.XMLHTTP);
    }
    
    
    //2.初始化
    		ajax.open('get','./ajax_get.php?a=b&c=d',true);
    		//参1 请求方式 get post
    		//参2 url
    		//参3 是否异步   true 异步  false同步
    
    //3.发送请求
    		ajax.send();		
    
    //4.绑定状态改变事件,等待数据响应
    		ajax.onreadystatechange =function(){
    			//代表服务器成功相应数据了
    			if(ajax.readyState==4  && ajax.status ==200){
    				var mes = ajax.responseText;//获取服务器的相应数据
    				console.log(eval(ajax.response))//把json字符串数据转换成json对象
    			}	
    		}
    
    
    	readystatechange 事件类型
    		请求的状态 ajax.readyState		 发生变化的时候调用	
    			0:请求未初始化  (调用open方法之前)
    			1:服务器连接已经建立(载入 已经调用send()方法,正在发送请求)
    			2:请求已经接收(载入完成 send()方法完成,已收到全部响应内容)
    			3:服务器处理请求(正在解析响应内容)
    			4:服务器处理结束，返回结果(完成 响应内容解析完成,可以在客户端调用了)
    		status属性 : 服务器(请求资源)的状态
    返回的内容
    	responseText:  返回以文本形式存放的内容
    	responseXML: 返回XML形式的内容

#### 20.vue-router的作用是什么？ 为什么不使用a标签？ ####

Vue的创新之处在于，它利用虚拟DOM的概念和diff算法实现了对页面的"按需更新"，  
Vue-router很好地继承了这一点，重渲染是我们不希望看到的，因为无论跳转到哪个页面，只需要渲染一次就够了。组件帮助我们实现了这个愿望  
反观 < a>标签，每次跳转都得重渲染一次，在一个浩大的项目里，这多么可怕！我们的"渲染"做了许多"无用功"，而且消耗了大量弥足珍贵的DOM性能！

#### 21.< keep-alive> < /keep-alive> 的作用是什么? ####

答:keep-alive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。

#### 22.数据类型强制转化和隐式转化的分别怎么使用？ ####

数值:  
Number(参数) 把任何的类型转换为数值类型  
parseInt(参数1，参数2) 将字符串转换为整数  
parseFloat() 将字符串转换为浮点数

字符串:  
1.String(参数),可以将任何的类型转换为字符串  
2.toString(),调用的格式 对象.toString(), 作用是将对象以字符串的方式来表示

布尔类型:  
Boolean() 可以将任何类型的值转换为布尔值

函数:  
isNaN( ) 该函数会对参数进行隐式的Number()转换，如果转换不成功则返回true;  
alert() 输出的内容隐式的转换为字符串

隐式转换:  
在js中，当运算符在运算时，如果两边数据不统一，CPU就无法计算，这时我们编译器会自动将运算符两边 数据做一个数据类型转换，转成一样的数据类型再计算 这种无需程序员手动转换，而由编译器自动转换的方式就称 为隐式转换

#### 23.js 数据类型有几种？它们之间的区别是什么？ ####

JS中有两种数据类型  
1.简单数据类型（也称基本数据类型）：Undefined;Null;Boolean;Number和String。  
2.引用数据类型（也称复杂数据类型），其中包括Object；Array；Function等等。

基本数据: 1.基本数据类型的值是不可变的,任何方法都无法改变一个基本类型的值  
2.基本数据类型不可以添加属性和方法  
3.基本数据类型的赋值是简单赋值,如果从一个变量向另一个变量赋值基本类型的值，会在变量对象上创建一个新值， 然后把该值复制到为新变量分配的位置上  
4.基本数据类型的比较是值的比较

引用数据类型 1.引用数据类型的特点和基本数据类型相反。  
2.引用类型可以添加属性和方法  
3.引用类型的赋值是对象引用  
4.引用类型的比较是引用的比较