2021前端面试题

一.什么是mvvm
数据( Model )和视图( View )是不能直接通讯的，而是需要通过 ViewModel 来实现双方的通讯。当数据( Model )变化的时候， ViewModel 能够监听到这种变化，并及时通知 View 视图做出修改。同样的，当页面有事件触发的时候， ViewModel 也能够监听到事件，并通知数据( Model )进行响应。所以 ViewModel 就相当于一个观察者，监控着双方的动作，并及时通知对方进行相应的操作。
Vue.js 的数据驱动是通过 MVVM 这种框架来实现的， MVVM 框架主要包含三部分： Model , View , ViewMode
Model :指的是数据部分，对应到前端就是 JavaScript 对象。
View :指的就是视图部分

二.如何让CSS只在当前组件中起作用？
只需要在Style标签添加Scoped属性

<style scoped></style>。

三.至少说出vue.js中的4种指令和它们的用法
v-if：判断对象是否隐藏。
v-for：循环渲染。
v-bind：绑定一个属性。
v- model：实现数据双向绑定。

四.Class与Style绑定
操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是 attribute ，所以我们可以用v-bind 处理它们：只需要通过表达式计算出字符串结果即可。不过，字符串拼接麻烦且易错。因此，在将 vbind 用于 class 和 style 时， Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。

<style>
.actived {
background-color: #dddddd;
}
</style>

<li
v-for="(item,index) in users"
:key="item.id"
:class="{actived:true}"
>
编号：{{item.id}} 姓名:{{item.name}}---索引:{{index}}
</li>

五.Vue.js生命周期的理解。
beforeCreate：在实例初始化之后，数据观测者（ data observer）和 event/ watcher事件配置之前调用。
created：在实例创建完成后立即调用。在这一步，实例已完成以下的配置：数据观测者，属性和方法的运算， watch/event事件回调。然而，挂载阶段还没开始，el属性目前不可见。
beforeMount：在挂载开始之前调用，相关的 render函数首次调用。
mounted: el被新创建的vm.$el替换，并且在挂载到实例上之后再调用该钩子如果root实例挂载了一个文档内元素，当调用 mounted时vm.sel也在文档内。
beforeUpdate：在数据更新时调用，发生在虛拟DOM重新渲染和打补丁之前。
updated：由于数据更改导致的虚拟DOM重新渲染和打补丁，在这之后会调用该钩。
beforeDestroy：在实例销毁之前调用。在这一步，实例仍然完全可用。
destroyed：在 Vue. js实例销毀后调用。调用后，Vue. js实例指示的所有东西都会解除绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

六.如何创建vue.js组件？

<div id="app">
 
<ickt></ickt>
 
</div>
 
<！--模板-->
 
<template id="demo">
 
<！--模板元素要有同一个根元素-->
 
<div>
 
<h1>{{msg}}</h1>
 
</div>
 
</template>
 
<script type="text/javascript">
 
//定义组件类
 
var Ickt = Vue.extend ({
 
template：'#demo',
 
data:function(){
 
return {
 
msg：'有课前端网'
 
}
 
}
 
})
 
//注册组件
 
Vue .component（'ickt, Ickt）
 
//定义Vue实例化对象
 
var app= new Vue ({
 
el：'#app',
 
data:{}
 
})
 
</script>

七.ajax请求的时候get 和 post方式的区别

get是在url后面 post放在虚拟载体里面

get 有大小限制(只能提交少量参数)

post 比 get 安全

应用不同，请求数据和提交数据

八. Javascript的事件流模型都有什么?

“事件冒泡”：事件开始由最具体的元素接受，然后逐级向上传播

“事件捕捉”：事件由最不具体的节点先接收，然后逐级向下，一 直到最具体的

“DOM事件流”：三个阶段：事件捕捉，目标阶段，事件冒泡

九。同步、异步的区别
同步，是所有的操作都做完，才返回给用户结果。即写完数据库之后，在相应用户，用户体验不好。

