前端面试--贡献给刚毕业的你们

对于刚毕业准备找工作的你，来看看最近面试的一些问题，都是问的基础知识点，对于一些公司的工作岗位面试题还是很简单的，对于一些大厂招聘或许会问一些框架类，基本上下面举例的面试题中，对于刚毕业的你们基本就问这些

常见面试题

1.div动画

只需要告诉他动画的定义和使用
定义有名称，时间，动画的次数，当然无限次需要记住
使用时使用的关键字和定义的帧数
animation:mymove 5s infinite;
@keyframes mymove
{
from {background-color:red;}
to {background-color:blue;}
}

2.水平垂直居中

水平居中
行内元素: text-align: center
块级元素: margin: 0 auto
position:absolute +left:50%+ transform:translateX(-50%)
display:flex + justify-content: center
垂直居中
设置line-height 等于height
position：absolute +top:50%+ transform:translateY(-50%)
display:flex + align-items: center
display:table+display:table-cell + vertical-align: middle;

3.js中数组去重的方法

1.使用for+for循环
var arr = [1, 2, 3,4 ,5,6, 4, 3, 8, 1]
function newArrFn (arr) {
// 创建一个新的空数组
let newArr = []
for(let i = 0;i<arr.length;i++){
// 设置一个开关，如果是true，就存进去，不是就不存
let flag = true
for(let j = 0;j<newArr.length;j++){
// 原数组和新数组作比较，如果一致，开关变为 false
arr[i] === newArr[j] ? flag = false : flag
};
flag ? newArr.push(arr[i]) : newArr
};
return newArr
}
console.log(newArrFn(arr));

2.使用for循环 +findIndex
var arr = [1, 2, 3,4 ,5,6, 4, 3, 8, 1]
function newArrFn (arr) {
let newArr = []
for(let i = 0;i<arr.length;i++){
newArr.indexOf(arr[i]) === -1 ? newArr.push(arr[i]) : newArr
};
return newArr
}
console.log(newArrFn(arr));

3.sort 排序
var arr = [1, 2, 3,4 ,5,6, 4, 3, 8, 1]
function newArrFn (arr) {
arr = arr.sort()
let newArr = []
for(let i = 0;i<arr.length;i++){
arr[i] === arr[i-1] ? newArr : newArr.push(arr[i])
};
return newArr
}
console.log(newArrFn(arr));

4.Set对象方法
var arr = [1, 2, 3,4 ,5,6, 4, 3, 8, 1]
function newArrFn (arr) {
// .new Set方法，返回是一个类数组，需要结合 …运算符，转成真实数组
return ([…new Set(arr)])
}
console.log(newArrFn(arr));

5.set + Array.from
var arr = [1, 2, 3,4 ,5,6, 4, 3, 8, 1]
function newArrFn (arr) {
// .new Set方法，返回是一个类数组，需要结合 Array.from ，转成真实数组
return (Array.from(new Set(arr)) )
}
console.log(newArrFn(arr));

6.filter + indexOf
var arr = [1, 2, 3,4 ,5,6, 4, 3, 8, 1]
function newArrFn (arr) {
// 利用indexOf检测元素在数组中第一次出现的位置是否和元素现在的位置相等，
// 如果相等，说明数组中没有重复的
return Array.prototype.filter.call(arr, function (item, index) {
return arr.indexOf(item) === index
})
}
console.log(newArrFn(arr));

7.Map对象方法
var arr = [1, 2, 3,4 ,5,6, 4, 3, 8, 1]
function newArrFn (arr) {
let newArr = []
let map = new Map()
for(let i = 0;i<arr.length;i++){
// 如果 map里面不包含，就设置进去
if (!map.has(arr[i])) {
map.set(arr[i], true)
newArr.push(arr[i])
}
};
return newArr
}
console.log(newArrFn(arr));

