js 面试总结

数据类型

在 JavaScript 中有 6 种不同的数据类型：String number Boolean object function symbol
3 种对象类型：Object Date Array
2 个不包含任何值的数据类型：Null undefined（undefined是访问一个未初始化的变量时返回的值，而null是访问一个尚未存在的对象时所返回的值。因此，可以把undefined看作是空的变量，而null看作是空的对象。）

隐式转换

两个数字相加，返回数字相加的和，如果数字与字符串相加，返回字符串

Search & Replace

search() 方法 用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串，并返回子串的起始位置。
replace() 方法 用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。

10== ===“10”

在常规的比较中，数据类型是被忽略的
在严格的比较运算中，=== 为恒等计算符，同时检查表达式的值与类型

对象超类

var parent = {
foo() {
console.log(“Hello from the Parent”);
}
}
var child = {
foo() {
super.foo();
console.log(“Hello from the Child”);
}
}
Object.setPrototypeOf(child, parent);
child.foo(); // Hello from the Parent
// Hello from the Child

for in for of

for…in循环的是key
for…of循环的是value
for…of 用于遍历一个迭代器，如数组：

变量提升

JavaScript 中，函数及变量的声明都将被提升到函数的最顶部。
JavaScript 中，变量可以在使用后声明，也就是变量可以先使用再声明。
Let不存在，var存在变量提升
let，可以声明块级作用域的变量

函数调用

- 作为一个函数调用
- 作为方法调用
var myObject = { firstName:“John”, lastName: “Doe”, fullName: function () { return this; } } myObject.fullName(); // 返回 [object Object] (所有者对象)
- 使用构造函数
如果函数调用前使用了 new 关键字, 则是调用了构造函数。
这看起来就像创建了新的函数，但实际上 JavaScript 函数是重新创建的对象：
// 构造函数:
function myFunction(arg1, arg2)
{ this.firstName = arg1; this.lastName = arg2; }
// This creates a new object
var x = new myFunction(“John”,“Doe”);
x.firstName; // 返回 “John”

Call和Apply

它们的不同之处：
apply：最多只能有两个参数——新this对象和一个数组argArray。如果给该方法传递多个参数，则把参数都写进这个数组里面，当然，即使只有一个参数，也要写进数组里。
call：它可以接受多个参数，第一个参数与apply一样，后面则是一串参数列表。这个方法主要用在js对象各方法相互调用的时候，使当前this实例指针保持一致，或者在特殊情况下需要改变this指针。
实际上，apply和call的功能是一样的，只是传入的参数列表形式不同。
call和apply是预定义的函数方法，两个方法可用于调用函数，两个方法的第一个参数必须是对象本身。

function myFunction(a,b){
return a*bl
}
myObject = myFunction.call(myObject,10,2);
myArray = [10,2];
nyObject= myFunction.apply(myObject,myArray)

闭包

闭包是一种保护私有变量的机制，在函数执行时形成私有的作用域，保护里面的私有变量不受外界干扰。让外部访问函数内部变量成为可能；局部变量会常驻在内存中；可以避免使用全局变量，防止全局变量污染；会造成内存泄漏（有一块内存空间被长期占用，而不被释放）

Ajax Asynchronous JavaScript and XML（异步的JavaScript 和 XML）

Ajax相当于在用户和服务器之间加了—个中间层,使用户操作与服务器响应异步化。并不是所有的用户请求都提交给服务器,像—些数据验证和数据处理等都交给Ajax引擎自己来做, 只有确定需要从服务器读取新数据时再由Ajax引擎代为向服务器提交请求。
  (1) 创建XMLHttpRequest对象,也就是创建一个异步调用对象.
  (2) 创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息.
  (3) 设置响应HTTP请求状态变化的函数.
  (4) 发送HTTP请求.
  (5) 获取异步调用返回的数据.
  (6) 使用JavaScript和DOM实现局部刷新
使用 JSON.parse() 方法将数据转换为 JavaScript 对象
使用 JSON.stringify() 方法将 JavaScript 对象转换为字符串

