2018年前端面试题（秋季面试随意整理的）

1.html和css

引入 css 有哪几种方式

1.使用<link>标签，引入外部CSS文件（1.通过@import,引入CSS文件（性能较差）
2.将css的样式代码放在html文档的<style></style>标签中，引入css）
3.内联样式（标签内部书写）

position 属性有哪些值，分别什么含义

1.position: relative;相对定位（相对于自身）
2.position: absolute;绝对定位（相对于最近一个有定位的父元素偏移）
3.position: fixed;固定定位（相对于浏览器窗口）
4.position:static：默认值

css 响应式布局

1.接在link中判断设备的尺寸，然后引用不同的css文件（<link rel="stylesheet" type="text/css" href="styleB.css"  media="screen and (min-width: 600px) and (max-width: 800px)">）
2.直接写在<style>标签里（@media screen and (max-width: 600px) { /*当屏幕尺寸小于600px时，应用下面的CSS样式*/
  .class {
    background: #ccc;
  }
}）

flex:1是什么意思

1.让所有弹性盒模型对象的子元素都有相同的长度，且忽略它们内部的内容

CSS 弹性布局，哪些地方用到过

1.flex布局

如何实现不定宽高水平和垂直居中

1.最简单的flex布局
display: flex;
justify-content: center;
align-items: center;
2.利用table-cell
外层容器
display:table-cell;
text-align:center;
vertical-align:middle;
内部元素
vertical-align:middle;
display:inline-block;
3.使用CSS3 transform
外层容器
display:relative
内部元素
transform: translate(-50%,-50%);
position: absolute;
top: 50%;
left: 50%;

什么是盒子模型

由content、padding、border、margin组成的元素就是盒子模型，用来设置元素在网页中的大小和位置。

2.js问题

const 和 let 区别，可以改变 const 定义的某个对象的属性吗

let与const都是只在声明所在的块级作用域内有效。
let：无变量提升（未到let声明时，是无法访问该变量的）
const：无变量提升，声明一个基本类型的时候为常量，不可修改；声明对象可以修改
const arr = {name:'小可爱', age:'21'}
arr.name = '萱萱'
console.log(arr)
因为对象是引用类型的，arr中保存的仅是对象的指针，这就意味着，const仅保证指针不发生改变，修改对象的属性不会改变对象的指针，所以是被允许的。也就是说const定义的引用类型只要指针不发生改变，其他的不论如何改变都是允许的。

对闭包的理解，以及哪些地方用过闭包，以及闭包的缺点

闭包 是指有权访问另一个函数作用域中的变量的函数，创建闭包的最常见的方式就是在一个函数内创建另一个函数，通过另一个函数访问这个函数的局部变量

1.函数嵌套函数
2.函数内部可以引用外部的参数和变量
3.参数和变量不会被垃圾回收机制回收

优点是可以避免全局变量的污染，变量和方法私有化，不让外部修改这些属性
缺点是闭包会常驻内存，会增大内存使用量，使用不当很容易造成内存泄露

对跨域了解吗，jsonp 的限制

跨域就是由于JavaScript同源策略的限制,使得a.com域名下的js无法操作b.com或c.a.com域名下的对象或数据。简单理解同一个 域名、相同端口、相同协议!
JSONP(JSON with Padding),就是异步请求跨域的服务器端时,不是直接返回数据,而是返回一个js方法,把数据作为参数
jsonp只支持get请求而不支持post请求
在登录模块中需要用到session来判断当前用户的登录状态,这时候由于是跨域的原因,前后台的取到的session是不一样的,那么就不
能就行session来判断.

1-10之间的随机数

var num=Math.floor(Math.random()*10+1);

javascript的typeof返回哪些数据类型

string,boolean,number,undefined,function,object

ES6 用到过吗，新增了哪些东西，你用到过什么

定义变量加入了 let const
箭头函数
Array.from() 将类数组对象与可遍历对象转换为数组
类class

箭头函数，箭头函数的特点，应该是 this 的指向

箭头函数是匿名函数，不绑定自己的this,arguments,super,new.target
箭头函数会捕获其所在上下文的this值，作为自己的this值，在使用call/apply绑定时，相当于只是传入了参数，对this没有影响

了解 MVVM 吗，和 MVC 的区别

对象和类的区别，举个现实中的例子

你理解的面向对象

说一下原型链

ES6 新增的 set() 和 map() 有什么区别

数组去重

ES6：Array.from(new Set(arr));
<script type="text/javascript">
    let arr = ['1',2,1,3,5,6,5]
    let arrString = arr.toString()
    console.log(arrString)
    arrSplit = arr1.split(',') // 把一个字符串分割成字符串数组。
    //join() 把数组中的所有元素放入一个字符串。
    console.log(arrSplit)
    let set = new Set(arrSplit)
    console.log(set)
    let newArr = Array.from(set)
    console.log(newArr)
</script>

哪些方法会改变原数组

shift：将第一个元素删除并且返回删除元素，空即为undefined
unshift：向数组开头添加元素，并返回新的长度
pop：删除最后一个并返回删除的元素
push：向数组末尾添加元素，并返回新的长度
reverse：颠倒数组顺序
sort：对数组排序
splice:splice(start,length,item)删，增，替换数组元素，返回被删除数组，无删除则不返回

深拷贝和浅拷贝

async 和 await 了解吗，（不太了解，只知道返回的是 promsie 对象）
call() 和 apply() 的区别和作用？

区别：apply()与call()作用没有区别，用法与call()方法稍有区别，就是call()的第二个参数(调用函数使用的参数)，是一个一个传入的；而apply()的第二个参数的值是使用数组的形式传入的
作用：在Javascript中，每个函数都包含两个非继承而来的方法，call和apply。这两个方法的用途都是在特定的作用域中调用函数，实际上等于设置函数体内的this对象的值。

apply方法接收两个参数，第一个参数是在其中运行函数的作用域，第二个是一个参数数组或者arguments对象。
call方法与apply方法作用相同，第一个参数也相同，区别在于，其余的参数需要逐个列出。

apply(thisArg, argArray);
call(thisArg[,arg1,arg2…]);

是使用call还是apply要看具体的情况。如果你知道所有参数或者参数的数量不多，可以使用call；
如果参数的数量不确定，或者数量很大，或者你收到的是一个数组或者是个arguments对象，则需要使用apply。