内训前端题

请阅读以下代码，并写出运行结果。
    setTimeout(function () {
      console.log(1)
    },0)
    new Promise(function executor(resolve) {
      console.log(2);
      for(var i=0;i<10000;i++){
        i===9999&&resolve()
      }
      console.log(3)
    }).then(function () {
      console.log(4)
    })
    console.log(5)
    //2 3 5 4 1

行内元素有哪些？块级元素有哪些？空（void)元素有哪些？

行内元素：a、b、span、img、input、strong、select、label、em、button、textarea

块级元素：div、ul、li、dl、dt、dd、p、h1-h6、blockquote

空元素：即系没有内容的HTML元素，例如：br、meta、hr、link、input、img

行内元素有哪些？块级元素有哪些？空(void)元素有那些？

首先：CSS规范规定，每个元素都有display属性，确定该元素的类型，每个元素都有默认的display值，如div的display默认值为“block”，则为“块级”元素；span默认display属性值为“inline”，是“行内”元素。

（1）行内元素有：a b span img input select strong（强调的语气）
（2）块级元素有：div ul ol li dl dt dd h1 h2 h3 h4…p

（3）常见的空元素：
    <br> <hr> <img> <input> <link> <meta>
    鲜为人知的是：
    <area> <base> <col> <command> <embed> <keygen> <param> <source> <track> <wbr>

<img>中title和alt的区别？

Alt是<img>的特有属性，是图片内容的等价描述，用于图片无法加载时显示，读屏器阅读图片。

title   可提高图片高可访问性，除了纯装饰图片外都必须设置有意义的值，搜索引擎会重点分析。鼠标滑过时显示的文字提示，用户体验上很重要。当然不必要所有的img标签都加此属性，比方说logo这样比较重要或者说用户会体验到的图片内容建议一定要加此属性。

cookies,sessionStorage,localStorage的区别？

共同点：都是保存在浏览器端，且同源的。

区别：cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下。存储大小限制也不同，cookie数据不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如会话标识。sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。数据有效期不同，sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持；localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。作用域不同，sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；localStorage 在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。Web Storage 支持事件通知机制，可以将数据更新的通知发送给监听者。Web Storage 的 api 接口使用更方便。

sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。

因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。

而localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。

更多资料

https://www.cnblogs.com/pengc/p/8714475.html

display:inline-block什么时候会显示间隙

更多资料

https://www.zhangxinxu.com/wordpress/2012/04/inline-block-space-remove-%e5%8e%bb%e9%99%a4%e9%97%b4%e8%b7%9d/

以下代码中，A-o~A-5和B的颜色分别为？如果希望每个两个

（即：A-2和A-5等）均设置为黄色，应该如何做？

JavaScript一种动态类型、弱类型、基于原型的客户端脚本语言，用来给HTML网页增加动态功能。（好吧，概念什么最讨厌了）

动态：

在运行时确定数据类型。变量使用之前不需要类型声明，通常变量的类型是被赋值的那个值的类型。

弱类：

计算时可以不同类型之间对使用者透明地隐式转换，即使类型不正确，也能通过隐式转换来得到正确的类型。

原型：

新对象继承对象（作为模版），将自身的属性共享给新对象，模版对象称为原型。这样新对象实例化后不但可以享有自己创建时和运行时定义的属性，而且可以享有原型对象的属性。

PS：新对象指函数，模版对象是实例对象，实例对象是不能继承原型的，函数才可以的。

JavaScript由三部分组成：

1. ECMAScript（核心）

作为核心，它规定了语言的组成部分：语法、类型、语句、关键字、保留字、操作符、对象

PS：*不完全兼容的实现

2. DOM（文档对象模型）

DOM把整个页面映射为一个多层节点结果，开发人员可借助DOM提供的API，轻松地删除、添加、替换或修改任何节点。

PS：DOM也有级别，分为DOM1、DOM2、DOM3，拓展不少规范和新接口。

3. BOM （浏览器对象模型）

支持可以访问和操作浏览器窗口的浏览器对象模型，开发人员可以控制浏览器显示的页面以外的部分。

PS：BOM未形成规范

什么是ES5

作为ECMAScript第五个版本（第四版因为过于复杂废弃了），浏览器支持情况可看第一副图，增加特性如下。

1. strict模式

严格模式，限制一些用法，'use strict';

2. Array增加方法

增加了every、some 、forEach、filter 、indexOf、lastIndexOf、isArray、map、reduce、reduceRight方法

PS：还有其他方法 Function.prototype.bind、String.prototype.trim、Date.now

3. Object方法

Object.getPrototypeOf

Object.create

Object.getOwnPropertyNames

Object.defineProperty

