前端基础面试三十问

红太狼 2022-12-05 00:58 218阅读 0赞

这是我自己在准备面试的时候，上网收集汇总的一些知识点，不能说你会这些就能找到自己心仪的工作，但你要想找到心仪的工作就必须会这些！

## 1.块级元素 ##

*  address - 地址
    
     *  **blockquote - 块引用**
     *  center - 举中对齐块
     *  dir - 目录列表
     *  div - 常用块级容易，也是css layout的主要标签
     *  dl - 定义列表
     *  **fieldset** \- form控制组
     *  form - 交互表单
     *  h1 - 大标题
     *  h2 - 副标题
     *  h3 - 3级标题
     *  h4 - 4级标题
     *  h5 - 5级标题
     *  h6 - 6级标题
     *  hr - 水平分隔线
     *  **isindex - input prompt**
     *  **menu** \- 菜单列表
     *  **noframes - frames**可选内容，（对于不支持frame的浏览器显示此区块内容
     *  noscript - 可选脚本内容（对于不支持script的浏览器显示此内容）
     *  ol - 排序表单
     *  p - 段落
     *  **pre** \- 格式化文本
     *  table - 表格
     *  ul - 非排序列表

## 2.BFC、IFC、GFC、FFC ##

BFC:块级格式上下文，就是页面上一个隔离的渲染区域

触发:

根元素：body

float：不为none

overflow：不为visible

position：不为relative和static

display：inline-block, table-cell, table-caption, flex, inline-flex等

运用:清除浮动、阻止元素被浮动元素覆盖

IFC：行内格式上下文

GFC:grid

FFC:flex

## 3.垂直居中 ##

*  方法一：
    
        div{ 
            position:absolute;
            left:50%;
            top:50%;
            transform:translate(-50%,-50%)
        }
 *  方法二：
    
        div{ 
            position:absolute,
            left:0,
            top:0,
            bottom:0,
            right:0,
            margin:auto
        }
 *  方法三：
    
        div{ 
          display:flex,
          align-item:center,
          justify-content:center
        }
 *  方法四：
    
        .father{ 
            display:grid;
        }
        .son{ 
            justify-self:center;
            align-self:center;
        }

## 4.display、visbility、opacity ##

*  display:none
    
    DOM结构：浏览器不会渲染display属性为none的元素，不占空间
    
    事件监听：无法进行DOM事件监听
    
    性能：动态改变此属性时会引起重排
    
    继承：不会被子元素继承，毕竟子类也不会渲染
    
    transition: 不支持display
 *  visbility:hidden
    
    DOM结构：元素被隐藏，但是会被渲染不会消失，占据空间
    
    事件监听：无法进行DOM事件监听
    
    性能：动态改变此属性时会引起重绘，性能较高(由于节点的几何属性发生改变或者由于样式发生改变而不会影响布局的，称为重绘)
    
    继承：会被子元素继承，子元素可以通过设置visibility:visible来取消隐藏
    
    transition: 会立即显示，隐藏会延时
 *  opacity:0
    
    DOM结构：透明度100%，但是会被渲染不会消失，占据空间
    
    事件监听：可以进行DOM事件监听
    
    性能：提升为合成层，不会触发重绘，性能较高
    
    继承：会被子元素继承，子元素不能通过设置opacity:1来取消隐藏
    
    transition: 可以延时显示隐藏

## 5.函数节流、函数防抖 ##

函数节流：时间间隔内只会执行一次任务(场景：滚动监听)

// 限制500ms执行一次
    var type = false;
    window.onscroll = function(){ 
        if(type === true) return;
        type = true;
        setTimeout(()=>{ 
            console.log("要执行的事");
            type = false;
        },500)
    }

函数防抖：任务频繁触发的情况下，只有任务触发的间隔超过指定间隔的时候，任务才会执行(场景：搜索)

const _.debounce = (func, wait) => { 
      let timer;
      return () => { 
        clearTimeout(timer);
        timer = setTimeout(func, wait);
      };
    };

