秋招2：太极计算机股份有限公司一面——2020.8.27
今天天气挺好的也不是很热，早上六点起来从天津赶过来。约好了十点半面试。
这园区是好大啊，好多骑摩托的。停车场有一片位置都是摩托。帅。（没拍图）
扫码预约进去之后，到了约好的楼层。先给了一张卷子，要填写个人信息，还有几道前端笔试题。
笔试题：
1、两种方法实现水平、垂直居中
-
不知道子元素的宽度和高度
-
容器display:flex; justify-content:center; align-items:center;
-
-
知道子元素的宽度和高度
-
容器position:relative; 子元素position:absolute; top:50%; left:50%; transform: translate(-50%, -50%);
-
2、JS的数据类型都有哪些？基本数据类型有哪些？
-
JavaScript的数据类型，共有六种。分别是undefined、null、boolean、number、string、object（ES6新增第七种Symbol一种数据类型，它的实例是唯一且不可改变的类型的值）。
-
Undefined：Undefined类型只有一个值，即特殊值undefined。在使用var声明变量，但未对其加以初始化时，这个变量值就是undefined。
-
Null：Null类型是第二个只有一个值的数据类型。其特殊值就是Null。从逻辑角度上看，null是一个空的对象指针。而这也正是使用typeof操作符检测null值，会返回“object”的原因。
-
Boolean：即布尔类型，该类型有两个值：true、false。需要注意的是，Boolean类型的字面值true和false是区分大小写的。也就是说，True和False(以及其它的混合大小形式)都不是Boolean值，只是标识符。
-
Number：该类型的表示方法有两种形式，第一种是整数，第二种为浮点数。整数：可以通过十进制，八进制，十六进制的字面值来表示。浮点数：就是该数值中必须包含一个小数点，且小数点后必须有一位数字。
-
String：String类型用于表示由零或多个16位的Unicode字符组成的字符序列，即字符串。至于用单引号，还是双引号，在js中还是没有差别的。记得成对出现。
-
Object：Object数据类型，称为对象，是一组数据和功能（函数）的集合。可以用new操作符后跟要创建的对象类型的名称来创建。也可以用字面量表示法创建。在其中添加不同名（包含空字符串在内的任意字符串）的属性。
-
-
基本数据类型不包括Object
3、JS数据类型判断的方式
-
使用
typeof-
typeof可以测试出
number、string、boolean、undefined及function，而对于null及数组、对象，typeof均检测出为object，不能进一步判断它们的类型。
-
-
使用
instanceof-
不能区别undefined和null
-
-
使用
constructor-
不能判断undefined和null
-
-
使用
Object.prototype.toString.call -
使用
jquery中的$.type-
原理就是用的
Object.prototype.toString.call()
-
4、Vue中数据传递方式
-
父子组件
-
父传子
props -
子传父
$emit
-
-
同级（事件总线）
-
$on()——监听事件。 -
$emit()——把事件沿着作用域链向上派送。
-
-
跨级嵌套
-
Vuex
-
5、数组去重
-
利用ES6 Set去重
-
function unique (arr) {
return Array.from(new Set(arr))
}
var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];
console.log(unique(arr))
//[1, "true", true, 15, false, undefined, null, NaN, "NaN", 0, "a", {}, {}]
-
-
利用for嵌套for，然后splice去重
-
function unique(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,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];
console.log(unique(arr))
//[1, "true", 15, false, undefined, NaN, NaN, "NaN", "a", {…}, {…}] //NaN和{}没有去重，两个null直接消失了
-
6、vue的生命周期
-
beforeCreate 数据还没有挂载，只是一个空壳，无法访问数据和dom，一般不做操作 //console.log(this.list) //undefind
-
created 绑定事件，挂载数据 并且在这里更新data 不会触发update函数（数据初始化）
-
beforeMount 将模板编译为虚拟dom，放到render中准备渲染 在这里更新data 不会触发update函数
-
mounted 渲染出真实dom 可操作真实dom//如果组件中有更新，就会触发beforeUpdate
-
beforeUpdate 重新生成dom树 根据diff（本质是调用patch函数）算法，对比上一次dom树
-
updated 数据更新完成 render完成
-
beforeDestroy 一般在这里做一些善后工作，例如清除计时器、清除非指令绑定的事件等
-
destroyed 组件的数据绑定、监听...去掉后只剩下dom空壳
7、实现：左边宽度固定，右边宽度自适应
-
html结构
<div class="outer">
<div class="left">固定宽度</div>
<div class="right">自适应宽度</div>
</div>
12345在外层div（类名为outer）的div中，有两个子div，类名分别为left和right，其中left为固定宽度，而right为自适应宽度
-
方法1：左侧div设置成浮动：float: left，右侧div宽度会自拉升适应
.outer {
width: 100%;
height: 500px;
}
.left {
width: 200px;
height: 200px;
float: left;
}
.right {
height: 200px;
} -
方法2：对右侧:div进行绝对定位，然后再设置right=0，即可以实现宽度自适应
绝对定位元素的第一个高级特性就是其具有自动伸缩的功能，当我们将 width设置为 auto 的时候（或者不设置，默认为 auto ），绝对定位元素会根据其 left 和 right 自动伸缩其大小
.outer {
width: 100%;
height: 500px;
position: relative;
}
.left {
width: 200px;
height: 200px;
}
.right {
height: 200px;
position: absolute;
left: 200px;
top:0;
right: 0;
}
1234567891011121314151617181920 -
方法3：将左侧div进行绝对定位，然后右侧div设置margin-left: 200px
.outer {
width: 100%;
height: 500px;
position: relative;
}
.left {
width: 200px;
height: 200px;
position: absolute;
}
.right {
height: 200px;
margin-left: 200px;
}
123456789101112131415161718 -
方法4：使用flex布局
.outer {
width: 100%;
height: 500px;
display: flex;
flex-direction: row;
}
.left {
width: 200px;
height: 200px;
}
.right {
height: 200px;
flex: 1;
}
8、Vuex包含哪几个部分？
-
state：是存储的单一状态，是存储的基本数据。
-
getters：是store的计算属性，对state的加工，像computed计算属性一样，getter返回的值会根据它的依赖被缓存起来，且只有当它的依赖值发生改变才会被重新计算。
-
mutations：提交更改数据，使用store.commit方法更改state存储的状态
-
actions：像一个装饰器，提交mutation，而不是直接变更状态。（actions可以包含任何异步操作）
-
Module：是store分割的模块，每个模块拥有自己的state、getters、mutations、actions。
9、是一个看程序写结果的题，忘了。。。跟map相关的。
之后就是
上机题：
实现：点击Group2中的checkbox5，Group1中的checkbox1、checkbox2被选中；
<template>
<div class="hello">
<h1>Group1</h1>
<div class="checkBox">
<div>
<input type="checkbox" id="checkbox1" name="checkbox1" class="group1">
<label for="checkbox1">checkbox1</label>
</div>
<div>
<input type="checkbox" id="checkbox2" name="checkbox2" class="group1">
<label for="checkbox1">checkbox2</label>
</div>
<div>
<input type="checkbox" id="checkbox3" name="checkbox3" class="group1">
<label for="checkbox1">checkbox3</label>
</div>
<div>
<input type="checkbox" id="checkbox4" name="checkbox4" class="group1">
<label for="checkbox1">checkbox4</label>
</div>
</div>
<h1>Group2</h1>
<div class="checkBox">
<div>
<input type="checkbox" id="checkbox5" name="checkbox5" @click="btn1Click">
<label for="checkbox5">checkbox5</label>
</div>
<div>
<input type="checkbox" id="checkbox6" name="checkbox6" @click="btn2Click">
<label for="checkbox6">checkbox6</label>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
props: {