Object.getOwnPropertyDescriptor

Object.defineProperties

Object.keys

Object.preventExtensions / Object.isExtensible

Object.seal / Object.isSealed

Object.freeze / Object.isFrozen

PS：只讲有什么，不讲是什么。

什么是ES6

ECMAScript6在保证向下兼容的前提下，提供大量新特性，目前浏览器兼容情况如下：

ES6特性如下：

1.块级作用域 关键字let, 常量const

2.对象字面量的属性赋值简写（property value shorthand）

var obj = {
    // __proto__
    __proto__: theProtoObj,
    // Shorthand for ‘handler: handler’
    handler,
    // Method definitions
    toString() {
    // Super calls
    return "d " + super.toString();
    },
    // Computed (dynamic) property names
    [ 'prop_' + (() => 42)() ]: 42
};

3.赋值解构

let singer = { first: "Bob", last: "Dylan" };
let { first: f, last: l } = singer; // 相当于 f = "Bob", l = "Dylan"
let [all, year, month, day] =  /^(\d\d\d\d)-(\d\d)-(\d\d)$/.exec("2015-10-25");
let [x, y] = [1, 2, 3]; // x = 1, y = 2

4.函数参数 - 默认值、参数打包、 数组展开（Default 、Rest 、Spread）

//Default
function findArtist(name='lu', age='26') {
    ...
}

//Rest
function f(x, ...y) {
  // y is an Array
  return x * y.length;
}
f(3, "hello", true) == 6

//Spread
function f(x, y, z) {
  return x + y + z;
}
// Pass each elem of array as argument
f(...[1,2,3]) == 6

5.箭头函数 Arrow functions

(1).简化了代码形式，默认return表达式结果。

(2).自动绑定语义this，即定义函数时的this。如上面例子中，forEach的匿名函数参数中用到的this。

6.字符串模板 Template strings

var name = "Bob", time = "today";
`Hello ${name}, how are you ${time}?`
// return "Hello Bob, how are you today?"

7. Iterators（迭代器）+ for..of

迭代器有个next方法，调用会返回：

(1).返回迭代对象的一个元素：{ done: false, value: elem }

(2).如果已到迭代对象的末端：{ done: true, value: retVal }

for (var n of ['a','b','c']) {
  console.log(n);
}
// 打印a、b、c

8.生成器 （Generators）

9.Class

Class，有constructor、extends、super，但本质上是语法糖（对语言的功能并没有影响，但是更方便程序员使用）。

class Artist {
    constructor(name) {
        this.name = name;
    }

    perform() {
        return this.name + " performs ";
    }
}

class Singer extends Artist {

    constructor(name, song) {
        super.constructor(name);
        this.song = song;
    }

    perform() {
        return super.perform() + "[" + this.song + "]";
    }
}

let james = new Singer("Etta James", "At last");
james instanceof Artist; // true
james instanceof Singer; // true

james.perform(); // "Etta James performs [At last]"

10.Modules

ES6的内置模块功能借鉴了CommonJS和AMD各自的优点：

(1).具有CommonJS的精简语法、唯一导出出口(single exports)和循环依赖(cyclic dependencies)的特点。

(2).类似AMD，支持异步加载和可配置的模块加载。

// lib/math.js
export function sum(x, y) {
  return x + y;
}
export var pi = 3.141593;

// app.js
import * as math from "lib/math";
alert("2π = " + math.sum(math.pi, math.pi));

// otherApp.js
import {sum, pi} from "lib/math";
alert("2π = " + sum(pi, pi));

Module Loaders:
// Dynamic loading – ‘System’ is default loader
System.import('lib/math').then(function(m) {
  alert("2π = " + m.sum(m.pi, m.pi));
});

// Directly manipulate module cache
System.get('jquery');
System.set('jquery', Module({$: $})); // WARNING: not yet finalized

11.Map + Set + WeakMap + WeakSet

四种集合类型，WeakMap、WeakSet作为属性键的对象如果没有别的变量在引用它们，则会被回收释放掉。

// Sets
var s = new Set();
s.add("hello").add("goodbye").add("hello");
s.size === 2;
s.has("hello") === true;

// Maps
var m = new Map();
m.set("hello", 42);
m.set(s, 34);
m.get(s) == 34;

//WeakMap
var wm = new WeakMap();
wm.set(s, { extra: 42 });
wm.size === undefined

// Weak Sets
var ws = new WeakSet();
ws.add({ data: 42 });//Because the added object has no other references, it will not be held in the set

12.Math + Number + String + Array + Object APIs

一些新的API

Number.EPSILON
Number.isInteger(Infinity) // false
Number.isNaN("NaN") // false

