前端面试题总结(持续更新)

1.cookies,sessionStorage 和 localStorage 的区别 ?

共同点：都是保存在浏览器端，且同源的。

区别:

• cookie数据始终在同源的http请求中携带,即cookie在浏览器和服务器间来回传递. 而sessionStorage 和 localStorage不会自动把数据发给服务器,仅在本地保存.cookie数据还有路径(path)的概念,可以限制cookie只属于某个路径下.
• 存储大小限制不同,cookie数据不能超过4K, 同时因为每次http请求都会携带cookie,所以cookie只适合保存很小的数据,如会话标识. sessionStorage 和 localStorage虽然也有存储大小的限制,但比cookie大得多,可以达到5M或更大.
• 数据有效期不同, sessionStorage : 仅在当前浏览器窗口关闭前有效,不可能持久保持 ; localStorage 始终有效 窗口或浏览器关闭也一致保存 因此用作持久数据; cookie只在设置的cookie过期时间之前一致有效, 即使窗口或浏览器关闭.
• 作用域不同，sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；localStorage 在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。

2.依次说出alert打印的是什么?

function fn(){
      this.a = 0;
      this.b=function(){
        alert(this.a)
      }
    }
    fn.prototype={
      b:function(){
        this.a = 20;
        alert(this.a);
      },
      c:function(){
        this.a=30;
        alert(this.a)
      }
    }
var myfn=new fn() //实例对象
myfn.b()
myfn.c()
//依次打印的就是 0 ,30

这里运用的知识点就是new的作用:

1. 创建一个新对象
2. 将构造函数的作用域赋给新对象（因此 this 就指向了这个新对象）
3. 执行构造函数中的代码
4. 返回新对象

3.依次打印的是什么

    a=3,b=1;
    hello();
    alert(b);
	function hello(){
      b=2;
      alert(a);
      var b;
    }

知识点: 预解析和作用域

4.剩余参数和 arguments对象之间的区别主要有三个：

• 剩余参数只包含那些没有对应形参的实参，而 arguments 对象包含了传给函数的所有实参。
• arguments对象不是一个真正的数组，而剩余参数是真正的 Array实例，也就是说你能够在它上面直接使用所有的数组方法，比如 sort，map，forEach或pop。
• arguments对象还有一些附加的属性 （如callee属性）。

5.封装 console.log 的打印的功能，封装clg函数; 在上面封装的clg函数基础上， 添加功能： 每次调用clg2函数，打印的内容前面固定加上指定的字符 “XX友情提示：”

function clg(){
    console.log.apply(arguments,arguments);
}
clg(1,2,3)

function cjg2(){
    Array.prototype.unshift.apply(arguments,'xx友情提示:');
    console.log.apply(arguments,arguments)
}
clg('嘻嘻','哈哈','嘿嘿')

6.编写求和函数sum，要求满足：

(1)sum(1,2)=>3

(2)sum(1)(2)=>3

实现代码:

function sum(){
    var num = arguments[0];
    if(arguments.length==1){
        return function(sec){
            return num+sec;
        }
    }else{
        var num = 0;
        for(var i = 0;i<arguments.length;i++){
            num = num + arguments[i];
        }
    return num;
    }
}
var res1 = sum(1,2);
var res2 = sum(1)(2);
console.log(res1);
console.log(res2);

7.统计数组[1,2,3,1,5,7,2,3,58,9,4]中出现的数字并输出

var arr = [1,2,3,1,5,7,2,3,58,9,4] 
    function uniq(arr){
      var newArr = []
      for ( var i = 0 ; i < arr.length ; i++) {
      
          if(newArr.indexOf(arr[i]) == -1){
            newArr.push(arr[i])
          }
      }
      return newArr
    }
    console.log(uniq(arr));

8. 清除浮动的几种方式

(1) 直接给父盒子div设置高度
(2) 给父盒子设置overflow:hidden 触发BFC
(3) 双伪元素清除浮动

.clearfix:before,.clearfix:after{
    content:'';
    display:block ;
    clear:both ;
}
.clearfix{
  zoom:1
}

(4) 在div后面添加一个空div标签 clear:both
(5) 伪元素清除浮动

.clearfix:after{
  content:'' ;
  visibility;hidden;
  display:block ;
  clear:both;
  height:0 ;
  line-height: 0 ;

}
.clearfix{
  zoom:1
}

9.js中找出字符串中出现次数最多的字符和次数

	var str = 'adfkfjjklsdkaklsdkjfkks'
    var json = {}
    //遍历每个字母出现的次数
    for (var i = 0; i < str.length; i++) {
      //第i个字符
      var char = str.charAt(i)
      //char就是对象json的一个属性，json[char]是属性值，存储出现的次数
      if (json[char]) {
        json[char]++
      } else {
        json[char] = 1
      }
    }
    console.log(json) // {a: 2,d: 3,f: 3,j: 3,k: 7,l: 2,s: 3}

    var max = 0
    var maxChar = null
    for (var key in json) {
      if (max < json[key]) {
        max = json[key]
        maxChar = key
      }
    }
    console.log('出现最大次数是' + max)
    console.log('出现对多的字符串是' + maxChar)