web前端面试题

目录

1. css
2. js基础
3. 网络&存储
4. es6
5. Vue

---

一、css

1.用纯CSS创建一个三角形的原理是什么？（▲）

上、左、右三条边隐藏掉（颜色设为 transparent）

#demo {
  width: 0;
  height: 0;
  border-width: 20px;
  border-style: solid;
  border-color: transparent transparent red transparent;
}

• flex布局

  display: flex;
  justify-content: center;
  aligin-items: center;　

   纵向排列：        

{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

      

二、js基础

1.判断一个对象是否为jquery对象可以用 obj instanceof jQuery

• 确定一个值是哪种基本类型可以用typeof操作符,
• 确定一个值是哪种引用类型可以使用instanceof操作符

    判断是否是数组：

        Array.isArray(arr)

        arr instanceof Array

        Object.prototype.toString.call(arr) === "[object Array]"

2.js原生方法操作节点

var box=document.getElementById("box");
var tags=document.getElementsByTagName("*");//获取HTML的所有标签
var box2=document.getElementsByClassName("box");//获取class名为box的所有元素
var formName=document.getElementsByName("user");//含有name属性的元素
var p2=document.createElement("p");  //创建元素节点
p2.className = "info-top";//给元素设置className
var txt=document.createTextNode("这是另一个段落"); //创建文本节点
p2.appendChild(txt); //把创建的文本节点追加到元素节点中
var attr=document.createAttribute("id"); //创建属性节点
attr.value="p2"; //给属性节点设置值
p2.setAttributeNode(attr); //给元素设置属性节点
box.appendChild(p2);  //把创建的p元素追加到box最后
console.log(box);


let box1 = document.querySelector(".box");//仅返回匹配指定选择器的第一个元素
let boxes= document.querySelectorAll(".box");//返回匹配的所有的元素

总结：1.所有获取DOM对象的方法中，只有getElementById()和querySelector()这两个方法直接返回的DOM对象本身，可直接为其绑定事件。
2.getElementXXX类型的方法，除了通过Id获取元素，其他都返回一个集合，如果需要取到具体的DOM元素，需要加索引，如：document.getElementsByClassName(“box”)[0] =>获取class为box的所有元素中的第一个DOM元素。
3.querySelector()与querySelectorAll()两者的联系与区别： 
联系： 两者括号中的取值都是选择器 
区别： 当有多个class相同的元素时，使用querySelector()方法只能获取到第一个class为box的元素，而querySelectorAll()获取到了所有class为box的元素集合。

3.js的拷贝 （这题涉及到的就是你能不能清楚的分辨深拷贝和浅拷贝）

var a = {name:'Tom'};  var b = a;  b.name = 'Peter'; 
请问a.name = ？

正确答案是Peter，如果你的答案是Tom的话，那么你要好好去看看js的深拷贝。

如果要被拷贝的是数组：slice和concat都可以直接让数组进行深拷贝

arr.slice();
arr.concat();

4. javascript的同源策略，jsonp的原理

一段脚本只能读取来自于同一来源的窗口和文档的属性，这里的同一来源指的是域名、协议和端口号的组合

 同源策略带来的麻烦：ajax在不同域名下的请求无法实现，如果说想要请求其他来源的js文件，或者json数据，那么可以通过jsonp来解决

JSONP的实现原理：通过动态创建script标签，给请求的地址中添加一个get参数，这个参数代表回调函数，也就是希望服务器处理完我的请求之后，在前端执行这个回调函数

$.ajax({
 //url:"http://localhost:8081/rest/itemcat/list?callback=getMessage",
    url:"http://localhost:8081/rest/itemcat/message",	 
    type:"get",
    cache:false,
    dataType:"jsonp",
    jsonp:"callback", //这里定义了callback的参数名称，以便服务获取callback的函数名即getMessage
    jsonpCallback:"getMessage", //这里定义了jsonp的回调函数
    success:function(data){
        alert("success:"+data);
    },
    error:function(){
        alert("发生异常");
    }
});

jsonp:"callback", jsonpCallback:"getMessage",

这两个参数的值会自动拼接在url后面，所以用jquery的$.ajax方法发出的url可以不用在后面添加callback=getMessage 

5.Js获取当前日期时间

var myDate = new Date();
myDate.getYear();        //获取当前年份(2位)
myDate.getFullYear();    //获取完整的年份(4位,1970-????)
myDate.getMonth();       //获取当前月份(0-11,0代表1月)
myDate.getDate();        //获取当前日(1-31)
myDate.getDay();         //获取当前星期X(0-6,0代表星期天)
myDate.getTime();        //获取当前时间(从1970.1.1开始的毫秒数)
myDate.getHours();       //获取当前小时数(0-23)
myDate.getMinutes();     //获取当前分钟数(0-59)
myDate.getSeconds();     //获取当前秒数(0-59)
myDate.getMilliseconds();    //获取当前毫秒数(0-999)
myDate.toLocaleDateString();     //获取当前日期
myDate.toLocaleTimeString();     //获取当前时间
myDate.toLocaleString( );        //获取日期与时间

6.js数据类型

基础数据类型： number，string，null，undefined，boolean，存放在栈内存

引用数据类型：Object ，Array，Function（Date，RegExp），存放在堆内存

7.数组的操作方法

• slice(start,end) ：可提取字符串的某个部分，并以新的字符串返回被提取的部分。slice(开始截取位置，结束截取位置)。start：要抽取的片断的起始下标。如果是负数，则该参数规定的是从字符串的尾部开始算起的位置。也就是说，-1 指字符串的最后一个字符，-2 指倒数第二个字符，以此类推。返回一个新的数组，包含从 start 到 end （不包括该元素）的 arrayObject 中的元素。方法返回一个从开始到结束（不包括结束）选择的数组的一部分浅拷贝到一个新数组对象，且原数组不会被修改。。
• splice(index,howmany,item))：向/从数组中添加/删除项目，然后返回被删除的项目。会改变原始数组。
• pop() ：用于删除并返回数组的最后一个元素。会改变数组的长度。
• shift() ：用于把数组的第一个元素从其中删除，并返回第一个元素的值。会改变数组的长度。
• push() ：向数组的末尾添加一个或多个元素，并返回新的长度。会改变数组的长度。
• unshift() ：方法可向数组的开头添加一个或更多元素，并返回新的长度。会改变数组的长度。
• sort() ：用于对数组的元素进行排序。
• reverse() ：用于颠倒数组中元素的顺序。
• concat(array1,array2,arrayX) ：用于连接两个或多个数组。
• join(str) ：用于把数组中的所有元素通过指定的分隔符进行分隔放入一个字符串，返回生成的字符串。str(可选): 指定要使用的分隔符，默认使用逗号作为分隔符。
• indexOf() ：查找数组是否存在某个元素，返回下标

