前端面试记录

平凡シンプル

已于 2024-05-13 10:37:06 修改

阅读量228

点赞数 4

分类专栏： # 前端记录文章标签：面试

于 2021-06-24 10:00:07 首次发布

本文链接：https://blog.csdn.net/weixin_45381071/article/details/118175155

版权

前端记录专栏收录该内容

9 篇文章 0 订阅

订阅专栏

flex布局中对父级元素以及子级元素的属性分别有哪些

父类元素中
flex-direction:设置主轴的方向；
justify-content:设置主轴上的子元素排列方式；
flex-wrap:设置子元素是否换行；
align-content:设置侧轴上的子元素的排列方式（多行）；
align-items:设置侧轴上的子元素排列方式（单行）；
flex-flow:复合属性，相当于同时设置了flex-direction和flex-wrap;
子类元素中
flex: ; 默认值 0，number越大，子项所占的父项的比例越大
align-self控制子项自己在侧轴的排列方式
order属性定义子项的排列顺序（前后顺序）,数值越小，排列越靠前，默认为0 。

data 定义为什么是一个函数

如果用对象的话，多处引用，修改一个组件的值，那么其他组件的值也会被修改，那么用返回对象的函数，每次返回的都是一个object实例，因为储存地址的不同，所以不会发生这种问题

src和href的区别

请求数据类型不同
- href表示超文本引用,用来建立当前元素和文档的链接.常用的有:link,a
- 在src资源时会将其指向的资源下载并应用到文档中,常用的有srcipt,img
作用结果不同
- href用于在当前文档和引用资源之间确立联系
- src用于替换当前内容
浏览器解析方式不同
- 在文档中添加href,浏览器会识别该文档为css文件,会下载资源并不会停止对当前文档的处理,
- 当浏览器解析到src会暂停其他资源的下载和处理,直到将该资源加载,编译,执行完毕,图片框架也如此,类似于将所有指向资源应用到当前内容

link和@import的区别

两者都是外部引用 CSS 的方式，但是存在一定的区别：
（1）link是XHTML标签，除了能够加载CSS，还可以定义RSS等其他事务；而@import属于CSS范畴，只可以加载CSS。
（2）link引用CSS时，在页面载入时同时加载；@import需要页面完全载入以后再加载。
（3）link是XHTML标签，无兼容问题；@import则是在CSS2.1提出的，低版本的浏览器不支持。
（4）link支持使用Javascript控制DOM改变样式；而@import不支持

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

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

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

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大

移动端适配方案有哪些

不同尺寸手机设备页面显示达到自适应
Rem viewport 百分比

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

JS中有两种数据类型
- 1.简单数据类型（也称基本数据类型）：Undefined;Null;Boolean;Number和String。
- 2.引用数据类型（也称复杂数据类型），其中包括Object；Array；Function等等。
基本数据:
- 1.基本数据类型的值是不可变的,任何方法都无法改变一个基本类型的值
  - 2.基本数据类型不可以添加属性和方法
  - 3.基本数据类型的赋值是简单赋值,如果从一个变量向另一个变量赋值基本类型的值，会在变量对象上创建一个新值，然后把该值复制到为新变量分配的位置上
  - 4.基本数据类型的比较是值的比较
引用数据类型
- 1.引用数据类型的特点和基本数据类型相反。
- 2.引用类型可以添加属性和方法
- 3.引用类型的赋值是对象引用
- 4.引用类型的比较是引用的比较

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

数值:
- Number(参数) 把任何的类型转换为数值类型
- parseInt(参数1，参数2) 将字符串转换为整数
- parseFloat() 将字符串转换为浮点数
字符串:
- 1.String(参数),可以将任何的类型转换为字符串
- 2.toString(),调用的格式对象.toString(), 作用是将对象以字符串的方式来表示
布尔类型:
- Boolean() 可以将任何类型的值转换为布尔值
函数:
- isNaN( ) 该函数会对参数进行隐式的Number()转换，如果转换不成功则返回true;
- alert() 输出的内容隐式的转换为字符串
隐式转换:
- 在js中，当运算符在运算时，如果两边数据不统一，CPU就无法计算，这时我们编译器会自动将运算符两边数据做一个数据类型转换，转成一样的数据类型再计算这种无需程序员手动转换，而由编译器自动转换的方式就称为隐式转换

let const 和 var 的区别

var声明的变量会挂载在window上，而let和const声明的变量不会
var声明变量存在变量提升，let和const不存在变量提升
let和const声明形成块作用域
同一作用域下let和const不能声明同名变量，而var可以
暂存死区
- 在当前块作用域中存在a使用let/const声明的情况下，给a赋值10时，只会在当前作用域找变量a，
  而这时，还未到声明时候，所以控制台Error:a is not defined
const
- 一旦声明必须赋值,不能使用null占位。
- 声明后不能再修改
- 如果声明的是复合类型数据，可以修改其属性

箭头函数和普通函数的区别

箭头函数是匿名函数，不能作为构造函数，不能使用new
箭头函数不绑定arguments，取而代之用rest参数…解决
箭头函数不绑定this，会捕获其所在的上下文的this值，作为自己的this值

解释什么叫回调地狱以及怎么解决回调地狱