异步，不用等所有操作等做完，就相应用户请求。即先相应用户请求，然后慢慢去写数据库，用户体验较好。
十.闭包的好处

(1)希望一个变量长期驻扎在内存当中(不被垃圾回收机制回收)

(2)避免全局变量的污染

(3)私有成员的存在

(4)安全性提高

十一.ES6新特性
1， let ：作用与var类似，用于声明变量，let 不能重复声明变量，var 可以重复声明变量；
2，const ：用于声明常量
注意：一定要赋初始值，一般常量使用大写(属于编程规范)，常量值不能修改，存在块级作用域
3，解构赋值：ES6允许按照一定模式从数组和对象中提取值，对变量进行赋值
4，模板字符串：(反引号)内容中可以直接出现换行符，’ '和" "中则不可以，出现会报错。还可以直接进行变量拼接。
5，.箭头函数
6，扩展运算符：…能将「数组」转为逗号分隔的「参数序列」
7，Promise
Promise是ES6引入的异步编程的新解决方案。语法上Promise是一个构造函数，用来封装异步操作并可以获取其成功或失败的结果。

十二.前端如何优化网站性能
1，减少HTTP请求
2，css sprites 精灵图
3，合并js文件和css文件
4，采用lazyload 懒加载

十三.一次完整的HTTP事务是怎样的一个过程
1，域名解析
2，发起TCP的3次握手
3，建立TCP连接2后发起HTTP请求
4，服务器端响应HTTP请求，浏览器得到HTML代码
5，浏览器解析HTML代码，并请求HTML代码中的资源
6，浏览器对页面进行渲染呈现给用户

十四.vue特点
1，国人开发的一个轻量级框架
2，双向数据绑定，在数据操作方面更为简单。
3，视图，数据，结构分离，不需要进行逻辑代码的修改，只需要操作数据完成相关操作
4，组件化，方便封装和复用
5，虚拟dom

十五.Vue父子组件传值的方法
1.父向子传值props

父组件：<child :inputName="name">

子组件：

（1）

props: {
   inputName: String,

   required: true

  }

（2）props: ["inputName"]

2.子组件向父组件传值$emit

子组件:

 <span>{{childValue}}</span>

<input type="button" value="点击触发" @click="childClick">


 export default {
  data () {
   return {
    childValue: '我是子组件的数据'

   }

  },

  methods: {
   childClick () {  

    this.$emit('childByValue', this.childValue)

   }

  }

 }

十六.如何避免回调地狱
1，模块化：将回调函数转换为独立的函数
2，使用流程控制库，列如 aync
3，使用promise
4，使用aync/await

十七.v-show和v-if共同的和不同点
共同点：都能控制元素的显示和隐藏。
不同的：v-shou本质是通过控制css中的display设置为none，控制隐藏，只会编译一次；v-if是动态的向dom树内添加或删除dom元素，若初始值为false，就不会编译了。而且v-if不停的销毁和创建比较消耗性能。
总结：如果要频繁切换某节点，使用v-shou（切换开销比较小，初始开销较大）。如果不需要频繁切换某节点使用v-if（初始渲染开销较小，切换开销比较大）

十八.cookies，sessionStorage，localStorage的区别
cooki e是网站为了标示用户身份而储存在用户本地终端(Client Side) 上的数据(通常经过加密)。
cooki e数据始终在同源的http请求中携芾(即使不需要)，记会在浏览器和服务器间来回传递。
sessionStor age和1ocalstor age不会自动把数据发给服务器，仅在本地保存。
存储大小:
cooki e数据大小不能超过4k。
sessionStor age和localstorage虽然也有存储大小的限制，但比cookie大得多， 可以达到5M或更大。
有期时间:
localStorage存储持久数据，浏览器关闭后数据不丢失除非主动删除数据;
sessionStorage数据在 当前浏览器窗口关闭后自动删除。
cookie设置的cooki e过期时间之前一直有效，即使窗口或浏览器关闭