8. 字符串的操作

• charAt()：返回返回指定位置的字符串。如果charAt中的参数为负数，或者大于字符串的最大索引，将会返回一个空字符串。
• split(separator,howmany)： 把一个字符串分割成字符串数组，可以指定分隔符。如果把空字符串 ("") 用作分隔符，那么 stringObject 中的每个字符之间都会被分割。String.split() 执行的操作与 Array.join 执行的操作是相反的。
• indexOf() ：返回字符串中特定字符串第一次出现的位置
• lastIndexOf() ：返回一个指定的字符串值最后出现的位置，在一个字符串中的指定位置从后向前搜索。
• toUpperCase()：用于把字符串转换为大写
• toLowerCase()：用于把字符串转换为小写。
• search()：用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串，它接受一个参数，该参数是你需要查找的字符，如果被查找的字符串中这个字符，则返回它在该字符串中的下标，如果没有则返回-1
• replace()：用于查找并替换字符，该方法不会影响原字符串，可以填入两个参数，第一个参数为需要被替换的字符，第二个是用来替换的字符，返回替换字符后的新字符串
• match()：搭配正则表达式使用，支持全局匹配，参数是匹配的字符或正则，返回一个数组
• substring(start,stop) ：方法用于提取字符串中介于两个指定下标之间的字符。返回一个新的字符串，内容是从 start 处到 stop-1 处的所有字符，其长度为 stop 减 start。不包含stop
• slice(start,end) ：返回字符串中的某个子串，支持负数参数(字符串中倒数第一个字符定为-1)
• substr(start,length)：子串的开始位置和长度，start为要抽取的子串的起始下标。必须是数值。如果是负数，那么该参数声明从字符串的尾部开始算起的位置。也就是说，-1 指字符串中最后一个字符，-2 指倒数第二个字符，以此类推。length可选。子串中的字符数。必须是数值。如果省略了该参数，那么返回从 stringObject 的开始位置到结尾的字串。

