1.说一说cookie sessionStorage localStorage 区别?
2.说一说JS数据类型有哪些,区别是什么?
数据分成两类型:基本数据类型和引用数据类型
基本类型:Number 、String、Boolean、Null、Undefined、BigInt、Symbol、
复杂类型:Object代表 普通对象,数组,正则,日期,Math数学函数都属于Object
基本类型存在栈中(空间小),复杂类型存在堆空间(空间大);
3.说一说你对闭包的理解?
是什么:内层函数引用外层函数中变量,这些变量的集合就是闭包
优点:①通过作用域链,当前作用域可以访问上级作用域中的变量
②解决的问题:保存变量,保护变量 ,不被污染
缺点: 带来的问题:内存泄露
4.说一说promise是什么与使用方法?
promise是一种异步编程,是为了解决毁掉地狱,让代码看起来更加优雅。promise存在三种状态pending,fulfilled,rejected,基本使用方法是new Promise((resolve,rejected)=>{}).then(res=>{}).catch(err=>{});调用resolve()会执行then部分,出现错误会执行catch部分,此外promise.all([]).then(rs=>{})还支持顺序执行多个请求,res的结果是一个请求结果数组
5.说一说跨域是什么?如何解决跨域问题?
跨域:当两个URL协议、域名、端口其中有一项不同,就说该接口跨域了。
跨域限制的原因:浏览器为了保证网页的安全,出的同源协议策略。
跨域解决方案
cors:目前最常用的一种解决办法,通过设置后端允许跨域实现。
res.setHeader('Access-Control-Allow-Origin', '*');
res.setHeader("Access-Control-Allow-Methods", "GET, PUT, OPTIONS, POST");
node中间件、nginx反向代理:跨域限制的时候浏览器不能跨域访问服务器,node中间件和nginx反向代理,都是让请求发给代理服务器,静态页面面和代理服务器是同源的,然后代理服务器再向后端服务器发请求,服务器和服务器之间不存在同源限制。
JSONP:利用的原理是script标签可以跨域请求资源,将回调函数作为参数拼接在url中。后端收到请求,调用该回调函数,并将数据作为参数返回去,注意设置响应头返回文档类型,应该设置成javascript。
postmessage:H5新增API,通过发送和接收API实现跨域通信。
5.说一说BFC
定义:块级格式上下文 特点:是一个独立的容器,内部的元素和外部元素互不影响。 形成:根元素、float、position不为relative、display不为none、overflow。 解决的问题:清除浮动、解决塌陷问题
6.说一说JavaScript有几种方法判断变量的类型?
typeof判断数据类型(null为object,object为function)
instance根据原型链判断类型
Object.prototype.toString().call(this)可判断具体的数据类型,判断结果打印为:'[object Xxx]'
表示一个返回对象类型的字符串,call()方法可以改变this的指向
7.事件扩展符用过吗(...),什么场景下?
用过展开运算符(...),
①.数组去重[...new Set(arr)]
②.数组拷贝[...arr]
③.伪数组转真数组 [...伪数组]
④.数组对象的合并
浅拷贝和深拷贝:
浅拷贝只复制指向某个对象的指针,而不复制对象本身,新旧对象还是共享同一块内存。
但深拷贝会另外创造一个一模一样的对象,新对象跟原对象不共享内存,修改新对象不会改到原对象。
8.说一下浮动?
从三个方面回答
①浮动的作用:常用于图片,可以实现文字环绕图片。
②浮动的特点:脱离文档流,容易造成盒子塌陷,影响其他元素的排列。
③解决塌陷问题:父元素中添加overflow:hidden、给父元素添加高度、建立空白标签添加clear、或者在父级添加伪元素::after{content:'',clear:both,display:table}。
9.说一说es6中箭头函数?
①写法简洁
②无自己的this,继承上一个作用域的this(全局或上一个函数)
③内部this无法被改变
④没有arguments对象
⑤没有prototype属性
10.说一说map 和 forEach 的区别?
相同点:1.都能遍历数组 2.中途不能被break打断 3.函数中都有三个参数,当前遍历的元素,当前元素的索引,原数组。 不同:1.forEach没有返回值,也就是返回undefined,map会开辟新的一个内存空间,返回新的数组,这点也方便链式调用其他数组方法。 2.map的效率比forEach高
11.说一下浏览器输入URL发生了什么?
①URL解析:判断浏览器输入的是搜索内容还是URL;
②查找缓存:如果能找到缓存则直接返回页面,如果没有缓存则需要发送网络请求页面;
③DNS域名解析;
④三次握手建立TCP连接;
⑤发起HTTP请求;
⑥服务器响应并返回结果;
⑦通过四次握手释放TCP连接;
⑧浏览器渲染;
⑨js引擎解析
11.说一说盒模型?
盒子模型一共两种:标准盒模型(content-box)和 怪异盒模型(border-box);
12.说一说伪数组和数组的区别?
①伪数组的特点:类型是object、不能使用数组方法、可以获取长度、可以使用for in遍历
② 伪数组可以转换为数组的方法:a. Array.prototype.slice.call() b.Array.from() c. [...伪数组]
③ 有哪些是伪数组:函数的参数arguments,Map和Set的keys()、values()和entires()
13.说一下有什么方法可以保持前后端实时通信?
轮询、iframe、websocket、SSE
轮询是客户端和服务器之间会一直进行连接,每隔一段时间就询问一次。其缺点也很明显:连接数会很多,一个接受,一个发送。而且每次发送请求都会有Http的Header,会很耗流量,也会消耗CPU的利用率。
14.说一说 Vue 列表为什么加 key?
Vue列表加key的目的是为diff算法添加标识,因为diff算法判断新旧VDOM是否相同的依据是节点的tag和key。如果tag和key相同则会进一步进行比较,使得尽可能多的节点进行复用。此外,key绑定的值一般是一个唯一的值,比如id。如果绑定数组的索引index,则起不到优化diff算法的作用,因为一旦数组内元素进行增删,后续节点的绑定的key也会发生变化,导致diff进行多余的更新操作。
15.setState是同步还是异步的?
setState本身并不是异步,只是因为react的性能优化机制体现为异步。在react的生命周期函数或者作用域下为异步,在原生事件监听和定时器下为同步。
16.ajax 的 readyState 有哪几个状态,含义分别是什么?
5 个状态,分别是 0-4
0: 还没调用open方法
1: 未调用send方法,也就是还没发送数据给服务器
2: 还没有接收到响应
3: 开始接收到了部分数据
4: 接收完成,数据可以在客户端使用了
js 中现在比较成熟的有四种模块加载方案。
- 第一种是 CommonJS 方案
- 第二种是 AMD 方案
- 第三种是 CMD 方案
- 第四种方案是 ES6 提出的方案,使用 import 和 export 的形式来导入导出模块。
- setTimeout、requestAnimationFrame、setInterval 为宏任务
盒模型,区别
行内元素与块级元素,区别,常用的有哪些
重排和重绘
如何隐藏一个元素(display,visable,透明度,缩小,定位移出可视区域)
src,href的区别
cookie,sessionStorage,localStorage
http常见状态码,与https区别
作用域
原型和原型链
es6,箭头函数和普通函数的区别
var let const
vue生命周期
url输入然后的全部过程
z-index失效的几种情况
注意点:
(1):z-index属性只作用在被定位了的元素上。所以如果你在一个没被定位的元素上使用z-index的话,是不会有效果的.
(2)同一个父元素下的元素的层叠效果会受父元素的z-index影响,如果父元素的z-index值很小,那么子元素的z-index值很大也不起作用
失效的情况:
1、父标签 position属性为relative;
2、问题标签无position属性(不包括static);
3、问题标签含有浮动(float)属性。
4、问题标签的祖先标签的z-index值比较小
解决方法:
第一种: position:relative改为position:absolute;
第二种:浮动元素添加position属性(如relative,absolute等);
第三种:去除浮动。
第四种:提高父标签的z-index值