第四周面试题

一.易视腾科技
1.了解的数据结构？
2.js怎么定义一个数组
    1）字面量
        var arr=[];
    2）使用Array构造函数
        var arr=new Array()；

3.怎么定义队列
4.==和===区别？
    1）==判断值是否相等
    2）===判断值，还有数据类型是否相等

5.闭包？
    闭包：函数内部包裹函数，作用域链得不到释放，造成内存泄露
    解决了在一个函数内部也有权限访问另一个函数内部的变量

    优点：
            1.保护函数内的变量安全，实现封装，防止变量流入其他环境发生命名冲突
            2.在内存中维持一个变量，可以做缓存
            3.匿名执行函数可以减少内存消耗
    缺点：
            1.作用域链得不到释放，造成内存消耗
            2.性能损失
    解决方法：1使用完变量后置空null
            2.立即执行函数，创建函数后就立即执行，只执行一次（function（）{}）{}
            3.将设置函数中的变量包裹在局部作用域中

6.垃圾回收机制 
    js具有自动垃圾回收机制，执行环境会管理代码执行的时候使用的内存
    原理：垃圾收集器会定期找出那些不在继续使用的变量，然后释放其内存

    两种实现方式：
        1.标记清除：当变量进入执行环境时，标记这个变量为"进入环境"。进入环境的变量所占用的内存就不能释放，
                   当变量离开环境时，则将其标记为"离开环境"，等待垃圾回收。
        2.引用计数：如果一个值的引用次数是0，就表示这个值不再用到了，可以将这块内存释放。
                   如果一个值不再需要了，引用次数却不为0，垃圾回收机制无法释放这块内存，从而导致内存泄漏。

7.一个页面中，只刷新一个区域,页面其他区域不变
    使用Ajax来刷新页面的一小部分
    1）使用AJAX POST call来调用Controller的函数
    2）Controller返回我们所需的View中的HTML代码片段
    3）调用AJAX callback函数动态将HTML代码片段插入到页面中

8.router与route的区别？
    1）$router：router为VueRouter的实例，相当于一个全局的路由对象，包括了路由的跳转方法(路由跳转用this.$router.push)，钩子函数等。
                里面含有很多属性和子对象，例如history对象。
    2）$route：route相当于当前正在跳转的路由对象。可以从里面获取name,path,params,query等路由信息参数。

    配置路由时path有时候会加 '/' 有时候不加,例如path:'name'和path:'/name'。
    区别：以 / 开头的会被当做路径，就不会一直嵌套之前的路径。

9.nextTick
    在修改数据之后立即使用这个方法，获取更新后的 DOM
    因为Vue在更新DOM时是异步执行的。当数据发生变化，Vue开启一个异步更新队列，视图需要等队列中所有数据变化完成之后，再统一进行更新。
    nextTick本质是一种优化策略

    使用场景：如果想要在修改数据后立刻得到更新后的DOM结构，可以使用Vue.nextTick()
            第一个参数为：回调函数（可以获取最近的DOM结构）
            第二个参数为：执行函数上下文

10.状态码：499，502，302重定向，地址会改变吗？会
    1）499 状态码不是HTTP的标准代码
       499 状态码是Nginx自己定义，用来记录服务端向客户端发送HTTP请求头之前，客户端已经关闭连接的一种情况
       最常见的场景就是timeout设置不合理，Nginx把请求转发上游服务器，上游服务器慢吞吞的处理，客户端等不及了主动断开链接，Nginx就负责记录了499
    2）502 一般都是upstream出错，对于PHP，造成502的原因常见的就是脚本执行超过timeout设置时间，或者timeout设置过大，导致PHP进程长时间不能释放。
    3）302 found，临时性重定向，表示资源临时被分配了新的URL

11.后台管理：用户权限管理，审核的过程

