web笔试

标签：运行时错误   解决方法   地理   图层   argument   屏幕   很多   center   rect   

类型判断用到哪些方法？

typeof和instanceof

值类型和引用类型的区别？

根据 JavaScript中的变量类型传递方式，又分为值类型和引用类型，在参数传递方式上，值类型是按值传递，引用类型是按共享传递。

说出下面代码的执行结果，并分析其原因？

function foo(a){

    a = a * 10;

}

function bar(b){

    b.value = ‘new‘;

}

var a = 1;

var b = {value: ‘old‘};

foo(a);

bar(b);

console.log(a); // 1

console.log(b); // value: new

如何理解 JavaScript 的原型？

所有的引用类型（数组、对象、函数），都具有对象特性，即可自由扩展属性（null除外），都有一个__proto__属性，属性值是一个普通的对象，__proto__属性值指向它的构造函数的prototype属性值。所有的函数，都有一个prototype属性，属性值也是一个普通的对象

prototype与__proto__区别？

如何理解 JS 的原型链？

当试图得到一个对象的某个属性时，如果这个对象本身没有这个属性，那么会去它的__proto__（即它的构造函数的prototype）中寻找，若没有找到，会一直往上找，发现是一个链式的结构，所以叫做“原型链”

题目：说出下面执行的结果（执行上下文，这里笔者直接注释输出了）

console.log(a)  // undefined

var a = 100

fn(‘zhangsan‘)  // ‘zhangsan‘ 20

function fn(name) {

    age = 20

    console.log(name, age)

    var age

}

console.log(b); // 这里报错

// Uncaught ReferenceError: b is not defined

b = 100;

题目：如何理解 JS 的作用域和作用域链？

JS 没有块级作用域，只有全局作用域和函数作用域，ES6才有块级作用域，全局作用域就是最外层的作用域，如果我们写了很多行 JS 代码，变量定义都没有用函数包括，那么它们就全部都在全局作用域中。这样的坏处就是很容易冲突。 jQuery、Zepto 等库的源码，所有的代码都会放在(function(){....})()中。因为放在里面的所有变量，都不会被外泄和暴露，不会污染到外面，不会对其他的库或者 JS 脚本造成影响。这是函数作用域的一个体现。

当前作用域没有定义的变量，这成为 自由变量 。自由变量如何得到 —— 向父级作用域寻找。如果父级也没呢？再一层一层向上寻找，直到找到全局作用域还是没找到，就宣布放弃。这种一层一层的关系，就是 作用域链 。自由变量将从作用域链中去寻找，但是依据的是函数定义时的作用域链，而不是函数执行时

闭包主要有哪些应用场景？

①函数作为返回值

②函数作为参数传递

闭包的优缺点？

1.保护函数内的变量安全,加强了封装性 ？

2.在内存中维持一个变量，若b为a的内部函数，闭包之所以会占用资源是当函数a执行结束后, 变量i不会因为函数a的结束而销毁, 因为b的执行需要依赖a中的变量。闭包的缺点就是常驻内存，会增大内存使用量，使用不当(例如用得太多)很容易造成内存泄露 ？

讲解下面代码的执行过程和结果？

var a = true;

setTimeout(function(){

    a = false;

}, 100)

while(a){

    console.log(‘while执行了‘)

}

因为JS是单线程的，所以进入while循环之后，没有「时间」（线程）去跑定时器了，所以这个代码跑起来是个死循环！

ES6 箭头函数中的this和普通函数中的有什么不同？

第一写起来更加简洁，第二 this是父作用域的 this

function fn() {

    console.log(‘real‘, this)  // {a: 100} ，该作用域下的 this 的真实的值

    var arr = [1, 2, 3]

    // 普通 JS

    arr.map(function (item) {

        console.log(‘js‘, this)  // window 。普通函数，这里打印出来的是全局变量，令人费解

        return item + 1

    })

    // 箭头函数

    arr.map(item => {

        console.log(‘es6‘, this)  // {a: 100} 。箭头函数，这里打印的就是父作用域的 this

        return item + 1

    })

}

