前端知识点汇总

灰太狼 2023-07-03 04:37 26阅读 0赞

前端框架面试题：

## 项目 ##

1 说一下做过哪些项目？

2 项目难点

## **1 vue** ##

1 说一下Vue的生命周期？

2 滚动效果的实现？

3 如何使用JS实现滚动效果?

4 说说你对vuex的理解？

5 前端路由的实现说说？

## **2 HTML** ##

**1 H5中的webstorage和cookie的区别是什么？**

**（1）存储大小：**webstorage提供5G或更多的存储空间，webstorage每个域（包括子域）都有独立的存储空间，各个存储空间是完全独立的，因此不会造成数据混淆。cookie只提供4KB的存储空间，每个域名的cookie总数是有限的，各个浏览器之间各有不同。

**（2）接口：**webstorage提供了许多丰富易用的接口，拥有setItem，removeItemgetItem，clear，key等方法，操作数据更简单；cookie需要自己封装setCookie，getCookie等。

**（3）是否与服务器交互：**webstorage是为本地数据存储而生，内部数据不会和服务器发生任何交互；cookie作为HTTP规范的一部分而存在，cookie的内容会随着请求一并发送到服务器（每请求一个新的页面时，cookie都会被发送过去，无形中造成带宽浪费）。

** 2 H5中的语义化标签用过哪些？**

<header>头部内容（有头就有尾）

<footer>底部内容

<figure>媒体元素

<mark>突出文本

<nav>定义导航链接部分

<time>定义时间，日期

...

## **3 CSS** ##

1 css动画了解吗？

2 怎么实现一个阴影？

3  CSS行内和块状元素的区别？

4 行内元素可以设置margin和padding吗？是四个方向都能设置吗？

5 什么是标准盒模型和IE盒模型？怎么切换？

6 position的取值，绝对定位的用法

7 用浮动时遇到过的问题

8 清除浮动的方法

9 动态页面的交互

10 实现一个元素水平垂直居中都有哪些方法？

## **4 JavaScript** ##

1 js的原型链和原型了解吗？

**2  JS基本类型有哪些?**

String，Number，Null，Undefined，Boolean

（补充：引用类型有Object）

3 this的指向问题？

**4 会不会正则表达式？ 正则对象的创建方式是？**

（1）正则表达式(regular expression)描述了一种字符串匹配的模式，可以用来检查一个串是否含有某种子串、将匹配的子串替换或者从某个串中取出符合某个条件的子串等。正则表达式通常缩写成“regex”。

下面先给出两个简单的示例：

![format_png][]

*  ^ 为匹配输入字符串的开始位置。
 *  \[0-9\]+匹配多个数字， \[0-9\] 匹配单个数字，+ 匹配一个或者多个。
 *  abc$匹配字母 abc 并以 abc 结尾，$ 为匹配输入字符串的结束位置。

又比如：

*  runoo+b，可以匹配 runoob、runooob、runoooooob 等，+ 号代表前面的字符必须至少出现一次（1次或多次）。
 *  runoo\*b，可以匹配 runob、runoob、runoooooob 等，\* 号代表字符可以不出现，也可以出现一次或者多次（0次、或1次、或多次）。
 *  colou?r 可以匹配 color 或者 colour，? 号代表前面的字符最多只可以出现一次（0次、或1次）。

### **（2）正则对象的创建方式** ###

**a.隐式创建（即字面量方式）**

var 正则对象 = /正则表达式/匹配模式;

**b.直接实例化（构造函数方法）**

var 正则对象 = new RegExp(‘正则表达式’,’匹配模式’);  
（补充：在Javascript中的正则表达式中，匹配模式只有两个。小写字母g：global的缩写，全局匹配；小写字母i：ignore的缩写，忽略大小写）

5 如何全局匹配和多行匹配？

6 数组创建的方式有哪些？

**7 删除数组元素的方法?**

js中一共有七种方法可删除数组元素。

**（1）length属性 **

** **JavaScript中Array的length属性非常有特点一一它不是只读的。因此，通过设置这个属性可以从数组的末尾移除项或添加新项，请看下面例子：

1 var colors = ["red", "blue", "grey"];   //创建一个包含3个字符串的数组
    2 colors.length = 2;
    3 console.log(colors[2]);  //undefined

**（2）delete关键字**

要注意的是，使用delete删除元素之后数组长度不变，只是被删除元素被置为undefined了。

1 var arr = [1, 2, 3, 4];
    2 delete arr[0];
    3 console.log(arr);   //[undefined, 2, 3, 4]

**（3）pop()栈方法**

JavaScript中的Array对象提供了一个pop()栈方法用于弹出并返回数组中的最后一项，某种程度上可以当做删除用。

1 var colors = ["red", "blue", "grey"];
    2 var item = colors.pop();
    3 console.log(item);      //"grey"
    4 console.log(colors.length);    //2

**（4）shift()队列方法**

JavaScript中的Array对象提供了一个shift()队列方法用于弹出并返回数组中的第一项，某种程度上也可以当做删除用。

