前端技术面——（js基础一）

时间 2019-12-17

标签前端技术基础栏目 JavaScript 繁體版

原文原文链接

一、Vue双向数据绑定是如何实现的？原文

vue.js 是采用数据劫持结合发布者-订阅者模式的方式，经过Object.defineProperty()来劫持各个属性的setter，getter，在数据变更时发布消息给订阅者，触发相应的监听回调

Vue.js 最核心的功能有两个，一是响应式的数据绑定系统，二是组件系统。
访问器属性是对象中的一种特殊属性，它不能直接在对象中设置，而必须经过 defineProperty() 方法单独定义。
访问器属性的"值"比较特殊，读取或设置访问器属性的值，其实是调用其内部特性：get和set函数。
get 和 set 方法内部的 this 都指向 obj，这意味着 get 和 set
函数能够操做对象内部的值。另外，访问器属性的会"覆盖"同名的普通属性，由于访问器属性会被优先访问，与其同名的普通属性则会被忽略。

Angularjs和Vue.js对比javascript

二、极简双向数据绑定是如何实现的？

三、原型和原型链是什么？原文

一、构造函数建立对象咱们先使用构造函数建立一个对象：

二、 prototype 每一个函数都有一个prototype属性，函数的prototype属性指向了一个对象，这个对象正是调用该构造函数而建立的实例的原型,也就是这个例子中的person1和person2的原型。每个JavaScript对象(null除外)在建立的时候就会与之关联另外一个对象，这个对象就是咱们所说的原型，每个对象都会从原型”继承”属性。

三、proto 这是每个JavaScript对象(除了null)都具备的一个属性，叫__proto__，这个属性会指向该对象的原型。css

四、construcotr，每一个原型都有一个constructor属性指向关联的构造函数html

五、实例与原型当读取实例的属性时，若是找不到，就会查找与对象关联的原型中的属性，若是还查不到，就去找原型的原型，一直找到最顶层为止。前端

六、原型链那Object.prototype的原型呢？ null，嗯，就是null,因此查到Object.prototype就能够中止查找了

四、总结ES6经常使用的新特性。原文

在这里列举几个经常使用的：vue

箭头函数
Promise
Let与Const
类
模块化
函数参数默认值
模板字符串
解构赋值
延展操做符
对象属性简写

五、箭头函数。原文

箭头函数被调用的时候，不会自动绑定一个this对象。换句话说，箭头函数根本就没有本身的this。它的this都是捕获自其所在上下文的this值。

做为匿名函数被调用。

做为方法被调用

在方法内部被调用

使用new 操做符调用，会抛出错误
使用call和apply，bind()调用

总结一下

箭头函数没有本身的this对象，它老是搬运外部环境的this对象。所以，只要离它最近的外部环境中的this改变，箭头函数中的this就改变。若是离它最近的环境中的this，没有改变。那么箭头函数中的this就不会改变。

原文html5

6.promise是什么？原文

什么是Prmoisejava

Promise对象能够理解为一次执行的异步操做，使用promise对象以后可使用一种链式调用的方式来组织代码

Promise对象的特色：react

一、对象的状态不受外界影响。
Promise对象表明一个异步操做，有三种状态:
pending（执行中）
Resolved（成功，又称Fulfilled）
rejected（拒绝）
二、一旦状态改变，就不会再变，任什么时候候均可以获得这个结果。
Promise对象的状态改变，只有两种可能：从Pending变为Resolved和从Pending变为Rejected

Promise对象的缺点：jquery

一、没法取消Promise，一旦新建它就会当即执行，没法中途取消。
二、若是不设置回调函数，Promise内部抛出的错误，不会反应到外部。
三、当处于Pending状态时，没法得知目前进展到哪个阶段（刚刚开始仍是即将完成）。

promise兼容性webpack

除了IE这种古老的浏览器和一些低版本的安卓外，现代浏览器支持仍是挺好的

Promise的使用

一、基本用法：
（1）、首先咱们new一个Promise,将Promise实例化
（2）、而后在实例化的promise能够传两个参数，一个是成功以后的resolve，一个是失败以后的reject
（3）、Promise实例生成之后，能够用then方法分别指定Resolved状态和Reject状态的回调函数

二、链式操做
也许你会说，Promise只是简化层层回调的写法而已吧，其实否则，它的精髓是经过维护状态、传递状态的方式来使回调方式可以及时的调用，所以，相比于callback，它更灵活，更简单。

promise.all方法