二.惟客数据
1.为什么学习前端？
2.优化网站
1）防抖与节流
应用场景
怎么实现防抖？
    做一个定时器加状态，定时一秒，一秒钟之内重新点击了按钮就不会进入提交方法。
    状态没有改变的话，点击之后标记这个状态进入提交方法。

    1.懒加载
        懒加载也叫做延迟加载、按需加载，指的是在长网页中延迟加载图片数据，是一种较好的网页性能优化的方式。
        在比较长的网页或应用中，如果图片很多，所有的图片都被加载出来，而用户只能看到可视窗口的那一部分图片数据，
        这样就浪费了性能。
        如果使用图片的懒加载就可以解决以上问题。在滚动屏幕之前，可视化区域之外的图片不会进行加载，在滚动屏幕时才加载。
        这样使得网页的加载速度更快，减少了服务器的负载。懒加载适用于图片较多，页面列表较长（长列表）的场景中。
    2.CDN 
        CDN（内容分发网络）：一种通过互联网互相连接的电脑网络系统，利用最靠近每位用户的服务器，
        更快、更可靠地将音乐、图片、视频、应用程序及其他文件发送给用户，来提供高性能、可扩展性及低成本的网络内容传递给用户。

    3.回流(重排)与重绘
        1）回流：当渲染树中部分或者全部元素的尺寸、结构或者属性发生变化时，浏览器会重新渲染部分或者全部文档的过程。
        下面这些操作会导致回流：页面的首次渲染，浏览器的窗口大小发生变化，元素的内容发生变化，元素的尺寸或者位置发生变化，元素的字体大小发生变化，激活CSS伪类，查询某些属性或者调用某些方法，添加或者删除可见的DOM元素
        2）重绘：当页面中某些元素的样式发生变化，但是不会影响其在文档流中的位置时，浏览器就会对元素进行重新绘制。
        注意： 当触发回流时，一定会触发重绘，但是重绘不一定会引发回流。

    4.节流与防抖
        1）防抖debounce：在事件被触发 n 秒后再执行回调，如果在这n秒内事件又被触发，则重新计时。这可以使用在一些点击请求的事件上，避免因为用户的多次点击向后端发送多次请求。
        2）节流throttle：指规定一个单位时间，在这个单位时间内，只能有一次触发事件的回调函数执行，如果在同一个单位时间内某事件被触发多次，只有一次能生效。节流可以使用在 scroll 函数的事件监听上，通过事件节流来降低事件调用的频率。

        1）防抖的应用场景：
            按钮提交场景：防⽌多次提交按钮，只执⾏最后提交的⼀次
            服务端验证场景：表单验证需要服务端配合，只执⾏⼀段连续的输⼊事件的最后⼀次，还有搜索联想词功能类似⽣存环境请⽤lodash.debounce
        2）节流的应⽤场景：
            拖拽场景：固定时间内只执⾏⼀次，防⽌超⾼频次触发位置变动
            缩放场景：监控浏览器resize
            动画场景：避免短时间内多次触发动画引起性能问题

    5.图片优化
        1）图片精灵：多个图标整合到一张图片
        2）一般图片都用 CDN 加载

    6.webpack优化

3.let和const
const声明一个对象，对象能修改吗？
    const声明一个常量
    const命令只是保证变量名指向的地址不变，并不保证该地址的数据不变
    1）const定义的基本数据类型的变量不能修改
    const b = 3;
    b++;  //error!
    2）const定义的引用数据类型的变量,const仅保证指针不发生改变，修改对象的属性不会改变对象的指针，所以是被允许的。
    const obj={age:1};
    obj.age=2;//2

4.为什么用let和const取代var,var有什么缺点？
    var没有块级作用域。只能借助function的作用域来引用作用域外面的变量
    let在if和for中有块级作用域，let声明块级变量。
    通过var声明的变量会提升到函数的作用域最顶部。

5.事件捕获与事件冒泡，事件委托？
    从页面中接收事件的顺序：
    1）事件捕获：不太具体的节点更早接收事件，具体的节点到最后接收事件。
    2）事件冒泡：事件开始由最具体的元素接收，然后逐级向上传播到不具体的节点
    3）事件委托：将事件绑定当前元素的父元素上，点击当前元素时，就会执行父元素上绑定的事件处理函数
                通过监听一个父元素，来给不同的子元素绑定事件，减少监听次数，从而提升速度。

6.vue中使用事件委托吗？为什么？
    减少dom操作的内存占用，优化性能
    特点：
        1、基于事件冒泡。
        2、动态添加的节点也将自动加入绑定到委托事件中。
        3、可以在页面的任何一个生命周期添加事件处理程序
    最常见的例子：一个ul中由多个li组成，每次任意点击一个li，使其变成红色。
                如果给每一个li都加上一个点击事件，那成千上万个li呢？
                设计相同子元素时用v-for循环，利用事件委托可以解决这个问题
        selectSlideTab:(ev)=>{
            let listDataIndex=ev.target.getAttribute("listdata-index");
            //获取到所点击li的index，对应的是listdata的index，接下来就可以操作所点击的li对应的数据了
        }