总结：

截取字符串：substr、substring、slice这三个方法，它们接收的第一个参数都为开始的位置，而substr()，第二个参数表示截取的长度，slice()和substring(),表示结束的位置，而不包括它。

查找字符：
1.search()、indexOf() / lastIndexOf()：查找字符并返回该字符在字符串中的索引，没有则返回-1；
2.match()：匹配字符，并返回匹配到的字符组成的数组，没有则返回null，可填入正则；
3.replace()：用来查找并替代字符，两个参数，第一个是需要被替代的字符，第二个是用来替代的字符；

str.search(/w3school/i)//忽略大小写的检索

9. 什么叫优雅降级和渐进增强？

渐进增强 ：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

优雅降级：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

区别：

a. 优雅降级是从复杂的现状开始，并试图减少用户体验的供给

b. 渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要

c. 降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带

10.浏览器的内核分别是什么?

IE: trident内核

Firefox：gecko内核

Safari：webkit内核

Opera：以前是presto内核，Opera现已改用Google Chrome的Blink内核

Chrome：Blink(基于webkit，Google与Opera Software共同开发)

11.谈谈垃圾回收机制方式，内存管理，和内存泄漏

垃圾回收机制方式

1、定义和用法：Javascript具有自动垃圾回收机制(GC:Garbage Collecation),也就是说，执行环境负责管理代码执行过程中使用的内存。

2、原理：垃圾收集器会定期（周期性）找出那些不在继续使用的变量，然后释放其内存。但是这个过程不是实时的，因为其开销比较大，所以垃圾回收器会按照固定的时间间隔周期性的执行。

不再使用的变量也就是生命周期结束的变量，当然只可能是局部变量，全局变量的生命周期直至浏览器卸载页面才会结束。局部变量只在函数的执行过程中存在，而在这个过程中会为局部变量在栈或堆上分配相应的空间，以存储它们的值，然后在函数中使用这些变量，直至函数结束，而闭包中由于内部函数的原因，外部函数并不能算是结束。
3.  垃圾回收策略：标记清除(较为常用)和引用计数。

标记清除：

　　定义和用法：当变量进入环境时，将变量标记"进入环境"，当变量离开环境时，标记为："离开环境"。某一个时刻，垃圾回收器会过滤掉环境中的变量，以及被环境变量引用的变量，剩下的就是被视为准备回收的变量。

　　到目前为止，IE、Firefox、Opera、Chrome、Safari的js实现使用的都是标记清除的垃圾回收策略或类似的策略，只不过垃圾收集的时间间隔互不相同。
内存管理

1.什么时候触发垃圾回收？

垃圾回收器周期性运行，如果分配的内存非常多，那么回收工作也会很艰巨，确定垃圾回收时间间隔就变成了一个值得思考的问题。IE6的垃圾回收是根据内存分配量运行的，当环境中的变量，对象，字符串达到一定数量时触发垃圾回收。垃圾回收器一直处于工作状态，严重影响浏览器性能。IE7中，垃圾回收器会根据内存分配量与程序占用内存的比例进行动态调整，开始回收工作。

2、合理的GC方案：(1)、遍历所有可访问的对象; (2)、回收已不可访问的对象。

3、GC缺陷：(1)、停止响应其他操作；

4、GC优化策略：

(1)、分代回收（Generation GC）：这个和Java回收策略思想是一致的。目的是通过区分“临时”与“持久”对象；多回收“临时对象”区（young generation），少回收“持久对象”区（tenured generation），减少每次需遍历的对象，从而减少每次GC的耗时。

(2)、增量GC：这个方案的思想很简单，就是“每次处理一点，下次再处理一点，如此类推”。

开发过程中遇到的内存泄露情况，如何解决的？

1、定义和用法：内存泄露是指一块被分配的内存既不能使用，又不能回收，直到浏览器进程结束。C#和Java等语言采用了自动垃圾回收方法管理内存，几乎不会发生内存泄露。我们知道，浏览器中也是采用自动垃圾回收方法管理内存，但由于浏览器垃圾回收方法有bug，会产生内存泄露。

2、内存泄露的几种情况:

(1)、当页面中元素被移除或替换时，若元素绑定的事件仍没被移除，在IE中不会作出恰当处理，此时要先手工移除事件，不然会存在内存泄露。

