自己整理一些以前看的教程里面的试题，目前遇到的笔试题，可能会出现的笔试，网上搜集的笔试题...
JS部分
- 简述原型链
按我自己熟悉和习惯的方式，可能会用举例子的方式来阐述，如下：
- 声明一个构造函数
function Func() {
}
- 利用该构造函数实例化出一个对象
const funcObj = new Func();
- 同此例，被实例化出的对象中，都会存有一个属性__proto__, 该属性的值为构造函数Func()
有：(建议把xxx的原型，即xxx.prototype看成一个整体，理解起来更容易一点)
1. funcObj的__proto__属性指向构造函数的Func的原型Func.prototype
funcObj.__proto__ === Func.prototype
2. 函数对象的__proto__属性指向自身的原型Function.prototype
Function.__proto__ === Function.prototype
3. 函数对象原型的__proto__指向对象的原型Object.prototype
Function.prototype.__proto__ === Object.prototype
4. 对象原型的__proto__指向null
Object.prototype.__proto__ -> null
- 类的继承
class Animal {
//静态成员，归类所有
static feature = '有生命，可活动，可繁殖';
// 静态方法
static method () {
console.log('this.feature');
}
// 构造器：实例成员归实例化对象所有
constructor (type, age, name, sex) {
this.type = type;
this.age = age;
this.name = name;
this.sex = sex;
}
// 实例方法
print () {
console.log('[种类]: ' + this.type);
console.log('[年龄]]: ' + this.age);
console.log('[姓名]: ' + this.name);
console.log('[性别]: ' + this.sex);
}
}
class Dog extends Animal {
constructor (age, name, sex) {
// 借用父类的构造器
super ('犬类', age, name, sex);
// 自己的成员属性
this.loves = '吃骨头';
}
// 覆盖重写父类的方法
print () {
// 调用父类的方法
super.print();
console.log('[爱好]: ' + this.loves);
}
}
const dog = new Dog(3, 'doggy', 'male');
dog.print();
console.log(dog);
- 判断该物体正好运动到浏览器底部
const bottomOffset = e.scrollHeight - e.offsetHeight - e.scrollTop
- 闭包试题
function Foo() {
var i = 0;
return function() {
console.log(i++);
}
}
var f1 = Foo(),
f2 = Foo();
f1(); //0
f1(); //1
f2(); //0
f1被定义，继承Foo执行生成的fooAO1:
f2被定义，继承Foo执行生成的fooAO2:
fooAO
i: 0
GAO
f1:
f2:
Foo: function
var bb = 1;
function aa(bb) {
bb = 2;
alert(bb);
}
aa(bb); //2
alert(bb); //1
aa执行 -> 将GAO bb->2 执行完毕销毁GAO
aaAO:
空
GAO:
bb: 1 -> 2
aa: function
- 原型继承
function inherit (Target, Origin){
function F(){};
F.prototype = Origin.prototype;
Target.prototype = new F();
Target.prototype.constructor = Target;
Target.prototype.superClass = Origin.prototype;
}
- 数组试题
var arrTemp = [1, 2, 3];
arrTemp.shift(); //[2, 3]
arrTemp.push(1); // [2, 3, 1]
arrTemp.unshift(2); // [2, 2, 3, 1]
var arrNew = arrTemp.concat([1, 2]); //[2, 2, 3, 1, 2]
console.log(arrNew);
- 柯里化
function curry(func, ...args) {
// 返回一个收集剩余参数的函数
return function(...subArgs) {
// 以下为该函数搜集剩余参数的流程
const allArgs = [...args, ...subArgs];
// console.log(allArgs);
if (allArgs.length >= func.length) {
// 参数已经足够，返回包含所有参数的原函数
return func(...allArgs);
} else {
// 参数不够，继续固定
curry(func, ...allArgs);
}
}
}
- 第一天有黄金1000g，每天减少之前的20%，问多少天后少于1g，代码实现。
function rest(n) {
if (n === 1) {
return 1000;
}
return rest(n-1) * 0.8;
}
let day = 1;
let restGold = 1000;
const timer = setInterval(() => {
restGold = rest(day);
console.log(`day${day}: restGold: ${restGold}`);
if (restGold < 1) {
console.log('<1g: ');
// return;
clearInterval(timer);
}
day++;
}, 100);
网络部分
- 常见的HTTP状态码
（1）200 请求成功
（2）301 重定向，资源（网页等）被永久转移到其它URL
（3）302 临时移动。与301类似。但资源只是临时被移动。客户端应继续使用原有URI
（4）303 查看其它地址。与301类似。使用GET和POST请求查看
（5）403 服务器理解请求客户端的请求，但是拒绝执行此请求
（6）404 请求的资源（网页等）不存在
（7）503 由于超载或系统维护，服务器暂时的无法处理客户端的请求。
延时的长度可包含在服务器的Retry-After头信息中
- 跨域
1. 浏览器的安全机制：同源策略（协议 域名 端口号 都相同），其中一条不满足即为跨域
2. 解决跨域问题的办法分类：
- JSONP跨域， 后端将返回的数据包裹一个padding层（页面中已经定义的函数的名称）
利用script标签不受同源策略影响的特性
- 使用中间服务器代理（浏览器地址与代理服务器同源），代理服务器负责转发请求和响应
- CORS：cross-origin resource sharing 跨域资源共享
后端支持->设置一个响应头 access-control-allow-origin: 'http://www.xxx.com'
- 封装jsonp, ajax请求
const $ = {
ajax (options) {
let targetProtocal = '',
targetHost = '';
const {url, type, dataType } = options;
// 判断是否同源
if (url.indexOf('http://')===0 || url.indexOf('https://') === 0) {
// 不同源
console.log('不同源')
const newUrl = new URL(url);
targetProtocal = newUrl.protocol;
targetHost = newUrl.host;
} else {
targetProtocal = location.protocol;
targetHost = location.host;
}
// 判断数据类型
if (dataType === 'jsonp') {
if (targetHost == location.host && targetProtocal == location.protocol) {
// 同源，发送普通ajax请求
// this.dataInteract()
} else {
// 普通请求
const callback = 'cb' + Math.floor(Math.random()*100000);
window[callback] = options.success;
const script = document.createElement('script');
// 拼接参数
if (url.includes('?')) {
script.src = url + '&callback=' + callback;
} else {
script.src = url + '?callback=' + callback;
}
document.body.appendChild(script);
console.log(script);
}
}
},
/********AJAX请求***************/
dataInteract (params, url) {
let xhr = null;
let result = null;
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
} else {
xhr = new ActiveXObject('Microsoft.XMLHttp');
}
if (typeof params === 'string') {
xhr.open('GET',url + '?' + params, false);
} else if (typeof params === 'object') {
let str = '';
for (var prop in params) {
str += prop + '=' + params[prop] + '&';
}
xhr.open('GET',url + '?' + str, false);
} else {
xhr.open('GET', url + '?' + params.toString(), false);
}
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
if (xhr.readyState === 200) {
result = JSON.parse(xhr.responseText);
}
}
}
xhr.send(url);
return result;
}
}
$.ajax({
type: 'GET',
url: 'https://developer.duyiedu.com/edu/testJsonp',
dataType: 'jsonp',
success (data) {
console.log(data);
}
})
- 网站性能优化
行为：
1. 减少DOM操作
2. 减少DOM重排
3. 动态导入模块
4. 异步请求文件（script文件写到body底部）
5. 不要使用嵌套过深的对象
6. 控制索引原型链的深度
7. 使用Map替换if-else和switch
8.
预加载:
1. 响应式图片
2. prefetch
3. 减少首屏渲染时间（可以将最基本的样式和结构写在入口文件中）
样式
1. 精简样式
2. 预编译
mp.weixin.qq.com/s?__biz=MzU… -->
- 浏览器存储
总结自： https://www.jianshu.com/p/072e17112759
cookie
通常用于存储一些通用的数据,会自动在web浏览器和web服务器之间传输,兼容性非常的好
存储的数据是永久性的
缺点：
- 存储量
- 影响性能
- 只能储存字符串
- 安全问题，存储在Cookie的任何数据可以被他人访问，因此不能在Cookie中储存重要的信息。
- 须测试用户是否支持Cookie
session
- localStorage
可以存储普通字符串，字符串化的JSON数据
- 提供了简单明了的API来进行操作
- 更加安全
- 可储存的数据量更大
注：不建议存储敏感信息
- sessionStorage
sessionStorage只存储当前会话页的数据，当用户关闭当前会话页或浏览器时，数据会被清除
兼容性和优缺点与localStorage类似
indexDB
由HTML5所提供的一种本地存储，用于在浏览器中储存较大数据结构的 Web API，并提供索引功能以实现高性能查找
优点：
- 拥有更大的储存空间
- 能够处理更为复杂和结构化的数据
- 拥有更多的交互控制
- 每个'database'中可以拥有多个'database'和'table'
局限性:
1. 存储空间限制
2. 兼容性问题
3. 受同源策略的限制
- GET和POST请求
- 是基于什么前提？
什么前提都没有，不使用任何规范，只考虑语法和理论上的http协议-> GET和POST几乎没有区别，只是名字不同
- 如果是基于RFC规范
(1) 理论上的（specification）：GET和POST具有相同的语法，但是有不同的语义
GET用来获取数据，POST用来发送数据，其他方面没有区别
( 2 ) 实现上的( implemetation): 各种浏览器，就是这个规范的实现者
常见的不同之处为：
1）GET的数据在URL可见，POST请求不显示在URL中
2）GET对数据长度有限制，POST长度无限
3）GET请求的数据可以收藏为书签，POST请求到的数据不可收藏为书签
4）GET请求后，按后退按钮、刷新按钮无影响，POST数据会被重新提交
5）GET编码类型：application/x-www-form-url
POST编码类型：多种，如encodedapplication/x-www-form-urlencoded, multipart/form-data
6）GET历史参数会被保留在浏览器里，POST不会保存在浏览器中
7）GET只允许ASCII码中的字符，POST没有编码限制，允许发二进制的数据
8）GET与POST相比，GET安全性较差（参数URL可见，历史参数会被保存在浏览器），所发的数据是URL的一部分
注：在网络传输中，GET和POST都是明文传输，都不安全
- 数组去重
1. 利用对象属性的不可重复性
2. 遍历数组，将每一项逐次比较后push到新数组中
3. 数组排序，利用splice方法删去重复项
4. 利用ES6中的Set方法
5. 利用indexOf方法
- TCP三次握手与四次挥手
TCP三次握手——建立连接
- 客户进程向服务器发出连接请求报文，进入 SYN-SENT（同步已发送状态）状态
- TCP服务器收到请求报文，同意连接，发出确认报文，进入了SYN-RCVD（同步收到）状态
- TCP客户进程收到确认后，还要向服务器给出确认，进入ESTABLISHED状态
TCP四次挥手——释放连接
- 客户端进程发出连接释放报文，并且停止发送数据，入FIN-WAIT-1（终止等待1）状态
- 服务器收到连接释放报文，发出确认报文，进入了CLOSE-WAIT（关闭等待）状态
- 客户端收到服务器的确认请求后，进入FIN-WAIT-2（终止等待2）状态
- 服务器将最后的数据发送完毕后，向客户端发送连接释放报文，由于在半关闭状态，可能又发送了一些数据，此时，服务器就进入了LAST-ACK（最后确认）状态
- 客户端收到服务器的连接释放报文，进入了TIME-WAIT（时间等待）状态，当客户端撤销相应的TCB后，才进入CLOSED状态
- 服务器只要收到了客户端发出的确认，立即进入CLOSED状态
- TCP和UDP
TCP与UDP区别总结：
1、 TCP面向连接（如打电话要先拨号建立连接）;
UDP是无连接的，即发送数据之前不需要建立连接
2、 TCP提供可靠的服务。通过TCP连接传送的数据，无差错，不丢失，不重复，且按序到达;
UDP尽最大努力交付，即不保证可靠交付
3、TCP面向字节流，实际上是TCP把数据看成一连串无结构的字节流;
UDP是面向报文的,UDP没有拥塞控制，因此网络出现拥塞不会使源主机的发送速率降低
4、 每一条TCP连接只能是点到点的;
UDP支持一对一，一对多，多对一和多对多的交互通信
5、 TCP首部开销20字节;
UDP的首部开销小，只有8个字节
6、 TCP的逻辑通信信道是全双工的可靠信道
UDP则是不可靠信道
————————————————
版权声明：本文为CSDN博主「Li_Ning_」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/li_ning_/article/details/52117463
- http
HTTP协议是Hyper Text Transfer Protocol（超文本传输协议）的缩写,
是用于从万维网（WWW:World Wide Web ）服务器传输超文本到本地浏览器的传送协议,
是一个基于TCP/IP通信协议来传递数据（HTML 文件, 图片文件, 查询结果等）的协议。
注意：
- 无连接：无连接的含义是限制每次连接只处理一个请求。
- 媒体独立的：任何类型的数据都可以通过HTTP发送。客户端以及服务器指定使用适合的MIME-type内容类型。
- 无状态：HTTP协议是无状态协议。无状态是指协议对于事务处理没有记忆能力。
- 实现元素的水平居中方式
- flex布局
display: flex;
justify-content: center;
- margin自适应布局
margin: 0 auto;
- 绝对定位
position: absolute;
left: 50%;
top: 50%;
transform: translateY(-50%);
- http与https的区别
HTTP: 以明文方式发送内容，不提供任何方式的数据加密
HTTPS: 安全套接字层超文本传输协议——为了数据传输的安全，HTTPS在HTTP的基础上加入了SSL协议
SSL依靠证书来验证服务器的身份，并为浏览器和服务器之间的通信加密。
- http1.0 http2.0
http 2.0:
- 提供了更精准的缓存控制
- 提供了range请求头，允许只请求部分资源
- 增加了更多响应码
CSS
- 重排（回流）和重绘
重排: 改变DOM或CSS结构，导致渲染树重构
重绘: 更新渲染树信息，重新绘制页面
会触发reflow的操作:
改变窗口大小
改变文字大小
内容的改变，如：输入框输入文字
激活伪类，如：hover操作
操作class属性
脚本操作DOM，如：增删改查、改变位置等
计算offsetWidth和offsetHeight
设置style属性
会触发repaint的操作:
只改变某个元素的背景色、文字颜色、边框颜色，不影响它周围或内部布局的属性
Vue
- 页面不会重新渲染的情况
- 更改不存在的数据
- 更改未被渲染的数据
- 通过索引设置数组
- 更改对象
- 更改对象和数组
更改数组用变异方法，就够了
更改对象就用vm.$set和vm.$delete
