2021届税友实习前端⾯试题
这⾥写⾃定义⽬录标题
1、数组去重
⼀、for循环嵌套，利⽤splice去重
此⽅法是⽐较常⽤的⽅法之⼀，也是es5中⽐较实⽤的⽅法之⼀。话不多说，上代码：
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⽅法删除第⼆个
jquery框架面试题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钩⼦函数。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。