js的数据类型有几种？

按照MDN上最新的文档，总共有8种，其中分为2种类型：基本类型和复杂类型

• 基本类型 Number String Boolean Undefined Null Symbol BigInt 其中，

Symbol是es6新出的，也叫符号类型，符号类型是唯一的并且是不可修改的, 并且也可以用来作为Object的key的值。（引自mdn）

BigInt类型是 JavaScript 中的一个基础的数值类型，可以用任意精度表示整数。使用 BigInt，您可以安全地存储和操作大整数，甚至可以超过数字的安全整数限制。BigInt是通过在整数末尾附加 n 或调用构造函数来创建的。（引自mdn）

• 复杂类型 Object（其中包含Date，数组，Function，Set，Map，结构化数据JSON，正则等）

什么是变量提升？如果出现相同的变量名和函数名怎么办？

所谓的变量提升，是指在 JavaScript 代码执行过程中，JavaScript 引擎把变量的声明部分和函数的声明部分提升到代码开头的“行为”。变量被提升后，会给变量设置默认值，这个默认值就是我们熟悉的 undefined。

下面这张图可让大家更清晰了解什么是变量声明，

具体变量提升的逻辑可看我在有道写的一个笔记，里面有例子和原理剖析。

js是按顺序执行的吗：note.youdao.com/s/CVdZNqiT

如果出现相同的变量名和函数名，后者会覆盖前者。

如何判断数据类型？

这道题其实就是考验instanceOf和typeOf。

该题解答引自：github.com/Checkson/bl…

原始类型的数据除了 null 其它都可以用 typeof 准确判断出来，如下：

typeof(undefined); // undefined
typeof(null); // object
typeof(true); // boolean
typeof(1); // number
typeof(''); // string
typeof(Symbol(1)); // symbol
typeof(function () {}); // function
typeof([]); // object
typeof({}); // object
typeof(new Date()); // object
typeof(/abc/ig);  // object
typeof(Math);  // object
typeof(new Error('error')); // object

instanceof 也可以判断对象类型，因为内部机制是通过判断对象的原型链中是不是能找到类型的 prototype。但是，并不适用于一些基本数据类型。如下：

instanceof Number; // false
var num = new Number(1);
num instanceof Number; // true

既然typeof和instanceof都有局限性，那么有没有一种相对准确的方法来判断数据类型呢？答案是肯定的，它就是Object.prototype.toString.call(xxx)方法，其结果返回格式形如：[object Array]，[object RegExp]、[object Date]等。我们可以根据其表达式的返回结果中的中括号中的第二个单词，就能准确判别这个数据的具体类型。最终可这么写：

var superTypeof = function (val) {
    var ans = typeof val;
    if (ans === 'object') {
        ans = Object.prototype.toString.call(val).slice(8,-1).toLowerCase();
    }
    return ans;
}

描述下ajax的流程

基本代码如下：

var ajax={
  get: function(url, fn) {
    // XMLHttpRequest对象用于在后台与服务器交换数据   
    var xhr = new XMLHttpRequest();            
    xhr.open('GET', url, true); 
    xhr.onreadystatechange = function() {
      // readyState == 4说明请求已完成
      if (xhr.readyState == 4 && xhr.status == 200 || xhr.status == 304) { 
        // 从服务器获得数据 
        fn.call(this, xhr.responseText);  
      }
    };
    xhr.send();
  },
  // data应为'a=a1&b=b1'这种字符串格式，在jq里如果data为对象会自动将对象转成这种字符串格式
  post: function (url, data, fn) {
    var xhr = new XMLHttpRequest();
    xhr.open("POST", url, true);
    // 添加http头，发送信息至服务器时内容编码类型
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");  
    xhr.onreadystatechange = function() {
      if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 304)) {
        fn.call(this, xhr.responseText);
      }
    };
    xhr.send(data);
  }
}