## 六、Set、Map、WeakSet、WeakMap ##

*  Set
    
     *  成员唯一、无序且不重复
     *  \[value, value\]，键值与键名是一致的（或者说只有键值，没有键名）
     *  可以遍历，方法有：add、delete、has
 *  WeakSet
    
     *  成员都是对象
     *  成员都是弱引用，可以被垃圾回收机制回收，可以用来保存DOM节点，不容易造成内存泄漏
     *  不能遍历，方法有add、delete、has
 *  Map
    
     *  本质上是键值对的集合，类似集合
     *  可以遍历，方法很多可以跟各种数据格式转换
 *  WeakMap
    
     *  只接受对象作为键名（null除外），不接受其他类型的值作为键名
     *  键名是弱引用，键值可以是任意的，键名所指向的对象可以被垃圾回收，此时键名是无效的
     *  不能遍历，方法有get、set、has、delete

## 七、判断数组的方法 ##

arr instanceof Array
    
    arr.constructor === Array
    
    Array.prototype.isPrototypeOf(arr)
    
    Object.getPrototypeOf(arr)===Array.prototype
    
    Object.prototype.toString.call(arr) === '[object Array]'
    
    Array.isArray(arr)

## 八、前端安全性问题 ##

**跨站脚本攻击**（xss攻击）

攻击是指攻击者在网站上注入恶意的客户端代码，通过恶意脚本对客户端网页进行篡改，从而在用户浏览网页时，对用户浏览器进行控制或者获取用户隐私数据的一种攻击方式。

反射型：将xss代码通过url来注入

防范：.encode，替换有特殊意义的字符串

存储型：将xss代码发送到服务器，在前端请求数据时，将xss代码发送给前端（富文本）

防范：filter过滤掉不是合法标签的内容

**跨站请求伪造**（CSRF攻击）

CSRF 攻击是攻击者借助受害者的 Cookie 骗取服务器的信任，可以在受害者毫不知情的情况下以受害者名义伪造请求发送给受攻击服务器，从而在并未授权的情况下执行在权限保护之下的操作。

防范：提交 method=Post 判断referer（HTTP请求中有一个referer的报文头，用来指明当前流量的来源参考页）、利用Token（由后端生成的一个唯一的登录态）

## 九、跨域问题 ##

在前端领域中，跨域是指浏览器允许向服务器发送跨域请求，从而克服Ajax只能**同源**使用的限制（所谓同源是指"协议+域名+端口"三者相同，即便两个不同的域名指向同一个ip地址，也非同源。）

解决方法：

1.  jsonp
    
        $.ajax({ 
            url: 'http://www.domain2.com:8080/login',
            type: 'get',
            dataType: 'jsonp',  // 请求方式为jsonp
            jsonpCallback: "handleCallback",  // 自定义回调函数名
            data: { }
        });
        //缺点只能发送get一种请求
2.  CORS（跨域资源共享）

**CORS**是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）。  
它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。

1.  nginx代理跨域

nginx代理跨域，实质和CORS跨域原理一样，通过配置文件设置请求响应头Access-Control-Allow-Origin…等字段。

## 十、ajax与 Fetch ##

（1）、ajax是理用XMLHttpRequest对象来请求数据的，而fetch是window的一个方法

（2）、ajax基于原生的XHR开发，XHR本身的架构不清晰，已经有了fetch的替代方案

（3）、fetch比较与ajax有着更好更方便的写法

（4）、fetch只对网络请求报错，对400，500都当做成功的请求，需要封装去处理

（5）、fetch没有办法原生监测请求的进度，而XHR可以