解决方法如下：
<div id="myDiv">
    <input type="button" value="Click me" id="myBtn">
</div>
<script type="text/javascript">
    var btn = document.getElementById("myBtn");
    btn.onclick = function(){
        btn.onclick = null;
        document.getElementById("myDiv").innerHTML = "Processing...";
    }
</script>

(2)、由于是函数内定义函数，并且内部函数--事件回调的引用外暴了，形成了闭包。闭包可以维持函数内局部变量，使其得不到释放。

解决方法如下：
function bindEvent(){
    var obj=document.createElement("XXX");
    obj.onclick=function(){
         //Even if it's a empty function
    }
    obj=null;
}

12.display:none和visibility:hidden区别

1.display:none是彻底消失，不在文档流中占位，浏览器也不会解析该元素；visibility:hidden是视觉上消失了，可以理解为透明度为0的效果，在文档流中占位，浏览器会解析该元素；

2.使用visibility:hidden比display:none性能上要好，display:none切换显示时visibility，页面产生回流（当页面中的一部分元素需要改变规模尺寸、布局、显示隐藏等，页面重新构建，此时就是回流。所有页面第一次加载时需要产生一次回流），而visibility切换是否显示时则不会引起回流。

13.JS有哪些手段可以实现继承？

        1.原型链继承：将父类的为父类实例添加新特性，作为子类实例返回实例作为子类的原型

        2.构造继承：使用父类的构造函数来增强子类实例，等于是复制父类的实例属性给子类（没用到原型）

        3.实例继承：为父类实例添加新特性，作为子类实例返回

        4.拷贝继承：

        5.组合继承：通过调用父类构造，继承父类的属性并保留传参的优点，然后通过将父类实例作为子类原型，实现函数复用

        6.寄生组合继承：通过寄生方式，砍掉父类的实例属性，这样，在调用两次父类的构造的时候，就不会初始化两次实例方法/属性，避免的组合继承的缺点

     13.1 原型链

           1.原型链可以解决什么问题？

               对象共享属性和共享方法

            2. 谁有原型

                      函数拥有：prototype

                      对象拥有： __proto__

           3.对象查找属性或者方法的顺序

      先在对象本身找 --> 构造函数中查找 -->  对象的原型 --> 构造函数的原型 -->当前原型的原型中

14.undefined和null的区别, 还有undeclared

• null表示没有对象, 即此处不该有此值. 典型用法:

  • （1） 作为函数的参数，表示该函数的参数不是对象。

  • （2） 作为对象原型链的终点。

  •  ( 3 )   null可以作为空指针. 只要意在保存对象的值还没有真正保存对象,就应该明确地让该对象保存null值.
• undefined表示缺少值, 即此处应该有值, 但还未定义.

  • （1）变量被声明了，但没有赋值时，就等于undefined。

    （2) 调用函数时，应该提供的参数没有提供，该参数等于undefined。

    （3）对象没有赋值的属性，该属性的值为undefined。

    （4）函数没有返回值时，默认返回undefined。

• undeclared即为被污染的命名, 访问没有被声明的变量, 则会抛出异常, 终止执行. 即undeclared是一种语法错误

15.什么是闭包? 闭包有什么作用?

• 闭包是指有权访问另一个函数作用域中的变量的函数. 创建闭包常见方式,就是在一个函数内部创建另一个函数.
• 作用: 
  • 匿名自执行函数  (function (){ ... })();   创建了一个匿名的函数，并立即执行它，由于外部无法引用它内部的变量，因此在执行完后很快就会被释放，关键是这种机制不会污染全局对象。
  • 缓存, 可保留函数内部的值
  • 实现封装
  • 实现模板

16.apply和call的用法和区别？

• 用法: 都是为了改变函数体内部 this 的指向，都能继承另一个对象的方法和属性,区别在于参数列表不一样
• 区别:
  • Function.apply(obj, args) args是一个数组,作为参数传给Function
  • Function.call(obj, arg1, arg2,...)  arg*是参数列表
  • apply一个妙用: 可以将一个数组默认的转化为一个参数列表
    • 举个例子: 有一个数组arr要push进一个新的数组中去, 如果用call的话需要把数组中的元素一个个取出来再push, 而用apply只有Array.prototype.push.apply(this, arr)