Promise.all 能够接收一个元素为 Promise 对象的数组做为参数，当这个数组里面全部的 Promise 对象都变为 resolve 时，该方法才会返回。
all接收一个数组做为参数，p1,p2是并行执行的，等两个都执行完了，才会进入到then，all会把全部的结果放到一个数组中返回，因此咱们打印出咱们的结果为一个数组。

promise.race方法

race只返回跑的快的值，也就是说result返回比较快执行的那个。

七、JS中事件冒泡与捕获。原文

一、document 往 target节点，捕获前进，遇到注册的捕获事件当即触发执行
二、到达target节点，触发事件（对于target节点上，是先捕获仍是先冒泡则捕获事件和冒泡事件的注册顺序，先注册先执行）
三、target节点往 document 方向，冒泡前进，遇到注册的冒泡事件当即触发

总结下就是:

对于非target节点则先执行捕获在执行冒泡
对于target节点则是先执行先注册的事件，不管冒泡仍是捕获

八、http和https

(1)http和https的基本概念

http: 超文本传输协议，是一个客户端和服务器端请求和应答的标准（TCP），用于从WWW服务器传输超文本到本地浏览器的传输协议。
https: 是以安全为目标的HTTP通道，简单讲是HTTP的安全版，即HTTP下加入SSL层。
https协议的主要做用是：创建一个信息安全通道，来确保数组的传输，确保网站的真实性。

(2)http和https的区别？

https协议是由http和ssl协议构建的可进行加密传输和身份认证的网络协议，比http协议的安全性更高。

1.Https协议须要ca证书，费用较高。
2.http是超文本传输协议，信息是明文传输，https则是具备安全性的ssl加密传输协议。
3.使用不一样的连接方式，端口也不一样，通常而言，http协议的端口为80，https的端口为443
4.http的链接很简单，是无状态的；HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，比http协议安全。

(3)https协议的工做原理

客户端在使用HTTPS方式与Web服务器通讯时有如下几个步骤。

1.客户使用https url访问服务器，则要求web 服务器创建ssl连接。
2.web服务器接收到客户端的请求以后，会将网站的证书（证书中包含了公钥），返回或者说传输给客户端。
3.客户端和web服务器端开始协商SSL连接的安全等级，也就是加密等级。
4.客户端浏览器经过双方协商一致的安全等级，创建会话密钥，而后经过网站的公钥来加密会话密钥，并传送给网站。
5.web服务器经过本身的私钥解密出会话密钥。
6.web服务器经过会话密钥加密与客户端之间的通讯。

9.tcp三次握手，一句话归纳

三次握手能够简化为：C发起请求链接S确认，也发起链接C确认咱们再看看每次握手的做用：

第一次握手：S只能够确认本身能够接受C发送的报文段
第二次握手：C能够确认 S收到了本身发送的报文段，而且能够确认本身能够接受S发送的报文段
第三次握手：S能够确认 C收到了本身发送的报文段

10.TCP和UDP的区别

TCP是面向链接的，udp是无链接的即发送数据前不须要先创建连接。
TCP提供可靠的服务。也就是说，经过TCP链接传送的数据，无差错，不丢失，不重复，且按序到达;UDP尽最大努力交付，即不保证可靠交付。而且由于tcp可靠，面向链接，不会丢失数据所以适合大数据量的交换。
TCP是面向字节流，UDP面向报文，而且网络出现拥塞不会使得发送速率下降（所以会出现丢包，对实时的应用好比IP电话和视频会议等）。
TCP只能是1对1的，UDP支持1对1,1对多。
TCP的首部较大为20字节，而UDP只有8字节。
TCP是面向链接的可靠性传输，而UDP是不可靠的。

11.Cookie、sessionStorage、localStorage的区别

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

Cookie：cookie数据始终在同源的http请求中携带（即便不须要），即cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。cookie数据还有路径（path）的概念，能够限制cookie只属于某个路径下,存储的大小很小只有4K左右。（key：能够在浏览器和服务器端来回传递，存储容量小，只有大约4K左右）

sessionStorage：仅在当前浏览器窗口关闭前有效，天然也就不可能持久保持，localStorage：始终有效，窗口或浏览器关闭也一直保存，所以用做持久数据；cookie只在设置的cookie过时时间以前一直有效，即便窗口或浏览器关闭。（key：自己就是一个回话过程，关闭浏览器后消失，session为一个回话，当页面不一样即便是同一页面打开两次，也被视为同一次回话）

localStorage：localStorage 在全部同源窗口中都是共享的；cookie也是在全部同源窗口中都是共享的。（key：同源窗口都会共享，而且不会失效，无论窗口或者浏览器关闭与否都会始终生效）