//1.创建Ajax对象
        if(window.XMLHttpRequest){ 
           var oAjax=new XMLHttpRequest();
        }else{ 
           var oAjax=new ActiveXObject("Microsoft.XMLHTTP");
        }
        //2.连接服务器（打开和服务器的连接）
        oAjax.open('GET', url, true);
        //3.发送
        oAjax.send();
        //4.接收
        oAjax.onreadystatechange=function (){ 
           if(oAjax.readyState==4){ 
               if(oAjax.status==200){ 
                  console.log(oAjax.responseText);
               }else{ 
                  //alert('失败了');
                  if(fnFaild){ 
                      fnFaild();
                  }
               }
            }
        };
    
    //fetch
    // 链式处理,将异步变为类似单线程的写法: 高级用法.
    fetch('/some/url').then(function(response) { 
        return . //... 执行成功, 第1步...
    }).then(function(returnedValue) { 
        // ... 执行成功, 第2步...
    }).catch(function(err) { 
        // 中途任何地方出错...在此处理 :( 
    });

## 十一、分割获取 URL ##

## 十二、事件绑定和事件委托 ##

element.addEventListener('click', function() { 
        console.log(1)
    }, false)
    
    //事件委托
     oUl.onmouseover = function(ev){ 
                    var ev = ev || window.event;
                    var target = ev.target || ev.srcElement;
                    if(target.nodeName.toLowerCase() == 'li'){ 
                        target.style.background = "red";
                    }
                    
                };

## 十三、事件冒泡、事件捕捉、默认事件 ##

事件冒泡：子集元素先触发，父级元素后触；（由内到外）

子集元素和父元素具备同样的事件，当触发子元素时，也会触发父元素的事件。

阻止方法：return false; event.stopPropagation

事件捕捉：与事件冒泡相反

默认事件：比如a链接的跳转

阻止方法：return false、javascript:;、JavaScript：void(0)

## 十四、call()、apply()、bind() ##

都可以用来改变指针this、

call()、apply()可以用来调用函数。区别call()参数没有限制，apply()只能传递数组参数

bind()不能调用函数，参数不限制

## 十五、原型链 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAzMzMwOQ_size_16_color_FFFFFF_t_70_pic_center]

查找规则：

①当访问一个对象的属性（包括方法）时，首先查找这个对象自身有没有该属性。

②如果没有就查找它的原型（也就是 \_\_proto\_\_指向的 prototype 原型对象）。

③如果还没有就查找原型对象的原型（Object的原型对象）。

④依此类推一直找到 Object 为止（null）。

⑤\_\_proto\_\_对象原型的意义就在于为对象成员查找机制提供一个方向，或者说一条路线。

## 十六、闭包 ##

闭包（closure）指有权访问另一个函数作用域中变量的函数。 简单理解就是 ，一个作用域可以访问另外一个函数内部的局部变量。

案例：

