前端面试题-01

最新推荐文章于 2023-12-03 23:03:23 发布

m0_58415486

最新推荐文章于 2023-12-03 23:03:23 发布

阅读量286

点赞数 1

分类专栏：前端面试题

本文链接：https://blog.csdn.net/m0_58415486/article/details/118178556

版权

前端面试题专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文主要探讨了前端面试中常见的问题，包括src和href的区别、元素隐藏方式、盒模型、移动端适配方案、JavaScript基本数据类型及其差异、数据类型转换、let、const与var的区别、箭头函数与普通函数的不同、回调地狱及其解决方案、原生Ajax实现步骤、跨域问题及解决方法、Vue的生命周期、v-for绑定key的重要性、v-show与v-if、v-bind与v-model的差异、Vue组件通信方式、data、computed与watch的区别、keep-alive的作用、vue-router与a标签的对比、Vuex的使用场景。这些问题涵盖了前端开发的基础和进阶知识，对于面试和提升技能具有指导意义。

摘要由CSDN通过智能技术生成

1.src和href的区别？

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

2、作用结果不同
（1）href 用于在当前文档和引用资源之间确立联系；

（2）src 用于替换当前内容；

* href 不是用来引用资源，而是为了建立联系，让当前标签能够链接到目标地址。

* src就是把引用的资源放在文档里面

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

display:none

设置为display:none;的元素将不会再占用页面空间，其占用的空间会被其他元素所占有，从而会引起浏览器的重排和重汇。

visibility:hidden

这种做法虽然能够隐藏元素，但是该元素仍会占用页面空间，因此只会导致浏览器的重汇而不会引起重排。

opacity:0

效果与visibility:hidden;方式一样，同样会占据页面空间

* display:none;隐藏后就相当于空出了这个标签的位置,别的标签会过来占用这个位置

* visibility:hidden;隐藏后依旧占着位置

*opacity:0;与visibility:hidden;一样

3.用过哪些盒模型？

标准盒模型（W3C盒子模型），设置的width或height是对实际内容（content）的width或height进行设置，内容周围的border和padding另外设置，即盒子模型的width（height）=设置的content的宽高+padding+border+margin

怪异盒模型（IE盒子模型），设置的width或height是对实际内容（content）+内边距（padding）+边框（border）之和的width和height进行设置的，其盒模型的width（height）=设置的width（height）+外边距margin

box-sizing: content-box 是W3C盒子模型

box-sizing: border-box 是IE盒子模型

标准盒子模型就是内容区域加边框,比如内容100px,边框是1px那宽度就是102px

怪异盒子模型就是内容有多大宽高就多大

display : flex

flex弹性盒子模型

4.谈谈你的移动端适配方案有哪些？

        1）viewport（scale=1/dpr）
        2）rem
        3）flex
        4）vm/vh

5.js基本数据类型是什么？它们之间的区别是什么

Number(数值)、String(字符串)、 boolean(布尔)、 Underfind(未知)、Null(空)、Symbol (唯一)

引用数据类型有对象(Object)、数组(Array)、函数(Function)。

区别

基本类型在栈内存,引用类型在堆内存分配地址.
不同的内存分配机制也带来了不同的访问机制
深拷贝和浅拷贝的不同
参数传递的不同

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

隐式转换都是以强制转换为基础的。强制转换主要指使用一些特定函数，手动将各种类型的值，转换为其对应的类型

使用：

强转换

通过String（），Number（），Boolean（）函数强制转换

7.let const 和 var 的区别？

1.var定义的变量，没有块的概念，可以跨块访问, 不能跨函数访问。

2.let定义的变量，只能在块作用域里访问，不能跨块访问，也不能跨函数访问。

3.const用来定义常量，使用时必须初始化(即必须赋值)，只能在块作用域里访问，而且不能修改

*var有变量提升,没有块作用域,

*let没有变量提升,有块作用域不可以声明同名变量

*const不可以声明同名变量,声明后不可以修改

8.箭头函数和普通函数的区别？

箭头函数：不能当做构造函数相当于匿名函数，不可以使用new命令，this永远指向上下文的this无法改变其指向

普通函数：this指向调用它的那个对象

