2020年前端面试题·五

localStorage 和 sessionStorage 在跨页面存储中的区别

在不同情况下，不同页面中的 localStorage 和 sessionStorage 的值也不同：

1. 如果两个页面中访问的网站同源，那么两个页面中的 localStorage 值相同，但是 sessionStorage 的值不同。
2. 如果两个页面中访问的网站不同源，那么两个页面中的 localStorage 和 sessionStorage 的值都不同。

无痕模式下 webStorage 报错解决方案

如果开启浏览器的无痕模式，那么 localStorage 和 sessionStorage 为空，对其进行 set 也会报错，这种情况下可以使用 try catch 进行友好提示：

if(typeof localStorage === 'object'){
    try{
        localStorage.setItem('localStorage', 1);
        localStorage.removeItem('localStorage');
    }catch(e){
        alert("请关闭无痕模式!");
    };
};

DOM 事件的处理过程，e.target 和 e.currentTarget 区别

1. e.target 是指事件源，即首先触发事件的元素。
2. e.currentTarget 是指当前正在执行的事件处理函数所在的元素。

宏任务和微任务

https://blog.csdn.net/qq_40311523/article/details/108600736

HTTP 缓存

https://blog.csdn.net/qq_40311523/article/details/108615868

操作 cookie

// 获取cookie
function getCookie (name) {
    var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)")
    if (arr = document.cookie.match(reg)) {
    	return unescape(arr[2])
    } else {
   	    return null
    }
}
 
// 设置cookie
function setCookie (c_name, value, days) {
    var exp = new Date()
    exp.setTime(exp.getTime() + days * 24 * 60 * 60 * 1000);
    document.cookie = c_name + "=" + escape(value) + ";expires=" + exp.toGMTString()
}
 
// 删除cookie
function delCookie (name) {
    var exp = new Date()
    exp.setTime(exp.getTime() - 1)
    var cval = getCookie(name)
    if (cval != null)
      document.cookie = name + "=" + cval + ";expires=" + exp.toGMTString()
}

axios 拦截器

1. 请求拦截器

instance.interceptors.request.use(config => {
	// 拦截请求，做统一处理，例如设置请求头
	// do...
    return config
}, err => {
	return Promise.reject(err)
})

2. 响应拦截器

instance.interceptors.response.use(response => {
	// 拦截响应，做统一处理 
	// do...
    return response
}, error => {
	//接口错误状态处理，也就是说无响应时的处理
	return Promise.reject(error.response.status) // 返回接口返回的错误信息
})

Vue 自定义指令

https://blog.csdn.net/qq_40311523/article/details/108683136

calc, support, media各自的含义及用法？

1. calc() ：用于动态计算长度值。 支持 "+", "-", "*", "/" 运算，注意使用时运算符两边要加空格。
2. @support ：主要是用于检测浏览器是否支持 CSS 的某个属性，其实就是条件判断，如果支持某个属性，你可以写一套样式，如果不支持某个属性，你也可以提供另外一套样式作为替补。
3. @media ：媒体查询，可以针对不同的设备宽度定义不同的样式。

如何画一条 0.5px 的直线

注意：CSS 中没有小数位像素，所以这里可以用缩放：

height: 1px;
transform: scale(0.5);

说一下盒模型？

盒模型分为标准盒模型（ content-box ）和特殊的盒模型（ border-box ），盒模型由 content 、padding 、border 、margin 四个部分组成

1. content-box 中，width 表示 content
2. border-box 中，width 表示 content + padding + border

画一个三角形？

width: 0;
height: 0;
border-width: 100px;
border-style: solid;
border-color: transparent #000 transparent transparent;

说一下 <label> 标签的用法

配合表单标签使用，可以扩大表单标签的点击范围，增强用户体验。

遍历A节点的父节点下的所有子节点

document.getElementById('id').parentNode.children

用js递归的方式写1到100求和？

function add(num, sum) {
	if (num > 100) {
		return sum
	} else {
		sum += num
		return add(num + 1, sum)
	}
}

如何中断ajax请求？

停止 javascript 的ajax 请求，一种是设置超时时间让 ajax 自动断开，另一种为手动去停止 ajax 请求，其核心是调用XMLHttpRequest 对象上的 abort 方法。

注意：不要用 abort 方法来作为终止对服务器的请求操作，只能当做在前端页面立刻停止执行 ajax 成功后的方法，因为你执行abort 方法后，ajax 很可能已经对服务端发送了请求，只是还未返回回馈信息而已。

JSON.stringify深拷贝的缺点

1. 如果 obj 里面有时间对象，则 JSON.stringify 后再 JSON.parse 的结果，时间将只是字符串的形式，而不是对象的形式。
2. 如果 obj 里有 RegExp 、Error 对象，则序列化的结果将只得到空对象。
3. 如果 obj 里有函数、undefined，则序列化的结果会把函数或 undefined 丢失。
4. 如果 obj 里有 NaN 、Infinity 和 -Infinity ，则序列化的结果会变成 null
5. JSON.stringify() 只能序列化对象的可枚举的自有属性，例如：如果 obj 中的对象是有构造函数生成的，则使用JSON.parse(JSON.stringify(obj)) 深拷贝后，会丢弃对象的 constructor 。
6. 如果 obj 中存在循环引用的情况也无法正确实现深拷贝。