1 var colors = ["red", "blue", "grey"];
    2 var color = colors.shift();
    3 console.log(color); // "red"
    4 console.log(colors.length); // 2

**（5）splice()操作方法 **

在JavaScript的Array对象中提供了一个splice()方法用于对数组进行特定的操作。在删除数组元素的时候，它可以删除任意数量的项，只需要指定2个参数：要删除的第一项的位置和要删除的项数。

1 var colors = ["red", "blue", "grey"];
    2 var color = colors.splice(0, 1);
    
    3 console.log(color); // "red"
    4 console.log(colors); // ["blue", "grey"]

可以看出，在调用了splice(0, 1)方法时，数组从第一项开始，删除了一项。

**（6）迭代方法**

所谓的迭代方法就是用循环迭代数组元素，发现符合要删除的项则删除。用的最多的地方，可能是当数组中的元素为对象的时候，可以根据对象的某个属性（例如ID）来删除数组元素。

**a.第一种用最常见的ForEach循环来对比元素找到之后将其删除。**

var colors = ["red", "blue", "grey"];
    
    colors.forEach(function(item, index, arr) {
        if(item === "red") {
            arr.splice(index, 1);
        }
    });

可以看到这里还要配合splice()方法去实现删除，循环只是为了找到特定的元素。另外一种思路是循环将不需要删除的元素推入到新的数组中，也能达到假性删除特定元素的目的。

**b.第二种用循环中的filter方法**

var colors = ["red", "blue", "grey"];
    
    colors = colors.filter(function(item) {
        return item != "red"
    });
     
    console.log(colors); // ["blue", "grey"]

找出元素不是red的项数返回给colors（其实是得到了一个新的数组，并不是在原数组上进行删除操作），一定程度上也算是达到了删除特定元素的目的。

**（7）prototype原型方法**

Array.prototype.remove = function(dx) {
    　　if(isNaN(dx) || dx > this.length){
    　　　　return false;
    　　}
    
    　　for(var i = 0, n = 0; i < this.length; i++) {
    　　　　if(this[i] != this[dx]) {
    　　　　　　this[n++] = this[i];
    　　　　}
    　　}
    　　this.length -= 1;
    };
    
    var colors = ["red", "blue", "grey"];
    colors.remove(1);
    
    console.log(colors); // ["red", "grey"]

这种方法其实就是自己实现一个删除的逻辑，然后把删除方法添加给了Array的原型对象，则在此环境中的所有Array对象都可以使用该方法。尽管可以这么做，但是不推荐在产品化的程序中修改原生对象的原型。道理很简单，如果只是某个实现中缺少某个方法，就在原生对象的原型中添加这个方法，那么当在另一个支持该方法的实现中运行代码时，就可能导致命名冲突。而且这样做可能会意外地导致原生方法被重写。

**8 js中长度为10的数组，在其索引为15的位置上添加元素会报错吗？ 为什么？**

会报undefined错误，因为数组越界，超出范围了。

9 DOM的增删查有哪些方法？

10 JS的事件绑定和事件委托

11 动态页面中一个后添加的按钮怎么绑定事件？

12  json格式的数据传到前端是怎么解析的？

13  js的类型判断有几种，区别、原理、使用场景都说一下？

14 JS事件模型

15 怎么在事件捕获阶段触发事件

16  JS的函数防抖和函数节流的区别？。

## **5 JQuery** ##

## **6 Servlet** ##

jsp是在浏览器端还是服务器端执行?

2 http状态码说一下

3 http的详细过程？

4 关于缓存的头有哪些？

5 说一下协商缓存和强缓存？协商缓存请求时，body中的参数会传给后端吗？

6 什么是强制缓存？

**7  什么是同源策略？**

同源策略是由NetScape提出的一个著名的安全策略。所谓的同源，指的是**协议，域名，端口**相同。浏览器处于安全方面的考虑，只允许本域名下的接口交互，不同源的客户端脚本，在没有明确授权的情况下，不能读写对方的资源。

（设想这样一种情况：A网站是一家银行，用户登录以后，又去浏览其他的网站，如果其他网站可以读取A网站的Cookie,会发生什么？很显然，如果Cookie包含隐私（比如存款总额），这些信息就会泄漏。更可怕的是Cookie往往用来保存用于的登录状态，如果用没有退出登录，其他网站就可以冒充用户为所欲为，因为浏览器同时还规定，提交表单不受同源策略的限制。）

由此可见，同源策略是必须的。如果非同源，那么在请求数据时，浏览器会在控制台中报一个异常，提示拒绝访问。

8  JS 的跨域有哪些？

9 为什么JSONP能跨域？

## 算法 ##

1 说一下排序算法有哪些？哪些稳定和不稳定？

[format_png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly93d3cucnVub29iLmNvbS93cC1jb250ZW50L3VwbG9hZHMvMjAxNC8wMy9DRUJCNDlCQi1CMUFELTQ1MzktQUM3QS1CNDBEREM2MkQxQjIuanBn?x-oss-process=image/format,png