12.本身实现一个bind函数

原理：经过apply或者call方法来实现。

1三、preventDefault 和 stopPropagation

event.stopPropagation() 方法阻止事件冒泡到父元素，阻止任何父事件处理程序被执行。 preventDefault阻止元素发生的默认行为。

例如：当点击提交按钮时阻止对表单的提交
阻止一下URL的连接

## 1四、写一个通用事件侦听函数

1五、为何要用闭包

闭包就是可以读取其余函数内部变量的函数
闭包的做用在于，能够经过闭包，设计私有变量及方法。

闭包的三大特色为：

一、函数嵌套函数
二、内部函数能够访问外部函数的变量
三、参数和变量不会被回收。

1六、call和apply和bind有什么不同？

相同点

都是实现继承或者转换对象指针的做用
一、call和apply能够改变this的指向
二、第一个参数都是this要指向的对象
三、均可以利用后续参数继续传参

不一样点

一、call和apply是对函数的直接调用，而bind方法返回的是一个函数，bind后函数不会当即执行，而是返回了一个改变上下文的函数副本
二、call和apply均可以传递参数

什么是bind

bind()会建立一个新函数，当这个新函数被调用时，bind（）的第一个参数将做为运行时的this，以后的一序列参数将会在传递的实参前做为传递的参数

1七、前端性能优化你了解哪些

内容层面

使用CDN
单域名、多域名，单域名能够减小DNS查找次数，多域名能够增长浏览器并行下载数量，这须要权衡，通常同一个域下不要超过四个资源。
避免重定向(分场景)
避免404

网络层面

利用缓存，能够参考另外一篇文章手写文件服务器，说说先后端交互
文件压缩(经过响应头Accept-Encoding: gzip, deflate, br告诉服务器你支持的压缩类型)
按需加载，提取公共代码，tree-shaking等(均可以经过webpack来实现)
减小cookie大小
文件合并，经过css雪碧图合并图片
文件预加载、图片懒加载

渲染层间

js放底部，css放顶部
减小reflow(回流)和repaint(重绘)
减小dom节点

代码层面

缓存dom节点，减小节点查找，css选择器层级优化
减小dom节点操做
合理使用break、continue、return等，优化循环
像react用到的事件委托、对象池等手段

1八、说说浏览器的reflow和repaint

浏览器解析过程

解析html生成dom树
解析css
把css应用于dom树，生成render树(这里记录这每个节点和它的样式和所在的位置)
把render树渲染到页面

reflow(回流)

reflow翻译为回流，指的是页面再次构建render树。每一个页面至少发生一次回流，就是第一次加载页面的时候此外，当页面中有任何改变可能形成文档结构发生改变(即元素间的相对或绝对位置改变)，都会发生reflow，常见的有：

添加或删除元素(opacity:0除外，它不是删除)
改变某个元素的尺寸或位置
浏览器窗口改变(resize事件触发)

repaint(重绘)

repaint翻译为重绘，它能够类比为上面的第四步，根据render树绘制页面，它的性能损耗比回流要小。每次回流必定会发生重绘。此外，如下操做(不影响文档结构的操做，影响结构的会发生回流)也会发生重绘：

元素的颜色、透明度改变
text-align等

1九、深拷贝

function deepcopy(obj) {
        let res = {};
        for (key in obj) {
            if (typeof obj[key] == 'object') {
                res[key] = deepcopy(obj[key]);
            } else {
                res[key] = obj[key];
            }
        }
        return res;
    }
复制代码

20、defer和async的区别原文

定义

defer：此布尔属性被设置为向浏览器指示脚本在文档被解析后执行。
async：设置此布尔属性，以指示浏览器若是可能的话，应异步执行脚本。
1. 对于defer，咱们能够认为是将外链的js放在了页面底部。js的加载不会阻塞页面的渲染和资源的加载。不过defer会按照本来的js的顺序执行，因此若是先后有依赖关系的js能够放心使用。
2. 对于async，这个是html5中新增的属性，它的做用是可以异步的加载和执行脚本，不由于加载脚本而阻塞页面的加载。一旦加载到就会马上执行在有async的状况下，js一旦下载好了就会执行，因此颇有可能不是按照本来的顺序来执行的。若是js先后有依赖性，用async，就颇有可能出错。

区别

相同点：

1. 加载文件时不阻塞页面渲染
2. 对于inline的script（内联脚本）无效
3. 使用这两个属性的脚本中不能调用document.write方法
4. 有脚本的onload的事件回调

