最近刚刚入了前端的坑,准备面试中,打算把自己遇到的、不会的题,整理一下,比较杂,遇到啥就记啥了,答案都是从其它大神那里总结、学习(抄)来的。
1.请描述一下 cookies,sessionStorage 和 localStorage 的区别?
相同点:都存储在客户端
不同点:主要有三点
(1) .存储大小
cookie数据大小不能超过4k。
sessionStorage和localStorage 虽然也有存储大小的限制,但比cookie大得多,可以达到5M或更大。
(2).有效时间
localStorage 存储持久数据,浏览器关闭后数据不丢失除非主动删除数据;
sessionStorage 数据在当前浏览器窗口关闭后自动删除。
cookie 设置的cookie过期时间之前一直有效,即使窗口或浏览器关闭
(3). 数据与服务器之间的交互方式
cookie的数据会自动的传递到服务器,服务器端也可以写cookie到客户端
sessionStorage和localStorage不会自动把数据发给服务器,仅在本地保存。
(笔试总是看到这个题,还总是记不住!死记硬背吧。)
2.div水平垂直居中几种方式?
【方案一】这个方法使用了一个 position:absolute,有固定宽度和高度的 div。这个 div 被设置为 top:0; bottom:0;。但是因为它有固定高度,其实并不能和上下都间距为 0,因此 margin:auto; 会使它居中。
div{
width: 200px;
height: 200px;
background: red;
position:absolute;
left:0;
top: 0;
bottom: 0;
right: 0;
margin: auto;//不是margin:0 auto
}
【方案二】固定宽高水平垂直居中,利用margin 负间距
div{
width: 200px;
height: 100px;
background: #0e90d2;
position:absolute;
left:50%; /* 定位父级的50% */
top:50%;
margin-top: -50px;//自身高的一半
margin-left: -100px;//自身宽的一半
}
【方案三】不定宽高水平垂直居中,可利用css3中Transforms 属性
div{
position:absolute;
left:50%; /* 定位父级的50% */
top:50%;
transform: translate(-50%,-50%); /*自己的50% */
}
(居中方法很多,也分很多情况,自己挑了几种常用的方法记下......)
3.数组去重
利用数组的indexOf下标属性(元素不存在,返回-1)来查询。方法特别多,个人比较喜欢这种方法。
function unique(arr){
var res = [];
for(var i=0; i<arr.length; i++){
if(res.indexOf(arr[i]) == -1){
res.push(arr[i]);
}
}
return res;
}
console.log('------------方案一---------------');
console.log(unique([1,1,2,3,5,3,1,5,6,7,4]));
4.闭包
戳它:学习Javascript闭包(Closure)阮一峰
(闭包的重要性不用多说,js的基础,面试能问出花来,比如什么是闭包?你什么时候用闭包?使用时需要注意什么?还有关于这方面的各种(奇葩的)选择题也需要多看看,大神总结的很清楚了,多敲敲代码理解会更深一些。)
5.原型链
接着戳:最详尽的 JS 原型与原型链终极详解,没有「可能是」。(一)
现在还无法总结到位,自己对这部分也只有初步的理解,以后会补充自己的理解;学习的时候可以画个图来理解,不然很乱!有些笔试题也会要求写一个原型链继承,可以参考下面:
//目标使猫继承动物
//prototype方式如果将猫的原型对象指向动物的实例,
//那么所有猫的实例都能继承 Animal的属性和方法了
function Animal(){
this.kinds="动物";
}
function Cat(name,color){
this.name=name;
this.color=color;
}
Cat.prototype=new Animal();
//这句话必须加上 因为每个原型对象都本来有一个constructor属性指向它的构造函数
//也就是Cat.prototype.construcor==Cat,但是经过上面转换以后 就指向Animal
//原型链发生改变 必须在转回来
Cat.prototype.constructor=Cat;
var cat1=new Cat();
alert(cat1.kinds);