//案例一：
    for (var index = 0; index < li.length; index++) { 
          (function a(index) { 
            li[index].onclick = function () { 
              console.log(index);
            }
          })(index)
        }
    
    //案例二：
      for (var index = 0; index < li.length; index++) { 
           (function (index) { 
             setTimeout(() => { 
             console.log(li[index].innerHTML);
              }, 3000);
          }

## 十七、Cookie、Session、LocalStorage ##

<table> 
 <thead> 
  <tr> 
   <th>特性</th> 
   <th>cookie</th> 
   <th>sessionStorage</th> 
   <th>localStorage</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>数据生命期</td> 
   <td>生成时就会被指定一个maxAge值，这就是cookie的生存周期，在这个周期内cookie有效，默认关闭浏览器失效</td> 
   <td>页面会话期间可用</td> 
   <td>除非数据被清除，否则一直存在</td> 
  </tr> 
  <tr> 
   <td>存放数据大小</td> 
   <td>4K左右（因为每次http请求都会携带cookie）</td> 
   <td>一般5M或更大<a href="https://www.html5rocks.com/en/tutorials/offline/quota-research/#toc-introduction" rel="nofollow">详细看这(需vpn上网)</a></td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>与服务器通信</td> 
   <td>由对服务器的请求来传递，每次都会携带在HTTP头中，如果使用cookie保存过多数据会带来性能问题</td> 
   <td>数据不是由每个服务器请求传递的，而是只有在请求时使用数据，不参与和服务器的通信</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>易用性</td> 
   <td>cookie需要自己封装setCookie，getCookie</td> 
   <td>可以用源生接口，也可再次封装来对Object和Array有更好的支持</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>共同点</td> 
   <td>都是保存在浏览器端，和服务器端的session机制不同（<a href="http://blog.csdn.net/fangaoxin/article/details/6952954/" rel="nofollow">这里有一篇很好的介绍cookie和session的文章</a>）</td> 
   <td></td> 
   <td></td> 
  </tr> 
 </tbody> 
</table>

## 十八、深浅拷贝 ##

//1. 浅拷贝
        //只拷贝一层，更深层次对象级别的只拷贝引用
        var obj = { 
          id: 1,
          name: 'andy',
          msg: { 
            age: 18
          }
        };
        var o = { };
        // for (const key in obj) { 
        // o[key] = obj[key]
        // }
        // o.msg.age = 19
        // console.log(o, obj);
    
        //语法糖形式实现浅拷贝
        // Object.assign(o, obj)
        // console.log(o);
    
    
        //深拷贝
        function deepCopy(newObj, oldObj) { 
          for (const key in oldObj) { 
            //判断我们的属性值属于那种数据类型
            //1. 获取属性 oldObj[key]
            let item = oldObj[key]
            if (item instanceof Array) { 
              newObj[key] = []
              deepCopy(newObj[key], item)
            }
            if (item instanceof Object) { 
              newObj[key] = { }
              deepCopy(newObj[key], item)
            } else { 
              newObj[key] = item
            }
          }
          return newObj
        }
        deepCopy(o, obj)
        console.log(o);
        obj.msg.age = 20;
        console.log(obj);

## 十九、Promise ##

//Promise.race() 类似于Promise.all() ，区别在于它有任意一个完成就算完成
    function createPromise(url) { 
          return new Promise(function (resolve, reject) { 
            //异步代码
            //resolve 成功
            //reject 失败了
            var a = 1
            $.ajax({ 
              url: url,
              data: '',
              type: 'get',
              success: function (res) { 
                a = 2
                let object = { 
                  a,
                  data: res
                }
                resolve(object)
              },
              error: function (err) { 
                reject(err)
              }
            })
    
    
          });
        }
    
        Promise.all(
          [createPromise('../data/arr.txt'), createPromise("../data/test.json")]
        ).then(
          function (arr) { 
            console.log(arr);
    
            let [arr1, json] = arr//结构赋值
            console.log(arr1);
            console.log(json);
    
          },
          function () { 
            console.log("失败");
    
          }
        )

## 二十、字符串方法 ##

**1 concat**

将两个或多个字符的文本**组合**起来，返回一个新的字符串。

> var a = “hello”;
> 
> var b = “,world”;
> 
> var c = a.concat(b);
> 
> alert©;
> 
> //c = “hello,world”

**2 indexOf**

返回字符串中一个子串第一处出现的**索引**（从左到右搜索）。如果没有匹配项，返回 -1 。

> var index1 = a.indexOf(“l”);
> 
> //index1 = 2
> 
> var index2 = a.indexOf(“l”,3);
> 
> //index2 = 3

**3 charAt**

返回**指定位置的字符**。

> var get\_char = a.charAt(0);
> 
> //get\_char = “h”

**4 lastIndexOf**

返回字符串中一个子串**最后一处出现的索引**（从右到左搜索），如果没有匹配项，返回 -1 。

> var index1 = lastIndexOf(‘l’);
> 
> //index1 = 3
> 
> var index2 = lastIndexOf(‘l’,2)
> 
> //index2 = 2

**5 match**

检查一个字符串**匹配一个正则表达式**内容，如果么有匹配返回 null。

> var re = new RegExp(/^\\w+$/);
> 
> var is\_alpha1 = a.match(re);
> 
> //is\_alpha1 = “hello”
> 
> var is\_alpha2 = b.match(re);
> 
> //is\_alpha2 = null

**6 substring**

返回字符串的一个子串，传入参数是**起始位置和结束位置**。

> var sub\_string1 = a.substring(1);
> 
> //sub\_string1 = “ello”
> 
> var sub\_string2 = a.substring(1,4);
> 
> //sub\_string2 = “ell”

**7 substr**

返回字符串的一个子串，传入参数是起始位置和长度

> var sub\_string1 = a.substr(1);
> 
> //sub\_string1 = “ello”
> 
> var sub\_string2 = a.substr(1,4);
> 
> //sub\_string2 = “ello”

**8 replace**

用来查找匹配一个**正则表达式的字符串**，然后使用新字符串代替匹配的字符串。

> var result1 = a.replace(re,“Hello”);
> 
> //result1 = “Hello”
> 
> var result2 = b.replace(re,“Hello”);
> 
> //result2 = “,world”

**9 search**

执行一个正则表达式匹配查找。如果查找成功，返回字符串中匹配的索引值。否则返回 -1 。

> var index1 = a.search(re);
> 
> //index1 = 0
> 
> var index2 = b.search(re);
> 
> //index2 = -1

**10 slice**

提取字符串的一部分，并返回一个新字符串（与 substring 相同）。

> var sub\_string1 = a.slice(1);
> 
> //sub\_string1 = “ello”
> 
> var sub\_string2 = a.slice(1,4);
> 
> //sub\_string2 = “ell”

**11 split**

通过将字符串划分成子串，将一个字符串做成一个字符串数组。

> var arr1 = a.split("");
> 
> //arr1 = \[h,e,l,l,o\]

**12 length**

返回字符串的长度，所谓字符串的长度是指其包含的字符的个数。

> var len = a.length();
> 
> //len = 5

**13 toLowerCase**

将整个字符串转成小写字母。

> var lower\_string = a.toLowerCase();
> 
> //lower\_string = “hello”

**14 toUpperCase**

将整个字符串转成大写字母。

> var upper\_string = a.toUpperCase();
> 
> //upper\_string = “HELLO”

## 二十一、数组方法 ##

[https://www.cnblogs.com/jiuxia/p/11509616.html][https_www.cnblogs.com_jiuxia_p_11509616.html]

## 二十二、原型继承（es5） ##

//借用父构造函数继承属性
        //1. 父构造函数
        function Father(uname, age) { 
          this.uname = uname;
          this.age = age;
        }
    
        Father.prototype.money = function () { 
          console.log("挣钱");
        }
        //2.子构造函数 
        function Son(uname, age, score) { 
          //this 指向子构造函数的对象实例
          //父构造函数this指向子构造函数this
          Father.call(this, uname, age)
          this.score = score
    
        }
    
        // Son.prototype = Father.prototype;
        // Son.prototype.exam = function () { 
        // console.log("考试");
        // }//该方式会使父构造函数的原型对象上有子函数原型对象上的方法
    
    
        Son.prototype = new Father();//相当于创建了一个实例对象
    
        Son.prototype.exam = function () { 
          console.log('考试');
        }
    
        Son.prototype.constructor = Son //重新指回原来的构造函数
        var son = new Son('刘德华', 18)
        console.log(son, Father.prototype);
        // console.log(Son.prototype.__proto__);
        console.dir(Son.prototype.constructor === Father);
        //导致Son的原型对象constructor指向出错

## 二十三、async和await ##

结合起来使用和Promise.all()类似

## 二十四、var、let、const ##

*  var声明的变量会挂载在window上，而let和const声明的变量不会：

//let 和 const 的申明有点类似于这个
    (function(){ 
        var a=1
    })()

*  var声明变量存在变量提升，let和const不存在变量提升
 *  let和const声明形成块作用域
 *  同一作用域下let和const不能声明同名变量，而var可以
 *  缓存死区
    
        var a = 100; if (1) { 
          a = 10;    //在当前块作用域中存在a使用let/const声明的情况下，给a赋值10时，只会在当前作用域找变量a， // 而这时，还未到声明时候，所以控制台Error:a is not defined 
          let a = 1;
        }
 *  const注意点
    
        /* * 　　1、一旦声明必须赋值,不能使用null占位。 * * 　　2、声明后不能再修改 * * 　　3、如果声明的是复合类型数据，可以修改其属性 * * */
        
        const a = 100; 
        
        const list = [];
        list[0] = 10;
        console.log(list);　　// [10]
        
        const obj = { a:100};
        obj.name = 'apple';
        obj.a = 10000;
        console.log(obj);　　// {a:10000,name:'apple'}

## 二十五、垃圾回收机制 ##

JS的垃圾回收机制是为了以防内存泄漏，内存泄漏的含义就是当已经不需要某块内存时这块内存还存在着，垃圾回收机制就是间歇的不定期的寻找到不再使用的变量，并释放掉它们所指向的内存。

方式：

1.  标记清除
    
     大部分浏览器以此方式进行垃圾回收，当变量进入执行环境（函数中声明变量）的时候，垃圾回收器将其标记为“进入环境”，当变量离开环境的时候（函数执行结束）将其标记为“离开环境”，在离开环境之后还有的变量则是需要被删除的变量。标记方式不定，可以是某个特殊位的反转或维护一个列表等。
    
     垃圾收集器给内存中的所有变量都加上标记，然后**去掉环境中的变量以及被环境中的变量引用的变量的标记**。在此之后再被加上的标记的变量即为需要回收的变量，因为环境中的变量已经无法访问到这些变量。
2.  引用计数
    
     这种方式常常会引起内存泄漏，低版本的IE使用这种方式。机制就是跟踪一个值的引用次数，当声明一个变量并将一个引用类型赋值给该变量时该值引用次数加1，当这个变量指向其他一个时该值的引用次数便减一。当该值引用次数为0时就会被回收。

## 二十六、setTimeout、Promise、Async/Await 的区别 ##

[https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/33][https_github.com_Advanced-Frontend_Daily-Interview-Question_issues_33]

[https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/7][https_github.com_Advanced-Frontend_Daily-Interview-Question_issues_7]

主要是对宏观任务，和微观任务的理解

## 二十七、生成器generator ##

生成器（Generator）。简单来说，生成器（Generator）就是一个自带迭代器（Iterator）的函数。

//返回
        function* show(num1, num2) { 
          console.log('a');
    
    
          let a = yield 12; //yield 相当于一堵墙 yield 上面的代码跟yield右边及返回值， yield 下面的代码跟左边及传的参数
    
          console.log(a);
    
          console.log('b');
          return 3 //现在res2的值为 {value: 3, done: true} 
        }
    
        let genT = show()
        let res1 = genT.next()//a
        console.log(res1); //{value: 12, done: false}
        let res2 = genT.next(111)//111,b
        console.log(res2); //{value: 3, done: true}

一个值的引用次数，当声明一个变量并将一个引用类型赋值给该变量时该值引用次数加1，当这个变量指向其他一个时该值的引用次数便减一。当该值引用次数为0时就会被回收。

## 二十六、setTimeout、Promise、Async/Await 的区别 ##

[https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/33][https_github.com_Advanced-Frontend_Daily-Interview-Question_issues_33]

[https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/7][https_github.com_Advanced-Frontend_Daily-Interview-Question_issues_7]

主要是对宏观任务，和微观任务的理解

## 二十七、生成器generator ##

生成器（Generator）。简单来说，生成器（Generator）就是一个自带迭代器（Iterator）的函数。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAzMzMwOQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/38dbbf0c5f704c10800d94868c34c37b.png
[https_www.cnblogs.com_jiuxia_p_11509616.html]: https://www.cnblogs.com/jiuxia/p/11509616.html
[https_github.com_Advanced-Frontend_Daily-Interview-Question_issues_33]: https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/33
[https_github.com_Advanced-Frontend_Daily-Interview-Question_issues_7]: https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/7