Math.acosh(3) // 1.762747174039086
Math.hypot(3, 4) // 5
Math.imul(Math.pow(2, 32) - 1, Math.pow(2, 32) - 2) // 2

"abcde".includes("cd") // true
"abc".repeat(3) // "abcabcabc"

Array.from(document.querySelectorAll('*')) // Returns a real Array
Array.of(1, 2, 3) // Similar to new Array(...), but without special one-arg behavior

[0, 0, 0].fill(7, 1) // [0,7,7]
[1, 2, 3].find(x => x == 3) // 3
[1, 2, 3].findIndex(x => x == 2) // 1
[1, 2, 3, 4, 5].copyWithin(3, 0) // [1, 2, 3, 1, 2]
["a", "b", "c"].entries() // iterator [0, "a"], [1,"b"], [2,"c"]
["a", "b", "c"].keys() // iterator 0, 1, 2
["a", "b", "c"].values() // iterator "a", "b", "c"

Object.assign(Point, { origin: new Point(0,0) })

13. Proxies

使用代理（Proxy）监听对象的操作，然后可以做一些相应事情。

var target = {};
var handler = {
  get: function (receiver, name) {
    return `Hello, ${name}!`;
  }
};

var p = new Proxy(target, handler);
p.world === 'Hello, world!';

可监听的操作：get、set、has、deleteProperty、apply、construct、getOwnPropertyDescriptor、defineProperty、getPrototypeOf、setPrototypeOf、enumerate、ownKeys、preventExtensions、isExtensible。

14.Symbols

Symbol是一种基本类型。Symbol 通过调用symbol函数产生，它接收一个可选的名字参数，该函数返回的symbol是唯一的。

var key = Symbol("key");
var key2 = Symbol("key");
key == key2  //false

15.Promises

Promises是处理异步操作的对象，使用了 Promise 对象之后可以用一种链式调用的方式来组织代码，让代码更加直观（类似jQuery的deferred 对象）。

function fakeAjax(url) {
  return new Promise(function (resolve, reject) {
    // setTimeouts are for effect, typically we would handle XHR
    if (!url) {
      return setTimeout(reject, 1000);
    }
    return setTimeout(resolve, 1000);
  });
}

// no url, promise rejected
fakeAjax().then(function () {
  console.log('success');
},function () {
  console.log('fail');
});
es5和es6中的基本数据类型有哪些？// es5中  undefined，null，boolean，number，string
//  es6中  Number,String, Null, Undefined,Symbol, Boolean首先说es5的数据类型，es5呢就是现阶段活跃在各大浏览器上的js的标准。ES是javascript的标准，而各大浏览器上的js呢是实现，只不过是各个浏览器的厂商对这个实现的不同而已，也造就了浏览器兼容性的问题。
        好了话题扯回来先，ES5的数据类型分为简单数据类型和复杂的数据类型，简单的数据类型分为undefined，null，boolean，number，string。其中比较特殊的是undefined 与 null,已声明未初始化的变量默认为undefined类型，而null更像一个指针，typeof会显示为object类型。         boolean表现的是真和假，true或者false，对于其他类型的转换是任何非空字符串可以转化为true；任何非0和NaN的数字转化为true；任何对象都是true；值得一说的是null转化为false，而undefined不等价于true也不等价于false，但是!undefined却等价于true。         数字类型number，具体细分的话还分为整数和浮点数，计算机中数字有一个具体的范围，超过这个最大范围会被解析为Infinity，小于这个最小范围被解析为-Infinity，至于这个具体的范围 5e-325 ～1.7976931348623157e+308(具体没有去看工具书什么的验证)，而数字类型中最特殊的是NaN，NaN是啥呢，NaN就是一个自己都不等于自己的货，具体什么会被转化为NaN呢，转化为数字类型的undefined,不包含整数，浮点数，其他进制的数的非空字符串转化为数字时会变成NaN，至于对象呢就是用valueOf和toString方法转化成字符串在转换，说白了就是尽量转化成数字而非NaN，毕竟这是个自己跟自己对着干的主。          String就是字符串，这个简单易懂，但是它呢包含这一些转义字符，这就尴尬了，你在处理的时候就必须得考虑到转义字符的问题，n(换行符),t(制表符),b(空格符),r(回车符),f(进纸符),\\(斜杠),\'(单引号),\"(双引号),xnn(16进制表示的一个字符),unnn(16进制表示的一个unicode符)；字符串的转换，其实就在于toString，具体的可以添加参数，转变成不同进制，当然还有一些强制类型转换上存在的不同。         最后说到复杂的数据类型，object，可以说是一组属性与方法的集合，它可以是数组，json，还可以是function，关于属性和方法的扯淡呢，可以扯到原形链，这个要扯很多，暂时先不说，单说对象（主要是不想码太多字）；对象是对一个内存地址的占用，凡是以对象赋值的变量都是对对象的地址的引用，只有以同一个对象赋值的两个变量才相等，否则它就是两个不同内存地址的引用，根本不存在可比性。至于对象中的值的引用，不同的对象有不同的方法，下标或者其他。更多资料