8.includes
var arr = [1, 2, 3,4 ,5,6, 4, 3, 8, 1]
function newArrFn (arr) {
// 利用includes 检查新数组是否包含原数组的每一项
// 如果不包含，就push进去
let newArr = []
for(let i = 0;i<arr.length;i++){
newArr.includes(arr[i]) ? newArr: newArr.push(arr[i])
};
return newArr
}
console.log(newArrFn(arr));

9.for + object
var arr = [1, 2, 3,4 ,5,6, 4, 3, 8, 1]
function newArrFn (arr) {
// 利用对象属性名不能重复这一特点
// 如果对象中不存在，就可以给 push 进去
let newArr = []
let obj = {}
for(let i = 0;i<arr.length;i++){
if (!obj[arr[i]]) {
newArr.push(arr[i])
obj[arr[i]] = 1
} else {
obj[arr[i]] ++
}
};
return newArr
}
console.log(newArrFn(arr));

10.for + splice
var arr = [1, 2, 3,4 ,5,6, 4, 3, 8, 1]
function newArrFn (arr) {
for(let i = 0; i<arr.length; i++){
for(let j = i + 1; j<arr.length; j++){
if (arr[i] === arr[j]) {
arr.splice(j,1);
j–
}
};
}
return arr
}
console.log(newArrFn(arr));

11.reduce
var arr = [1, 2, 3,4 ,5,6, 4, 3, 8, 1]
function newArrFn (arr) {
let newArr = []
return arr.reduce((prev, next,index, arr) => {
// 如果包含，就返回原数据，不包含，就把新数据追加进去
return newArr.includes(next) ? newArr : newArr.push(next)
}, 0)
}
console.log(newArrFn(arr));

4.数组拉平（扁平化）的几种方法？

1.递归
let array = [1，2，[11，22，33],[111,[1111，2222]]]
let newArray = []
function getSameLevel(arr) {
for(let i = 0; i < arr.length; i++){
if(arr[i].length && arr[i].length > 1){
getSameLevel(arr[i])
}else{
newArray. push(arr[i])}
}
return newArray
}
}

2.toString
let array = [1,2，[11，22，33]，[111,[1111,2222]]]
let newArray = []
function getSameLevel1 (arr) {
newArray = arr.toString ()return newArray
}
getSameLevel1(array)

3.flat()
let array = [1，2，[11，22，33],[111,[1111，2222]]]
let newArray = []
function getSameLevel2 (arr, index) {
newArray = arr.flat(index)l/l index
}
getSameLevel2(array,1)
Array(getSameLevel2(array，2)

4.Set对象

5.JS 的数据类型有哪些？及判断数组类型的几种方法及优缺点？

Number，String，Boolean，undefined，null，Object，function，Symbol
typeof运算符
instanceof方法
constructor方法
Object.prototype.toString.call
空值null
未定义undefined
数字
数组

6.谈一谈你对闭包的理解？

闭包的实质是因为函数嵌套而形成的作用域链
闭包的定义即：函数 A 内部有一个函数 B，函数 B 可以访问到函数 A 中的变量，那么函数 B 就是闭包

7.说一下 http 和 https 的区别？

HTTPS 是带有加密的 HTTP。
两种协议的区别在于 HTTPS 使用 TLS（SSL）来加密正常的 HTTP 请求和响应。
因此，HTTPS 比 HTTP 安全得多。
使用 HTTP 的网站在其 URL 中有HTTP:// ，而使用 HTTPS 的网站有HTTPS://

8.在地址栏里输入一个 URL,到这个页面呈现出来，中间会发生什么？

① 浏览器通过进程间的通信(IPC)把URL请求发送到网络进程，网络进程发起真正的URL请求。
②发起请求前，网络进程根据请求的URL查询是否缓存了该资源。如果有，那么直接返回资源给浏览器进程；如果没有，会进程DNS解析。
③首先查看浏览器是否对该域名有缓存，然后是hosts文件，如果都没有，则需要请求域名服务器进行查询。如果协议请求是HTTPS，还需要建立TLS连接。
④接下来就是通过IP地址和服务器建立TCP连接(三次握手)，连接之后，浏览器会构造请求行、请求头，向服务器发送构建的请求信息

9.cookie、sessionstorage、localstorage 的区别？

10.如何用 CSS 画一个三角形？ 如何用 CSS 画一个五角星？

三角形
.boxboss{
width: 0;
height: 0;
border-width: 100px;
border-style: solid;
border-color: transparent #0099CC transparent transparent;
transform: rotate(90deg); /顺时针旋转90°/
}
<div class="boxboss"></div>

五角星
使用3个三角形组合就是五角星，给每个三角形设置旋转的角度和定位

11.知道 BFC 吗？谈一谈对 BFC 的理解？

独立的布局环境，其中的元素不受外界的影响，并在一个BFC中，块盒和行盒都会垂直沿其父元素的边框排列

13.px、em、rem的区别

px: 固定值

em的值不是固定值
em会继承父级元素的字体大小

rem的值不是固定值
rem会继承html元素的字体大小
rem多数用于手机端布局

14.浏览器的标准模式和怪异模式究竟是什么？

a）标准模式：是浏览器按照W3C标准解析执行代码，这样用规定的语法去渲染，就可以兼容各个浏览器，保证以正确的形式展示网页。
b）怪异模式：是使用浏览器自己的方式解析执行代码，因为不同浏览器解析执行的方式不一样，所以我们称之为怪异模式。

15.什么叫优雅降级和渐进增强？

1)优雅降级：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。
2)渐进增强：针对低版本浏览器构建页面，保证最基本的功能，然后在针对高级浏览器进行效果，交互等改进和追加功能达到最好的效果

