JS高频面试题(上)

1. 介绍JS有哪些内置对象？

• 数据封装类对象：Object、Array、Boolean、Number、String

• 其他对象：Function、Arguments、Math、Date、RegExp、Error

• ES6新增对象：Symbol（标识唯一性的ID）、Map、Set、Promises、Proxy、Reflect

2. 如何最小化重绘(repaint)和回流(reflow)？

• 需要要对元素进行复杂的操作时，可以先隐藏(display:"none")，操作完成后再显示

• 需要创建多个DOM节点时，使用DocumentFragment创建完后一次性的加入document

• 缓存Layout属性值，如：var left = elem.offsetLeft; 这样，多次使用 left 只产生一次回流

• 尽量避免用table布局（table元素一旦触发回流就会导致table里所有的其它元素回流）

3. Javascript作用域链?

• 全局函数无法查看局部函数的内部细节，但局部函数可以查看其上层的函数细节，直至全局细节

• 如果当前作用域没有找到属性或方法，会向上层作用域[[Scoped]]查找，直至全局函数，这种形式就是作用域链

4. 数据请求

(1) XHR

var xhr = new XMLHttpRequest();
xhr.open('get',"www.aaaa.com",true);//异步
xhr.send();
xhr.onreadystatechange = function(){
    // readstate  4
    // status  200-300
    // 200 成功 （有可能强缓存策略，cache-control,expired）
    // 301 302 redirect
    // 304 从缓存读取数据。(协商缓存策略,etag)
    // 404 not found
    // 500 服务器错误。   
}
 ?xhr 可以取消？
 ?xhr.abort();//终止请求。

(2) fetch （w3c）

fetch("url",     ?
 ? {method:"post",body:"",credencial:'include'})
 ? .then(res=>res.json())
 ? .then(res=>{console.log(res)})
 ? // 兼容性问题
 ? // 发出的请求，默认是不带cookie.  credencial:'include'

(3) jsonp (解决跨域)

?动态创建script src指向没有跨域限制， ?onload
?
 ?后端返回的数据格式 一定是， test('["111","222","3333"]');
?
 ?前端提前定义好 test这个方法，通过形参就拿到数据了。
?
 ?jsonp 可以做get请求， 无法做post请求（缺点）;
?
 ?jsonp可以取消吗？不能

5. 跨域和同源策略

所谓的同源策略其实是浏览器的一种机制，只允许在同源，也就是同协议、同域名、同端口的的情况下才能进行数据交互。 但是我们在开发项目的过程中， 往往一个项目的接口不止一个域，所以往往就需要做跨域的处理，通常的跨域方式有这么几种：

1）JSONP，主要依赖的是script标签不受同源策略影响，src指向某一个接口的地址， 同步需要传递callback回调函数名字， 这样当接口调用成功后， 本地创建的全局回调函数就会执行， 并且接收到数据。不使用img标签的原因是因为img标签无法执行js语句

2)CORS，依赖服务端对前端的请求头信息进行放行，不做限制。

Access-Control-Allow-Origin配置成*

3)代理访问，前端访问不存在跨域问题的代理服务器，代理服务器再去访问目标服务器（服务器之间没有跨域限制）

6. 面向对象

(1)构造函数

function Test(name,age){
 ? ?this.name = name;
 ? ?this.age =age;
 ? ?this.getName= function(){
 ?      return this.name;
 ?  }
}
// Test();
var obj = new Test("kerwin",100);
?
var obj2 =new Test("xiaoming",18)

(2)原型

 //内存只有一份
Test.prototype.getName= function(){
?
}
//缺点是？
?
原型容易被覆盖
?
Array.prototype.concat = ....

(3)继承

//构造函数继承
function Test2(name,age,location){
 ? ?// this.name =name;
 ? ?// this.age =age;
 ? ?// Test.call(this,name,age);
 ? ?Test.apply(this,[name,age])
 ? ?this.location = location;
}
var obj = new Test2();
?
//原型继承
Test2.prototype =Test.prototype
//Test2.prototype =new Test()
Test2.prototype.constructor =Test2;
//混合继承?