7.vue列表渲染时key有什么作用？
    key是给每一个vnode的唯一id，便于diff算法计算，可以根据key，更准确，更快的找到对应的vnode节点
    比对两个数组，两两元素进行比较，数据相同不发生dom操作。最小成本更新dom。
    没有key的话，数组中的元素做多余的更新dom操作。
    设置key能够大大减少对页面的dom操作，提高了diff效率。
    
    列表渲染：将数组或集合中的数据展示出来
        v-for="item in arr"  v-bind:key="唯一值"
        在列表渲染的时候，在重复的元素上务必添加一个key，表示唯一值
        利于Diff算法对dom操作进行优化（效率偏低，但是准确度高）

8.怎么把数组打乱？
    // An highlighted block
    var arr = [4,1,67,12,45,121,3];
    arr.sort(function() {
        return (0.5-Math.random());
    });
    console.log(arr);

9.重排(回流)和重绘
    1）回流：当渲染树中部分或者全部元素的尺寸、结构或者属性发生变化时，浏览器会重新渲染部分或者全部文档的过程。
    下面这些操作会导致回流：页面的首次渲染，浏览器的窗口大小发生变化，元素的内容发生变化，元素的尺寸或者位置发生变化，元素的字体大小发生变化，激活CSS伪类，查询某些属性或者调用某些方法，添加或者删除可见的DOM元素
    2）重绘：当页面中某些元素的样式发生变化，但是不会影响其在文档流中的位置时，浏览器就会对元素进行重新绘制。
    注意： 当触发回流时，一定会触发重绘，但是重绘不一定会引发回流。

10.对象和Map的区别？
    1）访问：1.map.get(key)
            2.obj.a或者obj['a']
    2）赋值：1.map.set，key可以是任意类型
            2.object.a = 1或者object['a'] = 1，key只能是字符串，数字或symbol
    3）删除：1.map.delete，删除一个不存在的属性返回false
            2.delete，即使对象不存在该属性，删除也返回true
    4）大小：1.map.size获取元素的总个数
            2.Object.keys转换为数组，再通过数组的length方法获取元素的总个数
    5）迭代：1.map拥有迭代器，for-of,forEach迭代元素，遍历顺序是确定的
            2.object没有迭代器，需要自行实现，不实现只能通过for-in循环去迭代，遍历顺序是不确定的

11.遍历对象的属性，取出所有的key
    1）Object.keys()
        返回对象自身可枚举属性的数组
    2）Object.values()
        返回对象自身可枚举属性值的数组
    3）Object.entries()
        返回对象自身可枚举属性的键值对数组
    4）for...in
        for..in不仅可以枚举自身属性还可以枚举原型链中的属性

三.中孚信息
1.flex布局
    适应不同屏幕大小以及设备类型
    容器设置display:flex 
    1）容器上的属性：
        1.flex-direction 
        2.flex-wrap 
        3.主轴上的对齐方式：justify-content 
        4.交叉轴上的对齐方式：align-items 
    2）子元素上的属性：
        1.flex-grow：拉伸比例
        2.flex-shrink：压缩比例
        3.flex-basis：最小宽度

2.响应式布局
    一个网站适应不同的终端
    1）媒体查询 @media：给不同的设备编写不同的样式
    2）百分比 %
    3）vw/vh 
    4）rem
    5）第三方库：bootstrap 栅格系统

3.栅格系统
    Bootstrap会自动帮我们把容器分为12份,我们可以自由按份组合
    栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。
    1）响应式的，移动设备优先
    2）随着设备或视口大小的增加扩展到12列
    3）包含了用于简单的布局选项的预定义类

4.DOM 和 BOM
    1）DOM：文档对象模型，HTML 和 XML 文档的编程接口。操作DOM节点改变文档的结构，样式和内容。
        操作DOM节点：1. 创建节点
                        document.createElement("TagName");
                    2. 更新节点
                        myDiv.innerText = "这是新创建的div";
                    3. 获取节点
                        var rootDiv = document.getElementsByTagName("div")[0];
                    4. 追加节点
                        rootDiv.appendChild(myDiv);
        1.Document类型：表示整个html文档
        2.Element类型：属性
        3.Text类型：文本
        4.Comment类型：注释

    2）BOM：浏览器对象模型，与浏览器窗口进行交互的对象。
            BOM的核心对象是window，它表示浏览器的一个实例。
        1.location：提供当前窗口加载的文档的一些信息，还提供导航功能
        2.history：保存着用户的上网历史记录。出于安全考虑，我们无法得知用户浏览的url。但是我们可以拿到列表实现前进后退。