二十.使用NPM有哪些好处?
1，通过NPM，你可以安装和管理项目的依赖,并且能够指明依赖项的具体版本号。
2，对于Node应用开发而言，你可以通过package. json文件来管理项目信息，配置脚本，以及指明依赖的具体版本
3，npm install xx -S和npm install -D的命令含义
4，项目转换的时候，不会把node_ modules包发过去，那么你拿到没有nodeModules目录的项目怎么让它跑起来（npm install安装所有的依赖)

二十一.display：inline-block什么时候会出现间隙？及解决办法。

<style>
*{margin:0;padding:0;}
.box{overflow-x:auto;background:#fff;white-space:nowrap;}
.box span{display:inline-block;width:100px;height:30px;line-height:30px;text-align:center;background:#f00;color:#fff;}
</style>
</head>
<body>
<div class="box">
	<span>111</span>
	<span>111</span>
	<span>111</span>
	<span>111</span>
</div>
</body>

解决办法
方法一： 元素之间不换行
方法二： 给其父元素设置font-size:0;给其自身设置实际需要的字号大小。 方法三： 负margin方法，需要注意的是这个间隙跟字号大小有关系的，所以间隙不是个确定值。

二十二.css3新增属性？
border-radius 圆角
border-shadow 盒子阴影
background-size 背景尺寸
background-clip 背景裁剪
background-origin 背景显示原点
text-shadow 文字阴影
text-overflow 文字隐藏的方式 裁剪/省略号
box-sizing
transform 变换 转换
animation 动画
transition 过渡动画
媒体查询 @media

二十三.如何用css绘制一个实心三角？

.triangle {
width : 0;
height: 0;
border : 100px solid transparent;
border-top : 100px solid blue; /*这里可以设置border的top、bottom、left、
right四个方向的三角*/
}

二十四.css盒子的margin中的合并和塌陷问题如何解决？
外边距塌陷:

当嵌套的两个块元素,给子盒子加向上的外边距时,
父盒子会跟着掉下来,此时就是外边距塌陷.
解决方案:
1.给父盒子加padding
2.给父盒子加上边框
3.给父元素加overflow:hidden 属性

嵌套盒子垂直外边距合并方案:

给父亲上边框
border: 1px solid transparent
给父亲内边距
padding-top: 1px;
给父元素 添加 overflow: hidden
子元素 添加 position:absolute/relative 或 float

二十五.说一下你对css盒子模型的理解？
图中最内部的框是元素的实际内容，也就是元素框， 紧挨着元素框外部的是内边距padding， 其次是边框（border）， 然后最外层是外边距（margin），整个构成了框模型。

通常我们设置的背景显示区域，就是内容、内边距、边框这一块范围。 而外边距margin是透明的，不会遮挡周边的其他元素。

那么，元素框的总宽度 = 元素（element）的width + padding的左边距和右边距的值 + margin的左边距和右边距的值 + border的左右宽度；

元素框的总高度 = 元素（element）的height + padding的上下边距的值 + margin的上下边距的值 ＋ border的上下宽度。

注意最后加上box-sizing:border-box;和box-sizing:content-box;的区别

二十六.如何解决跨域问题？
JSONP、CORS、通过修改document.domain来跨子域、使用window.name来进行跨域、HTML5中新引进的window.postMessage方法、在服务器上设置代理页面

二十七、CSS中 link 和@import 的区别是什么？
（1）link是XHTML标签，除了能够加载CSS，还可以定义RSS等其他事务；而@import属于CSS范畴，只可以加载CSS。

（2）link引用CSS时，在页面载入时同时加载；@import需要页面完全载入以后再加载。

（3）link是XHTML标签，无兼容问题；@import则是在CSS2.1提出的，低版本的浏览器不支持。

（4）link支持使用Javascript控制DOM改变样式；而@import不支持。

二十八.定位有几种？有什么区别？
相对定位：positive:relative;它是参照它在页面中原来的位置进行移动的。 绝对定位：position:absolute;它是相对于距离它最近的有定位的父元素进行移动的 固定定位：position:fixed;它是相对于页面的位置进行移动的 注意：只有添加了定位的元素才可以设置z-index属性，后面的值代表层级，没有px等单位。

二十九.如何让一个盒子水平垂直居中？

//已知宽高
<div class="div1"></div>
<style>
    .div1{
        width:400px;
        height:400px;
        position:absolute;
        left:50%;
        top:50% 
        margin:-200px 0 0 -200px;
    }   
</style>

//未知宽高
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .div1{
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            right: 0;
            margin: auto;
            border: 1px solid #000;
            width: 400px;
            height: 400px;
        }
    </style>
</head>
<body>
    <div class="div1"></div>
</body>
</html>

//未知宽高方法二：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .div1{
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
            border: 1px solid #000;
            width: 400px;
            height: 400px;
        }
    </style>
</head>
<body>
    <div class="div1"></div>
</body>
</html>

三十.行内元素、块元素和行内块元素都有什么？区别是什么？
HTML可以将元素分类方式分为行内元素、块状元素和行内块状元素三种。首先需要说明的是，这三者是可以互相转换的，使用display属性能够将三者任意转换：

(1)display:inline;转换为行内元素

(2)display:block;转换为块状元素

(3)display:inline-block;转换为行内块状元素

行内元素主要有：span,strong, em, label, select, textarea

特征如下：(1)设置宽高无效(2)对margin仅设置左右方向有效，上下无效；padding设置上下左右都有效，即会撑大空间 (3)不会自动进行换行

块状元素代表性的就是div，其他如p、nav、aside、header、footer、section、article、ul-li、address等等，都可以用div来实现。

块状元素特征：(1)能够识别宽高(2)margin和padding的上下左右均对其有效(3)可以自动换行(4)多个块状元素标签写在一起，默认排列方式为从上至下

行内块状元素综合了行内元素和块状元素的特性，但是各有取舍。因此行内块状元素在日常的使用中，由于其特性，使用的次数也比较多。

行内块状元素主要有img、input.特征：(1)不自动换行(2)能够识别宽高(3)默认排列方式为从左到右

三十一.请写出至少5个html5新增的标签，并说明其语义和应用场景？
section：定义文档中的一个章节

nav：定义只包含导航链接的章节

header：定义页面或章节的头部。它经常包含 logo、页面标题和导航性的目录。

footer：定义页面或章节的尾部。它经常包含版权信息、法律信息链接和反馈建议用的地址。

aside：定义和页面内容关联度较低的内容——如果被删除，剩下的内容仍然很合理。

三十二.CSS hack
由于不同的浏览器和浏览器各版本对CSS的支持及解析结果不一样，以及CSS优先级对浏览器展现效果的影响，我们可以据此针对不同的浏览器情景来应用不同的CSS。

三十三.javascript的typeof返回哪些数据类型

Object number function boolean underfind

三十四.split() join() 的区别
前者是切割成数组的形式，后者是将数组转换成字符串

三十五.IE和DOM事件流的区别
1.执行顺序不一样、
2.参数不一样
3.事件加不加on
4.this指向问题

三十六.添加 删除 替换 插入到某个接点的方法
obj.appendChidl()
obj.innersetBefore
obj.replaceChild
obj.removeChild

三十七.javascript的本地对象，内置对象和宿主对象
本地对象为array obj regexp等可以new实例化
内置对象为gload Math 等不可以实例化的
宿主为浏览器自带的document,window 等

三十八.document load 和document ready的区别
Document.onload 是在结构和样式加载完才执行js
Document.ready原生种没有这个方法，jquery中有 $().ready(function)

三十九.””和“=”的不同
前者会自动转换类型
后者不会

四十.数组去重的方法

四十一.当一个DOM节点被点击时候，我们希望能够执行一个函数，应该怎么做？
直接在DOM里绑定事件：

在JS里通过onclick绑定：xxx.onclick = test
通过事件添加进行绑定：addEventListener(xxx, ‘click’, test)
那么问题来了，Javascript的事件流模型都有什么？
“事件冒泡”：事件开始由最具体的元素接受，然后逐级向上传播
“事件捕捉”：事件由最不具体的节点先接收，然后逐级向下，一直到最具体的
“DOM事件流”：三个阶段：事件捕捉，目标阶段，事件冒泡

四十二.看下列代码,输出什么？解释原因。
var undefined;
undefined == null; // true
1 == true; // true
2 == true; // false
0 == false; // true
0 == ‘’; // true
NaN == NaN; // false
[ ] == false; // true
[ ] == ![]; // true
• undefined与null相等，但不恒等（=）
一个是number一个是string时，会尝试将string转换为number
尝试将boolean转换为number，0或1
尝试将Object转换成number或string，取决于另外一个对比量的类型
所以，对于0、空字符串的判断，建议使用 “=” 。“===”会先判断两边的值类型，类型不匹配时为false。
那么问题来了，看下面的代码，输出什么，foo的值为什么？

var foo = "11"+2-"1";

console.log(foo);
console.log(typeof foo);
执行完后foo的值为111，foo的类型为String。

四十三.输出今天的日期，以YYYY-MM-DD的方式，比如今天是2014年9月26日，则输出2014-09-26

	var d = new Date();
// 获取年，getFullYear()返回4位的数字
var year = d.getFullYear();
// 获取月，月份比较特殊，0是1月，11是12月
var month = d.getMonth() + 1;
// 变成两位
month = month < 10 ? '0' + month : month;
// 获取日
var day = d.getDate();
day = day < 10 ? '0' + day : day;
alert(year + '-' + month + '-' + day);

四十四.foo = foo||bar ，这行代码是什么意思？为什么要这样写？
答案：if(!foo) foo = bar; //如果foo存在，值不变，否则把bar的值赋给foo。
短路表达式：作为”&&”和”||”操作符的操作数表达式，这些表达式在进行求值时，只要最终的结果已经可以确定是真或假，求值过程便告终止，这称之为短路求值。

四十五.看下列代码，将会输出什么?(变量声明提升)

	var foo = 1;
function(){
    console.log(foo);
    var foo = 2;
    console.log(foo);
}
答案：输出undefined 和 2。上面代码相当于：
	var foo = 1;
function(){
    var foo;
    console.log(foo); //undefined
    foo = 2;
    console.log(foo); // 2;   
}

函数声明与变量声明会被JavaScript引擎隐式地提升到当前作用域的顶部，但是只提升名称不会提升赋值部分。

四十六.用js实现随机选取10–100之间的10个数字，存入一个数组，并排序。

	var iArray = []; 
funtion getRandom(istart, iend){
        var iChoice = istart - iend +1;
        return Math.floor(Math.random() * iChoice + istart;
}
for(var i=0; i<10; i++){
        iArray.push(getRandom(10,100));
}
iArray.sort();

四十七.怎样添加、移除、移动、复制、创建和查找节点（原生JS，实在基础，没细写每一步）
1）创建新节点
createDocumentFragment() //创建一个DOM片段
createElement() //创建一个具体的元素
createTextNode() //创建一个文本节点
2）添加、移除、替换、插入
appendChild() //添加
removeChild() //移除
replaceChild() //替换
insertBefore() //插入
3）查找
getElementsByTagName() //通过标签名称
getElementsByName() //通过元素的Name属性的值
getElementById()

四十八.有这样一个URL：http://item.taobao.com/item.htm?a=1&b=2&c=&d=xxx&e，请写一段JS程序提取URL中的各个GET参数(参数名和参数个数不确定)，将其按key-value形式返回到一个json结构中，如{a:’1′, b:’2′, c:”, d:’xxx’, e:undefined}。
unction serilizeUrl(url) {
var result = {};
url = url.split("?")[1];
var map = url.split("&");
for(var i = 0, len = map.length; i < len; i++) {
result

.split("=")[0]] = map[i].split("=")[1];
}
return result;
}

四十九.字符串反转，如将 ‘12345678’ 变成 '87654321’
先将字符串转换为数组 split()，利用数组的反序函数 reverse()颠倒数组，再利用 jion() 转换为字符串

var str = '12345678';
str = str.split('').reverse().join('');

五十.将数字 12345678 转化成 RMB形式 如： 12,345,678

思路：先将数字转为字符， str= str + ‘’ ;利用反转函数，每三位字符加一个 ','最后一位不加； re()是自定义的反转函数，最后再反转回去！

for(var i = 1; i <= re(str).length; i++){
    tmp += re(str)[i - 1];
    if(i % 3 == 0 && i != re(str).length){
        tmp += ',';
    }
}

五十一.闭包

我们首先知道闭包有3个特性：
①函数嵌套函数
②函数内部可以引用函数外部的参数和变量
③参数和变量不会被垃圾回收机制回收

闭包的好处与坏处
①保护函数内的变量安全 ，实现封装，防止变量流入其他环境发生命名冲突

②在内存中维持一个变量，可以做缓存（但使用多了同时也是一项缺点，消耗内存）

③匿名自执行函数可以减少内存消耗

坏处

①其中一点上面已经有体现了，就是被引用的私有变量不能被销毁，增大了内存消耗，造成内存泄漏，解决方法是可以在使用完变量后手动为它赋值为null；

②其次由于闭包涉及跨域访问，所以会导致性能损失，我们可以通过把跨作用域变量存储在局部变量中，然后直接访问局部变量，来减轻对执行速度的影响

五十二.判断一个字符串中出现次数最多的字符，统计这个次数

五十三.哪些操作会造成内存泄漏？
内存泄漏指任何对象在您不再拥有或需要它之后仍然存在。
垃圾回收器定期扫描对象，并计算引用了每个对象的其他对象的数量。如果一个对象的引用数量为 0（没有其他对象引用过该对象），或对该对象的惟一引用是循环的，那么该对象的内存即可回收。

1. setTimeout 的第一个参数使用字符串而非函数的话，会引发内存泄漏。
2. 闭包
3. 控制台日志
4. 循环（在两个对象彼此引用且彼此保留时，就会产生一个循环）

五十四.documen.write和 innerHTML 的区别？

document.write 只能重绘整个页面
innerHTML 可以重绘页面的一部分

五十五.请描述一- 下cookies, sessionStorage 和localStorage的区别?

五十六.iframe的优缺点？‘

优点：

1. 解决加载缓慢的第三方内容如图标和广告等的加载问题
2. Security sandbox
3. 并行加载脚本

缺点：

1. iframe会阻塞主页面的Onload事件
2. 即时内容为空，加载也需要时间
3. 没有语意

五十七.希望获取到页面中所有的checkbox怎么做？(不使用第三方框架)

var domList = document.getElementsByTagName(‘input’)
var checkBoxList = [];
var len = domList.length;　　//缓存到局部变量
while (len--) {　　//使用while的效率会比for循环更高
　　if (domList[len].type == ‘checkbox’) {
    　　checkBoxList.push(domList[len]);
　　}
}

五十八.写出函数DateDemo的返回结果，系统时间假定为今天

function DateDemo(){
 var d, s="今天日期是：";
 d = new Date();
s += d.getMonth() + "/";
s += d.getDate() + "/";
s += d.getYear();
return s;}
结果：今天日期是：7/17/2010

五十九.以下两个变量a和b，a+b的哪个结果是NaN？（C）
A、var a=undefind; b=NaN
B、var a=‘123’; b=NaN
C、var a =undefined , b =NaN
D、var a=NaN , b=‘undefined’

六十.三个this案例