17.前端开发的优化问题？

       (1) 减少http请求次数：css spirit,data uri

       (2) JS，CSS源码压缩

       (3) 前端模板 JS+数据，减少由于HTML标签导致的带宽浪费，前端用变量保存AJAX请求结果，每次操作本地变量，不用请求，减少请求次数

       (4) 用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能

       (5) 用setTimeout来避免页面失去响应

       (6) 用hash-table来优化查找

       (7) 当需要设置的样式很多时设置className而不是直接操作style 

       (8) 少用全局变量

       (9) 缓存DOM节点查找的结果

       (10) 避免使用CSS Expression

       (11) 图片预载

       (12) 避免在页面的主体布局中使用table，table要等其中的内容完全下载之后才会显示出来，显示比div+css布局慢

17.1. Vue性能优化的方法有哪些      

  一. 编码优化：
    1.不要将所有的数据都放在data中，data中的数据都会增加getter和setter，会收集对应的 watcher，这样就会降低性能。

    2. vue 在 v-for 时给每项元素绑定事件需要用事件代理，节约性能。

    3.尽可能拆分组件，来提高复用性、增加代码的可维护性，减少不必要的渲染。因为组件粒度最细，改组件的数组，它只会渲染当前的组件。

    4. v-if 当值为false时内部指令不会执行，具有阻断功能，很多情况下使用v-if替代v-show，合理使用if和show。

    5. key 保证唯一性，不要使用索引 ( vue 中diff算法会采用就地复用策略)。

    6.合理使用路由懒加载、异步组件。

    7.数据持久化的问题，使用防抖、节流进行优化，尽可能的少执行和不执行。

  二、加载性能：

    1.使用第三方插件实现按需加载

    2.滚动到可视区域动态加载 

    3.图片懒加载 

  三、SEO 优化：
    1.预渲染插件 prerender-spa-plugin，可以把我们代码提前运行起来，最后将代码保存下来，缺    陷就是不实时。

    2.服务端渲染 ssr

    四、打包优化：
    1.使用 cdn 的方式加载第三方模块

    2.多线程打包 happypack

    3.抽离公共文件 splitChunks

    4.sourceMap 生成

18.javascript中的this是什么，有什么用，指向上面？

• 全局代码中的this是指向全局对象
• 作为对象的方法调用时指向调用这个函数的对象
• 作为构造函数指向创建的对象
• 使用apply和call设置this

19.使用模块化加载时，模块记载的顺序是怎么样的，如果不知道，根据已有的知识，加载顺序是怎么样的

• commonjs 同步 循序执行
• AMD 提前加载，不管是否调用模块，先解析所有模块require速度快 有可能浪费资源(requirejs)
• CMD提前加载，在真正需要使用（依赖）模块时才解析该模块,(seajs)
• CMD按需解析，性能比AMD差

20.请用js去除字符串空格？

方法一：使用replace正则匹配的方法

去除所有空格: str = str.replace(/\s*/g,"");      

去除两头空格: str = str.replace(/^\s*|\s*$/g,"");

去除左空格： str = str.replace( /^\s*/, “”);

去除右空格： str = str.replace(/(\s*$)/g, "");

str为要去除空格的字符串，实例如下：

var str = " 23 23 ";
var str2 = str.replace(/\s*/g,"");
console.log(str2); // 2323

方法二：使用str.trim()方法

str.trim()局限性：无法去除中间的空格，实例如下：

var str = "   xiao  ming   ";
var str2 = str.trim();
console.log(str2);   //xiao  ming 

同理，str.trimLeft()，str.trimRight()分别用于去除字符串左右空格。

方法三：使用jquery,$.trim(str)方法

$.trim(str)局限性：无法去除中间的空格，实例如下：

var str = "   xiao  ming   ";
var str2 = $.trim(str)
console.log(str2);   //  xiao  ming

使用正则表达式验证邮箱格式:

var reg = /^(\w)+(\.\w+)*@(\w)+((\.\w{2,3}){1,3})$/;
var email = "example@qq.com";
console.log(reg.test(email));  // true  

21.jquery中$.get()提交和$.post()提交有区别吗？

相同点：都是异步请求的方式来获取服务端的数据；

异同点：

1、请求方式不同：$.get() 方法使用GET方法来进行异步请求的。$.post() 方法使用POST方法来进行异步请求的。

