2021-2022年前端面试题整理（含答案）

前端切图仔Zz

已于 2022-05-06 11:34:35 修改

阅读量2.8k

点赞数 6

分类专栏：前端面试题文章标签： js vue html

于 2020-08-07 09:59:12 首次发布

本文链接：https://blog.csdn.net/Amouzy/article/details/107853840

版权

前端面试题专栏收录该内容

11 篇文章 10 订阅

订阅专栏

一. 说说你对vue的了解

谈谈对它的理解吧:
1、Vue 作者尤雨溪
2、是一套构建用户界面的渐进式框架。
3、Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
4、Vue的编译器在编译模板之后，会把这些模板编译成一个渲染函数。而函数被调用的时候就会渲染并且返回一个虚拟DOM的树。
5、用Object.defineProperty 方法实现双向数据绑定。比如，我们给它一个原生对象，Vue会遍历这个数据对象的属性，然后进行属性转换。每一个属性会被转换为一个 getter 和一个 setter。
6、.vue的语法很简单,很容易上手,可以说就是对着模板来填充内容.想要动态绑定的数据,那么就在data中填充内容.想要具体的method,那么就在methods属性中填充内容.想要显示变量就用双花括号.可以说是很简单了.
7.vue使用的是MVVM模式,并且使用简单的命令加数据来进行DOM操作,让我避开了进行繁杂的获取,创建和删除DOM元素的操作.
8.借助vue的vue-router插件,可以很方便的实现单页面应用的搭建.并且可以实现浏览器中的回退效果.
9.vue的组件化开发可以说很方便的就实现了组件的复用.之前想要写复用组件的时候,一方面要写重复的html,另一方面把对应的CSS文件和JS文件独立开来,需要的时候进行引入.但是vue把三者放在同一个文件中,可以说非常的贴心,修改也很方便.

二.箭头函数的优点

（1）写法更加简明(去掉之前的function,然后加=>)
（2）隐士返回，如下面的代码可以去掉return,代码移到一行，减少代码量。
（3）解决了this的指向问题（原生的写法this指向的是调用者，箭头函数this绑定的是定义时的那个对象。）