16.前端如何定跳页面

1.利用a标签的href属性跳转页面
2.使用location跳转页面，跳转方式有三种
location.href
location.assign()
localtion.replace()
3.vue-route

17.ES6新特性

18.Vue8大生命周期

1、beforeCreate；2、created；3、beforeMount；4、mounted；5、beforeUpdate；6、updated；7、beforeDestroy；8、destroyed。

19.vue双向数据绑定原理，如何用js实现一个简单的双向数据绑定

1.1 vue双向数据绑定原理，又称vue响应式原理，是vue的核心，双向数据绑定是通过数据劫持结合发布订阅模式的方式来实现的，也就是说数据和视图同步，数据发生变化，视图跟着变化，视图变化，数据也随之发生改变
1.2 vue双向数据绑定原理的实现，其核心是Object.defineProperty()方法
1.3 Object.defineProperty(obj, prop, descriptor)方法，接收三个参数，分别为obj（定义其上属性的对象）prop（定义或修改的属性）descriptor（具体的改变方法），就是用这个方法来定义一个值，当调用时我们使用了它里面的get方法，当我们给这个属性赋值时，又用到了它里面的set方法

js简单实现双向数据绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <input type="text" id="a">
        <span id="b"></span>
    </div>
</body>
<script>
    var obj = {};  
    var value = 'p'
    Object.defineProperty(obj, 'value', {
        get: function () {
            return value
        },
        set: function (newValue) { 
            value = newValue
            document.getElementById('a').value = value           
            document.getElementById('b').innerHTML = value
        }
    })
    document.addEventListener('keyup', function (e) {
        obj.value = e.target.value
    })
</script>
</html>

20.VueX是什么？有哪些核心概念？

Vuex是一个专为Vue.js应用程序开发的状态管理模式；它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex可以管理复杂应用的数据状态，比如兄弟组件的通信、多层嵌套的组件的传值等等

State：定义了应用状态的数据结构，可以在这里设置默认的初始状态。
Getter：允许组件从 Store 中获取数据，mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性。
Mutation：是唯一更改 store 中状态的方法，且必须是同步函数。
Action：用于提交 mutation，而不是直接变更状态，可以包含任意异步操作。
Module：允许将单一的 Store 拆分为多个 store 且同时保存在单一的状态树中。