前端实战面试题(一)

前端实战面试题（一）

1.for in和 for of 的差别

用for in的话 遍历的结果是key,数组下标

	var obj={
				name:'小明',
				age:23
			};
			for(let i in obj){
				console.log(i);//name,age
				console.log(obj[i])//小明,23
			}

用for of的话 遍历的结果则是value，就是数组的每一个值

			var arr=[1,2,3,4,5]
			for(let i of arr){
				console.log(i);//1,2,3,4,5
			}

2.ES6中常见的数组方法有哪些

push 追加 但是返回值是追加的个数，而不是数组的值

var arr = [1, 2, 50, 5, 26, 70]
			var arr1 = [];
			for (let i = 0; i < arr.length; i++) {
				if (arr[i] > 5) {
				console.log(arr1.push(arr[i]));//1 ,2,3
				}
			}
			console.log(arr1);//[50,26,70]

filter 可以用来过滤数字

			var arr = [1, 2, 23, 5, 26, 70]
			var arr_filter=arr.filter(function(x){
				return x%2==0;
			})
			console.log(arr_filter);//[2,26,70]

new Set 去重

var arr=[1,2,3,3,5,5,6,7]
console.log(...new Set(arr));//[1 ,2 ,3 ,5, 6 ,7]

some 有结果就返回true，没有就返回false

var someResult=numbers.some(function(item,index,array){
return (item>2);
});
alert(someResult);//true

every 每一项都满足则返回true，有一个不满足就返回false

var numbers=[1,2,3,4,5,4,3,2,1];
  var everyResult=numbers.every(function(item,index,array){
return (item>2);
});
alert(everyResult);//false

splice 该方法向/从数组中添加/删除项目，然后返回被删除的项目。 如：

var s=['a','b','c'];
console.log(s.splice(2,1)); //["c"]
console.log(s); // ["a", "b"]

map 该方法是对数组中的每一项运行给定函数，返回每次函数调用的结果组成的数组。这个数组的每一项都是在原始数据中的对应项上运行传入函数的结果，例如：

var numbers=[1,2,3,4,5,4,3,2,1];

  var mapResult=numbers.map(function(item,index,array){

return item*2;

});

alert(mapResult); //[2,4,6,8,10,8,6,4,2]

concat 函数 将多个字符串连接成一个字符串。 concat(str1, str2,…) 返回结果为连接参数产生的字符串，如果有任何一个参数为null，则返回值为null。如

var arr=[1,2,3]
console.log(arr.concat(4,5));//[1,2,3,4,5]

forEach 该方法是多数组中的每一项运行给定函数，这个方法没有返回值。它只是对数组中的每一项运行传入的函数，没有返回值。本质上与使用for循环迭代数组一样。

var numbers=[1,2,3,4,5,4,3,2,1];
numbers.forEach(function(iterm,index,array){
//执行某些操作
});

3.Vue-router路由有几种模式

有三种模式：
　1.Hash: 使用URL的hash值来作为路由。支持所有浏览器。
　2.History: 以来HTML5 History API 和服务器配置。参考官网中HTML5 History模式
　3.Abstract： 支持所有javascript运行模式。如果发现没有浏览器的API，路由会自动强制进入这个模式。

4.把以下数组变为不重复且升序的一维数组

var arr = [ [1, 2, 2], [3, 4, 5, 5,6], [6, 7, 8, 9, [11, 12, [12, 13, [14],15]]], 10];
			var result=(new Set(arr.flat(Infinity)))
			var result=[...result];
			result.sort((a,b)=>{return a-b})
			console.log(result);// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]

5.为什么vue组件中的data不是一个对象而是一个函数呢？

如果两个实例引用同一个对象，当其中一个实例的属性发生改变时，另一个实例属性也随之改变，只有当两个实例拥有自己的作用域时，才不会相互干扰。

这是因为JavaScript的特性所导致，在component中，data必须以函数的形式存在，不可以是对象。

组建中的data写成一个函数，数据以函数返回值的形式定义，这样每次复用组件的时候，都会返回一份新的data，相当于每个组件实例都有自己私有的数据空间，它们只负责各自维护的数据，不会造成混乱。而单纯的写成对象形式，就是所有的组件实例共用了一个data，这样改一个全都改了。