JS面试总结

ES6新特性

let变量，const常量。

let和const都是块级做用域。
    const定义后不能修改常量。
    let和const不存在变量提高
    暂存死区
    const一旦声明必须赋值,不能使用null占位

字符串

箭头函数

不须要 function 关键字来建立函数  
    省略 return 关键字  
    继承当前上下文的 this 关键字

解构

展开运算符

import和export
import导入模块、export导出模块
class类
Promise

promise

1.Promise 是一个 构造函数，是一个异步操做，它有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。一旦状态改变，就不会再改变。
2.Promise构造函数接受一个函数做为参数，该函数的两个参数分别是resolve（成功以后的回调函数）和reject （失败以后的回调函数）
3.在 Promise 构造函数的 Prototype 属性上，有一个 .then() 方法，也就是说，只要是 Promise 构造函数建立的实例，均可以访问到 .then() 方法
4.Promise还有 .all方法，它能够将多个 Promise 实例，包装成一个新的 Promise 实例。
5.promise主要是一个异步转同步这样同样函数，他是把异步操做用同步的方式写出来

async,await函数

1. 函数前面多了一个aync关键字。await关键字只能用在aync定义的函数内。async函数会隐式地返回一个promise，该promise的reosolve值就是函数return的值。
2. 不能在最外层代码中使用await，由于不在async函数内

使用async函数可让代码简洁不少，不须要像Promise同样须要些then，不须要写匿名函数处理Promise的resolve值，也不须要定义多余的data变量，还避免了嵌套代码。

跨域、怎么解决跨域

出于浏览器的同源策略限制，请求url的协议、域名、端口三者之间任意一个与当前页面url不一样即为跨域。
解决方法：jsonp、CORS、反向代理、跨文档通讯 API：window.postMessage()、设置document.domain解决没法读取非同源网页的 Cookie问题。
反向代理配置：

缓存

cookie、localStorage、sessionStorage
都在本地（浏览器端）存储数据
localStorage是永久存储，除非手动删除。
sessionStorage当会话结束（当前页面关闭的时候，自动销毁）
cookie的数据会在每一次发送http请求的时候，同时发送给服务器而localStorage、sessionStorage不会。

原型、原型链

原型：

• 全部引用类型都有一个__proto__(隐式原型)属性，属性值是一个普通的对象
• 全部函数都有一个prototype(原型)属性，属性值是一个普通的对象
• 全部引用类型的__proto__属性指向它构造函数的prototype

原型链：

• 原型链是原型对象建立过程的历史记录，当访问一个对象的某个属性时，会先在这个对象自己属性上查找，若是没有找到，则会去它的__proto__隐式原型上查找，即它的构造函数的prototype，若是尚未找到就会再在构造函数的prototype的__proto__中查找，这样一层一层向上查找就会造成一个链式结构

JavaScript的继承

• ES6 class 继承

  • class继承其实是构造函数的继承和原型链继承的综合封装

• 构造函数继承

  • 构造函数与构造函数之间的继承，实质是改变函数的this指向，利用blind

• 原型继承

  • 利用函数的prototype相等去实现;

null和undefined的区别

undefined表示"缺乏值"，就是此处应该有一个值，可是尚未定义。
变量被声明了，但没有赋值时，就等于undefined。
调用函数时，应该提供的参数没有提供，该参数等于undefined。
对象没有赋值的属性，该属性的值为undefined。
函数没有返回值时，默认返回undefined。
null表示"没有对象"，即该处不该该有值。
做为函数的参数，表示该函数的参数不是对象。
做为对象原型链的终点。

js延迟加载的方式有哪些

defer和async、动态建立DOM方式（建立script，插入到DOM中，加载完毕后callBack）、按需异步载入js

call，apply，bind

相同点

都用来改变this指向，第一个参数都是this指向的对象(指定运行函数做用域)，均可以利用后面的参数传参

