前端面试题（十一）-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_47087818/article/details/119700830

1.this指向

this 总是（非严格模式下）指向一个对象，而具体指向哪个对象是在运行时基于函数的执行环境动态绑定的，而非函数被声明时的环境；
除了不常用的with和eval的情况，具体到实际应用中，this指向大概可以分为四种：
作为对象的方法调用；
作为普通函数调用；
构造器调用；
call 或 apply调用；
箭头函数中，this指向函数上层作用域的this；
构造器和普通函数的区别在于被调用的方式；

2.forEach()和map()

相同点：
都是循环遍历数组中的每一项；
forEach和map方法里每次执行匿名函数都支持3个参数，参数分别是item（当前每一项）、index（索引值）、arr（原数组）；
只能遍历数组；
匿名函数中的this都是指向window
不同点：
map方法返回一个新的数组，数组中的元素为原始数组调用函数处理后的值。
forEach()方法用于调用数组的每个元素，将元素传给回调函数。

3.回调函数

函数指针的调用，即是一个通过函数指针调用的函数；
如果你把函数的指针（地址）作为参数传递给另一个函数，当这个指针被用来调用其所指向的函数时，就说这是回调函数。

4.mysql外键

如果一张表中有一个非主键的字段指向了另一张表中的主键，就将该字段叫做外键。一张表中外键可以有多个，也就是不同字段指向了不同表中的主键
外键的作用是保持数据一致性、完整性

阻止执行

从表插入新行，其外键值不是主表的主键值便阻止插入；
从表修改外键值，新值不是主表的主键值便阻止修改；
主表删除行，其主键值在从表里存在便阻止删除(要想删除，必须先删除从表的相关行)；
主表修改主键值，旧值在从表里存在便阻止修改(要想修改，必须先删除从表的相关行)。

级联执行

主表删除行，连带从表的相关行一起删除；
主表修改主键值，连带从表相关行的外键值一起修改。

作用：
1.对子表(外键所在的表)的作用：子表在进行写操作的时候，如果外键字段在父表中找不到对应的匹配，操作就会失败。

2.对父表的作用：对父表的主键字段进行删和改时，如果对应的主键在子表中被引用，操作就会失败。

5.如何解决跨域问题

1.使用jsonp实现，网页通过script标签向服务器请求json数据，服务器受到请求后，将数据放在一个指定名字的回调函数的参数里面传给前端。
2.使用Jquery ajax实现，
3.在vue开发中实现跨域：在vue项目根目录下找到vue.config.js文件（如果没有该文件则自己创建），在proxy中设置跨域

devServer: {
    proxy: {  //配置跨域
      '/api': {
        target: 'http://121.121.67.254:8185/',  //这里后台的地址模拟的;应该填写你们真实的后台接口
        changOrigin: true,  //允许跨域
        pathRewrite: {
          /* 重写路径，当我们在浏览器中看到请求的地址为：http://localhost:8080/api/core/getData/userInfo 时
            实际上访问的地址是：http://121.121.67.254:8185/core/getData/userInfo,因为重写了 /api
           */
          '^/api': '' 
        }
      },
    }
  },

6.vue使用axios发送请求–Vue.prototype.$http = axios;

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。
Features
从浏览器中创建 XMLHttpRequests
从 node.js 创建 http 请求
支持 Promise API
拦截请求和响应
转换请求数据和响应数据
取消请求
自动转换 JSON 数据
客户端支持防御 XSRF

7.async await与promise

async和promise都是异步方法，区别是async生成的结果是promise对象，async是promise的终结版。
await只能在async中使用，await是阻塞的意思，就是暂停，你一起调用2个接口，第一个执行完，不输出结果，要等最第二个接口执行完，才返回这两个的结果。
async/await是基于Promise实现的，它不能用于普通的回填函数。 async/await与Promise一样，是非阻塞的。 async/await使得异步代码看起来像同步代码

8.js实现函数节流与函数防抖

函数节流：一个函数执行一次后，只有大于设定的时间周期才会执行第二次。

  /*
 节流函数：throttle
 fn:   要被节流的函数
 delay：规定的时间
 */
 function throttle(fn,delay){
     // 记录上一次触发的时间
     var lasttime = 0 ;
     // 通过闭包的方式使用lasttime变量，每次都是上次的时间
     return function(){
         // 
         var nowtime = Date.now();
         if(nowtime-lasttime>delay){
             // 修正this函数问题
             fn.call(this);
             // 同步时间
             lasttime = nowtime;
         }
     }
     
 }
 // document.onscroll = throttle(function(){
 //     console.log("scroll事件被触发了"+Date.now());
 //     }
 //     ,2000)

函数防抖：一个需要频繁触发的函数，在规定时间内只让最后一次生效，前面不生效。就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。

function debounce(fn,delay){
     // 记录上一次的延时器
     var timer = null;
     return function(){
         // 清除上一延时器
         clearTimeout(timer)
         // 重新设置新的延时器
         timer = setTimeout(function(){
                 fn.apply(this)
         },delay)
     }
 }
 document.getElementById('btn').onclick = debounce(function(){
     console.log('点击事件被触发了'+Date.now());
 },2000)

区别
1.函数防抖debounce，在一段连续操作结束后，处理回调，利用 clearTimeout 和 setTimeout 实现。
2.函数节流throttle，在一段连续操作中，每一段时间只执行一次，频率较高的事件中使用来提高性能。
3.函数防抖debounce关注一定时间连续触发，只在最后执行一次，而函数节流throttle侧重于一段时间内只执行一次。

前端面试题（十一）

1.this指向

2.forEach()和map()

3.回调函数

4.mysql外键

5.如何解决跨域问题

6.vue使用axios发送请求–Vue.prototype.$http = axios;

7.async await与promise

8.js实现函数节流与函数防抖

10.toString和valueOf

11.嵌套数组指定层次展开 flat扁平化 js

12.简述Ajax原理及实现步骤