• new一个XMLHttpRequest对象
• open需要三个参数，分别是请求方法（get/post),请求地址，是否异步（true为异步，false为同步）
• send是将请求发送到服务器
• onreadystatechange：响应服务器的函数，当readyState改变时，onreadystatechange 函数就会被执行。 readyState：存有服务器响应的状态信息。

0: 请求未初始化（代理被创建，但尚未调用 open() 方法）

1: 服务器连接已建立（open方法已经被调用）

2: 请求已接收（send方法已经被调用，并且头部和状态已经可获得）

3: 请求处理中（下载中，responseText 属性已经包含部分数据）

4: 请求已完成，且响应已就绪（下载操作已完成）

• setRequestHeader：POST传数据时，用来添加 HTTP 头

（IE不是创建XMLHttpRequest，而是ActiveXObject）

get和post有什么区别

• 一般情况下，get是用来从服务器上获得数据，而post是用来向服务器上传递数据。
• 回退或者刷新时，get是无害的，post的数据会被重新提交
• get请求，可被收藏为书签，post则不可
• get会主动缓存，post则不会
• get请求会保留在浏览器历史记录里，post则不会
• get请求长度有限制，post则不会
• get对数据类型有限制，只允许是ASCII字符，post则没有限制
• get因为参数直接暴露在url上（如今现有的很多服务器、代理服务器或者用户代理都会将请求URL记录到日志文件中，然后放在某个地方，这样就可能会有一些隐私的信息被第三方看到，所以敏感信息不要用get），post则不会（对于稍微懂计算机的其实一样）

什么是同源策略？如果不同源要交互怎么办？

同源策略限制了不同源的资源进行交互，比如cookie、localStorage、indexDB、dom、ajax等，这是用于隔离潜在恶意文件的一种安全机制。 跨域交互，可以通过如下几种方式实现：

• JSONP 利用script发出请求（script没有跨域限制），并与后端定义好回调函数的名称callback，服务器返回执行脚本 —— callback(json数据)，这个时候js引擎会认为你是在调用一个函数，然后你就可以在这个函数内处理你的逻辑了。

• Hash 通过onhashchange监听参数变化

• postMessage（h5新增） 通过postMessage发出事件，然后监听message事件来通讯

• WebSocket（h5新增） 通过new一个WebSocket对象，是长连接

• CORS 具体可看阮一峰老师的文章：www.ruanyifeng.com/blog/2016/0…

只要ajax发出的是跨域的请求，浏览器自动会在http头中加上origin。

后台添加支持的配置：

c.Header("Access-Control-Allow-Origin", "*")
c.Header("Access-Control-Allow-Methods", "GET, POST")

fetch和ajax的区别是什么？

• ajax是基于XMLHttpRequest实现的，fetch是浏览器的原生api，使用promise来处理结果。
• fetch默认不会发送或者接收cookie
• fetch只对网络请求报错，对400，500都当做成功的请求，需要封装去处理
• fetch没有办法原生监测请求的进度，而XHR可以

什么是调用栈？什么是栈溢出？

js执行的时候有可能存在多个上下文，js引擎是通过栈的数据来管理这些上下文的。是先进后出的。 如果出现递归，且没有终止条件，那js引擎就一直在创建上下文，反复的压入调用栈，但是栈的容量是有极限的，超过后，就出现栈溢出的错误。

this指向是怎样的？

• 当函数作为对象的方法调用时，函数中的 this 就是该对象；
• 当函数被正常调用时，在严格模式下，this 值是 undefined，非严格模式下 this 指向的是全局对象 window；
• 嵌套函数中的 this 不会继承外层函数的 this 值。

事件委托有什么好处？

利用冒泡原理，新添加的元素直接有了响应的事件，从而触发执行效果。

有什么节点类型？如何判断当前的节点类型？

有4种：元素节点（即标签），属性节点，文本节点，注释节点，文档节点

通过dom节点的nodeType属性判断

如何合并2个数组？如何删除数组里的一个元素？

• 合并 concat

用apply方法，Array.prototype.push.apply(arr1, arr2)

• 删除 使用splice方法。

splice(index, howMany, ...items)

（slice是截取数组范围）