不一样点：

1. html的版本html4.0中定义了defer；html5.0中定义了async
2. 浏览器兼容性
3. 执行时刻每个async属性的脚本都在它下载结束以后马上执行，同时会在window的load事件以前执行。因此就有可能出现脚本执行顺序被打乱的状况；每个defer属性的脚本都是在页面解析完毕以后，按照本来的顺序执行，同时会在document的DOMContentLoaded以前执行。

结语

1. 若是async为true，那么脚本在下载完成后异步执行。
2. 若是async为false，defer为true，那么脚本会在页面解析完毕以后执行。
3. 若是async和defer都为false，那么脚本会在页面解析中，中止页面解析，马上下载而且执行。

最后给一点我的的建议，不管使用defer仍是async属性，都须要首先将页面中的js文件进行整理，哪些文件之间有依赖性，哪些文件能够延迟加载等等，作好js代码的合并和拆分，而后再根据页面须要使用这两个属性。

2一、详解toString

toString() 方法返回一个表示该对象的字符串。 valueOf() 方法返回指定对象的原始值。

2二、如何去除字符串首位空格？

//es6
' ab '.trim()      //"ab" 
//正则
' ab '.replace(/^\s*|\s*$/g,'')  //"ab"
复制代码

2三、jsonp原理？缺点?

工做原理：使用script标签实现跨域访问，可在url中指定回调函数，获取JSON数据并在指定的回调函数中执行jquery实现jsop。
缺点：只支持GET方式的jsonp实现，是一种脚本注入行为存在必定的安全隐患。若是返回的数据格式有问题或者返回失败了，并不会报错。

2四、设计模式

一、工厂模式
 function People() {
    var obj = new Object();
    obj.name = '小明';
    obj.age = 12;
    obj.say = function() {
        // alert(this.name);
        return this.name;
    }
    return obj;
}

二、构造函数模式
function People() {
    this.name = '小明';
    this.say = function() {
        return this.name;
    }
}

三、原型模式
function People(name) {
    this.name = name;
}
People.prototype.sayName = function() {
    console.log(this.name);
}
复制代码

2五、继承

一、原型链继承
function People(name) {
    this.name = name;
}
People.prototype.sayName = function() {
    console.log(this.name);
}
function Student(name, grade) {
    this.name = name;
    this.grade = grade;
    this.sayGrade = function() {
        console.log(this.grade);
    }
}
Student.prototype = new People();


二、构造函数继承
function People() {
    this.name = name;
}
People.prototype.sayName = function() {
    console.log(this.name);
}
People.prototype.type = function() {
    console.log('人');
};
function Student(name, grade) {
    this.name = name;
    this.grade = grade;
    People.apply(this);
}
var student = new Student('小兰', 5);
student.type();
复制代码

2六、HTTP的几种请求方法用途

一、GET方法

发送一个请求来取得服务器上的某一资源

二、POST方法

向URL指定的资源提交数据或附加新的数据

三、PUT方法

跟POST方法很像，也是想服务器提交数据。可是，它们之间有不一样。PUT指定了资源在服务器上的位置，而POST没有

四、HEAD方法

只请求页面的首部

五、DELETE方法

删除服务器上的某资源

六、OPTIONS方法

它用于获取当前URL所支持的方法。若是请求成功，会有一个Allow的头包含相似“GET,POST”这样的信息
浏览器必须首先使用 OPTIONS 方法发起一个预检请求（preflight request），从而获知服务端是否容许该跨域请求。服务器确认容许以后，才发起实际的 HTTP 请求。

七、TRACE方法

TRACE方法被用于激发一个远程的，应用层的请求消息回路

八、CONNECT方法

把请求链接转换到透明的TCP/IP通道

2七、从浏览器地址栏输入url到显示页面的步骤

浏览器根据请求的URL交给DNS域名解析，找到真实IP，向服务器发起请求；连接
服务器交给后台处理完成后返回数据，浏览器接收文件（HTML、JS、CSS、图象等）；
浏览器对加载到的资源（HTML、JS、CSS等）进行语法解析，创建相应的内部数据结构（如HTML的DOM）；
载入解析到的资源文件，渲染页面，完成。

2八、如何进行网站性能优化

1. content方面

减小HTTP请求：合并文件、CSS精灵、inline Image
减小DNS查询：DNS缓存、将资源分布到恰当数量的主机名
减小DOM元素数量

2. Server方面

使用CDN
配置ETag
对组件使用Gzip压缩

3. Cookie方面

减少cookie大小

4. css方面