fn.call({a: 100})

ES6 模块化如何使用？

看笔记

ES6 class 和普通构造函数的区别

function MathHandle(x, y) {

  this.x = x;

  this.y = y;

}

MathHandle.prototype.add = function () {

  return this.x + this.y;

};

var m = new MathHandle(1, 2);

console.log(m.add())

class MathHandle {

  constructor(x, y) {

    this.x = x;

    this.y = y;

  }

  add() {

    return this.x + this.y;

  }

}

const m = new MathHandle(1, 2);

console.log(m.add())

JS 构造函数实现继承

// 动物

function Animal() {

    this.eat = function () {

        console.log(‘animal eat‘)

    }

}

// 狗

function Dog() {

    this.bark = function () {

        console.log(‘dog bark‘)

    }

}

Dog.prototype = new Animal()

// 哈士奇

var hashiqi = new Dog()

ES6 class 实现继承

class Animal {

    constructor(name) {

        this.name = name

    }

    eat() {

        console.log(`${this.name} eat`)

    }

}

class Dog extends Animal {

    constructor(name) {

        super(name)

        this.name = name

    }

    say() {

        console.log(`${this.name} say`)

    }

}

const dog = new Dog(‘哈士奇‘)

dog.say()

dog.eat()

ES6 中新增的数据类型有哪些？

Set 和 Map

DOM 和 HTML 区别和联系？

HTML 是一个有既定标签标准的 XML 格式，标签的名字、层级关系和属性，都被标准化（否则浏览器无法解析），它也是一棵树。HTML 是一棵树，DOM 也是一棵树。可以认为 DOM 就是 JS 能识别的 HTML 结构，一个普通的 JS 对象或者数组。

property 和 attribute 的区别是什么？

两种有很大的区别，property 的获取和修改，是直接改变 JS 对象，而 attribute 是直接改变 HTML 的属性，attribute 就是对 HTML 属性的 get 和 set，和 DOM 节点的 JS 范畴的 property 没有关系。

什么是事件冒泡？

DOM 结构中，事件会沿着 DOM 树向上级节点冒泡，如果我们在上级节点中都绑定了事件，它是会根据 DOM 的结构来冒泡，从下到上挨个执行的。但是我们可以使用e.stopPropagation()来阻止冒泡

使用事件代理有何好处？

使用代理的优点如下：使代码简洁，减少浏览器的内存占用

HTTP 协议中，response 的状态码，常见的有哪些？

xhr.status即 HTTP 状态码，有 2xx 3xx 4xx 5xx 这几种，比较常用的有以下几种：

200 正常

3xx

301 永久重定向。如http://xxx.com这个 GET 请求（最后没有/），就会被301到http://xxx.com/（最后是/）

302 临时重定向。临时的，不是永久的

304 资源找到但是不符合请求条件，不会返回任何主体。如发送 GET 请求时，head 中有If-Modified-Since: xxx（要求返回更新时间是xxx时间之后的资源），如果此时服务器 端资源未更新，则会返回304，即不符合要求

404 找不到资源

5xx 服务器端出错了

另：

xhr.readyState是浏览器判断请求过程中各个阶段的，xhr.status是 HTTP 协议中规定的不同结果的返回状态说明。

xhr.readyState的状态码说明：

0 -代理被创建，但尚未调用 open() 方法。

1 -open() 方法已经被调用。

2 -send() 方法已经被调用，并且头部和状态已经可获得。

3 -下载中， responseText 属性已经包含部分数据。

4 -下载操作已完成

什么是跨域，如何实现跨域？前端处理跨域有没有遇到过，处理跨域的方式有哪几种方式去解决？

浏览器中有 同源策略，url 协议、域名、端口不同算跨域

解决跨域 - 服务器端设置 http header

1、JSONP

但是 HTML 中几个标签能逃避过同源策略——<script src="xxx">、<img src="xxxx"/>、<link href="xxxx">，这三个标签的src/href可以加载其他域的资源，不受同源策略限制。