5.块级元素和行内元素有哪些？区别是什么？
    1）块级元素：div、p、h1-h6、ul、li、dl、dt、dd
    2）行内元素：span、img、input、button、textarea、select、label、em、strong
    3）空元素：没有内容的HTML元素，例如：br、hr、link、input、img、meta

    区别：1）块级元素独占一行，行内元素与其他元素共享一行
          2）块级元素可以直接设置宽高，行内元素不能直接设置宽高，要结合display:inline-block来设置宽高
          3）块级元素可以设置padding和margin，行内元素只能设置水平方向的padding和margin，不能设置垂直方向的
          4）块级元素可以嵌套块级元素和行内元素，行内元素只能包含行内元素

6.选择器的优先级？
    1）!important
    2）style行内样式 -- 1000
    3）1.id选择器 -- 100
       2.类选择器，属性选择器，伪类选择器 -- 10
       3.标签选择器，伪元素选择器 -- 1
    4）代码顺序

7.伪元素选择器和伪类选择器的区别
    1）伪元素选择器：双冒号::主要用在清除浮动。
                    父元素::after{
                        content:"";
                        display:block;
                        clear:both;
                    }
    2）伪类选择器：单冒号:选中某个状态，比如鼠标悬浮:hover

8.预编译工具：sass,less,stylus
    1）sass：最早最成熟的Css预处理器，是全面兼容Css的Scss
            文件后缀名为.sass与scss，可以严格按照sass的缩进方式省去大括号和分号
    2）less：缺点：比起sass，编程功能不够;
            优点：简单和兼容Css
    3）stylus：新型语言，可以创建健壮的、动态的、富有表现力的Css

    1.嵌套：三者的嵌套语法都是一致的，甚至连引用父级选择器的标记 & 也相同
            区别只是 Sass 和 Stylus 可以用没有大括号的方式书写
    2.变量：变量为 Css 增加了有效的复用，减少了原来在 Css 中无法避免的重复
            1）less声明的变量必须以@开头，而且变量名和变量值需要使用冒号:分隔开
            2）sass变量名前面使用$开头
            3）stylus变量与变量值之间需要使用=
    3.作用域：
            1）sass中不存在全局变量
            2）less与stylus先从局部作用域查找变量，依次向上级作用域查找
    4.混入：Mixins可以将一部分样式抽出，作为单独定义的模块，被很多选择器重复使用
    5.代码模块化：将Css代码分成一个个模块。@import导入模块

9.ts是js的子集还是超集？
    1）ts是js的超集：ts = es6 + 强类型，ts添加了强类型特性，一个变量的数据类型在声明的时候确定，变量的数据类型一旦确定无法修改
    2）新增一种引用数据类型：enum 枚举类型
    3）面向对象：类，抽象类，接口

10.es6的新特性？
    1）变量声明：let和const。不能重复声明，没有变量声明提升，有块级作用域
    2）箭头函数就是函数的一种简写形式
    3）对象，数组解构：使用模式匹配方式从一个对象，数组中快速获取值的方式
    4）扩展运算符和rest参数：右拆分; 左聚集
        扩展运算符⽤于将数组中的元素拆分出来; 
        rest参数是拓展运算符的逆运算
    5）for...of 和 for...in
       for...of 用于遍历一个迭代器
       for...in 用来遍历对象中的属性
    6）新增的数据结构：Set,Map
    7）异步的解决方案：promise,generator,async    

11.promise和async await的区别？怎么实现异步的？
   async返回的是promise对象？
    1）async/await 本质是Promise，写起来更优雅，不能用于普通的回调函数
    2）1.async/await同步执行异步代码，并阻塞线程保证执行顺序。
       2.promise.all异步执行多个异步函数，虽然按顺序执行，但是由于异步回调时间不固定的情况下并不能保证执行顺序
         不会阻塞线程，只会在合适的时机调用整体resolve|reject的回调函数
    3）1.async/await遇到执行回调中第一个失败，报错如果不加try...catch会直接中断线程
       2.promise.all遇到执行回调中第一个失败。会立刻执行自身的reject的回调函数，并且只会抛出第一个失败reject,后续遇到reject均不执行

