从0学习前端的第三天（由于晚上有美团的笔试，今天分享的是笔试的一些知识）

1.cookie、session、localStorage、sessionStorage的区别

cookie的生命期为浏览器的会话期间，关闭浏览器，cookie就会消失,cookie的数据存放在客户的浏览器上，cookie安全性较低，单个cookie保存的数据不能超过4k，cookie保存的是字符串。

session数据放在服务器上,session安全性较高，但是当访问增多，会占用你服务器的性能，session保存的是对象。

localStorage:存储大小可以达到5M及更大。始终有效，浏览器关闭也一直保存，因此用作持久数据，在所有同源的窗口都是共享的。

sessionStorage:是在同源的窗口，始终存在的数据，也就是说这个浏览器的窗口没有关闭，即使刷新页面或进入同源的另一个页面，数据仍然会存在。关闭窗口后，sessionStorage就会被销毁，不在不同的浏览器窗口共享。

2.typeof与instanceof的区别

typeof用于判断数据类型，返回值为6个字符串，分别为string、Boolean、number、function、object、undefined.

typeof对于丰富的对象实例，只能返回Object字符串。

instanceof用来判断对象，代码形式为obj1 instanceof obj2 （obj1是否是obj2的实例），obj2必须为对象，否则会报错！其返回值为布尔值。

3.javascript实现继承的几种方式

（1）原型链继承

  function Animal(name){

   this.name=name||'Animal';

   this.sleep=function(){  //实例方法

​     console.log(this.name+"正在睡觉！");

   }

  }

  Animal.prototype.eat=function(food){ //原型方法

​     console.log(this.name+"正在吃"+food);

  }

  //1 原型链继承

​    function Cat(){

​    }

​    Cat.prototype = new Animal()

​    Cat.prototype.name="cat"

​    var cat=new Cat();

​    console.log(cat.eat('fish'))

​    console.log(cat.sleep())

​    console.log(cat instanceof Animal)  // true

​    console.log(cat.name);

​    console.log(cat instanceof Cat) // true

特点1.纯粹的继承关系，实例是子类的实例。

​ 2.父类新增原型方法/原型属性，子类都能访问到

​ 3.简单，易于实现。

缺点1.无法实现多继承，可以在cat构造函数中，为cat实例

（2）构造继承

function Cat(){
Animal.call(this); 
}

（3）实例继承

（4）拷贝继承

（5）组合继承

（6）寄生组合继承

（7）class继承

class Cat extends Animal{

​     constructor(name){

​       super(name);

​     }

   }

   var cat= new Cat("123");

   console.log(cat.name); //123

   console.log(cat.sleep())//123正在睡觉

   console.log(cat.eat('fish'))//123正在吃fish

   console.log(cat instanceof Animal)  // true

   console.log(cat instanceof Cat) // true

4.get和post方法的区别

GET产生一个TCP数据包；POST产生两个TCP数据包

对于GET方式的请求，浏览器会把http header和data一并发送出去，服务器响应200（返回数据）；

而对于POST，浏览器先发送header，服务器响应100 continue，浏览器再发送data，服务器响应200 ok（返回数据）。

Get请求比Post执行更有效率，是因为浏览器在发送Post请求时，会先将请求头发送给服务器确认，服务器返回100 continue响应后，浏览器才开始发送数据。

5.找出数组中最大的数

var arr=[1,2,3,4,5,9,8]
  var maxvalue=arr[0]
  for(var i=0;i<arr.length;i++)
  {
    var maxvalue= Math.max(maxvalue,arr[i])
  }
  console.log("maxvalue",maxvalue)

采用es6的apply解决

  var arr=[1,4,9,6,13,15]

  var a =Math.max.apply(this,arr);

  console.log(a)

6.把俩个数组合并成一个数组然后去重

 var a=[1,2,3,4];

  var b=[1,2,3,5];

  var c= a.concat(b); //把a和b合并成一个数组

  var d= Array.from(new Set(c)) //然后把数组去重

  console.log(d)

采用apply

  var a=[1,2,3,4];

  var b=[1,2,3,5];

  Array.prototype.push.apply(a,b);

  console.log(a);

7.防抖函数和节流函数的实现

防抖函数：触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间。

节流函数：高频事件触发，但在n秒内只会执行一次，所以节流会稀释函数的执行频率；

 //防抖函数

  function fangdou(fn){

​    let timer=null

​    return function(){

​      clearTimeout(timer)

​      timer=setTimeout(() => {

​          fn.apply(this.arguments);

​      }, 200);

​    }

  }

  //节流函数

   function jieliu(fn){

​     let canuser=true;

​     return function(){

​       if(!canuser){return false }

​       canuser =false;

​       setTimeout(() => {

​        fn.apply(this,arguments);

​        canuser=true;

​       }, 500);

​     }

   }

8.new操作符做的事情