2、服务器端设置 http header

response.setHeader("Access-Control-Allow-Origin", "http://m.juejin.com/");  // 第二个参数填写允许跨域的域名称，不建议直接写 "*"

response.setHeader("Access-Control-Allow-Headers", "X-Requested-With");

response.setHeader("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");

// 接收跨域的cookie

response.setHeader("Access-Control-Allow-Credentials", "true");

cookie 和 localStorage 有何区别？

它是设计用来在服务器和客户端进行信息传递的，因此我们的每个 HTTP 请求都带着 cookie。但是 cookie 也具备浏览器端存储的能力（例如记住用户名和密码），因此就被开发者用上了。

使用方法：document.cookie = ‘···‘

缺点：

存储量太小，只有 4KB

所有 HTTP 请求都带着，会影响获取资源的效率

API 简单，需要封装才能用

locationStorage 和 sessionStorage区别？

两者的区别就在于sessionStorage根据 session 过去时间而实现，而localStorage会永久有效。一些需要及时失效的重要信息放在sessionStorage中，一些不重要但是不经常设置的信息，放在localStorage中。

优点

存储量增大到 5MB

不会带到 HTTP 请求中

API 适用于数据存储 localStorage.setItem(key, value) localStorage.getItem(key)

说下你常用的几种布局方式？

盒模型、flex布局

谈谈你对flex布局的理解？

以下6个属性设置在容器上：
flex-direction属性决定主轴的方向
flex-wrap属性定义，如果一条轴线排不下，如何换行
justify-content属性定义了项目在主轴上的对齐方式。
align-items属性定义项目在交叉轴上如何对齐。
align-content属性定义了多根轴线的对齐方式

以下6个属性设置在项目上：
order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0
flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大
flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小
flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）
flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选
align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch

什么是盒子模型？

内边距、边框和外边距。它们三者就构成了一个“盒子”

盒子模型的宽度如何计算？

固定宽度的盒子：内容宽度（固定的宽度） + border宽度 + padding宽度 + margin宽度之和

充满父容器的盒子：内容宽度 + border宽度 + padding宽度 + margin宽度之和，内容宽度=父容器的内容宽度-（自己的 border宽度 + 自己的padding宽度 + 自己的margin宽度）

包裹内容的盒子：内容的宽度按照内容计算，盒子的宽度=内容宽度的基础上+padding宽度 + border宽度 + margin宽度之和。

为何 float 会导致父元素塌陷？

被设置了 float 的元素会脱离文档流，破坏了父标签的原本结构，使得父标签出现了坍塌现象

float 的重要的特性是什么？

包裹性和清空格

relative、absolute 和 fixed 有何区别？什么是定位上下文？

relative 会导致自身位置的相对变化，而不会影响其他元素的位置、大小，就是 relative 产生一个新的定位上下文。

absolute 元素脱离了文档结构，只要元素会脱离文档结构，它就会产生破坏性，导致父元素坍塌，absolute 元素具有“包裹性”。bsolute 元素具有“跟随性”。虽然 absolute 元素脱离了文档结构，若我们没有设置 top、left 的值，它的位置并不发生变化，呆在它原本的位置。absolute 元素会悬浮在页面上方，会遮挡住下方的页面内容。置了 top、left 值时，元素是相对于最近的定位上下文来定位的，而不是相对于浏览器定位。

fixed 和 absolute 是一样的，唯一的区别在于：absolute 元素是根据最近的定位上下文确定位置，而 fixed 根据 window （或者 iframe）确定位置。

relative 元素的定位永远是相对于元素自身位置的，和其他元素没关系，也不会影响其他元素。

absolute 设置了 top、left，浏览器会递归查找该元素的所有父元素，如果找到一个设置了position:relative/absolute/fixed的元素，就以该元素为基准定位，如果没找到，就以浏览器边界定位。

