第1节 原生js面试题#

摘讲目录

14 什么是工厂模式，有什么优缺点？ *

22 原型 ，原型链，继承方式 ***

32 h5新特性 ***

35 队列和栈 *

50 手写防抖、节流、防抖、节流的区别 ***

01 map和foreach的区别#

1. 定义#

   1. foreEach()方法: 执行每个元素提供的函数。
   2. map()方法: 创建一个由调用数组中的每个元素执行提供的函数获得的新数组。

2. 相同点#

   1. 都是数组的遍历
   2. 无法终止或跳出forEach()循环，除非抛出异常；

3. 区别#

   1. forEach()方法不会返回执行结果，而是undefined,允许callback更改原始数组的元素。
   2. 而map()方法将获得新的数组并返回。
   3. forEach()执行速度 < map()执行速度JS中Map和ForEach的区别 - 简书

02 解释下JavaScript中this如何工作#

或问: 谈谈this的指向 第一准则: this永远指向函数运行时的对象，而不是函数创建时的对象。

1. 谁调用普通函数，this就是谁。
2. 匿名函数或不在任何对象中的函数指向window 。
3. 如果是call，apply,bind，指定的this谁就是谁。
4. 如果不需要构造函数，new操作符而直接调用，那即this指向window。用new操作符生成对象实例后，this指向新生成的对象。
5. 箭头函数的this, 因为箭头函数没有绑定this， 它将捕获其所在(即定义位置)上下文this值， 作为自己的this值

前端面试题 | JS部分(附带答案)_axgrfetia063590468的博客-CSDN博客http://docs.huruqing.cn/JavaScript/02.html#_2-谈谈this的指向

03 异步线程、轮询机制、宏任务微任务#

js异步和事件轮询 (event loop) 机制_毅江的博客-CSDN博客js 宏任务和微任务 - 栴檀 - 博客园详解JavaScript中的Event Loop(事件循环)机制 - 知乎

04 阻止冒泡 **#

w3c方法是event.stopPropagation() IE中方法是window.event.cancelBubble = true

05 防止默认事件 **#

event.preventDefault() return false; ///写在函数的最后一句

06 怎样判断array 和 object ***#

使用数组和对象typeof，结果都是"object"

1. 使用instanceof进行判断，A instanceof B即对象A是否构造了构造函数B，即返回true, 不是即返回false.

1. 在typeof上进行enhancement, typeof数组和对象返回都是object, 但数组长度超过0及0的整数，object的长度为undefined

2. 利用Object.prototype.toString.call()该方法将变量转换为代表其类型string

3. Array.isArray()

4. 利用constructor判断属性

JS如何判断是数组还是对象 - 简书

07 隐式转换数据类型 **#

做项目经常涉及到这三种转换

1. 其它类型的转数： 详细举例
2. 其他类型的转布尔： 详细举例
3. 其它类型的转字符串： 详细举例

JS 隐式转换类型 - 简书

08 说说盒子模型#

1. 定义#

   1. 所有HTML元素可以看作是盒子CSS中，"box model"这个术语用于设计和布局。
   2. CSS盒子模型本质上是一个盒子，包装周围HTML元素包括:外距（margin）、边框（border）、内边距（padding）、实际内容（content）四个属性。

2. 区别#

   1. 标准盒模型：
      1. 盒子的实际内容（content）的width/height=我们设置的width/height;
      2. 盒子的总宽度/高度=width/height padding border margin
   2. IE盒子模型(怪异盒模型)
      1. 浏览器的 width 属性不是内容的宽度，而是内容、内边距和边框宽度的总和；
      2. 盒子的（content）宽度 内边距padding 边框border宽度 = 我们设置的width(height)，
      3. 盒子的总宽度/高度 = width/height margin = 宽度/高度的内容区 padding border margin。

3. CSS可指定盒子模型类型#3

   box-sizing: border-box; // 使用怪盒模型 box-sizing: content-box;// 默认选项， 应用标准盒模型

   盒子模型(标准盒模型、怪异盒模型)和前端面试 css3指定盒子模型类型box-sizing属性_慕课手记

09 算法#

一个数组0000001111111111111这样，你怎样才能找到第一个1，最底层？js原生写法， 例如，当第一个数字与第二个数字进行比较时，当第二个大于第一个元素时，就会发现第一个1。有没有更高效的写作方法？

使用循环或递归来实现

10 对象的key是数字吗？ *#

可以是数字，object对应的key没有限制，但如果是数字，取值时不能使用英文句号(.),只能用[]取值。

11 async await 和promise和generator有什么区别#

1. 相同点:#

   这些都可以解决异步操作的地狱回调问题

2. async await 和promise对象差异：#

   1. async和promise都是异步法
   2. 区别是async结果是promise对象，async是promise的终结版。
   3. await只能在async中使用，await阻塞意味着暂停。您共同调用两个接口。第一个执行后，不输出结果。您必须等待第二个接口执行后才能返回这两个结果。将异步操作转化为同步操作是一种做法