https://www.cnblogs.com/SamWeb/p/10686811.htmlscript标签的defer,async的区别

async：与后续元素渲染异步执行，乱序执行，若js文件之间存在依赖关系，容易产生错误，只适用于完全没有依赖的文件，文档解析过程中异步下载，下载完成之后立即执行。

defer：（H5规范中，defer是有序执行的，但实际不一定是有序执行的）与后续渲染异步执行，延迟到界面文档解析完成之后执行，即为立即下载，延迟执行。所有执行均在DOMContentLoaded 事件触发之前完成。

不带属性：加载到script立即下载并执行，阻塞后续渲染的执行。

最佳方案：外部引用文件放在</body>之前执行

对比图如下：

<script/>放在<head/>与<body/>中的区别？

区别：加载顺序的不同，在页面加载之前下载，HTML加载顺序是由上至下

<head/>：会在文档加载前加载结束。

<body/>：不能保证哪个先加载结束（文档？引用文件？）性能更优

注：内嵌的脚本也不要紧跟在<link>标签之后，否则会导致页面阻塞去等待样式表的下载。

https://segmentfault.com/a/1190000006778717

Ajax的缺点

它可能破坏浏览器的后退与加入收藏书签功能,

大量的使用了javascript和ajax引擎,这些取决于浏览器的支持.在编写的时候考虑对浏览器的兼容性.

AJAX只是局部刷新,所以页面的后退按钮是没有用的.
      // 对流媒体还有移动设备的支持不是太好等

https://www.cnblogs.com/yelp/p/3725664.html

判断以下时间段是否有重叠范围（口述题）
// ['05:00-08:00','09:30-12:00','09:00-11:00','13:00-15:00']

git fetch 和git pull区别

1、git fetch 相当于是从远程获取最新到本地，不会自动merge，如下指令：

　git fetch orgin master //将远程仓库的master分支下载到本地当前branch中

　git log -p master  ..origin/master //比较本地的master分支和origin/master分支的差别

　git merge origin/master //进行合并

也可以用以下指令：

git fetch origin master:tmp //从远程仓库master分支获取最新，在本地建立tmp分支

git diff tmp //將當前分支和tmp進行對比

git merge tmp //合并tmp分支到当前分支

2. git pull：相当于是从远程获取最新版本并merge到本地

git pull origin master

git pull 相当于从远程获取最新版本并merge到本地

在实际使用中，git fetch更安全一些

https://blog.csdn.net/weixin_41975655/article/details/82887273

用正则校验用户名，要求：6-16位（允许包含：大小写英文，

数字，下划线，减号）

 var uPattern = /^[a-zA-Z0-9_-]{6,16}$/;

https://www.cnblogs.com/raphael1982/p/8012634.html

JavaScript的存储方式有哪些？

相同点：都保存在浏览器端，同源的

不同点：

①传递方式不同

cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递。

sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。

②数据大小不同

cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下。 存储大小限制也不同，cookie数据不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如会话标识。

sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。

③数据有效期不同

1

④作用域不同

sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；

localStorage 在所有同源窗口中都是共享的；

cookie也是在所有同源窗口中都是共享的。

Web Storage 支持事件通知机制，可以将数据更新的通知发送给监听者。 Web Storage 的 api 接口使用更方便。

https://www.jianshu.com/p/e7c4b1c72c7b

同源策略

url由协议、域名、端口和路径组成、如果两个url的协议、域名和端口相同，则这两个url是同源的。限制来源不用源的“document”，对当前的“document”读取或设置某些属性。在不受同源策略限制，带有“src”属性的标签加载是，实际上是由游览器发起一次GET请求，不同于XMLHTTPRequest，它们通过src属性加载的资源。但游览器限制了JavaScript的权限，使其不能读，写其中返回的内容。

https://blog.csdn.net/maggie_live/article/details/80005177

什么情况下会遇到跨域？怎么解决？

浏览器最核心，最基本的安全功能是同源策略。限制了一个源中加载文本或者脚本与其他源中资源的交互方式，当浏览器执行一个脚本时会检查是否同源，只有同源的脚本才会执行，如果不同源即为跨域。