fixed 元素的定位是相对于 window （或 iframe）边界的，和其他元素没有关系。但是它具有破坏性，会导致其他元素位置的变化。

相对于flex布局，传统布局的方式是什么？

布局的传统解决方案基于盒子模型，依赖 display 属性 + position 属性 + float 属性

如何实现水平居中？

inline 元素用text-align: center;

block 元素可使用margin: auto;

绝对定位元素可结合left和margin实现，但是必须知道宽度

.container {  //container是item的父级

    position: relative;

    width: 500px;

}

.item {

    width: 300px;

    height: 100px;

    position: absolute;

    left: 50%; 

    margin: -150px;  

}

如何实现垂直居中？

inline 元素可设置line-height的值等于height值

绝对定位元素，可结合left和margin实现，但是必须知道尺寸（优点：兼容性好

缺点：需要提前知道尺寸）

.container {

    position: relative;

    height: 200px;

}

.item {

    width: 80px;

    height: 40px;

    position: absolute;

    left: 50%;

    top: 50%;

    margin-top: -20px;

    margin-left: -40px;

}

绝对定位可结合transform实现居中（优点：不需要提前知道尺寸

缺点：兼容性不好）

.container {

    position: relative;

    height: 200px;

}

.item {

    width: 80px;

    height: 40px;

    position: absolute;

    left: 50%;

    top: 50%;

    transform: translate(-50%, -50%);

    background: blue;

}

绝对定位结合margin: auto（不需要提前知道尺寸，兼容性好）

测试：

<html>

<head>

<style>

.container {

    position: relative;

    height: 300px;

    border:1px blue solid;

}

.item {

    width: 100px;

    height: 50px;

    position: absolute;

    left: 0;

    top: 0;

    right: 0;

    bottom: 0;

    margin: auto;

    background:red

}

</style>

<title>我的第一个 HTML 页面</title>

</head>

<body>

<div class="container"><div class="item"></div></div>

</body>

</html>

如何理解 HTML 语义化？

所谓“语义”就是为了更易读懂，分两部分：让人（写程序、读程序）更易读懂和让机器（浏览器、搜索引擎）更易读懂

为了加强 HTML 语义化，HTML5 标准中又增加了header section artical等标签。

CSS 的transition（过渡）和animation（动画）有何区别？一些常见的属性说下？

首先transition和animation都可以做动效，从语义上来理解，transition是过渡，由一个状态过渡到另一个状态，比如高度100px过渡到200px；而animation是动画，即更专业做动效的，animation有帧的概念，可以设置关键帧keyframe，一个动画可以由多个关键帧多个状态过渡组成，另外animation也包含多个属性。

transition: property duration timing-function delay

ransition-property ：规定设置过渡效果的css属性名称

transition-duration ：规定完成过渡效果需要多少秒或毫秒

transition-timing-function ：指定过渡函数，规定速度效果的速度曲线

transition-delay ：指定开始出现的延迟时间

animation: name duration timing-function delay iteration-count direction

animation-name   规定需要绑定到选择器的 keyframe 名称。。

animation-duration     规定完成动画所花费的时间，以秒或毫秒计。

animation-timing-function 规定动画的速度曲线。

animation-delay   规定在动画开始之前的延迟。

animation-iteration-count   规定动画应该播放的次数。

animation-direction     规定是否应该轮流反向播放动画。

动画相关

transform（变形）、translate（移动）

transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。

translate() 方法转换画布的用户坐标系统，translate(dx, dy)

什么是重绘和回流？

重绘：指的是当页面中的元素不脱离文档流，而简单地进行样式的变化，比如修改颜色、背景等，浏览器重新绘制样式

回流：指的是处于文档流中 DOM 的尺寸大小、位置或者某些属性发生变化时，导致浏览器重新渲染部分或全部文档的情况

回流要比重绘消耗性能开支更大。

找出下面代码的优化点，并且优化它？

var data = [‘string1‘, ‘string2‘, ‘string3‘];