2、参数传递方式不同：get请求会将参数跟在URL后进行传递，而POST请求则是作为HTTP消息的实体内容发送给Web服务器的，这种传递是对用户不可见的。

3、数据传输大小不同：get方式传输的数据大小不能超过2KB 而POST要大的多

4、安全问题： GET 方式请求的数据会被浏览器缓存起来，因此有安全问题。

三、网络&存储&优化性能

1.http请求？

一次完整的HTTP请求所经历的7个步骤：

建立TCP连接->发送请求行->发送请求头->（到达服务器）发送状态行->发送响应头->发送响应数据->断TCP连接

2.websocket和ajax轮询

• websocket：是web应用程序的传输协议，它提供了双向的，按序到达的数据流。他是一个HTML5协议，websocket连接是持久的，通过在客户端和服务器之间保持双向连接，服务器的更新可以被及时推送给客户端，而不需要客户端以一定的时间去轮询。

       优点：只要建立一次连接，就可以连续不断的得到服务器推送消息，节省带宽和服务器端的压力。

• ajax轮询：模拟常连接就是每隔一段时间（0.5s）就向服务器发起ajax请求，查询服务器是否有数据更新。

       缺点：每次都要建立HTTP连接，即使需要传输的数据非常少，浪费带宽

3.请描述一下 cookies sessionStorage和localstorage区别

   相同点：都存储在客户端
   不同点：

1)存储大小

· cookie数据大小不能超过4k。

· sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。

2)有效时间

· localStorage    存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；

· sessionStorage  数据在当前浏览器窗口关闭后自动删除。

· cookie          设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭

3)数据与服务器之间的交互方式

· cookie的数据会自动的传递到服务器，服务器端也可以写cookie到客户端，不支持跨域

· sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。

4.计算机网络的分层概述

• tcp/ip模型：从下往上分别是链路层，网络层，传输层，应用层
• osi模型：从下往上分别是物理层，链路层，网络层，传输层，会话层，表示层，应用层

5.HTTP和HTTPS

• HTTP协议通常承载与 TCP协议之上，在HTTP和TCP之间添加一个安全协议层（SSL或TSL），这个时候，就成了我们常说的HTTPS
• 默认HTTP的端口号为80，HTTPS的端口号为443

6.浏览器是如何渲染页面的？

1.解析HTML文件，创建DOM树。

   自上而下，遇到任何样式（link、style）与脚本（script）都会阻塞（外部样式不阻塞后续外部脚本的加载）。

2.解析CSS。优先级：浏览器默认设置<用户设置<外部样式<内联样式<HTML中的style样式；

3.将CSS与DOM合并，构建渲染树（Render Tree）

4.布局和绘制，重绘（repaint）和重排（reflow）

四、es6 

1.ES6新特性

      1) 箭头操作符 inputs=>outputs: 操作符左边是输入的参数，而右边则是进行的操作以及返回的值

　　2) 支持类, 引入了class关键字. ES6提供的类实际上就是JS原型模式的包装

　　3) 增强的对象字面量. 

　　　　1. 可以在对象字面量中定义原型  __proto__: xxx  //设置其原型为xxx,相当于继承xxx

　　　　2. 定义方法可以不用function关键字

　　　　3. 直接调用父类方法