var a=new Animal();

  var o=new Object();

  o._proto_=Animal.prototype;

  FOO.call(o);

  a=o;

9.深拷贝与浅拷贝

浅拷贝（shallowCopy）只是增加了一个指针指向已存在的内存地址，

深拷贝（deepCopy）是增加了一个指针并且申请了一个新的内存，使这个增加的指针指向这个新的内存，

深拷贝的案例：

  var a=[1,2,3,4]

  var b=JSON.parse(JSON.stringify(a))

  a[1]=3

  console.log("a",a);//[1,3,3,4]

  console.log("b",b);//[1,2,3,4]

10.Js数组元素按指定字段排序

var b= [{id:1,score:68},{id:2,score:89},{id:3,score:820},{id:4,score:2222}]
  var c=b.sort(function(a,b){
​     if(a.score>b.score){
​       return -1;
​      }else if(a.score=b.score){
​       return 0;
​     }else{
​       return 1;
​     }
   })
console.log(c)

js数组升序排序

var a=[1,2,5,10,2]
function sortnum(a,b){
  return  a-b
}
var c=a.sort(sortnum)
console.log(c)

11.三次握手和四次分手

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4KfoQdoa-1585873444149)(/Users/shangguanjiahong/Desktop/study/jellythinkTCP4.jpg)]

三次握手

首先Client端发送连接请求报文，Server段接受连接后回复ACK报文，并为这次连接分配资源。Client端接收到ACK报文后也向Server段发生ACK报文，并分配资源，这样TCP连接就建立了。

四次分手

为什么要三次握手

为了防止已失效的连接请求报文段突然又传送到了服务端，因而产生错误。

为什么要四次分手

关闭连接时，当Server端收到FIN报文时，很可能并不会立即关闭SOCKET，所以只能先回复一个ACK报文，告诉Client端，“你发的FIN报文我收到了”。只有等到我Server端所有的报文都发送完了，我才能发送FIN报文，因此不能一起发送。故需要四步握手。

12.TCP和UDP的区别

            TCP           UDP 
是否连接     面向连接     面向非连接 
传输可靠性     可靠        不可靠 
应用场合     少量数据    传输大量数据 

速度           慢         快

13.为什么利用多个域名来存储网站资源会更有效？

(1).CDN缓存更方便;

(2).突破浏览器并发限制;
(3).节约cookie带宽;
(4).节约主域名的连接数，优化页面响应速度;
(5).防止不必要的安全问题。

14.$(document).ready()方法和window.onload有什么区别？

(1)、window.onload方法是在网页中所有的元素(包括元素的所有关联文件)完全加载到浏览器后才执行的。

(2)、$(document).ready() 方法可以在DOM载入就绪时就对其进行操纵，并调用执行绑定的函数。

15.闭包的理解

使用闭包主要是为了设计私有的方法和变量。闭包的优点是可以避免全局变量的污染，缺点是闭包会常驻内存，会增大内存使用量，使用不当很容易造成内存泄露。

闭包有三个特性：

（1）.函数嵌套函数

（2）.函数内部可以引用外部的参数和变量

（3）.参数和变量不会被垃圾回收机制回收

16.清除字符串前后空格 兼容任何浏览器

function trims(str){

  if(str&&typeof str==='string'){

​    return str.replace(/(^\s*)|(\s*)$/g,"")

  }

}

var b=trims("     1213  ");

console.log(b)

17什么是javascript 中的垃圾回收机制？

在Javascript中，如果一个对象不再被引用，那么这个对象就会被GC回收。

如果两个对象互相引用，而不再被第3者所引用，那么这两个互相引用的对象也会被回收。因为函数a被b引用，b又被a外的c引用，这就是为什么函数a执行后不会被回收的原因

18.原生ajax请求

Ajax的工作原理相当于在用户和服务器之间加了—个中间层，使用户操作与服务器响应异步化。这样把以前的一些服务器负担的工作转嫁到客户端，利于客户端闲置的处理能力来处理，减轻服务器和带宽的负担，从而达到节约ISP的空间及带宽租用成本的目的。

// 1.创建一个异步对象
​        var xmlhttp=new XMLHttpRequest();
​        // 2.设置请求方式和请求地址
​        /*
​        method：请求的类型；GET 或 POST
​        url：文件在服务器上的位置
​        async：true（异步）或 false（同步）
​        */
​        xmlhttp.open("GET", "04-ajax-get.php", true);
​        // 3.发送请求
​        xmlhttp.send();
​        // 4.监听状态的变化
​        xmlhttp.onreadystatechange = function (ev2) {
​          /*
​          0: 请求未初始化
​          1: 服务器连接已建立
​          2: 请求已接收
​          3: 请求处理中
​          4: 请求已完成，且响应已就绪
​          */
​          if(xmlhttp.readyState === 4){
​            // 判断是否请求成功
​            if(xmlhttp.status >= 200 && xmlhttp.status < 300 ||
​              xmlhttp.status === 304){
​              // 5.处理返回的结果
​              console.log("接收到服务器返回的数据");
​            }else{
​              console.log("没有接收到服务器返回的数据");
​            }
​          }
​        }