跨域问题是这是浏览器为了安全实施的同源策略导致的，同源策略限制了来自不同源的document、脚本，同源的意思就是两个URL的域名、协议、端口要完全相同。 script标签jsonp跨域、nginx反向代理、node.js中间件代理跨域、后端在头部信息设置安全域名、后端在服务器上设置cors

jsonp

：原理就是利用了script标签src属性外联引入文件不受同源策略的限制，在页面中动态插入了script，script标签的src属性就是后端api接口的地址，并且以get的方式将前端回调处理函数名称告诉后端，后端在响应请求时会将回调返还，并且将数据以参数的形式传递回去；

document.domin:两个域名必须属于同一基础域名，并且所有的协议端口完全一致，否则无法跨域；例：beijing.58.com

tianjing.58.com ；

iframe、hash ：父页面向子页面传输数据：将要传递的数据添加到子页面的url的hash值上，子页面通过location.hash

并添加定时器实时地动态父页面传来的数据；子页面向父页面传输数据：利用window.name的特性，及页面重新加载但当前页的name值不变，即使换了一个页面。需要三个页面配合使用。一个应用页面，一个数据页面，一个代理文件。代理文件一般是一个没有任何内容的html页面，需要和应用页面在同一域下。将数据页面的窗口换成代理页面，代理页面通过window.name获取数据页面留下的数据，应用页面再访问和它同源的代理页面获取数据，就完成了跨域；

CORS(Cross-Origin-Resource-Sharing)：在服务器端设置的,不需要客户端进行操作。Cors背后的思想是使用自定义的http头部让浏览器和服务器进行沟通，从而决定请求或响应是否应该成功，还是应该失败。浏览器向服务器发送请求，如果服务器认为这个请求可以接受，就在Access-Control-Allow-Origin头部中回发相同的源信息（如果是公共资源，可以回发*）;如果没有这个头部，或者有这个头部但信息源不匹配，浏览器就会驳回请求。正常情况下，浏览器会处理请求。（请求和响应都不包含cookie信息）；

服务器跨域，服务器中转代理：前端向本地服务器发送请求，本地服务器代替前端再向服务器接口发送请求进行服务器间通信，本地服务器是个中转站的角色，再将响应的数据返回给前端。

window.postMessage(h5新增)

WebSocket(h5新增)

————————————————

https://segmentfault.com/a/1190000015597029?utm_source=tag-newest

写出以下代码输出值，尝试用es5和es6的方式进行改进输出循环中的i值
   for(var i=1;i<=5;i++){
      setTimeout(function timer() {
        console.log(i)
      },i*1000)
    }
    //6 6 6 6 6

 for(let  i=1;i<=5;i++){
      setTimeout(function timer() {
        console.log(i)
      },i*1000)
    }
//    1 2 3 4 5

v-if和v-show的共同点和区别

共同点：

v-if 和 v-show 都是动态显示DOM元素。

区别：

1. 编译过程： v-if 是 真正 的 条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性display。
2. 编译条件： v-if 是惰性的：如果在初始渲染时条件为假，则什么也不做。直到条件第一次变为真时，才会开始渲染条件块。v-show不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
3. 性能消耗： v-if有更高的切换消耗。v-show有更高的初始渲染消耗。
4. 应用场景： v-if适合运行时条件很少改变时使用。v-show适合频繁切换。

路由导航钩子（导航守卫）有哪些？

在项目开发中每一次路由的切换或者页面的刷新都需要判断用户是否已经登录，前端可以判断，后端也会进行判断的，我们前端最好也进行判断。

vue-router提供了导航钩子:全局前置导航钩子 beforeEach和全局后置导航钩子 afterEach，他们会在路由即将改变前和改变后进行触发。所以判断用户是否登录需要在beforeEach导航钩子中进行判断。

导航钩子有3个参数：

1、to:即将要进入的目标路由对象；

2、from:当前导航即将要离开的路由对象；

3、next ：调用该方法后，才能进入下一个钩子函数（afterEach）。

next()//直接进to 所指路由 next(false) //中断当前路由 next('route') //跳转指定路由 next('error') //跳转错误路由

beforeEach：

路由配置文件：

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import HomePage from '@/pages/home.vue'
Vue.use(Router)
const router=new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
     {
      path: '/home',
      name: 'home',
      component: HomePage
    },
     {
        path:'*',
        redirect:'/home'
     }
  ],
})
  router.beforeEach((to,from,next)=>{
    console.log(to);
    console.log(from);
    next();
  })
 export default router;

　　打印结果如下：