for(var i = 0; i < data.length; i++){

    var dom = document.getElementById(‘list‘);

    dom.innerHTML += ‘<li>‘ + data[i] + ‘</li>‘;

}

var dom = document.getElementById(‘list‘);

var data = [‘string1‘, ‘string2‘, ‘string3‘];

var frag = document.createDocumentFragment();

var li;

for(var i = 0; i < data.length; i++){   

    li = document.createElement("li");

    li.innerHTML = data[i];

    frag.appendChild(li);  // 先放在 frag 中，最后一次性插入到 DOM 结构中。

}

listNode.appendChild(frag);

前端常见的安全问题有哪些？

XSS（跨站脚本攻击）和CSRF（跨站请求伪造）

何为构建工具，为什么要使用？

构建”也可理解为“编译”，就是将开发环境的代码转换成运行环境代码的过程。开发环境的代码是为了更好地阅读，而运行环境的代码是为了更快地执行，两者目的不一样，因此代码形式也不一样，为了达到这个目的，就要使用构建工具。

总结一下需要构建工具处理的几种情况：

构建工具的作用？

处理模块化、编译语法、代码压缩

何为抓包？

PC 端的网页，我们可以通过 Chrome、Firefox 等浏览器自带的开发者工具来查看网页的所有网络请求，以帮助排查 bug。这种监听、查看网络请求的操作称为抓包。

如何抓取数据？如何使用工具来配置代理？

监听请求：

Mac 系统下推荐使用 Charles，Windows 系统推荐使用 Fiddler

1、将安装好 Charles 的电脑和要抓包的手机，连接到同一个网络，保证 IP 段相同

2、手机设置网络代理，（代理IP）代理到电脑的 IP，代理的端口为8888，Charles选择“允许”代理

3、使用手机端访问的网页或者联网的请求，Charles 就能监听到

线上的地址代理到测试环境：

1、Charles 为例，点击菜单栏中 Tools 菜单，二级菜单中点击 Map Remote

2、选中 Enable Map Remote 复选框，然后点击 Add 按钮，添加一个代理项

3、将添加的代理项，map from 设置https://www.aaa.com/api/getuser?name=xxx，Map to设置http://168.1.1.100:8080/api/getuser?name=xxx

4、单击OK

谈谈Vue的生命周期的钩子？

beforeCreate （挂载目标（el）undefined，数据（data）undefined）
created（挂载目标（el）已被初始化 ，数据（data）已被初始化 ）
beforeMount（挂载目标（el）已被初始化，数据（data）已被初始化） 模板的占位{{message}} 被替换
mounted（挂载目标（el）已被初始化，数据（data）已被初始化）  模板的占位{{message}} 被替换

首先会判断对象是否有el选项。如果有的话就继续向下编译，如果没有el选项，则停止编译，也就意味着停止了生命周期，直到在该vue实例上调用vm.$mount(el)
render函数选项 > template选项 > outer HTML

beforeUpdate（挂载目标（el）undefined，数据（data）undefined）
updated（挂载目标（el）undefined，数据（data）undefined）
beforeDestroy（挂载目标（el）undefined，数据（data）undefined）
destroyed（挂载目标（el）undefined，数据（data）undefined）
beforeDestroy钩子函数在实例销毁之前调用。在这一步，实例仍然完全可用。
destroyed钩子函数在Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

前端趋势？

简单一致（前端开发更加规范，统一），模块化，全栈

权限和Vue-Router的动态注册？

什么是restful？

要讲RESTful还得讲REST，REST是一种软件架构风格、设计风格，而不是标准，它规定了一些约束条件和原则，满足这些约束条件和原则的应用程序或（架构）设计就是 RESTful。

Vue改变数据的方式？

This和model

你以前的开发流程是怎样的？

多种开发方式结合使用，先确认大方向，根据需求用自顶向下，逐步求精方式，先定一个架构，再确定各模块。在各模块开发时，采用敏捷开发，迭代。通俗的说，是先打通业务逻辑，再扣细节。

React和Vue的对比？