　　4) 字符串模板: ES6中允许使用反引号 ` 来创建字符串，此种方法创建的字符串里面可以包含由美元符号加花括号包裹的变量${vraible}。

　　5) 自动解析数组或对象中的值。比如若一个函数要返回多个值，常规的做法是返回一个对象，将每个值做为这个对象的属性返回。但在ES6中，利用解构这一特性，可以直接返回一个数组，然后数组中的值会自动被解析到对应接收该值的变量中。

　　6) 默认参数值: 现在可以在定义函数的时候指定参数的默认值了，而不用像以前那样通过逻辑或操作符来达到目的了。

　　7) 不定参数是在函数中使用命名参数同时接收不定数量的未命名参数。在以前的JavaScript代码中我们可以通过arguments变量来达到这一目的。不定参数的格式是三个句点后跟代表所有不定参数的变量名。比如下面这个例子中，…x代表了所有传入add函数的参数。

　　8) 拓展参数则是另一种形式的语法糖，它允许传递数组或者类数组直接做为函数的参数而不用通过apply。

　　9) let和const关键字: 可以把let看成var，只是它定义的变量被限定在了特定范围内才能使用，而离开这个范围则无效。const则很直观，用来定义常量，即无法被更改值的变量。

　　10) for of值遍历 每次循环它提供的不是序号而是值。

　　11) iterator, generator

　　12) 模块

　　13) Map, Set, WeakMap, WeakSet

　　14) Proxy可以监听对象身上发生了什么事情，并在这些事情发生后执行一些相应的操作。一下子让我们对一个对象有了很强的追踪能力，同时在数据绑定方面也很有用处。

　　15) Symbols Symbol 通过调用symbol函数产生，它接收一个可选的名字参数，该函数返回的symbol是唯一的。之后就可以用这个返回值做为对象的键了。Symbol还可以用来创建私有属性，外部无法直接访问由symbol做为键的属性值。

　　16) Math, Number, String, Object的新API

　　17) Promises是处理异步操作的一种模式

五、Vue

​1.为什么使用vue?

使用 Vue 框架可以让开发者更高效、更快速地构建现代 Web 应用,同时享受到优秀的性能和灵活性

体积小;更高的运行效率

双向数据绑定：让开发者不用再去操作DOM对象，把更多的精力投入到业务逻辑上

生态丰富、学习成本低：市场上拥有大量成熟、稳定的基于vue.js的ui框架及组件，拿来即用实现快速开发；

2.Vue组件中的data为什么是个函数？

   1.防止数据复用和污染

   2.保证组件的独立性和可复用性

   3.利用JavaScript的函数特性。每复用一次组件就会得到一份新的data数据，拥有自己的作用域，类似于给每个组件实例创建一个私有的数据空间。

3.什么是mixins（混入）？什么时候应该使用它？

mixins(混入):一种分发 Vue 组件中可复用功能的非常灵活的方式，提高代码的重用性，易于维护。

当我们存在多个组件中的数据或者功能很相近时，我们就可以利用mixins将公共部分提取出来，通过 mixins封装的函数，组件调用他们是不会改变函数作用域外部的。
作用： 减少data、methods、钩子的重复

4.vue中的单文件组件是什么？单页面优缺点？

单文件组件（Single File Component，简称 SFC）是 Vue 中的一个重要概念，它能够将组件的模板、脚本、样式等全部放入一个单独的文件中。单文件组件使用 .vue 后缀进行命名

Vue 的单页面应用（Single Page Application，SPA）是一种构建前端应用的方式，它使用 JavaScript 动态地更新页面内容，而无需进行完整的页面刷新。SPA 通常由一个 HTML 页面和多个嵌套的组件组成，通过路由来管理不同的页面状态。

优点：
1. 更快的用户体验：SPA 使用 Ajax 技术通过异步加载数据，只更新部分页面内容，不需要重新加载整个页面。这样可以提供更快、更流畅的用户体验。
2. 更好的交互性：SPA 通过前端路由实现页面跳转，可以在不刷新整个页面的情况下切换视图，提供更好的用户交互体验。
3. 更高的性能：由于只加载所需的组件和数据，SPA 可以减少服务器负载和网络传输量，提高性能。
4. 更好的开发体验：SPA 使用组件化的开发模式，可以将页面拆分为多个可重用的组件，提高代码的复用性和可维护性。
5. 跨平台开发：由于 SPA 使用前端技术构建，可以跨平台运行在各种设备上，如桌面浏览器、移动浏览器和原生应用等。

缺点：
1. 首次加载较慢：SPA 需要加载整个应用的 JavaScript 和 CSS，以及初始化相关的框架和运行环境，因此首次加载时间较长。
2. SEO 不友好：由于 SPA 动态更新页面内容，搜索引擎难以处理动态生成的内容，对于 SEO 来说相对不友好。不过可以通过一些技术手段来解决这个问题。
3. 内存占用较高：SPA 需要在浏览器中保持整个应用的状态，因此占用的内存较多。
4. 对浏览器的前进后退功能依赖较大：由于 SPA 的页面跳转是通过前端路由实现的，因此对浏览器的前进后退功能有较大的依赖。

5.在Vue.js中，forceUpdate()是什么？他有什么作用？

在vue.js中使用this.$forceUpdate()是强制更新方法，作用是触发vue的update方法。可以用在解决数据对象新增属性和数组新增数据，出现页面不渲染的问题。

$forceUpdate 方法的作用是强制组件重新渲染,从而更新视图

6.Vue中，什么是侦听器（Watcher），它有什么作用？与computed区别

watch侦听器允许开发者监视数据的变化，是 vue 提供的一种用来观察和响应实例上数据变化的属性，属性发生变化，便会触发对应的监听函数。

watch监听器的作用：监视数据变化，执行一些业务逻辑和异步操作（数据一旦发生变化实时发送请求更新数据）

区别：

        侦听属性 watch

        ①.不支持缓存，数据变化，直接会触发相应的操作;
        ②.watch 支持异步操作;
        ③.watch有两个参数;
             immediate：组件加载立即触发回调函数执行;
             deep：深度监听，为了发现对象内部值的变化，复杂类型的数据时使用，例如数组中的对象内容的改变;
        ④.watch中的函数名称必须要和data中的属性名一致，watch依赖于data中的属性，属性发生变化的时候，watch中的函数就会发生变化;
        ⑤.watch不支持缓存;
        ⑥.需要再data中声明;

        计算属性 computed

        ①.支持缓存，computed是依赖data中的属性，data中属性发生改变的时候，会重新进行计算，没有改变的时候，当前函数不会执行;
        ②.不支持异步，当 computed 内有异步操作时无效，无法监听数据的变化;
        ③.computed 属性值会默认走缓存，计算属性是基于它们的响应式依赖进行缓存的;
        ④.computed中的函数必须用return返回;
        ⑤.如果 computed 属性值是函数，那么默认会走 get 方法，函数的返回值就是属性的属性值；在computed中的，属性都有一个get和一个 set 方法，当数据变化时，调用 set 方法;
        ⑥.不需要再data中声明;

        watch的使用场景：一个数据影响多个数据,需要在数据变化时执行异步操作或者开销较大的操作时使用。  例如：搜索数据
        computed：一个数据受多个数据影响，处理复杂的逻辑或多个属性影响一个属性的变化时使用。  例如：购物车商品结算的时候

7.什么是动态组件？将其和静态组件进行对比

动态组件是指在一个挂载点使用多个组件，并进行组件的显示与隐藏

最常见的应用场景是实现tab的切换功能

8.在Vue中，怎么理解父子组件的生命周期钩子函数执行顺序？

在Vue中，父子组件的生命周期钩子函数执行顺序遵循以下规则：

1. 父组件的 beforeCreate、created、beforeMount 钩子函数。

2. 父组件的 mounted 钩子函数（如果有子组件，则在子组件 template 渲染到 DOM 后触发）。

3. 子组件的 beforeCreate、created、beforeMount 钩子函数。

4. 子组件的 mounted 钩子函数。

5. 父组件的 mounted 钩子函数（第二次触发，此时所有子组件都已经被挂载）。

9.请解释Vue3中的Teleport组件？

Vue 3 中的 Teleport 组件是一个用于在Vue应用的组件层级结构之外进行DOM操作的功能性组件。Teleport允许其子节点渲染到应用的外部节点上。这在很多情况下都很有用，比如对话框、下拉菜单、弹窗等。

10.请解释Vue3中的Suspense组件？

Vue3 中增加了一个名为Suspense的内置组件，用于在异步组件加载完成前显示占位符，避免页面空白或显示错误信息。

使用：

<template>
  <Suspense>
    <template #default>
      <router-view />
    </template>
    <template #fallback>
      <div class="loading-spinner">Loading...</div>
    </template>
  </Suspense>
</template>

11.Vue路由懒加载（按需加载组件）？

路由懒加载，也叫延迟加载或按需加载，是在需要的时候进行加载的一种技术。在单页面应用（SPA）中，如果没有应用懒加载，运用webpack打包后的文件将会异常的大，造成进入首页时需要加载的内容过多，时间过长，会出现长时间的白屏，即使做了loading也不利于用户体验。而运用懒加载则可以将页面进行划分，需要的时候加载页面，可以有效的分担首页所承担的加载压力，减少首页加载用时。

在 Vue.js 中，懒加载可以帮助你减小应用的初始加载大小，并在路由被访问时再加载对应的组件

import Vue from 'vue';
import Router from 'vue-router';
 
Vue.use(Router);
 
export default new Router({
  routes: [
    {
      path: '/home',
      name: 'Home',
      // 使用动态导入进行懒加载
      component: () => import('@/components/Home.vue')
    }
  ]
})