以下题目都是本人经过的一些真实的面试题目。
1. 有哪些方法可以实现垂直居中？
<div class="wrap">
<div class="box"></div>
</div>
- 通过定位来实现
<!-- 容器的宽高未知 -->
<style>
html,
body,
.wrap{
width: 100%;
height: 100%;
position:relative
}
.box{
width: 30%;
height: 30%;
background: cyan;
position:absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%)
}
</style>
<!-- 容器的宽高已知(还可以margin值来修改) -->
<style>
html,body,
.wrap{
position:relative;
width: 100%;
height: 100%;
}
.box{
width: 200px;
height: 200px;
background: cyan;
position:absolute;
left: 50%;
top: 50%;
margin-top: -100px;
margin-left: -100px;
}
</style>
- 通过flex布局来实现；
<style>
.wrap{
width: 100%;
height: 500px;
background:skyblue;
display: flex;
flex-flow: row nowrap;
align-items: center;
justify-content: center;
}
.box{
width: 200px;
height: 200px;
background:cyan;
}
</style>
2. Css 各种选择器的优先级规则是什么？
-
!important
当 !important 规则被应用在一个样式声明中时,该样式声明会覆盖CSS中任何其他的声明, 无论它处在声明列表中的哪里. 尽管如此, !important规则还是与优先级毫无关系.使用 !important 不是一个好习惯，因为它改变了你样式表本来的级联规则，从而使其难以调试
内联样式 > id选择器 > class选择器 > 元素选择器
-
利用选择器的权值进行计算比较
- 内联样式表的权值最高 1000；
- ID 选择器的权值为 100
- Class 类选择器的权值为 10
- HTML 标签选择器的权值为 1
3. 以下函数的执行结果是什么？（变量）
var a = 'a'
function A(){
console.log(a)
let a = "b"
console.log(a)
}
A()
// 打印结果为报错
// Cannot access 'a' before initialization 初始化前无法访问 ‘a'
// 涉及到的知识点是变量提升，let和const 是块级作用域况且变量无法提升。var是函数级作用域，可以变脸提升。
// 单纯的第二个结果可以输出 ’b‘
4. 以下函数的执行结果是什么？（this）
var obj = {
name: 'obj',
hello(){
console.log(this.name)
}
}
var h = obj.hello;
h()
// 执行结果为 空
// 因为是window调用的 h 函数，故所以this的指向绑定在window上面。而window.name，打印出来为空。
- 变形
var obj = {
name: 'obj',
hi() {
return () => {
console.log(this.name)
}
}
}
var h2 = obj.hi()
h2()
obj.hi().call(obj,window)
// 打印结果都为 obj
// 箭头函数吧this绑定在obj上，与执行环境无关
// .call 改变this指向，第一个参数为指向的对象。
5. 请写一个闭包。
// 引用的网上的例子，貌似是廖雪峰老师讲的，忘记了
function f1(){
var n=999;
nAdd=function(){n+=1}
function f2(){
alert(n);
}
return f2;
}
var result=f1();
result(); // 999
nAdd();
result(); // 1000
/**
1）由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。解决方法是，在退出函数之前，将不使用的局部变量全部删除。
2）闭包会在父函数外部，改变父函数内部变量的值。所以，如果你把父函数当作对象（object）使用，把闭包当作它的公用方法（Public Method），把内部变量当作它的私有属性（private value），这时一定要小心，不要随便改变父函数内部变量的值。
**/
6. 请把下面的数组扁平化。再去重。
var arr = [true, true, [{}, [2, [3, [4, 3], 2]]]]
- 通过reduce 和递归 扁平化
function flatten1(arr) {
return arr.reduce((result,cur) => {
return result.concat(Array.isArray(cur) ? flatten(cur) : cur)
}, [])
}
console.log(flatten1(arr))
- toString || join & split----(注意这种方式只能针对数字的扁平化，此例子不适合)
function flatten2(arr) {
return arr.toString().split(',').map(item => Number(item))
}
console.log(flatten2(arr))
function flatten3(arr) {
return arr.join(',').split(',').map(item => parseInt(item))
}
console.log(flatten3(arr)
- 递归 扁平化
function flatten4(arr) {
var res = []
arr.map(item => {
if(Array.isArray(item)){
res = res.concat(flatten4(item))
}else{
res.push(item)
}
})
return res
}
console.log(flatten4(arr))
- 运用扩展运算符 扁平化
function flatten5(arr) {
while(arr.some(item => Array.isArray(item))){
arr = [].concat(...arr)
}
return arr
}
console.log(flatten5(arr))
扁平化的核心就是：遍历数组arr，若arr[i]为数组则递归遍历，直至arr[i]不为数组然后与之前的结果concat。
const newArr = flatten5(arr)
- 运用 filter 和 indexOf 操作 去重
function distinct1(arr) {
return arr.filter((item,index) => {
return arr.indexOf(item) === index
})
}
console.log(distinct1(newArr))
- For...of... & includes() 去重
function distinct2(arr) {
let res = []
for (let i of arr){
!res.includes(i) && res.push(i)
}
return res
}
console.log(distinct2(newArr))
- new Set() 去重 （次推）
function distinct3(arr) {
return Array.from(new Set(arr))
}
console.log(distinct3(newArr))
- for...of + Object （网友测试耗时最短的一种方法）（主推）
function distinct4(arr) {
let res = []
let obj = {}
for (let i of arr){
if(!obj[i]){
res.push(i)
obj[i] = 1
}
}
return res
}
console.log(distinct4(newArr))
7. 提取一下字符串中的所有数字 （正则）
var str = 'today is 2019-07-18'
console.log(str.replace(/\d/ig,''))
console.log(str.replace(/[^0-9]/ig,''))
8. 以下函数执行的结果是啥？(promise)
function A() {
let a = Math.floor(Math.random() * 10)
if(a > 5){
return Promise.resolve('a')
}else{
return Promise.reject('b')
}
}
A().then(m => {
console.log(m)
},n => {
console.log(n)
})
// 执行结果为随机打印
9. 有一个obj空对象，给该对象添加侦听器，当用户给obj设置name的时候，打印用户给obj设置的name值。
比如 var obj = {}。给该对象添加侦听器后，当我设置obj.name = 'a'的时候，控制台打印 'a'。
const obj = {}
let val = ''
Object.defineProperty(obj,'name',{
get:function(){
return val
},
set:function(newVal){
val = newVal
if(newVal === 'a'){
console.log(newVal)
}
}
})
10. 如何修改 state 的 name 值 （vuex）
var store = {
state: {
name: 'a'
}
}
通过mutations来修改state的值。
更改store中state状态的唯一方法就是提交mutation，就很类似事件。每个mutation都有一个字符串类型的事件类型和一个回调函数，我们需要改变state的值就要在回调函数中改变。我们要执行这个回调函数，那么我们需要执行一个相应的调用方法：store.commit。
