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定义的引用类型只要指针不发生改变,其他的不论如何改变都是允许的。

《2018年前端面试题(秋季面试随意整理的)》

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

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

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。
    原文作者:前端
    原文地址: https://segmentfault.com/a/1190000018305360
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