2021届税友实习前端面试题

function newArr(arr){
    for(var i=0;i<arr.length;i++){
        for(var j=i+1;j<arr.length;j++){
            if(arr[i]==arr[j]){ 
            //如果第一个等于第二个，splice方法删除第二个
            arr.splice(j,1);
            j--;
            }
        }
    }
    return arr;
} 
var arr = [1,1,2,5,6,3,5,5,6,8,9,8];
console.log(newArr(arr))

二、建新数组，利用indexOf去重

此方法也是es5中比较简单的方法之一，基本思路是新建一个数组，原数组遍历传入新数组，判断值是否存在，值不存在就加入该新数组中；值得一提的是，方法“indexOf”是es5的方法，IE8以下不支持。话不多说，上代码：

function newArr(array){ 
    //一个新的数组 
    var arrs = []; 
    //遍历当前数组 
    for(var i = 0; i < array.length; i++){ 
        //如果临时数组里没有当前数组的当前值，则把当前值push到新数组里面 
        if (arrs.indexOf(array[i]) == -1){ 
            arrs.push(array[i])
        }; 
    } 
    return arrs; 
}
var arr = [1,1,2,5,5,6,8,9,8];
console.log(newArr(arr))

三、ES6中利用Set去重
此方法是所有去重方法中代码最少的方法，代码如下：

Array.from(new Set(arr))
	[...new Set(arr)]

2、盒模型

Box-sizing: content-box 标准盒模型
Box-sizing: border-box IE盒模型

标准盒子模型：
元素的width，height只包含content，不包含border和padding值；
盒子的大小由宽高，边框和内边距决定。
IE盒模型：
元素的width，height不仅包括content，还包括border和padding；
盒子的大小取决于width，height，修改border和padding值不能改变盒子的大小。

3、行内元素和块级元素

行内元素：
不会占据新的一行
只能行内元素，不能包含块级元素
行内元素不可以设置宽高，宽度高度随文本内容的变化而变化，但是可以设置行高（line-height），同时在设置外边距margin上下无效，左右有效，内填充padding上下无效，左右有效；
span a input br换行 img em/i斜体 b/strong加粗 select下拉列表 textarea多行文本

块级元素：
会占据新的一行
块级元素中可以包含块级元素和行内元素
块级元素可以设置宽高，并且宽度高度以及外边距，内填充都可随意控制。
宽度没有设置时，默认为100%
H1~h6 p ul无序 ol有序 table表格 form表单 div

4、水平垂直居中

文字：line-height 垂直
Text-align: center 水平
图片：margin: 0 auto 水平
Vertical-align: middle 垂直
盒子：p {
Positon: absolute;
Top: 50%;
Left:50%;
Transform: translate(-50%, -50%);
}
Fixed固定的盒子margin失效：
Left:50%;
Transform:translate(-50%)

5、选择器优先级 伪元素选择器 ID、标签选择器

6、伪元素和伪类的区别的区别，是否生成了DOM
伪类（存在于DOM中）：
用于向某些选择器添加特殊的效果
:hover :link :visited :active :last-child :nth-child :first-of-type :nth-of-type
伪元素（不存在于DOM树）：
用于将特殊的效果添加到某些选择器
配合content: “” 一起使用
::before ::after ::first-letter ::first-line
伪元素不是实际存在的页面元素，但是其用法跟表现行为与真正的页面元素一样，可以对其使用诸如页面一样的css样式
div::after 在元素结尾添加一个元素，该元素默认为行内元素

根本区别：是否创建了新元素
伪类的效果可以通过添加实际的类来实现
伪元素的效果可以通过添加实际的元素来实现

7、CSS3新增

8、深拷贝和浅拷贝

浅拷贝是拷贝了对象的引用，当原对象发生变化的时候，拷贝对象也跟着变化；
深拷贝是另外申请了一块内存，内容和原对象一样，更改原对象，拷贝对象不会发生变化；

9、vue的常用指令 v-if和v-show

1、v-if：根据表达式的值的真假条件渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。
2、v-show：根据表达式之真假值，切换元素的 display CSS 属性。
3、v-for：循环指令，基于一个数组或者对象渲染一个列表，vue 2.0以上必须需配合 key值 使用。
4、v-bind：动态地绑定一个或多个特性，或一个组件 prop 到表达式。
5、v-on：用于监听指定元素的DOM事件，比如点击事件。绑定事件监听器。
6、v-model：实现 表单输入 和 应用状态 之间的双向绑定
7、v-pre：跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。
8、v-once：只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。

10、js数据类型以及判断

Number  string  Boolean  undefined  null  object  symbol（独一无二的值）
Typeof   instanceof()  Array.isArray()

11、get和post的区别

12、vue的生命周期
vue生命周期是指vue实例对象从创建之初到销毁的过程，vue所有功能的实现都是围绕其生命周期进行的，在生命周期的不同阶段调用对应的钩子函数实现组件数据管理和DOM渲染两大重要功能。

vue生命周期可以分为八个阶段，分别是：
beforeCreate(创建前),created(创建后)，beforeMount(载入前),mounted(载入后)，beforeUpdate(更新前),updated（更新后）,beforeDestroy(销毁前)，destroyed（销毁后）