Vue 数据驱动、组件化、轻量、简洁、高效、快速、模块友好，但是模板很容易出现运行时错误，难以测试，也不容易重构或分解。React Native是用JavaScript创建原生APP的库，如果你学习了React.js，那么你很快就可以学会React Native。开发人员可以构建一个web或者原生APP，他们不需要不同的知识体系和工具，但是学习成本较高，应用体积较大。

变量提升？

把变量声明提升到当前执行环境的最顶端，先赋undefined（首先js引擎在读取js代码时会进行两个步骤，第一个步骤是解释，第二个步骤是执行。

所谓解释就是会先通篇扫描所有的Js代码，然后把所有声明提升到顶端，第二步是执行，执行就是操作一类的）

说一下你对原型与原型链的了解度，有几种方式可以实现继承，用原型实现继承有什么缺点，怎么解决？

原型链继承、构造继承、实例继承、拷贝继承、组合继承、寄生组合继承

缺点：要想为子类新增属性和方法，必须要在new Animal()这样的语句之后执行，不能放到构造器中，无法实现多继承，来自原型对象的引用属性是所有实例共享的，创建子类实例时，无法向父类构造函数传参，解决用ES6的class

iframe的优缺点有哪些？

1.iframe能够原封不动的把嵌入的网页展现出来。

2.如果有多个网页引用iframe，那么你只需要修改iframe的内容，就可以实现调用的每一个页面内容的更改，方便快捷。

3.网页如果为了统一风格，头部和版本都是一样的，就可以写成一个页面，用iframe来嵌套，可以增加代码的可重用。

4.如果遇到加载缓慢的第三方内容如图标和广告，这些问题可以由iframe来解决。

5.重载页面时不需要重载整个页面，只需要重载页面中的一个框架页(减少了数据的传输，增加了网页下载速度)

6.方便制作导航栏，航栏在页面位置固定不变

①iframe会阻塞主页面的Onload事件；

② 搜索引擎的检索程序无法解读这种页面，不利于SEO;

③ 会影响页面的并行加载（并行加载：同一时间针对同一域名下的请求。一般情况，iframe和所在页面在同一个域下面，而浏览器的并加载的数量是有限制的）。

解决方案：

<iframe id="fram"></iframe> 

 document.getelementbyid("fram").src="a2.html"

为什么会有同源策略？

防止XSS

从发送一个url地址到返回页面，中间发生了什么？

1、首先，在浏览器地址栏中输入url

2、浏览器先查看浏览器缓存-系统缓存-路由器缓存，如果缓存中有，会直接在屏幕中显示页面内容。若没有，则跳到第三步操作。

3、在发送http请求前，需要域名解析(DNS解析)，解析获取相应的IP地址。

4、浏览器向服务器发起tcp连接，与浏览器建立tcp三次握手。

5、握手成功后，浏览器向服务器发送http请求，请求数据包。

6、服务器处理收到的请求，将数据返回至浏览器

7、浏览器收到HTTP响应

8、读取页面内容，浏览器渲染，解析html源码

9、生成Dom树、解析css样式、js交互

10、客户端和服务器交互

11、ajax查询

说下工作中你做过的一些性能优化处理？

减少页面体积，提升网络加载：

静态资源的压缩合并（JS 代码压缩合并、CSS 代码压缩合并、雪碧图）

静态资源缓存（资源名称加 MD5 戳）

使用 CDN 让资源加载更快

优化页面渲染：

CSS 放前面，JS 放后面

懒加载（图片懒加载、下拉加载更多）

减少DOM 查询，对 DOM 查询做缓存

减少DOM 操作，多个操作尽量合并在一起执行（DocumentFragment）

事件节流

尽早执行操作（DOMContentLoaded）

使用 SSR 后端渲染，数据直接输出到 HTML 中，减少浏览器使用 JS 模板渲染页面 HTML 的时间

箭头函数有什么特性，其this指向谁？

特性：