1. 通过异步模式，提升了用户体验
2. 优化了浏览器和服务器之间的传输，减少不必要的数据往返，减少了带宽占用
3. Ajax引擎在客户端运行，承担了一部分本来由服务器承担的工作，从而减少了大用户量下的服务器负载
   Ajax的请求方式
   Post、get、delete 不常用copy、head、link
   代码上的区别：
   1:get通过url传递参数
   2:post设置请求头 规定请求数据类型
   使用上的区别：
   1:post比get安全
   (因为post参数在请求体中。get参数在url上面)
   2:get传输速度比post快 根据传参决定的。
   (post通过请求体传参，后台通过数据流接收。速度稍微慢一些。而get通过url传参可以直接获取)
   3:post传输文件大理论没有限制 get传输文件小大概7-8k ie4k左右
   4:get获取数据 post上传数据
   (上传的数据比较多 而且上传数据都是重要数据。所以不论在安全性还是数据量级 post是最好的选择)
   12、promise
   pending就是未决，fulfilled 可以理解为成功，reject可以理解为拒绝。
   Promise 对象提供统一的接口，使得控制异步操作更加容易。
   resolve 函数的作用：将 Promise 对象的状态从“未完成（pending）”变为“成功（resolved）”，在异步操作成功时调用，并将异步操作的结果作为参数传递出去。
   reject 函数的作用：将 Promise 对象的状态从“未完成（pending）”变为“失败（rejected）”在异步操作失败时调用，并将异步操作报出的错误，作为参数传递出去。
   then 方法作用：接受两个回调函数作为参数。第一个回调函数是 Promise 对象的状态变为 resolved 时调用，第二个回调函数是 Promise 对象的状态变为 rejected 时调用。第二个函数可选，不一定要提供，也可以将第二个函数作为 catch 方法的参数。
   catch 方法作用：用于指定发生错误时的回调函数。Promise 对象异步操作抛出错误，状态就会变为 rejected，就会调用 catch 方法指定的回调函数处理这个错误。另外，then 方法指定的回调函数，如果运行中抛出错误，也会被 catch 方法捕获。

延迟加载

JS延迟加载，也就是等页面加载完成之后再加载 JavaScript 文件。 JS延迟加载有助于提高页面加载速度。

• defer属性
  HTML 4.01为标签定义了 defer属性,表明脚本在执行时不会影响页面的构造。也就是说，脚本会被延迟到整个页面都解析完毕之后再执行。
  在脚本元素中设置 defer 属性，等于告诉浏览器立即下载，但延迟执行。
  defer属性只适用于外部脚本文件。支持 HTML5 的实现会忽略嵌入脚本设置的 defer属性。
• async属性
  HTML5 为script标签定义了 async属性。与defer属性类似，都用于改变处理脚本的行为。同样，只适用于外部脚本文件。
  目的：不让页面等待脚本下载和执行，从而异步加载页面其他内容。
  异步脚本一定会在页面 load 事件前执行。不能保证脚本会按顺序执行。
• 动态创建DOM方式
• 使用jQuery的getScript()方法
• 使用setTimeout延迟方法
• 让JS最后加载

弹出式消息提醒

警告窗口alert 确认窗口 confirm 信息输入窗口 prompt

跨域问题

跨域是指一个域下的文档或脚本试图去请求另一个域下的资源
所谓同源是指"协议+域名+端口"三者相同，即便两个不同的域名指向同一个ip地址，也非同源。

• 通过jsonp跨域 JSON with Padding，只能解决get跨域
  通常为了减轻web服务器的负载，我们把js、css，img等静态资源分离到另一台独立域名的服务器上，在html页面中再通过相应的标签从不同域名下加载静态资源，而被浏览器允许，基于此原理，我们可以通过动态创建script，再请求一个带参网址实现跨域通信。
• 跨域资源共享（CORS）“跨域资源共享”（Cross-origin resource sharing）
  服务器设置Access-Control-Allow-OriginHTTP响应头之后，浏览器将会允许跨域请求
  限制：浏览器需要支持HTML5，可以支持POST，PUT等方法兼容ie9以上
  需要后台设置
  Access-Control-Allow-Origin: * //允许所有域名访问，或者
  Access-Control-Allow-Origin: http://a.com //只允许所有域名访问

异步回调地狱

Promise
Async/await
sync 是“异步”的简写，而 await 可以认为是 async wait 的简写。所以应该很好理解 async 用于申明一个 function 是异步的，而 await 用于等待一个异步方法执行完成。

async function timeout() {
// 异步函数也就意味着该函数的执行不会阻塞后面代码的执行
　　return 'hello world';
}

Generator yield

JS的三大组成部分

JavaScript的三大组成部分是：

• ECMAScript：JavaScript的核心，描述了语言的基本语法和数据类型
• 文档对象模型（DOM）：DOM（文档对象模型）是 HTML 和 XML 的应用程序接口（API）。DOM 将把整个页面规划成由节点层级构成的文档。HTML 或 XML 页面的每个部分都是一个节点的衍生物。
• **浏览器对象模型（BOM）**对浏览器窗口进行访问和操作。例如弹出新的浏览器窗口，移动、改变和关闭浏览器窗口，提供详细的网络浏览器信息（navigator object），详细的页面信息（location object），详细的用户屏幕分辨率的信息 （screen object），对cookies的支持
  https://www.runoob.com/js/js-htmldom-elements.html