不一样点
1.call() 方法和apply() 方法做用相同, 区别在于接收参数的方式不一样, call() 须要列举全部传入的全部参数
2.apply第二个是参数数组,Array实例，arguments对象
3.bind() 方法和前二者不一样在于： bind() 方法会返回执行上下文被改变的函数而不会当即执行，而前二者是直接执行该函数，他的参数和call()相同

---

1. call() 方法

   • 是一个属于函数的方法
   • 语法：
     函数名.call()
     对象.函数名.call()

   • 第一个参数： 就是你要改变的 this 指向

     • 你写的是谁，那么这个函数里面的 this 就是谁
   • 从第二个参数开始，依次是给函数传递的参数

2. apply() 方法

   • 是一个属于函数的方法
   • 语法：
     函数名.apply()
     对象.函数名.apply()

   • 第一个参数： 就是你要改变的 this 指向

     • 你写的是谁，那么这个函数里面的 this 就是谁

   • 第二个参数： 是一个数组或者伪数组

     • 数组或者伪数组里面的每一项，依次是给函数传递的参数

3. bind()

   • 是一个属于函数的方法
   • 语法：
     函数名.bind()
     对象.函数名.bind()
   • 返回值： 是已经改变好的 this 指向的新函数

   • 第一个参数： 就是你要改变的 this 指向

     • 你写的是谁，那么这个函数里面的 this 就是谁
     • bind() 不会把函数执行，而是返回一个新的函数，这个新的函数内部的 this 是改变好的

   • 给函数传递参数，有两个方式

     • bind() 的第二个参数开始，依次给函数传递参数
     • 再调用返回的那个函数的时候，直接传参
     • 当你再两个位置都写参数的时候，以 bind 第二个参数开始的哪些内容为准
   • 按个方法的第一个参数都是改变 this 指向
   • 这个参数能够不写或者写null
   • 你不写或者写 null 的时候，函数内部的 this 都是 window
4. call和apply对函数是直接调用，bind返回的还是函数，须要再次调用

闭包

能够访问另外一个函数做用域中变量的函数

• 特性

  • 函数内嵌套函数
  • 内部函数能够引用外层的参数和变量
  • 参数和变量不会被垃圾回收机制回收

缺点：会使函数中的变量保存在内存中，内存消耗很大，致使内存泄漏。
解决方法：在退出函数前，将不适用的局部函数变量删除。

javascript对象的几种建立方式

1，工厂模式
2，构造函数模式
3，原型模式
4，混合构造函数和原型模式
5，动态原型模式
6，寄生构造函数模式
7，稳妥构造函数模式

深拷贝与浅拷贝

深拷贝和浅拷贝最根本的区别在因而否真正获取一个对象的复制实体，而不是引用。
假设B复制了A，修改A的时候，看B是否发生变化：
若是B跟着也变了，说明是浅拷贝，拿人手短！（修改堆内存中的同一个值）
若是B没有改变，说明是深拷贝，自食其力！（修改堆内存中的不一样的值） 
浅拷贝（shallowCopy）只是增长了一个指针指向已存在的内存地址，
深拷贝（deepCopy）是增长了一个指针而且申请了一个新的内存，使这个增长的指针指向这个新的内存，
使用深拷贝的状况下，释放内存的时候不会由于出现浅拷贝时释放同一个内存的错误。
浅复制：仅仅是指向被复制的内存地址，若是原地址发生改变，那么浅复制出来的对象也会相应的改变。
深复制：在计算机中开辟一块新的内存地址用于存放复制的对象。

防抖节流

函数防抖（debounce）是指在必定时间内，在动做被连续频繁触发的状况下，动做只会被执行一次，也就是说当调用动做过n毫秒后，才会执行该动做，若在这n毫秒内又调用此动做则将从新计算执行时间，因此短期内的连续动做永远只会触发一次，

• search搜索联想，用户在不断输入值时，用防抖来节约请求资源。