1.对 this 的关联。函数内置 this 的值，取决于箭头函数在哪儿定义，而非箭头函数执行的上下文环境。

2.new 不可用。箭头函数不能使用 new 关键字来实例化对象，不然会报错。

3.this 不可变。函数内置 this 不可变，在函数体内整个执行环境中为常量。

4.没有arguments对象。更不能通过arguments对象访问传入参数。只能使用显式命名或其他ES6新特性来完成。

This：

箭头函数没有自己的this, 它的this是继承而来; 默认指向在定义它时所处的对象(宿主对象),而不是执行时的对象, 定义它的时候,可能环境是window; 箭头函数可以方便地让我们在 setTimeout ,setInterval中方便的使用this

什么是执行上下文？

如何实现一个promise，promise的原理，以及它的两个参数是什么？

const promise = new Promise(function(resolve, reject) {

  // ... some code

  if (/* 异步操作成功 */){

    resolve(value);

  } else {

    reject(error);

  }

});

promise.then(function(value) {

  // success

}, function(error) {

  // failure

});

也就是说promise对象代表了一个异步操作，可以将异步对象和回调函数脱离开来，通过then方法在这个异步操作上面绑定回调函数，使用catch方法捕获异常

promise中第二个参数的reject中执行的方法和promise.catch()都是失败执行的，分别这么写有什么区别，什么情况下会两个都同时用到？

reject中执行的方法仅能处理调用reject()时的异常，而catch同时处理声明Promise里的函数和then里的异常

举例：

auto.getData().then(function (results) {

     res.send(results);

}, next);

这种写法，next函数只会处理getData中的reject时的异常情况。

auto.getData().then(function (results) {

     res.send(results);

}).catch(next);

这种写法，catch会捕捉到在它之前的promise链上的代码抛出的异常,不仅getData，还包括then()里面。

map和set有没有用过，map数据结构有什么优点？

set成员的值都是唯一的，可用for of遍历

map各种类型的值（包括对象）都可以当作键，Map 结构提供了“值—值”的对应，是一种更完善的 Hash 结构实现。如果需要“键值对”的数据结构，Map 比 Object 更合适。

http、https、以及websocket的区别？

https协议需要到ca申请证书，一般免费证书很少，需要交费。http是超文本传输协议，信息是明文传输，https 则是具有安全性的ssl加密传输协议http和https使用的是完全不同的连接方式用的端口也不一样,前者是80,后者是443。http的连接很简单,是无状态的HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议 要比http协议安全。

WebSocket他是为了解决客户端发起多个http请求到服务器资源浏览器必须要经过长时间的轮询问题而生的，他实现了多路复用，他是全双工通信。在webSocket协议下客服端和浏览器可以同时发送信息。

Websocket与HTTP比较：

 相同点：

 1.都是基于TCP的应用层协议。

 2.都使用Request/Response模型进行连接的建立。

 3.在连接的建立过程中对错误的处理方式相同，在这个阶段WS可能返回和HTTP相同的返回码。

 4.可以在网络中传输数据。

 不同点：

 1.WS使用HTTP来建立连接，但是定义了一系列新的header域，这些域在HTTP中并不会使用。

 2.WS的连接不能通过中间人来转发，它必须是一个直接连接。

 3.WS连接建立之后，通信双方都可以在任何时刻向另一方发送数据。

 4.WS 连接建立之后，数据的传输使用帧来传递，不再需要Request消息。

 5.WS的数据帧有序。

协商缓存和强缓存的区别？

说下计算机网络的相关协议？

TCP/IP协议

H5新特性？

新增选择器 document.querySelector、document.querySelectorAll

拖拽释放(Drag and drop) API

媒体播放的 video 和 audio

本地存储 localStorage 和 sessionStorage

离线应用 manifest

桌面通知 Notifications

语意化标签 article、footer、header、nav、section

增强表单控件 calendar、date、time、email、url、search

地理位置 Geolocation

多任务 webworker

全双工通信协议 websocket

历史管理 history