12.通过项目学习到什么？

13.项目中遇到最难的问题？

14.组件通信
    1）父子组件之间的通信：
        1.props和$emit
          props：父组件向子组件传递数据，子组件的数据会随着父组件不断更新
          $emit：子组件和父组件通信，$emit绑定一个自定义事件，当这个事件被执行时就会将参数传递给父组件，父组件通过v-on监听并接收参数
        2.ref和$refs 
          ref：在子组件上，ref的引用指向了子组件的实例，通过实例来访问组件的数据和方法
          $refs：父组件通过this.$refs来访问子组件的数据和方法
    2）兄弟组件之间的通信；
        1.EventBus 
        2.$parent和$root 
    3）祖先和后代组件之间的通信：
        1.provide和inject
          provide：祖先组件发送传递的值
          inject：后代组件接收值
        2.$attrs和$listeners
    4）复杂关系的组件之间的通信：
        vuex状态机，相当于一个用来存储共享变量的容器

15.vuex
    维护项目中的共享数据，比如当前登录者的信息，以及一些其他共享数据。
    Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。
    采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

    1）state：状态，声明并初始化共享数据
    2）getters：获取器，对state中的数据进行过滤输出
    3）mutations：突变，修改state值的唯一方式，只能同步修改
    4）actions：动作，异步操作获取的结果如果要修改state，可以通过actions
    5）modules：模块化

16.插槽？作用域插槽与具名插槽的区别？作用域插槽具体怎么使用？
    1）简单插槽
    2）具名插槽
    3）作用域插槽 

四.宝信
1.H5新特性
    1）Canvas、SVG -- 用于绘画的元素，canvas绘制的图片会失真而SVG绘制的不会失真。
    2）video、audio -- 用于播放视频和音频的媒体。
    3）Drag 、Drop -- 用于拖放的。
    4）Geolocation -- 用于获取地理位置。
    5）localStorage、sessionStorage -- 用于本地离线存储。
    6）webSQL、IndexDB -- 前端数据库操作，由于安全性极低，目前h5已放弃。
    7）web Worker -- 独立于其他脚本，不影响页面性能运行在后台的javascript。
    8）webSocket -- 单个TCP连接上进行全双工通讯的协议。
    9）新的特殊内容元素 -- 如：article、footer、header、nav、section。
    10）新的表单控件 -- 如：date、time、email、url、search。

2.属性选择器
3.基本数据类型
4.typeof和instanceof的区别
5.vue的生命周期
6.父组件和子组件的生命周期执行顺序 
7.vue的钩子函数可以使用箭头函数吗？
    不能，this指向的问题
8.v-if和v-show的区别 
9.父子组件通信
10.功能组件的封装
11.ts与js的区别

五.通联支付
1.常用的linux命令
ls,pwd,cat,touch,mkdir,rm,rmdir,tail,mv,|
    1）ls：列出当前路径下的文件和目录
       如果为文件夹，则显示成蓝色。
       如果为文件，则显示成灰色
    2）pwd：显示工作目录
    3）cat：查看文件的内容
       cat xxx.js 
    4）touch：创建空文件
       touch xxx.js
    5）mkdir：创建一个新的空目录
       mkdir xxx
    6）rm：删除文件/目录
       rm xxx.js
       1.rmdir：删除空目录
         rmdir xxx
    7）tail：查看文档的内容
       tail xxx.js
       1.-f：循环读取
         tail -f xxx.log
       2.+：从xx行到结尾
         tail +20 xxx.log 
       3.-c：最后xx行
         tail -c 10 xxx.log 
    11）mv：移动文件
        mv xxx ../utils
    12）|：管道命令
        将前面每一个进程的输出（stdout）直接作为下一个进程的输入
        1.ls -l /etc | more 
        分页显示 /etc 目录中内容的详细信息
        2.echo "Hello World" | cat > hello.txt 
        将一个字符串输入到一个文件中
    10)find：搜索文件
       1.find path -name xxx.js
       例如：find . -name index.js 
       2.find . -name "*.js"
       查找指定类型的文件
    1）grep：查找文件中的关键字
       grep "string" xxx.js
    5）echo：字符串的输出,将状态文本输出到屏幕或文件
       echo "my friends"