*箭头函数就是一个匿名函数,this指向所在的上下文,this也没法改变指向,用不了new

*普通函数的this就指向调用它的那个对象

9.解释什么叫回调地狱，以及怎么解决回调地狱？

回调函数套回调函数，这种回调函数中嵌套回调函数的情况就叫做回调地狱。

用Promise解决回调地狱

unction buildCatList(list, returnVal) {
 
      return new Promise(function (resolve, reject) {
 
           setTimeout(function (name) {
 
                 var catList = list === '' ? name : list + ',' + name
 
                 resolve(catList)
 
            }, 200, returnVal)
 
      })
 
}
 
buildCatList('', 'Panther').then(function (res) {
 
       return buildCatList(res, 'Janguar')
 
 }).then(function (res) {
 
       return buildCatList(res, 'Lion')
}).then(function (res) {
 
       console.log(res)
})//本质上还是函数套函数

*一个函数嵌套一个函数嵌套一个函数嵌套一个函数就是回调地狱

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

1创建对象

2设置请求方式和请求地址

3发送请求

4监听状态变化

5返回数据

例：

var xhr = new XMLHttpRequest()

    xhr.onreadystatechange = function(){

        if(xhr.readyState != 4)return;

           if(xhr.status == 200 && xhr.readyState == 4){

                  console.log(xhr.responseText)

           }else{

                  console.log("请求失败")

          }

    }

xhr.open("get","http://localhost:3030")

xhr.send()

1. 创建ajax对象

　　　　var xhr = new XMLHttpRequest();

2. 告诉ajax请求地址以及请求方式(ajax下的open方法)

　　　　xhr.open(‘get’,’http://www.example.com’); 第一个参数为请求方式，第二个参数为请求地址/服务器端对应的路由请求地址

3. 发送请求

　　　　xhr.send();

4. 获取服务器端与客户端的响应数据

　　　　xhr.onload = function () {

　　console.log(xhr.responseText); xhr.responseText 获取服务器端的响应数据

}

11.什么情况下会导致跨域？怎么解决

不同源策略时会导致跨域

解决方法：

正向代理和反向代理

1）jsonp：原理就是利用了script标签src属性外联引入文件不受同源策略的限制，在页面中动态插入了script，script标签的src属性就是后端api接口的地址，并且以get的方式将前端回调处理函数名称告诉后端，后端在响应请求时会将回调返还，并且将数据以参数的形式传递回去；

2）document.domin:两个域名必须属于同一基础域名，并且所有的协议端口完全一致，否则无法跨域；例：beijing.58.com
tianjing.58.com ；

3）iframe、hash ：父页面向子页面传输数据：将要传递的数据添加到子页面的url的hash值上，子页面通过location.hash
并添加定时器实时地动态父页面传来的数据；子页面向父页面传输数据：利用window.name的特性，及页面重新加载但当前页的name值不变，即使换了一个页面。需要三个页面配合使用。一个应用页面，一个数据页面，一个代理文件。代理文件一般是一个没有任何内容的html页面，需要和应用页面在同一域下。将数据页面的窗口换成代理页面，代理页面通过window.name获取数据页面留下的数据，应用页面再访问和它同源的代理页面获取数据，就完成了跨域；

4）CORS(Cross-Origin-Resource-Sharing)：在服务器端设置的,不需要客户端进行操作。Cors背后的思想是使用自定义的http头部让浏览器和服务器进行沟通，从而决定请求或响应是否应该成功，还是应该失败。浏览器向服务器发送请求，如果服务器认为这个请求可以接受，就在Access-Control-Allow-Origin头部中回发相同的源信息（如果是公共资源，可以回发*）;如果没有这个头部，或者有这个头部但信息源不匹配，浏览器就会驳回请求。正常情况下，浏览器会处理请求。（请求和响应都不包含cookie信息）；

5）服务器跨域，服务器中转代理：前端向本地服务器发送请求，本地服务器代替前端再向服务器接口发送请求进行服务器间通信，本地服务器是个中转站的角色，再将响应的数据返回给前端

*协议域名端口号,只要前面的一个不同就会发生跨域

*用get获取jsonp,或者设置代理