跨域资源共享(CORS) Access-Control-Allow-Origin

页面可见性改变事件 visibilitychange

跨窗口通信 PostMessage

Form Data 对象

绘画 canvas

DOM的操作：读，移动，移除，复制，创建

（1）创建新节点

      createDocumentFragment()    //创建一个DOM片段

      createElement()   //创建一个具体的元素

      createTextNode()   //创建一个文本节点

（2）添加、移除、替换、插入

      appendChild()

      removeChild()

      replaceChild()

      insertBefore() //在已有的子节点前插入一个新的子节点

（3）查找

      getElementsByTagName()    //通过标签名称

      getElementsByName()    //通过元素的Name属性的值(IE容错能力较强，会得到一个数组，其中包括id等于name值的)

      getElementById()    //通过元素Id，唯一性

自动化，代码压缩工具？

UglifyJS

有什么样的MVC、MVVM前端框架？

bootstrap、Angular、React、Vue

小程序原理？

1. 提供了JavsScript运行环境，由JavaScript编写的业务代码完成逻辑层的处理2. 通过数据传输接口（注册Page时的data属性及后续的setData方法调用）将逻辑层的数据传输给视图层3. 视图层由WXML语言编写的模板通过“数据绑定”与逻辑层传输过来的数据merge成展现结果并展现4. 视图的样式控制由WXSS语言编写的样式规则进行配置

小程序异步？

wx.request({

  url: ‘test.php‘, //仅为示例，并非真实的接口地址

  data: {

     x: ‘‘ ,

     y: ‘‘

  },

  header: {

      ‘content-type‘: ‘application/json‘ // 默认值

  },

  success: function(res) {

    console.log(res.data)

  }

})

小程序如何提升应用速度？

小程序双向绑定和Vue区别？

如何实现一个自定义组件，不同组件之间如何通信的？

Vue父子组件如何通信的？

父组件向子组件，用props选项，子组件向父组件传递用事件

Vue的响应式原理你知道是怎么实现的吗？

新窗口打开网页，用到以下哪个值

_blank -- 在新窗口中打开链接
_parent -- 在父窗体中打开链接
_self -- 在当前窗体打开链接,此为默认值
_top -- 在当前窗体打开链接，并替换当前的整个窗体(框架页)
一个对应的框架页的名称 -- 在对应框架页中打开

谈谈document.ready和window.onload的区别

在Jquery里面，我们可以看到两种写法:$(function(){}) 和$(document).ready(function(){})，这两个方法的效果都是一样的，都是在dom文档树加载完之后执行一个函数（注意，不是全部文件加载完），而window.onload是在dom文档树加载完和所有文件加载完之后执行一个函数。也就是说$(document).ready要比window.onload先执行。

Doctype和严格模式与混杂模式的描述？

如果你的页面添加了<!DOCTYPE html>那么，那么就等同于开启了标准模式，那么浏览器就得老老实实的按照W3C的标准解析渲染页面，这样一来，你的页面在所有的浏览器里显示的就都是一个样子了

请写出下面的代码执行结果：

var str = ‘google‘;

var reg = /o/g;

console.log(reg.test(str))

console.log(reg.test(str))

console.log(reg.test(str))

最后一个不是为true，而是false，这是因为reg这个正则有个g，即global全局的属性，这种情况下lastIndex就发挥作用了，因为有标志g，所以每次匹配都从上一次匹配文本之后的第一个字符的位置开始，因此第三个是false，解决方法如下：

(function(){

    const reg = /o/g;

    function isHasO(str){

        // reg.lastIndex = 0; 这样就可以避免这种情况

        return reg.test(str)

    }

    var str = ‘google‘;

    console.log(isHasO(str))

    console.log(isHasO(str))

    console.log(isHasO(str))

}())

Javascript和jQuery常用方法总结：百度搜索

web笔试

标签：运行时错误   解决方法   地理   图层   argument   屏幕   很多   center   rect   

原文地址：https://www.cnblogs.com/ww01/p/9233354.html