//定义一个对象
var obj = {
x:100,//属性x
show(){
setTimeout( //匿名函数 function(){console.log(this.x);}, 500 );//延迟500毫秒，输出x的值
}
};
obj.show();//打印结果：undefined.因为代码执行到了setTimeout( )的时候，此时的this已经变成了window对象（setTimeout( )是window对象的方法），已经不再是obj对象了，所以我们用this.x获取的时候，获取的不是obj.x的值，而是window.x的值，再加上window上没有定义属性x，所以得到的结果就是：undefined。

如果使用箭头函数来编写同样的一段代码，得到的this.x又是另一番景象。我们来试试看：

//定义一个对象
var obj = {
    x:100,//属性x
    show(){
        setTimeout( //延迟500毫秒，输出x的值         
           () => { console.log(this.x)}, //不同处：箭头函数
           500
        );
    }
};
obj.show();//打印结果：100

三.less sass优点

LESS和Sass在语法上有些共性，比如下面这些：

● 混入(Mixins)——class中的class；
● 参数混入——可以传递参数的class，就像函数一样；
● 嵌套规则——Class中嵌套class，从而减少重复的代码；
● 运算——CSS中用上数学；
● 颜色功能——可以编辑颜色；
● 名字空间(namespace)——分组样式，从而可以被调用；
● 作用域——局部修改样式；
● JavaScript 赋值——在CSS中使用JavaScript表达式赋值。

区别:

变量方面:
	LESS用@，
	Sass用$。
实现方式方面:
	LESS是基于JavaScript，所以，是在客户端处理的。
	Sass是基于Ruby的，然后是在服务器端处理的

在你的项目中引入LESS很简单：

1.下载less.js;
2.创建一个文件来放你的样式，比如style.less;
3.添加以下代码到你的HTML的<head>中:

<link rel="stylesheet/less" type="text/css" href="styles.less"> 
<script src="less.js" type="text/javascript"></script>

变量

当重复的使用一个信息(本例中就是color)，将它设置为一个变量就可以。这样，你就可以保证自己的一致性并可能减少滚动代码来查找颜色值、复制、粘贴等繁琐的工作了。你甚至可以加或者减一些你需要渲染的HEX值到这些颜色上面。看下例子：

@blue: #00c;  
@light_blue: @blue + #333;  
@dark_blue: @blue - #333; 
如果我们将这些样式应用到3个div上面，我们就可以看到由加上和减掉的HEX值形成的渐变的效果：

从@light_blue到@blue到@dark_blue的渐变效果

混入(mixin)

四.说说你对flex布局的理解

flex弹性布局
使用弹性布局可以有效的分配一个容器的空间 
即使我们的容器元素尺寸改变 
它内部的元素也可以调整它的尺寸来适应空间

横向的叫做主轴 
纵向的叫做交叉轴

容器的6个属性

1）flex-direction
2）flex-wrap
3） flex-flow
4）justify-content
5）align-items
6）align-content

五.js jq 怎么对元素进行增删改查组件

什么是DOM
DOM 全称是 Document Object Model，也就是文档对象模型。
我们可以把一个HTML 看做一个对象树（DOM树），它本身和里面的所有东西比如
这些标签都看做一个对象，每个对象都叫做一个节点（node），节点可以理解为 DOM 中所有 Object 的父类。
DOM元素的增删改查
添加元素更多

Document.createElement() // 创建元素

删除元素


element.removeAttribute(attrName)// 从元素中删除指定的属性
Element.removeChild(）// 删除子元素
ChildNode.remove() // 删除元素
Child.parentNode.removeChild(child) // 不确定父元素时可这样删除子元素
//示例：
if (node.parentNode) {
 //判断node是否在DOM树中
   node.parentNode.removeChild(node);
 }

修改元素

Node.innerText // 修改元素文本内容
语法：
  Node.innerHTML =new content
Element.innerHTML // 设置或获取描述元素后代的HTML语句
语法：
  const content = element.innerHTML;
  // 返回时，内容包含描述所有元素后代的序列化HTML代码。
  element.innerHTML = markup;
  // 除所有元素的子节点，解析内容字符串，并将生成的节点分配给元素的子元素

查找元素

attribute.getAttribute() // 返回元素的指定属性值
//语法：
  let attribute = element.getAttribute(attributeName)
Document.getElementsByClassName() // 返回一个节点列表（数组），包含了所有拥有指定 class 的子元素
//语法：
  var elements = document.getElementsByClassName(names); // or:
  
  elements = document.getElementsByName(name)

  var elements = document.getElementsByTagName(name)
 element = document.getElementById(id)

六.组件传参

1、父组件向子组件传递数据（ props ）
2、子组件向父组件传递数据（在 setUser 中，使用了 $emit 来遍历 transferUser 事件，并返回 this.username
其中 transferUser 是一个自定义的事件，功能类似于一个中转，this.username 将通过这个事件传递给父组件）
3、大型项目很多时候都需要在子组件之间传递数据，使用之前的方式就不太方便。Vue 的状态管理工具 Vuex 完美的解决了这个问题。
更多
一、安装并引入 Vuex

1、首先使用 npm 安装 Vuex

cnpm install vuex -S

然后在 main.js 中引入

import Vue from 'vue'
import App from './App'
import Vuex from 'vuex'
import store from './vuex/store'

Vue.use(Vuex)

/* eslint-disable no-new */
new Vue({
  el: '#app',
  store,
  render: h => h(App)
})

2、构建核心仓库 store.js
在 src 目录下创建一个 vuex 目录，将 store.js 放到 vuex 目录下

Vuex 应用的状态 state 都应当存放在 store.js 里面，
Vue 组件可以从 store.js 里面获取状态，可以把 store 通俗的理解为一个全局变量的仓库。

但是和单纯的全局变量又有一些区别，主要体现在当 store 中的状态发生改变时，相应的 vue 组件也会得到高效更新。

import Vue from 'vue'
import Vuex from 'vuex'
//虽然在 main.js 中已经引入了 Vue 和 Vuex，但是这里还得再引入一次
Vue.use(Vuex)

const store = new Vuex.Store({
  // 定义状态
  state: {
    author: 'Wise Wrong'//这是一个最简单的 store.js，里面只存放一个状态 author
  }
})
export default store

3、将状态映射到组件

//这是 footer.vue 的 html 和 script 部分
<template>
  <footer class="footer">
    <ul>
      <li v-for="lis in ul">{{lis.li}}</li>
    </ul>
    <p>
      Copyright&nbsp;&copy;&nbsp;{{author}} - 2016 All rights reserved
    </p>
  </footer>
</template>

<script>
  export default {
    name: 'footerDiv',
    data () {
      return {
        ul: [
          { li: '琉璃之金' },
          { li: '朦胧之森' },
          { li: '缥缈之滔' },
          { li: '逍遥之火' },
          { li: '璀璨之沙' }
        ]
      }
    },
    computed: {//主要在 computed 中，将 this.$store.state.author 的值返回给 html 中的 author
      author () {
        return this.$store.state.author
      }
    }
  }
</script>

页面渲染之后，就能获取到 author 的值
在这里插入图片描述

4、在组件中修改状态

然后在 header.vue 中添加一个输入框，将输入框的值传给 store.js 中的 author

这里我使用了 Element-UI 作为样式框架
在这里插入图片描述

上面将输入框 input 的值绑定为 inputTxt，然后在后面的按钮 button 上绑定 click 事件，触发 setAuthor 方法

methods: {
　setAuthor: function () {
　　　this.$store.state.author = this.inpuTxt
　}
}

在 setAuthor 方法中，将输入框的值 inputTxt 赋给 Vuex 中的状态 author，从而实现子组件之间的数据传递

5、官方推荐的修改状态的方式

上面的示例是在 setAuthor 直接使用赋值的方式修改状态 author，但是 vue 官方推荐使用下面的方法：
在这里插入图片描述

首先在 store.js 中定义一个方法 newAuthor，
其中第一个参数 state 就是 $store.state，第二个参数 msg 需要另外传入
然后修改 header.vue 中的 setAuthor 方法
在这里插入图片描述

这里使用 $store.commit 提交 newAuthor，并将 this.inputTxt 传给 msg，从而修改 author

这样显式地提交(commit) mutations，可以让我们更好的跟踪每一个状态的变化，所以在大型项目中，更推荐使用第二种方法。

七.你了解es6的什么

1、变量

let定义块级作用域变量

2、函数

1）可以给形参函数设置默认值
2）箭头函数

3、数组

1）在数组之前加上三个点（...）：
	var arr = [1,2,3,4,5];
	console.log(arr);//[1, 2, 3, 4, 5]
	console.log(...arr)// 1 2 3 4 5
2）根据数组的展开运算用数组给函数批量的传参
	function fun5(a,b,c,d,e,f){
	    //如果没有展开数组，打印结果如下
	    //console.log(a,b,c,d,e,f)//[1, 2, 3, 4, 5] undefined undefined undefined undefined undefine
	    console.log(a,b,c,d,e,f)//11 22 33 44 55 66
	    //return a+b+c+d+e+f
	}
	//fun5([1,2,3,4,5])
	fun5(...[11,22,33,44,55,66])

4、apply和call
同：两者都可以改变this的属性
异：apply(this的指向，数组/arguments)
call(this的指向，参数1，参数2，参数3)

var name ="window的name";
var obj = {
    name:"obj的name",
    showName:function(v1,v2,v3){

        console.log(v1,v2,v3)
    }
}
obj.showName();
obj.showName.apply(window,[10,20,30]);//10 20 30
//apply括号里的是谁，调用的前面的函数里面的this就是谁
obj.showName.call(window,10,20,30)//10  20  30

5、解构赋值

1）数组的解构赋值
	var [a,b,c]=[11,22,33]
	console.log(a,b,c)//11 22 33
2）对象的解构赋值
	var{name,age}={name:"张三",age:"20"}
	console.log(name,age)//张三 20

6、string中加入include方法

includes("字符"); 用于判断字符串中是否包含某个字符。存在返回true 不存在返回false
includes("字符",startIndex); 用于判断字符串中下标startIndex是否是某个字符。是返回true 不是返回false

var str = "hello";
console.log( str.includes("e") )//true
console.log( str.includes("e",3) );//false

7、创建对象

class 类名{
        //肯定存在一个构造函数
        //如果不写构造函数，有一个默认的构造函数,内容为空
    constructor(){}  //注意：这里不需要逗号
        //下面是函数属性 比如属性有run  dark
    run(){}
    dark(){}
}

拓展：

ES5中创建对象的几种方法:
1.字面量法
2.工厂模式
3.构造函数
4.组合方式 构造函数+原型模式

8、继承

class Animal{
    constructor(age,sex){
        this.age = age;
        this.sex = sex;
    }
    eat(){
        console.log("吃吃吃")
    }
}
class Dog extends Animal{
    constructor(name,age,sex){
        //super指的是父类，先调用父类的构造函数，然后再去添加属性
        super(age,sex)
        //console.log(super);//不能打印只能使用
        this.name=name;
    }
    bark(){
        console.log("哇哇哇")
    }
    //重写：在子类中重新定义父类中的方法
    // eat(){
    //  console.log("喝喝喝")
    // }
}
var d = new Dog("妞妞","男",5)
console.log(d)
d.bark();
d.eat();
//ES6的继承，有两条继承链，构造函数  和  原型函数条  
console.log( Dog.prototype)//Animal {}
console.log( Dog.constructor==Animal.constructor)//true
console.log( Dog.prototype.__proto__==Animal.prototype)//true

9、Set（）和Map（）

拓展：this的认识

1.在函数体外，this指的就是window对象
2.在函数体内，谁调用函数this就指向谁
3.在构造函数中，this指的是新创建的对象
4.在html标签中，this指的是当前的这个标签元素
5.在ES6中，对于箭头函数，要看它在哪里创建的，和当前函数的作用域。

八.JavaScript由三部分组成：

1. ECMAScript（核心）
作为核心，它规定了语言的组成部分：语法、类型、语句、关键字、保留字、操作符、对象
2. DOM（文档对象模型）
DOM把整个页面映射为一个多层节点结果，开发人员可借助DOM提供的API，轻松地删除、添加、替换或修改任何节点。
3. BOM （浏览器对象模型）
支持可以访问和操作浏览器窗口的浏览器对象模型，开发人员可以控制浏览器显示的页面以外的部分。
	PS：BOM未形成规范

九、浏览器兼容性问题？怎么解决？

所谓的不兼容很大意义上是指初始值的不同。
比如：默认div层中。不同浏览器是有默认的padding值和其他属性值的

1、你也可以定制属于自己业务的 reset.css
2、、IE 属性过滤器（较为常用的hack方法）
针对不同的 IE 浏览器，可以使用不同的字符来对特定的版本的 IE 浏览器进行样式控制
3、浏览器 CSS 兼容前缀

-o-transform:rotate(7deg); // Opera
-ms-transform:rotate(7deg); // IE
-moz-transform:rotate(7deg); // Firefox
-webkit-transform:rotate(7deg); // Chrome
transform:rotate(7deg); // 统一标识语句

常见浏览器兼容性问题

一：不同浏览器的标签默认的margin和padding不同
二：块属性标签float后，又有横行的margin情况下，在IE6显示margin比设置的大
三：设置较小高度标签（一般小于10px），在IE6，IE7，遨游中高度超出自己设置高度
四：行内属性标签，设置display:block后采用float布局，又有横行的margin的情况，IE6间距bug
五：图片默认有间距
六：标签最低高度设置min-height不兼容
七：各种特殊样式的兼容，比如透明度、圆角、阴影等

十、怎么实现网页布局？

单列布局（margin:0 auto）、两列布局（技术分享站点比较常见）、三列布局

前端切图仔Zz

关注

6
点赞
踩
40

收藏

觉得还不错? 一键收藏
1
评论
2021-2022年前端面试题整理（含答案）

1. 说说你对vue的了解 2.箭头函数的优点3.less sass优点4.说说你对flex布局的理解5.js jq 怎么对元素进行增删改查组件6.组件传参7.你了解es6的什么1. ES6的优缺点？2.浏览器兼容性问题？怎么解决？3.vue的特点？4.怎么实现网页布局？
复制链接

扫一扫

专栏目录