原生js面试题（二）

一、携带token->token的无感刷新    (token如何携带?->token的无感刷新?)

　　目的:是为了解决管理系统接口数据的安全性考虑 时间就是1-7天
　　token时间一过就要重新登录.需要在后台定时刷新token 并且替换之前老的失效的token
　　-1 后端返回过期时间,前端每次请求就判断token的过期时间,
　　　　如果快要到达过期时间则调用刷新token的接口(refreshToken)完成token替换

　　　　缺点:本地时间如果被篡改则安全性就会变差,拦截就会失败!!

　　-2 写个定时器定时刷新token接口

　　　　缺点:频繁请求导致性能消耗过大

　　-3 在响应拦截器中去拦截token过期时间,只要token过去就重新调用(推荐使用!!!)

二、堆和栈的区别

　　-1 内存分为堆和栈
　　-2 变量都是存在栈中
　　-3 栈中保存是数据大小固定的值（基本类型的值和引用类型的地址）
　　-4 堆中保存数据大小动态变化的值（引用类型的数据）

三、数组去重

　　-1 Es6 利用Set的唯一性【如果数组中存在对象，就不能直接去重，只能为单纯的数据】

function noRepeat(arr){
    let newArr = [...new Set(arr)]; // 利用Set结构不能接受重复数据的特点

    return newArr;
}

　　-2 利用indexOf和push 或者利用includes和push

function noRepeat(arr){
    let newArr = [];
    for(let i = 0 ; i < arr.length ; i++){
    // 如果当前数组的第i已经保存进了临时数组，那么跳过
        if(newArr.indexOf(arr[i]) === -1){
            newArr.push(arr[i]);
        }
    }
    return newArr;
}

（3）利用内外双循环，依次遍历，与从第一项开始的数组内容作比较，相等就删除

function noRepeat(arr) {
	// 循环数组，取数组中一个值，与其值后面的值判断是否与该值相等，如果相等就删除那么第二层循环需要自减索引
	for (var i = 0; i < arr.length - 1; i++) { //i=0
		for (var j = i + 1; j < arr.length; j++) {//j=1
			if (arr[i] === arr[j]) {
				arr.splice(j, 1);
				j--;
			}
		}
	}
	return arr;
}

四、描述一下cookies/sessionStorage和localStorage的区别

　　cookies：
　　　　-1 是网站为了表示用户身份而存储在用户本地终端上的数据
　　　　-2 数据始终在同源的http请求中携带，会在浏览器和服务器中来回传递
　　　　-3 服务器生成的，需要设置失效时间，浏览器生成的，关闭浏览器自动删除
　　　　-4 大小：4kb
　　sessionStorage和localStorage的数据都是在本地存储，不会把数据发给服务器
　　localStorage是关闭浏览器，数据还存在不会丢失
　　sessionStorage是离开浏览器后，数据会自动删除

五、页面导入样式时，使用link和@import有什么区别

　　-1 link属于XHTML标签。除了加载CSS之外还能用于定义RSS，@import是CSS提供的，只能用于加载CSS
　　-2 link加载的文件，在页面加载的时候，link文件会同时加载，而@import引入的CSS文件，是页面在加载完成后再加载的
　　-3 @import有兼容性问题，IE5以下的浏览器是无法识别的，而link无兼容性问题

六、CSS3新特性和伪类有哪些

　　1）新特性：
　　　　-1 border-radius 边框圆角
　　　　-2 box-shadow 盒子阴影
　　　　-3 text-shadow 文本阴影
　　　　-4 line-gradient 线性渐变
　　　　-5 transform 旋转rotate 平移translate 斜切skew 缩放scale
　　2）新增伪类：
　　　　-1 P:first-of-type 选择属于其父元素中同类型的第一个P元素
　　　　-2 P:last-of-type 选择属于其父元素中同类型的最后一个P元素
　　　　-3 ::after / ::before 在元素之前或之后添加
　　　　-4 :disabled 控制表单控件的禁用状态
　　　　-5 :checked 单元框或复选框默认被选中

七、Animation属性值有哪些

　　1）必要属性：
　　　　-1 animation-name 动画名称
　　　　-2 animation-duration 动画持续时间

　　2）其他属性：
　　　　-1 animation-play-state 播放状态（running 播放 paused 暂停）
　　　　-2 animation-timing-function 动画运动形式
　　　　-3 animation-delay 动画延迟时间
　　　　-4 animation-iteration-count 重复次数
　　　　-5 animation-direction 播放前重置（alternate 动画直接从上一次停止的位置开始执行）

八、判断是否为数组的方法

　　-1 arr instanceof Array
　　-2 arr.construct == Array
　　-3 Array.isArray(arr)

九、数组从大到小排序

　　-1 sort方法

var array = [1,4,-8,-3,6,12,9,8];
function compare(va1,va2){
	return va1-va2;
}
array.sort(compare);
document.write(array);

　　-2 冒泡排序

var array = [1,4,-8,-3,6,12,9,8];
function sort(arr){
	for(let i = 0 ; i < arr.length ; i++){
		// 两两比较，如果前面一个比后面一个大，则交换位置 小的在前面
		for(let j = i + 1 ; j < arr.length ; j++){
			if(arr[i] > arr[j]){
				let temp = arr[i];
				arr[i] = arr[j];
				arr[j] = temp;
			}
		}
	}
}
sort(array)　

 十、visibility:hidden与display:none的区别

　　两者都为css样式具有隐藏元素的效果
　　但是它们的区别在于：
　　　　display:none 隐藏元素，可以脱离文档流
　　　　visibility:hidden 隐藏的元素不会脱离文档流，会占有原来的位置

 

注：该文档为个人理解所写，有误可建议修改