(4)原型链

原型链的基本原理：任何一个实例，通过原型链，找到它上面的原型，该原型对象中的方法和属性，可以被所有的原型实例共享。

7. 闭包

闭包是JS中的一种特性，往往用于解决一些特定的问题，当A函数中返回了B函数， 并且返回的B函数中有使用到A函数中的局部变量（包含参数）就会形成一个特性的形态，就叫闭包。

此时，理论上来说A函数执行完成后，生成了B函数后，应该被垃圾回收机制回收，但是因为生成的B函数还在使用A函数中的局部变量， 就会导致A函数没有及时回收，导致内存泄露。

   //1. 函数防抖(搜索查询)
 ?      
 ?      inputelement.oninput = (function(){
 ?          var timer =null;
 ?          return function(){
 ? ? ? ? ? ? ? ?console.log("scroll")
 ?              if(timer){
 ?                  clearTimeout(timer);
 ?              }
 ?              timer = setTimeout(() => {
 ?                  console.log("代码执行,ajax"); 
 ? ? ? ? ? ? ? ? ? ?
 ?              }, 500)
 ?          }
 ?      })()
 ?      // 2. 函数节流（onrize，onscroll）
 ? ? ? ? ? ?window.onscroll = (function(){
 ? ? ? ? ? ? ? ?var date = Date.now();
 ? ? ? ? ? ? ? ?return function(){
?
 ? ? ? ? ? ? ? ? ? ?if(Date.now()-date>500){
 ? ? ? ? ? ? ? ? ? ? ? ?date = Date.now();
 ? ? ? ? ? ? ? ? ? ? ? ?console.log("代码执行echarts resize")
?
 ? ? ? ? ? ? ? ? ?  }
 ? ? ? ? ? ? ?  }
 ? ? ? ? ?  })()
 ?      
 ?      // 3. ul li
 ?      var oli = document.getElementsByTagName("li");
?
 ?      for(var i=0;i<oli.length;i++){
 ?          oli[i].onclick =(function(index){
 ? ? ? ? ? ? ? ?return function(){
 ? ? ? ? ? ? ? ? ? ?console.log(index)
 ? ? ? ? ? ? ?  }
 ? ? ? ? ?  })(i) ? 
 ?      }

8. 数组去重

 var arr = [1,2,3,4,3,4];
?
 var myset = new Set(arr);
 var mya = Array.from(myset);

9. 数组常用的合并方法

• concat

• [...a, ...b]展开运算符

• [a, b].flat()

• ......

10. cookie和session

cookie和session是为HTTP请求挂载状态的，也就说在前后端交互的过程中，往往需要利用cookie或者session来对客户端进行标记。

传统的cookie验证方式是这样的：

1. 客户端在向服务端登录的时候，服务端直接通过响应头上set-cookie字段，为浏览器客户端注入cookie，或者将对应的信息放置在响应内容中，客户端自行将其存储在cookie中。

2. 客户端在每次发送请求的时候就可以将cookie携带在请求头上进行数据的传递，服务端拿到此次请求头中的cookie进行验证。

3. 客户端自行设置cookie或者由服务端设置cookie的时候也去设置此cookie的过期时间，当cookie过期后相当于登录过期了。

session的验证方式：

1. 客户端在向服务端登录的时候，服务端自行建立客户信息表，并且建立生命周期机制，服务端再将此信息通过cookie或者数据直接返回的形式，返回给客户端。

2. 客户端拿到验证信息后，可以选择存储在cookie中获取localStorage中都可以。

3. 每次请求的时候携带验证信息（cookie就自动写到，localStorage需要取出携带）

4. 服务端接收到请求后，判断该验证信息是否过期

cookie和session本质是都是利用cookie或者localStorage来进行数据交互，而cookie和localStorage又都有跨域的限制：

cookie通过设置domain可以实现一级域名下的二级域名之间可以互相访问，localStorage则不能跨域。