前端中高级知识点问答

1. this指向及改变this指向的方法
   1）普通函数中 this 指向 window。
   2）构造函数中this 指向 实例对象。
   3）对象方法调用 this 指向 该方法所属的对象。
   4）通过事件绑定的方法，this 指向 绑定事件的对象。
   5）定时器函数， 此时 this 指向 window。
   
   改变this指向的三个方法：
   1）bind() 创建的是一个新的函数（称为绑定函数），与被调用函数有相同的函数体，当目标函数被调用时this的值绑定到 bind()的第一个参数上
   2）call() 方法  fn.call(Person,"hh",20);
   3）apply() 方法 与call()非常相似，不同之处在于提供参数的方式，apply（）使用参数数组，而不是参数列表  fn.call(Person,["hh",20])
2. GET和POST
   
   GET和POST是HTTP请求的两种基本方法,表单提交中区别有5点

   1)get是从服务器上获取数据，post是向服务器传送数据。
   2)get是把参数数据队列加到提交表单的ACTION属性所指的URL中，值和表单内各个字段一一对应，在URL中可以看到。post是通过HTTPpost机制，将表单内各个字段与其内容放置在HTML HEADER内一起传送到ACTION属性所指的URL地址。用户看不到这个过程。
   3).对于get方式，服务器端用Request.QueryString获取变量的值，对于post方式，服务器端用Request.Form获取提交的数据。
   4).get传送的数据量较小，不能大于2KB。post传送的数据量较大，一般被默认为不受限制。但理论上，IIS4中最大量为80KB，IIS5中为100KB。（这里有看到其他文章介绍get和post的传送数据大小跟各个浏览器、操作系统以及服务器的限制有关）
   5)get安全性非常低，post安全性较高。
   
   
   GET在浏览器回退时是无害的，而POST会再次提交请求。
   GET产生的URL地址可以被Bookmark，而POST不可以。
   GET请求会被浏览器主动cache，而POST不会，除非手动设置。
   GET请求只能进行url编码，而POST支持多种编码方式。
   GET请求参数会被完整保留在浏览器历史记录里，而POST中的参数不会被保留。
   GET请求在URL中传送的参数是有长度限制的，而POST么有。
   对参数的数据类型，GET只接受ASCII字符，而POST没有限制。
   GET比POST更不安全，因为参数直接暴露在URL上，所以不能用来传递敏感信息。
   GET参数通过URL传递，POST放在Request body中。
   
   GET产生一个TCP数据包；POST产生两个TCP数据包。
   对于GET方式的请求，浏览器会把http header和data一并发送出去，服务器响应200（返回数据）；
   而对于POST，浏览器先发送header，服务器响应100 continue，浏览器再发送data，服务器响应200 ok（返回数据）。
   在网络环境好的情况下，发一次包的时间和发两次包的时间差别基本可以无视。而在网络环境差的情况下，两次包的TCP在验证数据包完整性上，有非常大的优点。
   并不是所有浏览器都会在POST中发送两次包，Firefox就只发送一次。

3. 输出结果：

   function cb() {
     for (let i = 0; i < 5; i++) {
       setTimeout(
         console.log(i), 2000
       )
     }
   }
   console.log(cb())

   结果：
   0
   1
   2
   3
   4
   undefined
    
4. EVENTLOOP(事件环)
   
   JS是单线程，即任务是串行的，后一个任务需要等待前一个任务的执行
   同步执行是主线程按照顺序，串行执行任务；

   主线程遇到异步任务，指给对应的异步进程进行处理（WEB API）；
   异步进程处理完毕（Ajax返回、DOM事件处罚、Timer到等），将相应的异步任务推入任务队列；
   主线程执行完毕，查询任务队列，如果存在任务，则取出一个任务推入主线程处理（先进先出）；

   macrotask queue宏任务队列，包括整体代码 script，setTimeout，setInterval,setImmediate,requestAnimationFrame 等
   microtask queue微任务队列，如：ES6 的，Promise.then catch finally的回调函数，process.nextTick，async 函数await下面的代码等
    

   console.log('1, time = ' + new Date().toString())
   setTimeout(macroCallback, 0);
   new Promise(function(resolve, reject) {
       console.log('2, time = ' + new Date().toString())
       resolve();
       console.log('3, time = ' + new Date().toString())
   }).then(microCallback);
   
   function macroCallback() {
       console.log('4, time = ' + new Date().toString())
   } 
   
   function microCallback() {
       console.log('5, time = ' + new Date().toString())
   }

   执行结果：
   1
   2
   3
   5
   4
   
   变形：

   console.log('1, time = ' + new Date().toString())
   setTimeout(macroCallback, 0);
   
   new Promise(function(resolve, reject) {
       console.log('2, time = ' + new Date().toString())
       resolve();
       console.log('3, time = ' + new Date().toString())
   })
   .then(microCallback)
   .catch(console.log('err'));
   
   function macroCallback() {
       console.log('4, time = ' + new Date().toString())
   } 
   
   function microCallback() {
       console.log('5, time = ' + new Date().toString())
   }

   1, time = Sat Apr 16 2022 14:44:35 GMT+0800 (中国标准时间)
   2, time = Sat Apr 16 2022 14:44:35 GMT+0800 (中国标准时间)
   3, time = Sat Apr 16 2022 14:44:35 GMT+0800 (中国标准时间)
   err
   5, time = Sat Apr 16 2022 14:44:35 GMT+0800 (中国标准时间)
   Promise {<fulfilled>: undefined}
   4, time = Sat Apr 16 2022 14:44:35 GMT+0800 (中国标准时间)