查找改变创建

var x=document.getElementById(“intro”);// id=“intro”
var x=document.getElementById(“main”); // id=“main”
var y=x.getElementsByTagName(“p”); // id=“main” 元素中的所有p
var x=document.getElementsByClassName(“intro”); // class=“intro”

document.write(Date());
document.getElementById(“p1”).innerHTML=“新文本!”;
document.getElementById(“image”).src=“landscape.jpg”;

document.getElementById(“p2”).style.color=“blue”;

<button type="button"
onclick="document.getElementById('id1').style.color='red'">
点我!</button>

document.getElementById(“myBtn”).addEventListener(“click”, displayDate);
element.removeEventListener(“mousemove”, myFunction);

var para = document.createElement(“p”);
var node = document.createTextNode(“这是一个新的段落。”);
para.appendChild(node);

• appendChild
  var element = document.getElementById(“div1”); //查找已存在的元素
  element.appendChild(para);
• insertBefore
  var element = document.getElementById(“div1”);
  var child = document.getElementById(“p1”);
  element.insertBefore(para, child);
• removeChild
  var parent = document.getElementById(“div1”);
  var child = document.getElementById(“p1”);
  parent.removeChild(child);
• replace加粗样式Child
  var parent = document.getElementById(“div1”);
  var child = document.getElementById(“p1”);
  parent.replaceChild(para, child);

事件冒泡或捕获

事件传递定义了元素事件触发的顺序。 如果你将 p元素插入到 div 元素中，用户点击 p>元素, 哪个元素的 “click” 事件先被触发呢？
在 冒泡 中，内部元素的事件会先被触发，然后再触发外部元素，即： p 元素的点击事件先触发，然后会触发 div元素的点击事件。
在 捕获 中，外部元素的事件会先被触发，然后才会触发内部元素的事件，即： div 元素的点击事件先触发 ，然后再触发 p元素的点击事件。
addEventListener(event, function, useCapture); 默认false 冒泡

jQuery语法

$(selector).action()

jQuery选择器

基于元素的id、类、属性、属性值等查找或选择

• 元素选择器 $(“p”)
• .class 选择器 $(".test")
• #id选择器 $("#test")

$("*") 选取所有元素
$(this) 选取当前 HTML 元素

jQuery事件方法

$(document).ready()方法允许我们在文档完全加载完后执行函数。这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码，即在 DOM 加载完成后才可以对 DOM 进行操作。如果在文档没有完全加载之前就运行函数，操作可能失败。
click() 方法是当按钮点击事件被触发时会调用一个函数。
dblclick() 方法触发 dblclick 事件，或规定当发生 dblclick 事件时运行的函数：
mouseenter()当鼠标指针穿过元素时，会发生 mouseenter 事件
mouseleave()当鼠标指针离开元素时，会发生 mouseleave 事件
当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件
当在元素上松开鼠标按钮时，会发生 mouseup 事件
hover()方法用于模拟光标悬停事件
当元素获得焦点时，发生 focus 事件
blur()当元素失去焦点时，发生 blur 事件

jQuery的隐藏和显示

$("#hide").click(function(){ $(“p”).hide();});
$("#show").click(function(){ $(“p”).show(); });
通过 jQuery，您可以使用 toggle() 方法来切换 hide() 和 show() 方法。

JQuery效果 – 淡入淡出

fadeIn()：
jQuery fadeIn() 用于淡入已隐藏的元素。
fadeOut()：
jQuery fadeOut() 方法用于淡出可见元素。
fadeToggle()：
jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。
如果元素已淡出，则 fadeToggle() 会向元素添加淡入效果。
如果元素已淡入，则 fadeToggle() 会向元素添加淡出效果。
fadeTo()：
jQuery fadeTo() 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）。
$(selector).fadeTo(speed,opacity,callback);

jQuery 滑动方法

jQuery slideDown()
jQuery slideUp()
jQuery slideToggle()

jQuery的Callback

Callback 函数在当前动画 100% 完成之后执行。

$("button").click(function(){ 
$("p").hide("slow",function(){ 
alert("段落现在被隐藏了"); 
}); 
});

jQuery的Callback

通过 jQuery，可以把动作/方法链接在一起。Chaining 允许我们在一条语句中运行多个 jQuery 方法（在相同的元素上）。

获取内容和属性

text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值
jQuery attr() 方法用于获取属性值
添加内容：
append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容
删除元素：
jQuery remove() 方法删除被选元素及其子元素。
jQuery empty() 方法删除被选元素的子元素。
操作CSS：
addClass() - 向被选元素添加一个或多个类
removeClass() - 从被选元素删除一个或多个类
toggleClass() - 对被选元素进行添加/删除类的切换操作 该方法对被选元素进行添加/删除类的切换操作
css() - 设置或返回样式属性 css() 方法设置或返回被选元素的一个或多个样式属性。

