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压缩，图片大小的控制，标签的优化，使用缓存，文件合并。