实现用户验证的代码：

 1 router.beforeEach((to, from, next) => {
 2     //我在这里模仿了一个获取用户信息的方法
 3   let isLogin = window.sessionStorage.getItem('userInfo');
 4     if (isLogin) {
 5         //如果用户信息存在则往下执行。
 6         next()
 7     } else {
 8         //如果用户token不存在则跳转到login页面
 9         if (to.path === '/login') {
10             next()
11         } else {
12             next('/login')
13         }
14     } 
15 })

afterEach:

和beforeEach不同的是afterEach不接收第三个参数 next 函数，也不会改变导航本身，一般beforeEach用的最多，afterEach用的少.

router.afterEach((to,from)=>{ //这里不接收next
    console.log(to);
    console.log(from);
})

https://blog.csdn.net/weixin_30699443/article/details/97268222

请写出如下代码的执行结果：
    setTimeout(()=>{
      console.log(1)
    })
    new Promise(resolve => {
      resolve()
      console.log(2)
    }).then(()=>{
      console.log(3)
      Promise.resolve().then(()=>{
        console.log(4)
      }).then(()=>{
        Promise.resolve().then(()=>{
          console.log(5)
        })
      })
    })
//    2 3 4 5 1

、统计数组arr中值等于item的元素出现的次数
//     示例
//     输入
//     [1,2,4,4,3,4,3] 4
    function sum(arr) {
      return Array.from(new Set([...arr])).length
    }
    console.log(sum([1,2,4,4,3,4,3]))

计算给定数组arr中所有元素的总和
//     输入描述：
//    数组中的元素均为Number类型
//  示例
// 输入
// [1,2,3,4]
//    输出
//     10
 function count(arr,item) {
   for (var i=arr.length-1; i>=0; i--) {
     item += arr[i];
   }
   return item;
 }
 console.log(count([1,2,3,4],0))

https://www.jb51.net/article/154559.htm

问题描述：

1、从 start 到 end（包含 start 和 end），每隔 100 毫秒 console.log 一个数字，每次数字增幅 1

2、返回的对象中需要包含一个 cancel 方法，用于停止定时操作

3、第一个数需要立即输出

实现法一（setTimeout()方法）：

function count(start, end) {

if(start <= end){

console.log(start++);

st = setTimeout(function(){count(start, end)}, 100);

}

return {

cancel: function(){clearTimeout(st);}

}

}

count(1, 10);

1

2

3

4

5

6

7

8

9

10

实现法二（setInterval()方法）：

function count(start, end) {

console.log(start++);

var timer = setInterval(function () {

if (start <= end) {

console.log(start++)

}

}, 100);

return {

cancel: function () {

clearInterval(timer)

}

}

}

count(1, 10);

1

2

3

4

5

6

7

8

9

10

11

12

13

14

知识点：

setTimeout()方法用于在指定的毫秒数后调用函数或计算表达式。

语法：setTimeout(code, millisec)

注意：setTimeout() 只执行 code 一次。如果要多次调用，请使用 setInterval() 或者让 code 自身再次调用 setTimeout()。

setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。

语法：setInterval(code ,millisec[,"lang"])

setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。

注意：两个方法的第一个参数可以是字符串，也可以是函数

（1）如果是字符串， 则参数是 要执行的javascript代码串（加双引号）， 当 作普通javascript语句执行即可 。 和eval()差不多，执行的环境是全局，所以不能访问函数作用域的变量。

（2）如果是函数（有括弧），则参数是该函数 （不加双引号） 的返回值，即真正执行的是其返回值，作用是【数值传递】。若返回值是另一个函数对象X，则执行的是函数X里的内容；若函数没定义返回值时值为undefined，或返回值为非函数对象，则无任何执行操作。

（3）如果是函数名（无括弧），则参数是该函数对象 （不加双引号） 本身，即真正执行的就是函数中的语句，且与返回值无关，作用是【函数调用】。通过”function() { xxx(argv); }”还能访问该函数作用域链上的变量。

————————————————

34、实现一个打点计时器，要求：
//1、从start到end(包含start和end）,每隔100毫秒console.log//    一个数字，每次数字增幅为1
//2、返回的对象中需要包含一个cancel方法，用于停止定时操作
//3、第一个数需要立即输出
   /* function count(start, end) {
      if(start <= end){
        console.log(start++);
        st = setTimeout(function(){count(start, end)}, 100);      }
      return {
        cancel: function(){clearTimeout(st);}
      }
    }
    count(1, 10);*/
    /*function count(start, end) {
      console.log(start++);
      var timer = setInterval(function () {
        if (start <= end) {
          console.log(start++)
        }
      }, 100);
      return {
        cancel: function () {
          clearInterval(timer)
        }
      }
    }
    count(1, 10);*/