地狱回调概念
- 回调函数套回调函数的情况就叫做回调地狱
解决方式
- Promise 解决方式
- Async/await 解决方式

说明原生ajax的实现步骤？

创建ajax对象

try{
		var ajax = new XMLHttpRequest();  //IE8以下不兼容
}catch(e){
		//IE8以下的声明方法
		var ajax = new ActiveXObject(Microsoft.XMLHTTP);
}

初始化

ajax.open('get','./ajax_get.php?a=b&c=d',true);
		//参1 请求方式 get post
		//参2 url
		//参3 是否异步   true 异步  false同步

发送请求

ajax.send();

绑定状态改变事件,等待数据响应

ajax.onreadystatechange =function(){
			//代表服务器成功相应数据了
			if(ajax.readyState==4  && ajax.status ==200){
				var mes = ajax.responseText;//获取服务器的相应数据
				console.log(eval(ajax.response))//把json字符串数据转换成json对象
			}	
		}

什么情况下会导致跨域

因为同源策略限制，不同源会造成跨域
- 协议不同： http://
- 子域名不同：www
- 主域名不同：baidu.com
- 端口号不同：8080
- ip地址和网址不同
跨域解决方法：
- jsonp
  - 只能解决get跨域
  - 原理：
    其本质是利用了标签具有可跨域的特性，由服务端返回预先定义好的javascript函数的调用，并且将服务端数据以该函数参数的形式传递过来
- cors跨域资源共享
  - 原理:
    服务器设置Access-Control-Allow-OriginHTTP响应头之后，浏览器将会允许跨域请求；
  - 限制：
    浏览器需要支持html5，可以支持post、put等方法兼容IE9 以上

vue 有几个生命周期以及各个生命周期的调用时机

beforeCreate : 创建Vue实例前的时候执行，
created : 创建Vue实例完成后执行，
beforeMount : Vue实例开始渲染前执行，
mounted : Vue实例渲染完成后执行，
beforeUpdate : Vue实例修改前执行，
updated : Vue实例修改完成后执行，
beforeDestroy : Vue开始消亡前执行，
destroyed : Vue实例消亡后执行，
activated ：组件激活时调用。该钩子在服务器端渲染期间不被调用。
deactivated ：组件停用时调用。该钩子在服务器端渲染期间不被调用。
errorCaptured : 当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数：错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false 以阻止该错误继续向上传播。

使用vue中的v-for时,为什么要绑定 :key? 如果不绑定会有什么效果

Vue的v-for不绑定key，默认行为和绑定key="index"是差不多的，官方没有默认这种行为的情况下，会导致所有列表DOM重新渲染。key="index"这种行为无法最大化性能，比如在第一个元素插入新元素，会导致所有列表DOM重新渲染。绑定key后，发现绑定的key值的元素变化了，就重新渲染该元素，而不是全部元素都重新渲染，会提高性能。性能主要是DOM渲染影响。key绑定id一类的唯一键好处就是
在列表中插入某个元素，不会像index那样导致后面的元素全部重新渲染，而是根据绑定id的元素是否变化渲染。

v-bind 和 v-model的作用和区别

v-bind 缩写 :
- 动态地绑定一个或多个特性，或一个组件 prop 到表达式。
  使用v-bind的是使用父组件的值（根据属性名），没有使用v-bind的是将标签里的数值当做字符串来使用。
v-model
- 在表单控件或者组件上创建双向绑定。会根据输入变化

vue 组件通信如何实现,说明各自的局限性

1.props 和 emit 父传子子传父
2.$attrs $listeners
- $attrs　/ $listeners 组要作用域多层嵌套传递
- $attrs与 $listeners 是两个对象， $attrs 里存放的是父组件中绑定的非 Props 属性， $listeners里存放的是父组件中绑定的非原生事件。
  inheritAttrs：false 没有用到的数据不会在DOM树上显示
3.$parent $children $ref
ref：如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例
$parent / $children：访问父 / 子实例
4.Bus总线
在组件中，可以使用$emit， $on， $off 分别来分发、监听、取消监听事件：

详细说明vue组件中 data ，computed 和 watch的区别

data：
初始组件的时候data拿到的是store的值是还没有输入过的原始值,
点击按钮的时候，取data中的值是原始值，不能自己更新。
computed：
换成计算属性时，是当值发生变化的时候，从新计算，不变化的时候拿到的是之前缓存的值。
watch：也可以实现实时监听.

vue中computed，watch和methods有什么区别

data: 组件中存放数据的主要属性(不用处理的数据，单纯的存放)
computed：计算属性。 (存放着需要计算的数据) 该数据的值, 通过依赖目标的改变，而改变。
Methods是方法，method 只要发生重新渲染，method 调用总会执行该函数

keep-alive的作用是什么？使用它的目的是什么

keep-alive可以在组件切换时，保存其包裹的组件的状态，使其不被销毁，防止多次渲染。其拥有两个独立的生命周期钩子函数 actived 和 deactived，使用keep-alive包裹的组件在切换时不会被销毁，而是缓存到内存中并执行 deactived 钩子函数，命中缓存渲染后会执行 actived 钩子函数
目的:可以使被包含的组件保留状态，或避免重新渲染。