1,创建前(beforeCreate)
对应的钩子函数为beforeCreate。此阶段为实例初始化之后，此时的数据观察和事件机制都未形成，不能获得DOM节点。

2，创建后（created）
对应的钩子函数为created。在这个阶段vue实例已经创建，仍然不能获取DOM元素。

3，载入前（beforeMount）
对应的钩子函数是beforeMount，在这一阶段，我们虽然依然得不到具体的DOM元素，但vue挂载的根节点已经创建，下面vue对DOM的操作将围绕这个根元素继续进行；beforeMount这个阶段是过渡性的，一般一个项目只能用到一两次。

4，载入后（mounted）
对应的钩子函数是mounted。mounted是平时我们使用最多的函数了，一般我们的异步请求都写在这里。在这个阶段，数据和DOM都已被渲染出来。

5，更新前（beforeUpdate）
对应的钩子函数是beforeUpdate。在这一阶段，vue遵循数据驱动DOM的原则。beforeUpdate函数在数据更新后虽然没立即更新数据，但是DOM中的数据会改变，这是Vue双向数据绑定的作用。

6，更新后（updated）
对应的钩子函数是updated。在这一阶段DOM会和更改过的内容同步。

7，销毁前（beforeDestroy）
对应的钩子函数是beforeDestroy。在上一阶段Vue已经成功的通过数据驱动DOM更新，当我们不再需要vue操纵DOM时，就要销毁Vue,也就是清除vue实例与DOM的关联，调用destroy方法可以销毁当前组件。在销毁前，会触发beforeDestroy钩子函数。

8，销毁后(destroyed)
对应的钩子函数是destroyed。在销毁后，会触发destroyed钩子函数。

vue的生命周期的思想贯穿在组件开发的始终，通过熟悉其生命周期调用不同的钩子函数，我们可以准确的控制数据流和其对DOM的影响；vue生命周期的思想是Vnode和MVVM的生动体现和继承。
MV----数据绑定
VM----事件监听

13、vuex有哪些属性值
Vuex是实现组件全局状态（数据）管理的一种机制，可以方便的实现组件之间的数据共享
使用Vuex管理数据的好处：
A.能够在vuex中集中管理共享的数据，便于开发和后期进行维护
B.能够高效的实现组件之间的数据共享，提高开发效率
C.存储在vuex中的数据是响应式的，当数据发生改变时，页面中的数据也会同步更新

Vuex中的核心特性：
1、 State
State提供唯一的公共数据源，所有共享的数据都要统一放到Store中的State中存储
在组件中访问State的方式：
1). this.$store.state.全局数据名称如：this.$store.state.count
2). 先按需导入mapState函数： import { mapState } from ‘vuex’
然后数据映射为计算属性： computed:{ …mapState([‘全局数据名称’]) }
2、 Mutation
Mutation用于修改变更$store中的数据
3、 Action
在mutations中不能编写异步的代码，会导致vue调试器的显示出错。在vuex中我们可以使用Action来执行异步操作。
4、 Getter
Getter用于对Store中的数据进行加工处理形成新的数据它只会包装Store中保存的数据，并不会修改Store中保存的数据，当Store中的数据发生变化时，Getter生成的内容也会随之变化

14、清除浮动
浮动的文本框了向左或者向右移动，直到他的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流的块框表现得就像浮动框不存在一样。浮动的块框会漂浮在文档的普通流的块框上。
文档流的排版方式是：块级元素垂直排布，行内元素和行内块级水平排布。不脱离就是按照这种方式排版,从左到右，从上到下。
脱离文档流就是不按照文档流的排版方式。

清除浮动的方式（第三种用的比较多）

1. display:block 使生成的元素以块级元素显示,占满剩余空间;
2. height:0 避免生成内容破坏原有布局的高度。
3. visibility:hidden 使生成的内容不可见，并允许可能被生成内容盖住的内容可以进行点击和交互;
   4）通过 content:".“生成内容作为最后一个元素，至于content里面是点还是其他都是可以的，例如oocss里面就有经典的 content:“XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX”,有些版本可能content 里面内容为空,一丝冰凉是不推荐这样做的,firefox直到7.0 content:”” 仍然会产生额外的空隙；
   5）zoom：1 触发IE hasLayout。
   15、遍历数组的方法
   第一种、普通for循环
   第二种、forEach
   第三种、for in
   遍历对象的key
   第四种、for of
   遍历对象的value
   第五种、map

jQuery中$.each()遍历DOM元素

16、js闭包
作用：延长变量作用域

使用闭包的缺点：

17、监听兼容性问题
为一个元素绑定多个事件：
1、 对象.addEventListener(“事件类型”, 事件处理函数, false)
Chrome、Firefox支持
IE8不支持
2、 对象.attachEvent(“有on的事件类型”, 事件处理函数)
Chrome、Firefox不支持
IE8支持
IE11不支持

为任意元素绑定任意事件（兼容性代码）

function addEventListener (element, type, fn) {
	If( element.addEventListener ) {
		element.addEventListener (type, fn, false)
	} else if (element.attachEvent) {
		element.attachEvent(“on”+ type, fn)
	} else if {
		element[“on” + type ] = fn;
	}
}