实现函数makeClosures,调用之后满足如下条件：
// 1、返回一个函数数组result,长度与arr相同
// 2、运行result中第i个函数，即result[i](),结果与fn（arr[i])相同//     示例
   /* [1,2,3].function(x){
      return x*x
    }
    输出
    4*/
   function makeClosures(arr,fn) {
     var result = [];
     arr.forEach(function(e){
       result.push(function(num){
         return function(){
           return fn(num);
         };
       }(e));
     });
     return result;
   }

下面代码输出多少
    var obj={
      value:1
    }
    function foo(o) {
      o.value=2;
      console.log(o.value)
    }
    foo(obj)
    console.log(obj.value)
//    2 2

为什么会出现浮动？什么时候需要清除浮动？

为什么出现浮动？

浮动float最开始出现的意义是为了让文字环绕图片而已，但人们发现，如果想要三个块级元素并排显示，都给它们加个float来得会比较方便。

什么时候清除浮动？

如果想要实现三个块级元素并排显示，期望效果如下图所示：

给三个块级元素都加上float属性后，页面效果如下图所示：

问题出现了，父元素高度塌陷了

一目了然：如果我们给上面的三个绿颜色的方块设置display:inline-block也能达到让它们并排显示的效果。并且父元素的高度也不会塌陷。只不过无法控制是居左还是居右，display:inline-block只能从左往右。

清除浮动的方式？

我们说的清除浮动是指清除由于子元素浮动带来父元素高度塌陷的影响。

清除浮动的两大基本方法：

• 方法1：脚底插入clear:both;
• 方法2：父元素BFC(ie8+)或haslayout(ie6/ie7)

方法1的具体实现：

1. 在父元素的最后加一个冗余元素并为其设置clear:both

原理如下： 当添加了最后一个冗余元素（未设置clear:both）时；父元素和此冗余元素的高度都为0，并且三个浮动的元素都浮在了它们的上方盖住了它们（可以把它们看成PS中的图层）。现在，给这个冗余元素添加clear:both（clear属性介绍），它便要躲开这三个浮动元素，因此，一直往下跑，直到没有被浮动元素盖住才停下来。而父元素看到这个子元素跑开了，自然想要包裹住它。 实现：

<div class="box">
    <div class="div">1</div>
    <div class="div">2</div>
    <div class="clear"></div>
</div>

.box{ width:700px; margin:0 auto; border:2px solid green;}
.div{ width:300px; height:200px; background:red; float:left;}
.div{ width:300px; height:200px; background:red; float:left; margin-left: 10px;}
.clear{ height:0px; clear:both; overflow: hidden;}

此方法的缺点是，必要在页面中添加很多没有意义的冗余元素，太麻烦，而且不符合语义化。 2.采用伪元素，这里我们使用:after。添加一个类clearfix： （推荐） 在我们需要清除浮动时，只需要给父元素追加clear类即可，既方便又符合语义化。 该方法的缺点是，IE6/IE7不识别:after伪元素，存在兼容性问题

<div class="box clearfix">
    <div class="div">1</div>
    <div class="div">2</div>
</div>

.box{ width:700px; margin:0 auto; border:2px solid green;}
.div{ width:300px; height:200px; background:red; float:left;}
.div{ width:300px; height:200px; background:red; float:left; margin-left: 10px;}
.clearfix:after { 
     content:""; 
     display:table; /*采用此方法可以有效避免浏览器兼容问题*/
     clear:both;
}

方法2的具体实现：

使用overflow属性，给父元素添加overflow:hidden ||auto

 overflow:hidden;
 zoom:1用于兼容IE6。

• 1
• 2

BFC/haslayout通常声明

• float:left/right
• position:absolute/fixed
• overflow:hidden/scroll(IE7+)
• display:inline-block/table-cell(IE8+)
• width/height/zoom:1/…(IE6/IE7)

BFC块级格式化上下文有以下特征：

• 内部的Box会在垂直方向，从顶部开始一个接一个地放置。
• Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生叠加。
• 每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
• BFC的区域不会与float box叠加。
• BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然。
• 计算BFC的高度时，浮动元素也参与计算。

不单单只有给父元素添加overflow:hidden才可以创建块级格式化上下文，下列方法都可以：