5. 一段较复杂的代码：

   console.log('1');
    
   setTimeout(function() {
       console.log('2');
       process.nextTick(function() {
           console.log('3');
       })
       new Promise(function(resolve) {
           console.log('4');
           resolve();
       }).then(function() {
           console.log('5')
       })
   })
   process.nextTick(function() {
       console.log('6');
   })
   new Promise(function(resolve) {
       console.log('7');
       resolve();
   }).then(function() {
       console.log('8')
   })
    
   setTimeout(function() {
       console.log('9');
       process.nextTick(function() {
           console.log('10');
       })
       new Promise(function(resolve) {
           console.log('11');
           resolve();
       }).then(function() {
           console.log('12')
       })
   })
   

   整段代码，共进行了三次事件循环，完整的输出为1，7，6，8，2，4，3，5，9，11，10，12

6. 控制台输出结果

   console.log('a')
   let promise = new Promise(function(resolve,reject){
       console.log('b')
       setTimeout(function () {
           resolve('c')
       },1000)
   })
   setTimeout(function(){
       console.log('d')
   },0)
   promise.then(function(e){
       console.log(e)
   })
   console.log('f')
    
   //结果
   //a
   //b
   //f
   //d
   //c

   
    

 

一、以下函数的执行结果 

var a = 'a';
function A() {
    console.log(a);
    var a = 'b';
    console.log(a);
}
A();

// 结果
// undefined
// 'b'

变形1：

var a = 'a';
function A() {
    console.log(a);
    let a = 'b';
    console.log(a);
}
A();

// 结果
//报错  Uncaught ReferenceError: Cannot access 'a' before initialization  at A ()

二、以下函数的执行结果 

var obj = {
    name: 'obj',
    hello() {
        console.log(this.name)
    },
}
var h = obj.hello
h()

//结果
//   空 什么都没有

变形1：

var obj = {
    name:'obj',
    hi(){
        return () => {
            console.log(this.name)
        }
    },
}
var h2 = obj.hi()
h2()

// 结果
// obj

三、数组扁平化（多维转一维）

var arr = [true,function(){},[{},[2]]]

//结果

//请看楼主其他文章 CSDN

四、提取以下字符串的图片地址

var str = '<img style="border:1px solid red" src="./../static/1/aa/png" alt="src=图片a"/>'

解答：
var imgSrc;
var strArr = str.split(' ');
console.log(strArr);

//1.for循环
for (var i = 0, len = strArr.length; i < len; i++) {
    if (strArr[i].match('src="')) {
        imgSrc = strArr[i]
    }
}
console.log(imgSrc)

2.map() 函数

strArr.map(item => {
    if(item.match('src="')){
        imgSrc = item
    }
    // return imgSrc;
})
console.log(imgSrc);

六、有一个obj空对象，给该对象添加侦听器，当用户给obj设置name的时候，打印用户给obj设置的name值。

比如 var obj = {}。给该对象添加侦听器后，当我设置obj.name='a' 的时候，控制台打印 ‘a’

七、将以下数组，按照id大小值进行排序

let arr = [
    { id:8,obj:'88'},
    { id:3,obj:'33'},
    { id:4,obj:'44'},
    { id:7,obj:'77'},
]

解答：

arr.sort((a, b) => {
    return (a.id + '') > (b.id + '')? 1 : -1;
})
console.log(arr) // 得到的即为通过id排序好的

arr.sort((a,b) => {return a.id - b.id}))
console.log(arr)

1. 写一个flatten 方法，拍平一个数组

[1,2,[3,4,[5]],6] => [1,2,3,4,5,6]

1. 将回调函数 func(params,cb) 写成promise 的方式。