大家好,我是梅巴哥er
。今天继续努力学习哦~
1,问:get和post的区别
答:
- restful中的规范中,get是获取数据,post是增加数据
- get后退/刷新按钮无害,post数据会被重新提交
- get书签可被收藏,post书签不能被收藏
- get数据能被缓存,post数据不能被缓存
- get编码类型application/x-www-form-url,post编码类型encodedapplication/x-www-form-urlencoded 或 multipart/form-data。为二进制数据使用多重编码。
- get历史参数保留在浏览器历史中。post参数不会保存在浏览器历史中。
- get对数据长度有限制,当发送数据时,get 方法向 url 添加数据;url 的长度是受限制的(url 的最大长度是 2048 个字符)。post无限制。
- get只允许 ASCII 字符。post没有限制。也允许二进制数据。
- 与 post 相比,get 的安全性较差,因为所发送的数据是 url 的一部分。在发送密码或其他敏感信息时绝不要使用 get !post 比 get 更安全,因为参数不会被保存在浏览器历史或 web 服务器日志中。
- get的数据在 url 中对所有人都是可见的。post的数据不会显示在 URL 中。
2,问:重排(回流)和重绘
答:
- 重排:当元素的尺寸、布局、隐藏等条件发生变化,重新构建渲染树。
- 什么情况会触发重排:
- 1,页面渲染初始化时
- 2,添加或删除可见的DOM元素
- 3,元素位置改变
- 4,元素尺寸改变
- 5,浏览器窗口尺寸的变化(resize事件发生时)
- 6,填充内容的改变,比如文本的改变或图片大小改变而引起的计算值宽度和高度的改变
- 7,读取某些元素属性:(offsetLeft/Top/Height/Width, clientTop/Left/Width/Height, scrollTop/Left/Width/Height, width/height, getComputedStyle(), currentStyle(IE) )
- 重绘:浏览器对元素新属性的重新绘制
- 什么时候会触发重绘
- 重排的时候,一定会发生重绘
- 元素的外观变化,如 字体大小、颜色、背景颜色等的变化
3,问:cookie和session的区别
答:
- 1、cookie数据存放在客户的浏览器上,session数据放在服务器上.
- 2,cookie不是很安全,别人可以分析存放在本地的cookie并进行cookie欺骗考虑到安全应当使用session
- 3、设置cookie时间可以使cookie过期。但是使用session-destory(),我们将会销毁会话。
- 4、session会在一定时间内保存在服务器上。当访问增多,会比较占用你服务器的性能考虑到减轻服务器性能方面,应当使用cookie。
- 5、单个cookie保存的数据不能超过4K,很多浏览器都限制一个站点最多保存20个cookie。(Session对象没有对存储的数据量的限制,其中可以保存更为复杂的数据类型)
4,问:http报文格式
答:
- http报文格式
- http请求报文格式
- 请求行
- 请求方式:post, delete, put, get, head, options(前四个是增删改查)
- url:协议名://域名:端口/pathname
- 请求头
- Accept: 指定客户端能够接收的内容类型
- Accept-Charset:浏览器可以接受的字符编码集。
- Accept-Encoding:指定浏览器可以支持的web服务器返回内容压缩编码类型。
- Cache-Control:指定请求和响应遵循的缓存机制
- Connection:表示是否需要持久连接。(HTTP 1.1默认进行持久连接)
- Cookie:HTTP请求发送时,会把保存在该请求域名下的所有cookie值一起发送给web服务器。
- Content-Type:接收内容的数据类型
- …
- 请求体
- 请求行
- http响应报文格式
- 响应行
- 响应码
- 200:请求成功,返回响应数据
- 301:资源被永久重定向
- 302:资源临时重定向
- 304:资源内容未改变
- 400:客户端参数有误,需要修改请求参数
- 401:当前请求需要用户验证
- 403:服务器收到请求,但是拒绝执行
- 404:请求失败,没有获得对应资源
- 500:服务器无法处理请求
- 响应码
- 响应头
- Access-Control-Allow-Origin:指定哪些网站可以跨域源资源共享
- Cache-Control:通知从服务器到客户端内的所有缓存机制,表示它们是否可以缓存这个对象及缓存有效时间。其单位为秒
- Content-Type:当前内容的MIME类型
- …
- 响应数据
- 响应行
- http请求报文格式
5,问:行内元素和块元素的区别
答:
- 行内元素不能独占一行,不能设置宽高,它的宽高只和内容多少有关,不能设置竖直方向的margin和padding
- 块元素独占一行,可设置宽高,可设置数值方向的margin和padding, 数值方向上的margin会发生重叠。
6,问:for…in和for…of的区别
答:
var arr = ['a', 'b', 'c']
for(var v in arr) {
console.log(v) // 0 1 2
}
for(var v of arr) {
console.log(v)
} // a b c
/* 结论:
遍历数组时:
for in 得到的是数组的下标
for of 得到的是数组的元素
*/
var obj = {
a: 1,
b: 2,
c: 3,
}
for(var v in obj) {
console.log(v) // a b c
}
for(var v of obj) {
console.log(v) // TypeError: obj is not iterable
}
// 结论:
// for in 可以遍历对象,得到的是对象的属性名
// for of 不能遍历对象,会报错:obj是不可遍历的
// 所以,遍历数组用for of, 遍历对象用for in 吧
7,问:堆栈
答:
- 堆栈都是存放数据的地方
- 栈是一种线性表,只有一个开头,遵循先进后出的规则,自动分配内存空间,它由系统自动释放。堆则是动态分配的内存,大小不定也不会自动释放。
- 基本数据类型存放在栈中,数据大小确定,可以直接分配内存空间。可以字节访问值。
- 引用数据类型,数据大小不确定,动态分配内存空间。不能直接访问。数据存储在堆中,而栈中存储的是数据的引用。当需要访问引用数据类型的值时,需要先去栈中获取引用对象的指针地址,根据指针地址去堆里拿数据。
8,问:组件传值,父传子,子传父,兄弟相传
答:
- 父传子:props
- 子传父:父组件的方法,传给子组件,让子组件拿来调用,
- 兄弟相传:
- 方法一:通过共同的父组件做中转
- 方法二:redux
9,问:知道map数据结构吗,weakmap是什么,二者有何不同
答:
- Map
- 本质上是
强引用
的键值对的集合,类似集合 - 可以遍历,方法很多可以跟各种数据格式转换
- 本质上是
- WeakMap
- 只接受对象作为键名(null除外),不接受其他类型的值作为键名
- 键名是
弱引用
,键值可以是任意的,键名所指向的对象可以被垃圾回收,此时键名是无效的 - 不能遍历,方法有get、set、has、delete
10,手写promise.all
// 先来看看promise.all是怎么用的
var p1 = Promise.resolve(1),
p2 = Promise.resolve(2),
p3 = Promise.resolve(3);
Promise.all([p1, p2, p3]).then(function (results) {
console.log(results); // [1, 2, 3]
});
// 下面再来手写
// 手写Promise.all()
Promise.property.all = function (iterators) {
const promises = Array.from(iterators);
const len = promises.length;
let count = 0;
let resultList = [];
return new Promise((resolve,reject)=>{
promises.forEach((p,index) =>{
Promise.resolve(p)
.then((result)=>{
count++;
resultList[index] = result;
if(count === len){
resolve(resultList);
}
})
.catch(e=>{
reject(e);
})
})
})
}
11,原型链考察
// 分别说明 1, 2, 3, 4, 5, 6, 7, 8 位置的指向 [原型链]
function fn() { };
var f = new fn();
// 1 2 3 4
f.__proto__.__proto__.__proto__.__proto__
// 5 6 7 8
fn.__proto__.__proto__.__proto__.__proto__
// 输出
// 实例的__proto__指向函数的原型,然后沿着原型链一路查找
// fn函数的__proto__指向构造函数的原型,然后沿着原型链一路查找。
12,问:object获取key值集合的方法
答:
Object.keys(obj)
得到key值组成的数组
var obj = {
a: 1,
b: 2,
c: 3,
}
var keys = Object.keys(obj)
console.log(keys) // [ 'a', 'b', 'c' ]
for in
遍历
for(var v in obj) {
console.log(v) // a b c
}
Object.getOwnPropertyNames(obj)
var obj = {
a: 1,
b: 2,
c: 3,
}
var keys = Object.getOwnPropertyNames(obj)
console.log(keys) // [ 'a', 'b', 'c' ]
13,问:for…in如何规避获取原型的属性
答:
// for...in可以遍历原型上的属性
var obj = {
a: 1,
b: 2,
c: 3,
}
Object.prototype.d = 4
for(var v in obj) {
console.log(v) // a b c d
}
- 用
obj.hasOwnProperty(v)
做限制
var obj = {
a: 1,
b: 2,
c: 3,
}
Object.prototype.d = 4
for(var v in obj) {
// 如果这个属性是obj自身拥有的,就输出
if(obj.hasOwnProperty(v) === true) {
console.log(v) // a b c
}
}
- 利用
Object.defineProperty()
添加的属性默认不可被遍历的特性,从根本上解决
var obj = {
a: 1,
b: 2,
c: 3,
}
// Object.prototype.d = 4
Object.defineProperty(obj, 'd', {value: 4})
for(var v in obj) {
console.log(v) // a b c
}
今天就先到这里吧~
以上。