2019前端面试题总结之一

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。 本文链接：https://blog.csdn.net/Arthas_Xue/article/details/101208479

以下题目都是本人经过的一些真实的面试题目。

1. 有哪些方法可以实现垂直居中？

<div class="wrap">
<div class="box"
</div>

1. 通过定位来实现

<!-- 容器的宽高未知 -->
<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>

1. 通过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>

3ff7

2. Css 各种选择器的优先级规则是什么？

• !important

  当 !important 规则被应用在一个样式声明中时,该样式声明会覆盖CSS中任何其他的声明, 无论它处在声明列表中的哪里. 尽管如此, !important规则还是与优先级毫无关系.使用 !important 不是一个好习惯，因为它改变了你样式表本来的级联规则，从而使其难以调试

• 内联样式 > id选择器 > class选择器 > 元素选择器

• 利用选择器的权值进行计算比较

  内联样式表的权值最高 1000；
  1. ID 选择器的权值为 100
  2. Class 类选择器的权值为 10
  3. 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]]]]

1. 通过reduce 和递归 扁平化

function flatten1(arr) {
return arr.reduce((result,cur) => {
return result.concat(Array.isArray(cur) ? flatten(cur) : cur)
}, [])
}
console.log(flatten1(arr))

1. 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)

1. 递归 扁平化

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))

1. 运用扩展运算符 扁平化

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)

1. 运用 filter 和 indexOf 操作 去重

function distinct1(arr) {
return arr.filter((item,index) => {
return arr.indexOf(item) === index
})
}
console.log(distinct1(newArr))

1. 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))

1. new Set() 去重 （次推）

function distinct3(arr) {
return Array.from(new Set(arr))
}
console.log(distinct3(newArr))

1. 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空对象，给该对象添加侦听器，当用户给波及设置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。

以上是经过参考很多同行分享与官方文档，汇总的一份总结，如有不对，请指出，最后感谢大家观看，求点赞，求分享，求评论，求打赏~~