每天进步一点点：4.9

大家好，我是梅巴哥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
}

今天就先到这里吧~

---

以上。