尺寸

jQuery遍历

祖先：父、祖父或曾祖父
parent() 方法返回被选元素的直接父元素。
parents() 方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素 ()。
parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素。
$(document).ready(function(){ $(“span”).parentsUntil(“div”); });
后代是子、孙、曾孙等等。
children() 方法返回被选元素的所有直接子元素。
find() 方法返回被选元素的后代元素，一路向下直到最后一个后代。
同胞拥有相同的父元素。
siblings() 方法返回被选元素的所有同胞元素。
next() 方法返回被选元素的下一个同胞元素。
nextAll() 方法返回被选元素的所有跟随的同胞元素。
nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素。

过滤
first() 方法返回被选元素的首个元素。
last() 方法返回被选元素的最后一个元素。
eq() 方法返回被选元素中带有指定索引号的元素。索引号从 0 开始，因此首个元素的索引号是 0 而不是 1。
filter() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回。
$(document).ready(function(){
$(“p”).filter(".url");
});
not() 方法返回不匹配标准的所有元素。

Ajax

jQuery load() 方法是简单但强大的 AJAX 方法。
load() 方法从服务器加载数据，并把返回的数据放入被选元素中。
$(selector).load(URL,data,callback);
必需的 URL 参数规定您希望加载的 URL。
可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。
可选的 callback 参数是 load() 方法完成后所执行的函数名称。
可选的 callback 参数规定当 load() 方法完成后所要允许的回调函数。回调函数可以设置不同的参数：
responseTxt - 包含调用成功时的结果内容
statusTXT - 包含调用的状态
xhr - 包含 XMLHttpRequest 对象
$(“button”).click(function(){
$("#div1").load(“demo_test.txt”,function(responseTxt,statusTxt,xhr){
if(statusTxt==“success”)
alert(“外部内容加载成功!”);
if(statusTxt==“error”)
alert("Error: “+xhr.status+”: "+xhr.statusText);
});
});
jQuery get() 和 post() 方法用于通过 HTTP GET 或 POST 请求从服务器请求数据。
GET - 从指定的资源请求数据
POST - 向指定的资源提交要处理的数据
GET 基本上用于从服务器获得（取回）数据。注释：GET 方法可能返回缓存数据。
POST 也可用于从服务器获取数据。不过，POST 方法不会缓存数据，并且常用于连同请求一起发送数据
$.get(URL,callback);
必需的 URL 参数规定您希望请求的 URL。
可选的 callback 参数是请求成功后所执行的函数名。
下面的例子使用 $.get() 方法从服务器上的一个文件中取回数据：
$(“button”).click(function(){
$.get(“demo_test.php”,function(data,status){
alert("数据: " + data + "\n状态: " + status);
});
});
$.post(URL,data,callback);
必需的 URL 参数规定您希望请求的 URL。
可选的 data 参数规定连同请求发送的数据。
可选的 callback 参数是请求成功后所执行的函数名。

noConflict()

noConflict() 方法会释放对 $ 标识符的控制，这样其他脚本就可以使用它了。
仍然可以通过全名替代简写的方式来使用 jQuery
var jq = $.noConflict();
jq(document).ready(function(){
jq(“button”).click(function(){
jq(“p”).text(“jQuery 仍然在工作!”);
});
});

JSONP

Jsonp(JSON with Padding) 是 json 的一种"使用模式"，可以让网页从别的域名（网站）那获取资料，即跨域读取数据。
使用 JSON.parse() 方法将数据转换为 JavaScript 对象
使用 JSON.stringify() 方法将 JavaScript 对象转换为字符串

防抖和节流

在进行窗口的resize、scroll，输入框内容校验等操作时，如果事件处理函数调用的频率无限制，会加重浏览器的负担，导致用户体验非常糟糕。此时我们可以采用debounce（防抖）和throttle（节流）的方式来减少调用频率，同时又不影响实际效果。

• 函数防抖
  所谓防抖，就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间
  非立即执行版的意思是触发事件后函数不会立即执行，而是在 n 秒后执行，如果在 n 秒内又触发了事件，则会重新计算函数执行时间
  立即执行版的意思是触发事件后函数会立即执行，然后 n 秒内不触发事件才能继续执行函数的效果。
• 函数节流
  所谓节流，就是指连续触发事件但是在 n 秒中只执行一次函数。节流会稀释函数的执行频率。
  对于节流，一般有两种方式可以实现，分别是时间戳版和定时器版。