函数节流（throttle）是指必定时间内执行的操做只执行一次，也就是说即预先设定一个执行周期，当调用动做的时刻大于等于执行周期则执行该动做，而后进入下一个新周期，

• 鼠标不断点击触发，mousedown(单位时间内只触发一次)
• 监听滚动事件，好比是否滑到底部自动加载更多，用throttle来判断

函数防抖事件触发后延迟执行动做，适用于频繁触发的事件，函数防抖的实现关键是对setTimeout函数的应用函数节流在固定时间内只触发一次操做，在周期内新事件触发不执行动做，实现关键是flag和setTimeout的应用
区别：函数防抖是将一个周期内的屡次操做经过重置计时器的方式合并到一次操做中，而函数节流是一个周期内只容许只执行一次操做，多余的操做将直接return false。

懒加载

懒加载的主要目的就是做为服务器前端的优化，减小请求次数或者延迟请求数。
实现原理:先加载一部分数据，当触发某个条件时利用异步(async)加载剩余的数据，新获得的数据不会影响原有数据的显示，同时最大幅度的减小服务器端资源耗用。
实现方式：

• 1.第一种是纯粹的延迟加载，使用setTimeOut和setInterval进行加载延迟。
• 2.第二种是条件加载，符合某种条件，或是出发某些事件才开始异步加载。
• 3.第三种是可视区加载，仅记载用户的可视区域，这个主要监控滚动条来实现，通常会距用户看到某些图片前的一段距离时开始进行记载，这样就可保证用户拉下时正好能够看到加载完毕后的图片或是内容。

图片懒加载

在图片没有进入可视区域时，先不给<img>的src赋值，这样浏览器就不会发送请求了，等到图片进入可视区域再给src赋值。

get和post区别

Es6对象新方法

Object.freeze()

Object.is()
它用来比较俩个值是否严格相等,与严格运算符(===) 的行为基本一致。

Object.assign()
该方法用于对象合并,将源对象(source)的全部可枚举属性,复制到target目标对象里

JS字符串经常使用方法

indexOf(): 返回某个指定的子字符串在字符串中第一次出现的位置。
lastIndexOf(): 返回某个指定的子字符串在字符串中最后出现的位置。
split(): 把字符串分割成字符串数组。
match(): 返回全部查找的关键字内容的数组。
substr(): 返回从指定下标开始指定长度的的子字符串。

js中数组经常使用方法

Array.map()
将数组中的每一个元素调用一个提供的函数，结果做为一个新的数组返回，并无改变原来的数组
Array.forEach()
将数组中的每一个元素执行传进提供的函数，没有返回值
Array.filter()
将全部元素进行判断，将知足条件的元素做为一个新的数组返回
Array.push()
在数组的后面添加新加元素，此方法改变了数组的长度
Array.pop()
在数组后面删除最后一个元素，并返回数组，此方法改变了数组的长度
Array.shift()
在数组后面删除第一个元素，并返回数组，此方法改变了数组的长度
Array.toString()
此方法将数组转化为字符串
Array.splice(开始位置， 删除的个数，元素)
万能方法，能够实现增删改

同步和异步的区别

同步就至关因而 当客户端发送请求给服务端，在等待服务端响应的请求时，客户端不作其余的事情。当服务端作完了才返回到客户端。这样的话客户端须要一直等待。用户使用起来会有不友好。

异步就是，当客户端发送给服务端请求时，在等待服务端响应的时候，客户端能够作其余的事情，这样节约了时间，提升了效率。

遍历数组 对象

for...in 遍历对象
forEach 遍历数组
for...of 遍历数组 还支持大多数数组对象

hash模式和history模式

hash后面有#号history没有
在history以前基本都是使用hash来实现浏览器的进退
history怕刷新，刷新后会去请求服务器，若是服务器没有响应的话，容易刷出404。

页面性能优化

js css压缩，图片大小的控制，标签的优化，使用缓存，文件合并。