将样式表放到页面顶部
不使用CSS表达式
使用不使用@import

5. Javascript方面

将脚本放到页面底部
将javascript和css从外部引入
压缩javascript和css
删除不须要的脚本
减小DOM访问

6. 图片方面

优化图片：根据实际颜色须要选择色深、压缩
优化css精灵
不要在HTML中拉伸图片

2九、HTTP状态码及其含义

1XX：信息状态码

100 Continue 继续，通常在发送post请求时，已发送了http header以后服务端将返回此信息，表示确认，以后发送具体参数信息

2XX：成功状态码

200 OK 正常返回信息

201 Created 请求成功而且服务器建立了新的资源

202 Accepted 服务器已接受请求，但还没有处理

3XX：重定向

301 Moved Permanently 请求的网页已永久移动到新位置。

302 Found 临时性重定向。

303 See Other 临时性重定向，且老是使用 GET 请求新的 URI。

304 Not Modified 自从上次请求后，请求的网页未修改过。

4XX：客户端错误

400 Bad Request 服务器没法理解请求的格式，客户端不该当尝试再次使用相同的内容发起请求。

401 Unauthorized 请求未受权。

403 Forbidden 禁止访问。

404 Not Found 找不到如何与 URI 相匹配的资源。

5XX: 服务器错误

500 Internal Server Error 最多见的服务器端错误。

503 Service Unavailable 服务器端暂时没法处理请求（多是过载或维护）。

3一、介绍js有哪些内置对象？

Object 是 JavaScript 中全部对象的父对象
数据封装类对象：Object、Array、Boolean、Number 和 String
其余对象：Function、Arguments、Math、Date、RegExp、Error

3二、JavaScript的基本数据类型和引用数据类型？你能画一下他们的内存图吗？

栈：原始数据类型（Undefined，Null，Boolean，Number，String）
堆：引用数据类型（Object，Array，Function，Data）
两种类型的区别是：存储位置不一样；
原始数据类型直接存储在栈(stack)中的简单数据段，占据空间小、大小固定，属于被频繁使用数据，因此放入栈中存储；
引用数据类型存储在堆(heap)中的对象,占据空间大、大小不固定,若是存储在栈中，将会影响程序运行的性能；引用数据类型在栈中存储了指针，该指针指向堆中该实体的起始地址。不一样是，你不能够直接访问堆内存空间中的位置和操做堆内存空间。只能操做对象在栈内存中的引用地址。连接

总结区别

声明变量时不一样的内存分配：
不一样的内存分配机制也带来了不一样的访问机制
复制变量时的不一样
参数传递的不一样（把实参复制给形参的过程）

3三、["1", "2", "3"].map(parseInt) 答案是多少？

[1, NaN, NaN]由于 parseInt 须要两个参数 (val, radix)，其中radix 表示解析时用的基数。
map传了 3个(element, index, array)，对应的 radix 不合法致使解析失败。

3四、同步和异步的区别?

同步：浏览器访问服务器请求，用户看获得页面刷新，从新发请求,等请求完，页面刷新，新内容出现，用户看到新内容,进行下一步操做
异步：浏览器访问服务器请求，用户正常操做，浏览器后端进行请求。等请求完，页面不刷新，新内容也会出现，用户看到新内容

3五、谈一谈let与var的区别？

let命令不存在变量提高，若是在let前使用，会致使报错
若是块区中存在let和const命令，就会造成封闭做用域
不容许重复声明，所以，不能在函数内部从新声明参数

3六、浏览器兼容问题

微信H5

1.设置 overflow scroll 在IOS中滑动不流畅的问题 -webkit-overflow-scrolling: touch
2. 用bootstrap 模态框弹在IOS中弹不出的问题
cursor: pointer;

微信小程序

上下两张图片之间的空隙，设置img为：display:block;
小程序button的边框去不掉的时候，:after{border:none;}

3七、判断一个数组

arr instancof Array
Array.isArray(arr)
Object.prototype.toString.call(arr)=='[Object Array]'

3八、如何保证一个变量里面的属性不被修改

const object1 = { property1: 42 };

const object2 = Object.freeze(object1);

object2.property1 = 33;

3九、splice和slice和substring和substr

分类	改变原数据	名称	第一个参数	第二个参数	第三个参数
数组方法	改变	splice	start(可负值)	len	add
数组方法	不改变	slice	start	end
字符串方法	不改变	substring	start	end
字符串方法	不改变	substr	start(可负值)	len

40、数组去重

[...new Set(arr)]
Array.from(new Set(arr))