map 和 each 有什么区分

map：创建一个新的数组，适用于将数组映射到一个新的数组上 each：简单的遍历数组，返回的也还是原来的数组

sessionStorage,localStorage,cookie有什么区分

同：都是同源的才可共享

异：（如下）

cookie：会自动加到请求中，有大小限制，有效时间也是一定的 sessionStorage：当前窗口关闭后无效 localStorage：永久

描述下什么是js原型链

见 note.youdao.com/s/bJNZvFNY

简单描述下什么是面向对象

把一个对象的静态特点，动态特点，都抽象成属性和方法，即是对象。对象有封装性，继承性，多态性。

所以面向对象，提高了代码的通用性和可维护性，可重用性。

js有几种继承方法？

见我之前做的笔记：note.youdao.com/s/DGkmHLz3

如何创建一个对象

字面量 new ... new Object(...) Object.creat()

具体术语见 note.youdao.com/s/S5fdLSFa

null和undefined有什么区别？

null是一个表示"无"的对象，转为数值时为0；undefined是一个表示"无"的原始值，转为数值时为NaN。

js延迟加载的方法有什么？

• defer
• async
• 动态创建dom（script）

一个页面从url到页面显示完成，经历了什么

见 note.youdao.com/s/aOordA0e

什么是事件委托？

它还有一个名字叫事件代理，JavaScript高级程序设计上讲：事件委托就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。

何为事件冒泡呢？就是事件从最深的节点开始，然后逐步向上传播事件，举个例子：页面上有这么一个节点树，div>ul>li>a;比如给最里面的a加一个click点击事件，那么这个事件就会一层一层的往外执行，执行顺序a>li>ul>div，有这样一个机制，那么我们给最外面的div加点击事件，那么里面的ul，li，a做点击事件的时候，都会冒泡到最外层的div上，所以都会触发，这就是事件委托，委托它们父级代为执行事件。

Event对象提供了一个属性叫target，可以返回事件的目标节点，我们成为事件源，也就是说，target就可以表示为当前的事件操作的dom。可以根据此来判断源头是谁，也不是一刀切给当前所有可点击对象。

window.onload = function(){		    　　
var oUl = document.getElementById("ul1");		    　　
oUl.onclick = function(ev){		    	　　　　
var ev = ev || window.event;		   		　　　　
var target = ev.target || ev.srcElement;	
if(target.nodeName.toLowerCase() == 'li'){	　　　　　  
alert(target.innerHTML);				　　　　
}		    　　
}		
}

判断某变量是否是数组？

• Array.isArray(XXX)
• xxx instanceof Array
• Object.prototype.toString.call(xxx) === '[object Array]';

取1-10的随机数

Math.floor(Math.random()*10)

js延迟加载

见 www.jb51.net/article/154…

defer和async的区别

见 segmentfault.com/q/101000000…

js如何做深拷贝

见 www.jianshu.com/p/1c142ec2c…

一次完整的HTTP事务是怎么一个过程

1、域名解析

2、发起TCP的三次握手

3、建立TCP连接后发起http请求

4、服务器端响应http请求，浏览器得到html码

5、浏览器解析html代码，并请求html代码中的资源

6、浏览器对页面进行渲染并呈现给客户

浏览器输入url到显示页面经历了什么

浏览器根据请求的URL交给DNS域名解析，找到真实IP，向服务器发起请求；

服务器交给后台处理完成后返回数据，浏览器接收文件（HTML、JS、CSS、图象等）；

浏览器对加载到的资源（HTML、JS、CSS等）进行语法解析，建立相应的内部数据结构（如HTML的DOM）；

载入解析到的资源文件，渲染页面，完成。

Doctype的作用？

声明位于文档中的最前面，处于标签之前。告知浏览器的解析器， **用什么文档类型 规范来解析这个文档**

严格模式的排版和JS运作模式是 以该浏览器支持的最高标准运行

在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。

DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现

http请求报文有什么

• 请求方法
• 请求url
• http版本
• 报文头
• 报文体