记录一些面试问题或有趣的问题+解答

1.有一个长度为100的数组，用优雅的方式求出改数组的前10个值之和
一般情况，for循环会用的比较多：

let sum = 0
for(let i = 0; i < 10; i++){
   	sum += arr[i]
}

但感觉不够优雅，于是：

let res = arr.slice(0,10).reduce((a,b) => a + b,0)

两者都能实现想要的效果，后面一行代码搞定，够优雅了

2.编写一个函数将[3,5,7,2,3,1,5,8]数组中重复的元素去掉
let arr = [3,5,7,2,3,1,5,8]
Set为ES6新增的一个对象，允许存储任何类型（原始值或引用值）的唯一值

function repeat(arr) {
	return Array.from(new Set(arr))
}

使用双重for循环，再利用数组的splice方法去重

function repeat(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--;	//每删除一个数j的值就减1
         	}
		}
	}
 	return arr;
 },

利用数组的indexOf方法去重

function repeat(arr){
	let arr1 = []
	for(let i = 0; i < arr.length; i++){
		if(arr1.indexOf(arr[i]) === -1){
			arr1.push(arr[i])
		}
	}
	return arr1;
},

利用reduce方法去重

let newArr = arr.reduce((pre,cur)=>{
    if(!pre.includes(cur)){
      return pre.concat(cur)
    }else{
      return pre
    }
},[])

3.公鸡5元一只，母鸡4元一只，小鸡1元3只，要求：百元百只，问：公鸡、母鸡、小鸡各多少只

//第一层，表示公鸡的范围，100元最多20只
for(let x = 0; x <= 20; x++){
  	//第一层，表示母鸡的范围
    for(let y = 0; y <= 25; y++){
        // 小鸡的变量
       	let z = 100 - x - y
        // 判断三鸡一共100只，小鸡为整数，z%3取余为0 同时成立
        if(z%3 == 0 && (5*x + 4*y + z/3 == 100)){
        	console.log(x,y,z)
       	}
	}
}

4.简要描述margin重复问题，及解决方式
描述：连个相邻盒子垂直方向上的margin会发生重叠，取较大的值，而不是相加。
解决：1.父级设置padding代替margin；2.父级设置overflow:hidden；3.当前元素设置透明边框；4.样式使用绝对定位；5使用浮动或者设置成行内块；6给内边距。

5.vue-router两种模式的区别
hash模式：#后面hash值的变化，并不会导致浏览器像服务器发出请求，浏览器不发出请求，就不会刷新页面。每次hash值的变化，会触发hashchange这个事件，通过这个事件可以知道hash值发生的变化，可以监听hashchange来实现更新页面部分内容的操作：
hash模式的背后原理是onhashchange事件，可以再window对象上监听这个事件：

window.onhashchange = function(event){
    console.log(event.oldURL, event.newURL);
    let hash = location.hash.slice(1);
    document.body.style.color = hash;
 
}

history模式：因为html5标准发布，多了两个api，pushState()和replaceState()。通过这连个api（1）可以改变url地址且不会发送请求，（2）不仅可以读取历史记录栈，还可以对浏览器历史栈进行修改。

$router与 $route的区别

1.$route从当前router跳转对象里面可以获取name，path，query，params等（传的参数由this. $route.query或者this.$route.params接收）
2.$router为VueRouter实例。想要导航到不同URL，使用 $router.push()方法；返回上一个history也是使用 $router.go()方法

6.vue生命周期有哪些？作用是什么？
生命周期：Vue实例从开始创建、初始化数据、编译模板、挂载Dom和渲染、卸载等一系列过程，这是Vue的生命周期。
八个钩子函数：
1.beforeCreate() 创建前在new一个vue实例后，只有一些默认的生命周期猴子和默认事件，其他的东西都还没有创建，再次生命周期执行的时候，data和methods中的数据还没有初始化，不能再这个阶段使用data中的数据和methods中的方法；
2.created() 被创建 data和methods都已经被初始化好了，可以调用；
3.beforeMount() 挂载前 在内存中已经编译好了模板，但还没有挂载到页面中，此时，页面还是旧的；
4.mounted() 已挂载 Vue实例已经初始化完成，此时组件脱离了创建阶段，进入到运行阶段。如果想要通过插件操作页面上的DOM节点，最早可以再和这个阶段中进行；
5.beforeupdate() 更新前 页面中的显示的数据还是旧的，data中的数据是更新后的，页面还没有和最新的数据保持同步；
6.updated() 更新 页面显示的数据和data中的数据已经保持同步了；
7.beforeDestroy() 销毁前 Vue实例从运行阶段进入到了销毁阶段，这个时候所有的data和methods，指令，过滤器…都是处于可用状态，还没有真正被销毁；
8.destroy() 被销毁 这个时候所有的data和methods，指令，过滤器…都是处于不可用状态，组件已经被销毁了。
vue生命周期的作用
它的生命周期中有多个事件钩子，在控制整个vue实例的过程时更容易形成好的逻辑。
created和mounted的区别
created：在模板渲染成html前调用，即通常初始化某些属性值，然后在渲染成视图。
mounted：在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。

7.es6方法过滤掉两个数组中对象id值相等的项

let arr1=[{id:1,name:'张三'},{id:2,name:'李四'}] 
let arr2=[{id:1,name:'王五'},{id:3,name:'赵六'},{id:4,name:'钱七'},{id:5,name:'吴八'},] 
let add=arr2.filter(item=>!arr1.some(v=>v.id===v.id)) 
console.log(add)

后续遇到比较有趣题，再补充