每天进步一点点：4.9-CSDN博客

本文链接：https://blog.csdn.net/tuzi007a/article/details/115536876

大家好，我是梅巴哥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类型
    - …
  - 响应数据

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
}