3. async await和generator：#

   1. async是Generator的语法糖 ，也就是说，async是对generator的实现，而generator代码更复杂。
   2. generator 除解决回调区域问题外，还可作为迭代器使用。generator 语法一般用于语法redux-saga redux-saga 一般在umi或dva(一个集成redux、redux-saga、react-router-redux、react-router使用框架

12 手写promise ***#

1. promise的用法#

  var promiseObj = new Promise(function (resolve, reject) {             let offer =false;
            setTimeout(() => {
                if (offer) {
                    resolve({
                        msg: '上班去',
                        company: 'xxxx公司'
                    })
                } else {
                    reject({
                        msg: '继续面试'
                    })
                }
            },1000);
        });

        

        // 获取promiseObj保存的数据
        promiseObj.then(function(res){
            console.log('成功的信息:',res);
        },function(err){
            console.log('失败的信息:',err);
        })

1. 以下是一个简单的promise实现, 想更深一步研究, 请看末尾的链接#

原文地址: 手写Promise - 实现一个基础的Promise - SegmentFault 思否

13 promise.all作用  ***#

1. Promise.all(iterable) 方法返回一个 Promise 实例，此实例在 iterable 参数内所有的 promise 都“完成（resolved）”或 参数中不包含 promise 时回调完成（resolve）；如果参数中  promise 有一个失败（rejected），此实例回调失败（reject）， 失败的原因是第一个失败 promise 的结果。
2. 它通常在启动多个异步任务并发运行并为其结果创建承诺之后使用，以便人们可以等待所有任务完成。
3. 通俗的说法：解决promise的同步调用问题，可以将多个异步操作转为同步操作，缺点：只要有一个promise返回错误，那么后面的promise都不会再执行

const promise1 = Promise.resolve(3);
const promise2 = 42;
const promise3 = new Promise((resolve, reject) => {
  setTimeout(resolve, 100, 'foo');
});
Promise.all([promise1, promise2, promise3]).then((values) => {
  console.log(values);
});

14 什么是工厂模式，有什么优缺点   *#

1. 定义#

   1. 工厂模式是一种设计模式，目的是为了创建对象，它通常在类或类的静态方法中实现，
   2. 有以下目的：当创建相似对象是执行重复操作
   3. 当编译时，不知道具体类型的情况下，为工厂客户提供一个创建对象的接口

2. 优缺点#

   优点： 写好了工厂方法后，只要原料足够，我们可以无限次的创建新的对象 缺点：

   1. 没有使用 new , 而是直接调用方法进行创建
   2. 每个对象都有自己的函数(像下面的例子中, 每创建一个对象, 就会创建两个函数, 若创建10个对象,就需要创建20个函数, 而这些函数都一模一样的, 完全没必要)，浪费资源

//使用工厂方式创建一个对象
function createCat(name, sex) {
    //1.原料
    var obj = new Object();
    //2.加工  -- 对属性进行赋值
    obj.name = name;
    obj.sex = sex;
    //3.方法
    obj.showName = function () {
      console.log("小猫名称：" + this.name);
    };
    obj.showSex = function () {
      console.log("小猫性别：" + this.sex);
    };
    //4.加工结束,--输出返回
    return obj;
  }
  //工厂模式的使用
  var cat1 = createCat("小花", "母的");
  //调用工厂里的方法
  cat1.showName();
  cat1.showSex();
  var cat2 = createCat("罗小黑", "公的");
  //调用工厂里的方法
  cat2.showName();
  cat2.showSex();

接触过哪些设计模式：  工厂模式 、单例模式（数据库连接）、发布-订阅模式观也叫察者模式（双向绑定原理）、mvc模式、mvvm模式

// 发布订阅模式
1. 定义了对象间的一种一对多的依赖关系，当一个对象的状态发 生改变时，所有依赖于它的对象都将得到通知
2. JS中的事件就是经典的发布-订阅模式的实现(观察者甲和乙都订阅了body的点击事件, 当事件发布(被点击)时,它们都收到了通知

// 订阅
document.body.addEventListener('click', observer1, false);
document.body.addEventListener('click', observer2, false);

function observer1() {
  console.log('我是观察者甲');
}
function observer2() {
  console.log('我是观察者乙');
}

// 发布
document.body.click(); // click1  click2

js常见的十五种设计模式

15 图片/文件夹上传到后台是什么类型？ *#

图片上传后台有三种格式：

1. file格式 (创建formData来完成file上传)#

var formData = new FormData();
$.each($("#imgfile")[0].files, function (i, file) {
  formData.set("idcard", file); //idcard  字段 根据自己后端接口定
});
//processData: false, contentType: false,多用来处理异步上传二进制文件。
that.$indicator.open();
$.ajax({
  url: "http://wjtest.jecinfo.cn:9090/indentity/check",
  type: "POST",
  data: formData, // 上传formdata封装的数据
    ....
});

1. base64格式#

1. 模仿块级作用域 (ES5 中没有块级作用域）

1. 实现 JS 的模块

使用闭包的注意点：

1. 由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题
2. 闭包会在父函数外部，改变父函数内部变量的值。所以，如果你把父函数当作对象（object）使用，把闭包当作它的公用方法（Public Method），把内部变量当作它的私有属性（private value），这时一定要小心，不要随便改变父函数内部变量的值。 js之闭包是如何产生的？

21 什么是内存泄漏，都什么情况容易产生内存泄漏  **#

1. 内存泄漏:#

   即为变量内容持续占用内存空间，不释放，垃圾回收机制也没有将该内存回收的情况

2. 内容泄露的原因:#

   1. 死循环
   2. 定时器没有清除
   3. 绑定的事件没有解除
   4. 递归调用没有结束条件

3. 主要存在内存泄漏的问题点:#

   1. BOM  DOM对象泄漏
   2. scipt中存在对BOM  DOM对象的引用
   3. javaScript对象泄漏
   4. 闭包函数导致的泄漏 主要关注的代码点
   5. DOM中的addEventLisner 函数及派生的事件监听， 比如Jquery 中的on 函数， vue 组件实例的 $on 函数，第三方库中的初始化函数
   6. BOM对象的事件监听，比如webSocket的监听事件
   7. 避免不必要的函数引用
   8. 如果是要render函数，避免在html标签中DOM  BOM事件

22 原型 ，原型链，继承的方式 ***#

1. 原型#

   1. 每一个构造函数都有一个属性prototype, 这个prototype属性指向了一个对象, 而这个对象正是用该构造函数创建出来的实例的原型, 而实例都会从原型继承属性, (你可以把原型理解成实例的"父亲", 括号内容不用背).

   2. 每一个原型都有一个属性constructor, 指向了该构造函数

   3. 每个实例都有一个内部指针__proto__指向了原型

2. 原型链,背诵#

   1. 每个实例对象（object）都有一个私有属性（称之为 __proto__ ）指向它的构造函数的原型对象（prototype）

   2. 该原型对象也有一个自己的原型对象（__proto__）

   3. 层层向上直到一个对象的原型对象为 null根据定义，null 没有原型，并作为这个原型链中的最后一个环节。

   4. 几乎所有 JavaScript 中的对象都是位于原型链顶端的Object的实例 (Object.prototype就是终极原型)

   5. 结论: 当我们访问一个实例的属性时, 会先查找该实例由没有这个属性, 没有的话就会到它的原型去查找, 还没有就会一层一层的往上查找, 一直找到Object的原型为止, 有就返回, 没有就返回undefined.

       // 实例讲解
      // 上面的第1点,第2点,第3点
      let p1 = cat.__proto__;
      let p2 = p1.__proto__;
      let p3 = p2.__proto__; // null, p2是就是原型链的最后一环
      // 第4点
      cat.__proto__.__proto__ === Object.prototype;
      let arr = [1,2,3];
      arr.__proto__.__proto__ === Object.prototype;
      let date = new Date();
      date.__proto__.__proto__ === Object.prototype;
      let obj = {a:2};  // obj的构造函数就是Object本身,所以
      obj.__proto__ === Object.prototype;
      

3. 原型链继承#

   让一个构造函数的prototyp等于另外一个构造函数创建的实例就实现了原型链继承

4. 其他继承方法(了解)#

   1. 原型链继承

   2. 借用构造函数继承

   3. 组合式继承

   4. 寄生式继承

   5. 寄生组合式继承

   6. es6 class继承(理解)

      1. 使用extends进行继承

      2. 子类使用super关键字

         子类必须在constructor方法中调用super方法，否则新建实例时会报错。这是因为子类自己的this对象，必须先通过父类的构造函数完成塑造，得到与父类同样的实例属性和方法，然后再对其进行加工，加上子类自己的实例属性和方法。如果不调用super方法，子类就得不到this对象。

23 js异步轮询机制#

1. 所有同步任务都在主线程上执行，形成一个执行栈（execution context stack）。
2. 主线程之外，还存在一个"任务队列"（task queue）。只要异步任务有了运行结果，就在"任务队列"之中放置一个事件。
3. 一旦"执行栈"中的所有同步任务执行完毕，系统就会读取"任务队列"，看看里面有哪些事件。那些对应的异步任务，于是结束等待状态，进入执行栈，开始执行。
4. 主线程不断重复上面的第三步。只要主线程空了，就会去读取"任务队列"，这就是JavaScript的运行机制。这个过程会不断重复。
5. "任务队列"中的事件，除了IO设备的事件以外，还包括一些用户产生的事件（比如鼠标点击、页面滚动等等）。只要指定过回调函数，这些事件发生时就会进入"任务队列"，等待主线程读取。
6. 事件循环（event loop）

主线程从"任务队列"中读取事件，这个过程是循环不断的，所以整个的这种运行机制又称为Event Loop（事件循环）。

24 使用node.js 创建本地服务器 *#

25 Git常用命令 *#

1. git init 初始化 *
2. git clone 克隆代码库 *
3. git config 配置
4. git add 增加文件到暂存区 *
5. git commit 提交暂存区到仓库 *
6. git branch 名称 新建分支 *
7. git checkout 切换分支 *
8. git merge 合并分支 *
9. git branch -d 删除分支 *
10. git tag 打tag 包 *
11. git status 查看状态 *
12. git log 查看日志 *
13. git diff 查看暂存区和工作区差异
14. git fetch 下载远程仓库的变动 *
15. git pull 取回远程仓库变化，并与本地分支合并 *
16. git push 上传本地指定分支到远程仓库 *

26 跨域的解决方案   *#

1. 定义#

   • 知其然知其所以然，在说跨域方法之前，我们先了解下什么叫跨域，浏览器有同源策略，只有当“协议”、“域名”、“端口号”都相同时，才能称之为是同源，其中有一个不同，即是跨域。
   • 那么同源策略的作用是什么呢？同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制。
   • 那么我们又为什么需要跨域呢？一是前端和服务器分开部署，接口请求需要跨域，二是我们可能会加载其它网站的页面作为 iframe 内嵌。

2. 跨域的几种方式#

   1. jsonp
      • jsonp缺点: 只能是get方式不能是post方式
      • jsonp原理：script标签的src属性可以跨域
   2. proxy代理, 下面这些这些都是属性使用proxy代理进行跨域的例子
      • vue(实际是webpack)的devServer的proxy设置(只能是打包前使用，打包后需要后台配置跨域)
      • nginx反向代理
      • node使用中间件设置跨域
   3. 后台头部设置  Access-Control-Allow-Origin  ，cors
   4. 其他 方式： a. document.domain + iframe      (只有在主域相同的时候才能使用该方法) b. location.hash + iframe c. window.name + iframe d. postMessage（HTML5中的XMLHttpRequest Level 2中的API） e. web socket web sockets是一种浏览器的API，它的目标是在一个单独的持久连接上提供全双工、双向通信。

27 for循环定时器打印产生问题，怎么解决 **#

打印结果为5个6；

1. 原因是：js是单线程，有任务队列，任务队列分为两种，同步任务和异步任务。
2. 同步任务指的是，在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务；
3. 异步任务指的是，不进入主线程、而进入"任务队列"（task queue）的任务，只有"任务队列"通知主线程，某个异步任务可以执行了，该任务才会进入主线程执行。
4. 任务执行顺序: 所以循环是同步任务先执行，当执行完之后，当setTimeout的异步操作准备好后，通知主线程，主线程将其从异步队列中取出来，再执行，所以当循环完成时，i的值位6，setTimeout再执行，打印5个6

28 http协议详解   http请求方式有   http响应状态码   *#

1. http 特点：#

   1. 支持客户/服务器模式。
   2. 简单快速：。
   3. 灵活：
   4. 无连接：
   5. 无状态：

2. http请求由三部分组成，分别是：请求行、消息报头、请求正文 请求方法（所有方法全为大写）有多种，各个方法的解释如下： GET     请求获取Request-URI所标识的资源 POST    在Request-URI所标识的资源后附加新的数据 HEAD    请求获取由Request-URI所标识的资源的响应消息报头 PUT     请求服务器存储一个资源，并用Request-URI作为其标识 DELETE  请求服务器删除Request-URI所标识的资源 TRACE   请求服务器回送收到的请求信息，主要用于测试或诊断 CONNECT 保留将来使用 OPTIONS 请求查询服务器的性能，或者查询与资源相关的选项和需求

3. 在接收和解释请求消息后，服务器返回一个HTTP响应消息。#

   HTTP响应也是由三个部分组成，分别是：状态行、消息报头、响应正文 3xx：重定向--要完成请求必须进行更进一步的操作 4xx：客户端错误--请求有语法错误或请求无法实现 5xx：服务器端错误--服务器未能实现合法的请求

   301 永久移动，请求的资源被永久的移动到新url，返回信息会包括新的url。浏览器会自动定向到新url 302 临时移动，资源只是临时被移动，客户端赢继续使用原有url 304 未修改，所请求的资源未修改，服务器返回此状态码是=时，不会返回任何资源，客户端通常会缓存访问过的资源，通过提供一个头信息指出客户端希望只返回在指定日期之后修改的资源

   400 Bad Request  //客户端请求有语法错误，不能被服务器所理解，解决方法：修改请求的参数及语法 401 Unauthorized //请求未经授权，这个状态代码必须和WWW-Authenticate报头域一起使用  ， 解决方式：即没有启用任何认证方式，只需要在IIS Manager里面启用需要的认证方式即可。 即被Authorization Rule阻挡，则需要分析这个authorization rule是否是否必须来决定对他的更改。 403 Forbidden  //服务器收到请求，但是拒绝提供服务　　1. 你的IP被列入黑名单。 　　2、你在一定时间内过多地访问此网站(一般是用采集程序)，被防火墙拒绝访问了。 　　3、网站域名解析到了空间，但空间未绑定此域名。 　　4、你的网页脚本文件在当前目录下没有执行权限。 　　6、以http方式访问需要ssl连接的网址。 　　7、浏览器不支持SSL 128时访问SSL 128的连接。 　　8、在身份验证的过程中输入了错误的密码。

   ​ 解决方式:

   1、重建dns缓存,对于一些常规的403 forbidden错误，马海祥建议大家首先要尝试的就是重建dns缓存，在运行中输入	cmd，然后输入ipconfig /flushdns即可。如果不行的话，就需要在hosts文件里把主页解析一下了。
   2、修改文件夹安全属性
   3、关于apache导致的403 forbidden错误，需设置Apache的配置文件。
   4、关于HawkHost空间出现403 Forbidden错误需设置htaccess文件。
   

   404 Not Found  //请求资源不存在，eg：输入了错误的URL  解决办法：输入正确的url地址 405 请求方式不对 ,比如原本需要post方式请求的，你写了get方式请求

29 一个页面从发送http请求到渲染页面的全过程（http事务流程）***#

1. 域名解析 --> 2.发起TCP的3次握手 --> 3.建立TCP连接后发起http请求 --> 4.服务器响应http请求，浏览器得到html代码 --> 5.浏览器解析html代码，并请求html代码中的资源（如js、css、图片等） --> 6.浏览器对页面进行渲染呈现给用户 从输入URL到页面加载的全过程 - 小火柴的蓝色理想 - 博客园

30.1 tcp和udp的区别 *#

TCP与UDP区别总结：

1. TCP面向连接（如打电话要先拨号建立连接）;UDP是无连接的，即发送数据之前不需要建立连接

2. TCP提供可靠的服务。也就是说，通过TCP连接传送的数据，无差错，不丢失，不重复，且按序到达;UDP尽最大努力交付，即不保证可靠交付

3. TCP面向字节流，实际上是TCP把数据看成一连串无结构的字节流;UDP是面向报文的UDP没有拥塞控制，因此网络出现拥塞不会使源主机的发送速率降低（对实时应用很有用，如IP电话，实时视频会议等）

4. 每一条TCP连接只能是点到点的;UDP支持一对一，一对多，多对一和多对多的交互通信

5. TCP首部开销20字节;UDP的首部开销小，只有8个字节6、TCP的逻辑通信信道是全双工的可靠信道，UDP则是不可靠信道

30.2 什么是长连接 *#

在HTTP/1.0中默认使用短连接。也就是说，客户端和服务器每进行一次HTTP操作，就建立一次连接，任务结束就中断连接。 当客户端浏览器访问的某个HTML或其他类型的Web页中包含有其他的Web资源（如JavaScript文件、图像文件、CSS文件等）， 每遇到这样一个Web资源，浏览器就会重新建立一个HTTP会话。 而从HTTP/1.1起，默认使用长连接，用以保持连接特性。使用长连接的HTTP协议，会在响应头加入这行代码： Connection:keep-alive 在使用长连接的情况下，当一个网页打开完成后，客户端和服务器之间用于传输HTTP数据的TCP连接不会关闭，客户端再次访问这个服务器时 ，会继续使用这一条已经建立的连接。Keep-Alive不会永久保持连接，它有一个保持时间，可以在不同的服务器软件（如Apache）中设定这个 时间。实现长连接需要客户端和服务端都支持长连接。

31 ajax是同步还是异步，ajax的流程  *#

ajax是异步的， 流程： (1)创建XMLHttpRequest对象,也就是创建一个异步调用对象. (2)创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息 (3)设置响应HTTP请求状态变化的函数. (4)发送HTTP请求 .(sned) (5)获取异步调用返回的数据.(onreadystatechange) (6)使用JavaScript和DOM实现局部刷新.

32 h5新特性 ***#

1. 语义化标签#

2. Canvas绘图  ***#

3. SVG绘图#

4. 地理定位  *#

   可以使用百度地图, 腾讯地图或者高德地图提交的公共api完成地图地位和地图绘制

5. 拖放API  *#

   - draggable="true" 讲需要被拖放的数据加上此属性
   - setData()保存数据
   - drag  ondrag  当拖动元素或选中的文本时触发。
   - dragend ondragend 当拖拽操作结束时触发 (比如松开鼠标按键或敲“Esc”键). (见结束拖拽)
   - dragenter ondragenter 当拖动元素或选中的文本到一个可释放目标时触发（见 指定释放目标）。
   - dragexit  ondragexit  当元素变得不再是拖动操作的选中目标时触发。
   - dragleave ondragleave 当拖动元素或选中的文本离开一个可释放目标时触发。
   - dragover  ondragover  当元素或选中的文本被拖到一个可释放目标上时触发（每100毫秒触发一次）。
   - dragstart ondragstart 当用户开始拖动一个元素或选中的文本时触发（见开始拖动操作）。
   - drop  ondrop  当元素或选中的文本在可释放目标上被释放时触发（见执行释放）。
   

   // 拖放例子
   
   
   
   
       
   
   
   
       
   请把 W3School 的图片拖放到矩形中：
       
    
   
       
   
           
       
   
   
   
   

6. Web Storage   * (浏览器缓存)#

   *1.特性 *Cookie* 一般由服务器生成，可设置失效时间，（设置过期时间是小于当前时间）。 如果在浏览器端生成Cookie，默认是关闭浏览器后失效；大小 4K左右 每次都会携带在HTTP头中，如果使用cookie保存过多数据会带来性能问题 需要程序员自己封装，源生的Cookie接口不友好

   *localStorage* 除非被清除，否则永久保存大小 5M 仅在客户端（即浏览器）中保存，不参与和服务器的通信 源生接口可以接受，亦可再次封装来对Object和Array有更好的支持

   *sessionStorage* 仅在当前会话下有效，关闭页面或浏览器后被清除 大小 5M 仅在客户端（即浏览器）中保存，不参与和服务器的通信 源生接口可以接受，亦可再次封装来对Object和Array有更好的支持

   1. COOKIE是如何工作的？

      ​ Cookie可用于客户端数据的存储，在没有其它存储办法时，使用这种方式是可行的，但随着现在浏览器开始支持各种各样 的存储方式而逐渐被废弃。 由于服务器指定Cookie以后浏览器的每次请求都会携带Cookie数据，这会带来额外的性能负 担（尤其是在移动环境下）。 新的浏览器API已经允许开发者直接在本地存储数据，如可以使用Web storage API （本地 存储和会话存储）和IndexedDB（索引数据库）。

      • COOKIE主要用在以下三个方面: 会话状态管理（如用户登录状态、购物车） 个性化设置（如用户自定义设置） 浏览器行为跟踪（如跟踪分析用户行为）

   2. COOKIE的缺陷 每个 HTTP 请求中都包含 Cookies，从而导致传输相同的数据减缓我们的 Web 应用程序。 每个 HTTP 请求中都包含 Cookies，从而导致发送未加密的数据到互联网上，可能会导致数据泄露，虽然进行过加密，但是攻击者拿到cookie后仍然可以登录，因为难以识别是否为同一个用户在登陆。 Cookies 只能存储有限的 4KB 数据，对于复杂的存储需求来说是不够用的。

   3. sessionStroage有哪些应用场景？ 答： 在不需要和服务器交互的场所，用来存储用户数据之类的，可以在路由页跳转的时候取出更改储存，减少调用接口的次数，减轻服务器压力。

   4. 用storage怎么来判断用户是否需要再登陆？ 答：可以用加密的方法存储，每次用户访问的时候可以取出调用服务器接口作为参数发送进行对比，存在账号密码就直接跳过登录页。

   5. localStorage是否可以在同源窗口共享？ 答：同一浏览器的相同域名和端口的不同页面间可以共享相同的 localStorage，但是不同页面间无法共享sessionStorage的信息。

7. WebSocket#

   它的最大特点就是，服务器可以主动向客户端推送信息，客户端也可以主动向服务器发送信息，是真正的双向平等对话，属于服务器推送技术的一种。(支付、客服模块可以使用这个技术)

32 css3新特性 ***  动画效果#

1. css3选择器#

   CSS3选择器大全_Terry_wn的博客-CSDN博客_css3选择器

2. css新增样式属性#

   border-radius
   border-image
   background-size
   background-origin
   background-clip：规定背景的绘制区域。
   linear-gradient()：线性渐变。
   radial-gradient()：径向渐变。
   word-break：定义如何换行。
   word-wrap：允许长的内容可以自动换行。
   text-overflow：指定当文本溢出包含它的元素，应该发生什么。
   text-shadow：文字阴影。
   transform-style：指定嵌套元素是怎样在三维空间中呈现。
   2D转换方法
   rotate(angle)：定义 2D 旋转，在参数中规定角度。
   translate(x,y)：指定元素在二维空间中的位移。X轴方向向右，Y轴方向向下。
   scale(n)：定义 2D 缩放转换。
   matrix(a,b,c,d,e,f)：定义 2D 转换，使用六个值的矩阵。
   skew(x-angle,y-angle)：定义沿着 X 和 Y 轴的 2D 倾斜转换。
   perspective(n)：为 3D 转换元素定义透视视图。
   translate：指定元素在的位移。
   matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)：定义 3D 转换，使用 16 个值的 4x4 矩阵。
   过渡
   transition：设置元素当过渡效果，四个简写属性为：  *
   animation：为元素添加动画，是一个简写属性。   *
   

3. css新增的一些伪类#

   1、p:first-of-type 选择器匹配属于其父元素的特定类型的首个子元素的每个元素。
   2、p:last-of-type 选择器匹配属于其父元素的特定类型的最后一个子元素的每个元素。
   3、p:only-of-type 选择器匹配属于其父元素的特定类型的唯一子元素的每个元素。
   4、p:only-child 选择器匹配属于其父元素的唯一子元素的每个元素。
   5、p:nth-child(2) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。n 可以是数字、关键词或公式。
   6、:enabled :disabled表单控件的禁用状态。
   7、:checked:checked 选择器匹配每个选中的输入元素（仅适用于单选按钮或复选框）。
   Flex弹性布局  *
   媒体查询    media *
   

33 es6新特性  *#

let const  * 变量的解构赋值  *

字符串扩展

let text='abcdefg';
for (let i of text){  
    console.log(i);
}
includes()：返回布尔值，表示是否找到了参数字符串。
startsWith()：返回布尔值，表示参数字符串是否在源字符串的头部。
endsWith()：返回布尔值，表示参数字符串是否在源字符串的尾部。
repeat方法返回一个新字符串，表示将原字符串重复n次。
padStart()用于头部补全，
padEnd()用于尾部补全。
模板字符串 `aaa{$test}`

数值的扩展：

Number.isFinite()用来检查一个数值是否为有限的（finite）。
Number.isNaN()用来检查一个值是否为NaN。
Number.parseInt(),转整型
Number.parseFloat()转浮点型
Number.isInteger()用来判断一个值是否为整数
Math.trunc方法用于去除一个数的小数部分，返回整数部分。
Math.sign方法用来判断一个数到底是正数、负数、还是零。
Math.cbrt方法用于计算一个数的立方根。
Math.sign()用来判断一个值的正负，但是如果参数是-0，它会返回-0。ES2016 新增了一个指数运算符（**）。

数组的扩展：

(1)Array.from方法用于将两类对象转为真正的数组：
	类似数组的对象（array-like object）
	可遍历（iterable）的对象（包括ES6新增的数据结构Set和Map）。
(2)Array.of方法用于将一组值，转换为数组。
(3)Array.prototype.copyWithin(target, start = 0, end = this.length)数组实例的copyWithin方		法，在当前数组内部，将指定位置的成员复制到其他位置（会覆盖原有成员），然后返回当前数组。也就是说，使用		这个方法，会修改当前数组。
(4)数组实例的find方法，用于找出第一个符合条件的数组成员。它的参数是一个回调函数，所有数组成员依次执行该回	调函数，直到找出第一个返回值为true的成员，然后返回该成员。如果没有符合条件的成员，则返回undefined。
(5)fill方法使用给定值，填充一个数组。
(6)entries()，keys()和values()——用于遍历数组。它们都返回一个遍历器对象
	（详见《Iterator》一章），可以用for...of循环进行遍历，唯一的区别是keys()是对键名的遍历、values()		是对键值的遍历，entries()是对键值对的遍历。Array.prototype.includes方法返回一个布尔值，表示某个	数组	是否包含给定的值，与字符串的includes方法类似。该方法属于ES7，但Babel转码器已经支持。

函数的扩展：

函数参数的默认值
与解构赋值默认值结合使用
函数的 length 属性
指定了默认值以后，函数的length属性，将返回没有指定默认值的参数个数。也就是说，指定了默认值后，length属性将失真
ES6 引入 rest 参数（形式为“...变量名”），用于获取函数的多余参数，这样就不需要使用arguments对象了。rest 参数搭配的变量是一个数组，该变量将多余的参数放入数组中。
扩展运算符 ...   *****
替代数组的apply方法 
// ES5的写法
Math.max.apply(null, [14, 3, 77])

// ES6的写法
Math.max(...[14, 3, 77])

// 等同于
Math.max(14, 3, 77);

扩展运算符的应用:合并数组 与解构赋值结合 函数的返回值 字符串 实现了Iterator接口的对象 Map和Set结构，Generator函数


/************/
严格模式 'use strict';
重点掌握，重点重点
箭头函数  ES6允许使用“箭头”（=>）定义函数。 箭头函数可以保留this的指向   *****
箭头函数注意点：
（1）函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。
（2）不可以当作构造函数，也就是说，不可以使用new命令，否则会抛出一个错误。
（3）不可以使用arguments对象，该对象在函数体内不存在。如果要用，可以用Rest参数代替。
（4）不可以使用yield命令，因此箭头函数不能用作Generator函数。

对象的扩展：

1. Object.is() 比较两个值是否相等
2. Object.assign方法用于对象的合并，将源对象（source）的所有可枚举属性，复制到目标对象（target）。
	属性的遍历
3. ES6一共有5种方法可以遍历对象的属性。
（1）for...in
	for...in循环遍历对象自身的和继承的可枚举属性（不含Symbol属性）。
（2）Object.keys(obj)
	Object.keys返回一个数组，包括对象自身的（不含继承的）所有可枚举属性（不含Symbol属性）。
（3）Object.getOwnPropertyNames(obj)
	Object.getOwnPropertyNames返回一个数组，包含对象自身的所有属性（不含Symbol属性，但是包括不可枚举	属性）。
（4）Object.getOwnPropertySymbols(obj)
	Object.getOwnPropertySymbols返回一个数组，包含对象自身的所有Symbol属性。
（5）Reflect.ownKeys(obj)
	Reflect.ownKeys返回一个数组，包含对象自身的所有属性，不管是属性名是Symbol或字符串，也不管是否可枚		举。
4. Object.setPrototypeOf方法的作用与__proto__相同，用来设置一个对象的prototype对象，返回参数对象本	身。它是 ES6 正式推荐的设置原型对象的方法。该方法与Object.setPrototypeOf方法配套，用于读取一个对象的	原型对象。
5. Object.keys()引入了Object.keys方法，返回一个数组，成员是参数对象自身的（不含继承的）所有可遍历	     （enumerable）属性的键名。
6. Object.values方法返回一个数组，成员是参数对象自身的（不含继承的）所有可遍历（enumerable）属性的键  	值。
7. Object.entries方法返回一个数组，成员是参数对象自身的（不含继承的）所有可遍历（enumerable）属性的键值对数组。

set  和 map 数据类型  *

set可以用于数组去重,是无序的，set中不包含重复的元素
map 的key值可以是数组对象字符串等格式
Map类似于一个对象，是键值对的集合，键值可以是字符串，各种类型，对象。

proxy   ***

Proxy 可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。Proxy 这个词的原意是代理，用在这里表示由它来“代理”某些操作，可以译为“代理器”
var obj = new Proxy({}, {
  get: function (target, key, receiver) {
    console.log(`getting ${key}!`);
    return Reflect.get(target, key, receiver);
  },
  set: function (target, key, value, receiver) {
    console.log(`setting ${key}!`);
    return Reflect.set(target, key, value, receiver);
  }
});

vue双向绑定原理的Object.defineProperty 更改为了 Proxy，性能有所优化

promise   *

解决异步回调地狱问题
var promise = new Promise(function(resolve, reject) {
  // ... some code

  if (/* 异步操作成功 */){
    resolve(value);
  } else {
    reject(error);
  }
}); 
.then() Promise实例添加状态改变时的回调函数。
.catch() 用于指定发生错误时的回调函数。
Promise.all方法用于将多个Promise实例，包装成一个新的Promise实例。
all中的内容是两个异步操作，只有等到它们的结果都返回了，才会触发pickTopRecommentations这个回调函数。
Promise.race方法同样是将多个Promise实例，包装成一个新的Promise实例。
Promise.resolve()有时需要将现有对象转为Promise对象，Promise.resolve方法就起到这个作用。
Promise.reject(reason)方法也会返回一个新的 Promise 实例，该实例的状态为rejected。
.done()Promise对象的回调链，不管以then方法或catch方法结尾，要是最后一个方法抛出错误，都有可能无法捕捉到
.finally方法用于指定不管Promise对象最后状态如何，都会执行的操作。它与done方法的最大区别，它接受一个普通的回调函数作为参数，该函数不管怎样都必须执行。

Generator 函数的语法  ***

迭代器或解决异步调用回调地狱
function* gen() {
  yield  123 + 456;
}

redux-saga中使用了该语法

async  await *

解决异步回调地域问题，一般和promise一起使用

class 语法糖  ；解决了js中没有类的概念，需要使用 function做为构造函数来使用的问题，简化了继承   *

class ColorPoint extends Point {
  constructor(x, y, color) {
    super(x, y); // 调用父类的constructor(x, y)
    this.color = color;
  }

  toString() {
    return this.color + ' ' + super.toString(); // 调用父类的toString()
  }
}

模块module  *

引入模块 import 
输出模块 export

34 typescript *#

1. 基础类型： boolean\number\string\数组\元组（元组类型允许表示一个已知元素数量和类型的数组，各元素的类型不必相同）\枚举（enum类型是对JavaScript标准数据类型的一个补充。 像C#等其它语言一样，使用枚举类型可以为一组数值赋予友好的名字）\ Any\ viod\null\undefin