19.如何解决跨域问题?

理解跨域的概念：协议、域名、端口都相同才同域，否则都是跨域；

出于安全考虑，服务器不允许ajax跨域获取数据，但是可以跨域获取文件内容，所以基于这一点，可以动态创建script标签，使用标签的src属性访问js文件的形式获取js脚本，并且这个js脚本中的内容是函数调用，该函数调用的参数是服务器返回的数据，为了获取这里的参数数据，需要事先在页面中定义回调函数，在回调函数中处理服务器返回的数据，这就是解决跨域问题的主流解决方案。
20.阐述一下异步加载

（1）. 异步加载的方案： 动态插入 script 标签
（2）. 通过 ajax 去获取 js 代码，然后通过 eval 执行
(3). script 标签上添加 defer 或者 async 属性

(4)创建并插入 iframe，让它异步执行 js

21.说说你对this的理解

在JavaScript中，this通常指向的是我们正在执行的函数本身，或者是，指向该函数所属的对象。

全局的this → 指向的是Window
函数中的this → 指向的是函数所在的对象
对象中的this → 指向其本身

22.往对象中加数据

var s = 'bbcitcxyllkkjjfffdddsbbbbbb';

 var obj = {};

  obj[s[1]]=1

console.log(obj[s[1]]) //1

console.log(obj)  //{b:1}

23.判断一个字符串出现次数最多的字符，并统计次数

 var s="bbbbbbbcccdddsssee";
 var obj={};
 var num=-1;
 var zimu;
 for(var i = 0;i < s.length;i++)
 {
   if(obj[s[i]]){
​    obj[s[i]]++;
​     if(obj[s[i]]>num){
​       num=obj[s[i]]
​       zimu=s[i]
​     }
   }else{
​     obj[s[i]]=1;
​     if(obj[s[i]]>num)
​     {
​       num=obj[s[i]]
​       zimu=s[i]
​     }
   }
 }
 console.log(zimu,num)

24.说说BFC原理?
答:BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。
因为BFC内部的元素和外部的元素绝对不会互相影响，因此， 当BFC外部存在浮动时，
它不会影响BFC内部Box的布局，BFC会通过变窄，而不与浮动有重叠。
同样的，当BFC内部有浮动时，为了不影响外部元素的布局，BFC计算高度时会包括浮动的高度。
避免margin重叠也是这样的一个道理

25.css样式优先级，各自的权重?

答:优先级别：
    通用选择器（*） < 元素(类型)选择器 < 类选择器 < 属性选择器 < 伪类 < ID 选择器 < 内联样式
  权重：
    1）内联样式表的权值最高 1000；
    2）选择器的权值为 100
    3）Class 类选择器的权值为 10(属性和伪类属于class类)
    4）HTML 标签选择器的权值为 1(伪元素属于标签)

26.img标签的title和alt有什么区别？
答:alt用于图片无法加载时显示，title为该属性提供信息，通常当鼠标滑动到元素上的时候显示.

27.谈谈CSS中link和@import的区别是？
答:(1）link属于HTML标签，而@import是CSS提供的；
（2）页面被加载时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载；
（3）import只在IE5以上才能识别，而link是HTML标签，无兼容问题；
（4）link方式的样式权重高于@import的权重。

28.JS的回收机制?
答:小编: 垃圾回收机制是为了以防内存泄漏，(内存泄漏: 当已经不需要某块内存时这块内存还存在着), 垃圾回收机制就是间歇的不定期的寻找到不再使用的变量，并释放掉它们所指向的内存。

JS有两种变量: 全局变量和在函数中产生的局部变量。局部变量的生命周期在函数执行过后就结束了
此时便可将它引用的内存释放（即垃圾回收），但全局变量生命周期会持续到浏览器关闭页面。

JS执行环境中的垃圾回收器有两种方式：标记清除（mark and sweep）、引用计数(reference counting)。

标记清除: 垃圾收集器给内存中的所有变量都加上标记，然后去掉环境中的变量以及被环境中的变量引用的变量的标记。
在此之后再被加上的标记的变量即为需要回收的变量，因为环境中的变量已经无法访问到这些变量。

引用计数(reference counting): 这种方式常常会引起内存泄漏，低版本的IE使用这种方式。
机制就是跟踪一个值的引用次数，当声明一个变量并将一个引用类型赋值给该变量时该值引用次数加1，
当这个变量指向其他一个时该值的引用次数便减一。当该值引用次数为0时就会被回收。
也很遗憾，昨天准备的大厂笔试的方向错了，大厂考的都是算法，博主的研究很少，也意识到了自身的不足，未来继续努力吧！