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

太过爱你忘了你带给我的痛 2022-03-06 03:48 174阅读 0赞

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

![图片描述][358226483-5c7600f39e224_articlex]

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

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

[358226483-5c7600f39e224_articlex]: /images/20220306/e2a53c619d654eedbc5ba07a3f10ab6e.png