1. 浮动 (元素的 float不为 none）
2. 绝对定位元素 (元素的 position为 absolute 或 fixed)
3. 行内块 inline-blocks (元素的 display: inline-block)
4. 表格单元格 (元素的 display: table-cell，HTML表格单元格默认属性)
5. 表格标题 (元素的 display: table-caption，HTML表格标题默认属性)
6. overflow的值不为 visible的元素
7. 弹性盒子 flex boxes (元素的 display: flex 或 inline-flex) 采用float属性之后产生的现象：
   • 元素block块状花（砖头化） button默认的display是inline-block,加上float:left之后display变为block
   • 破坏性造成的紧密排列特性（去空格化）

砌砖布局的问题： 1、妙脆角-嘎嘣脆 - 容错性比较糟糕，容易出现问题 2、吝啬鬼-重用废 - 这种布局需要元素固定尺寸，很难重复使用 3、洋葱头-IE7飙泪 - 在低版本的IE下有很多问题

以下JavaScript程序
    function b() {
      var result=new Array();
      for(var i=0;i<10;i++){
        result[i]=function () {
          return i
        }
      }
      return result;
    }
    console.log(b())//[f,f,f...]
    // 10个
    /* function () {
        return i
     }*/
    console.log(b()[0]())//10

如何上下左右居中div？
/*div {
position:absolute;
top:50%;
left:50%;
margin:-150px 0 0 -200px;
width:400px;
height:300px;
border:1px solid #008800;
}*/

vue的指令，如何搭建脚手架要多久，watcher,computed和methods的区别，session和cookie sessionstorage和localstorage的区别，原生路由传参，vue路由传参，原生如何渲染数据，hack和history，es6的MapSet, 打包的几种方式

还有跨域兼容问题

在任何时代，

教育说起来都是一件高大上的事，

但却没有什么真正有价值的东西是教得会的，

没有任何一种文化模因

可以说清楚一个个体的全部问题。

在任何时代，

想要抓住人性的弱点来赚钱都非常容易，

没有一点高级。

相反，想要建设一种文化，

耐心地拆除信息壁垒，

并且能够坚持下来，

那真不是一般的不易。

在任何时代，

在一秒钟内看到本质的人，

和花半辈子看不清的人，

自然是不一样的命运。

每一天，你将受到才哥的理论，结合历史、政治、文化、艺术、商业故事，令人防不胜防的高纯度无死角知识轰炸。以及，不间断的私藏书籍、电影推荐。

有时候，某件事虽记不清楚，但总感觉这样的事在很久很久以前发生过...

有时候，某个人虽从未见过，但总感觉面前的人在另一个时空里曾遇见......

那时候相忘于江湖的事，或许穿越了时光，有了新的世界;

那时候不远万里追寻的梦，也许穿行过人海，也有了新的意义;

而对于我们来说，那个惦念的江湖，那个执着的梦，其核心都是在偌大的世界里，寻找到更真实更好的自己！

一个人在比较了自己与别人的力量和弱点之后，如果仍然看不出差别的话， 那么他将很容易被敌人打败。人们常常抱怨，人生中有太多的敌人，包括在学习 中遇到的沟壑，事业上难爬的高山，生活中隐藏的陷阱，稍一不慎，就将前功尽 弃或跌入沟壑。可是，人们哪里知道，真正的敌人不在眼前，也不在背后，就在 自己面前。只有战胜各种艰难困苦，才能赢得成功。当然，要战胜艰难险阻，首 先要战胜自己，如果连自己都不能战胜，何谈战胜别人和各种险阻。

世界著名游泳健将佛洛伦丝·查德威克，在一次从卡得林那岛游向加利福尼 亚海湾时，已经在海水中浸泡了16小时的她，看见眼前大雾茫茫、一望无际的 海面时，顿时精疲力竭、浑身困乏，没有继续坚持下去，失去了一次创造世界纪 录的机会。后来，她才得知自己已经快要到达成功的彼岸了，阻碍她成功的不是 茫茫无际的大海，而是自己的疑惑、自我放弃，最终被自己的潜意识所打倒。之后过了两个多月，佛洛伦丝·查德威克又一次重游了加利福尼亚海湾，每一刻她 都不停的对自己说：“离彼岸越来越近了”，潜意识激发了她“我一定能到达彼 岸”的信号，经过不懈的努力和坚持，她终于实现目标，成功到达了彼岸。

我们无法避免在追求成功的道路中所遇到的荆棘与挫折，但是，当你将挫折当成痛苦去对待的时候，疲惫和痛苦将纠缠着你，失望和放弃将一直笼罩着你。如果我们把每天经历过的种种痛苦、烦恼仔细分析一下，会发现，这痛苦、这困 扰的来源很大一部分是战胜不了自己。很多时候，我们在困难和挫折面前，否定 了自己，以至于让自己打败了你。所以，很多人失败，通常是输给了自己。

岁月不饶人，我亦未曾绕过岁月

知道你会来

所以我一直在这里等

无论您有多忙，请在文章右下角给作者送上一个“在看”，同时分享到你的朋友圈里，可能您的朋友就需要！最后，大家有什么想要吐槽的，就在留言区说出你的想法。