盖雅工场前端面试测试题（参考答案）

答案仅供参考

// 2.我们知道IE8中的数组没有indexOf方法，因此以下代码会报错，请添加一段代码，让以下代码在所有浏览器中都能正确运行。

// var index = [1,2,3].indexOf(2);*
var num = [1, 2, 3];
function indexd(num) {
	for (var i = 0; i < num.length; i++) {
		if (num[i] == 2) {
			return i;
		}
	}
}

// 3.以下两个样式同时作用于一个a元素时，元素内文字是什么颜色？为什么？
// #userlist .contextmenu li.enabled a{ color: gray }
// div#userlist ul.contextmenu li span a{ color: black; }*
元素内文字是black，因为后面的样式规则会覆盖前面样式，是否被覆盖取决于样式先后顺序和优先级，是否单独定义样式

// 4.CSS中position有哪几种可选值？分表代表什么意思？在和left，top搭配使用时，left，top的参照物是什么？*
absolute 绝对定位
fixed 固定定位
relative 相对定位
static 默认定位
定位参照物一般为父元素，body元素

// 5.页面中有一个可以分页的表格，表格的最后一列是删除按钮，点击删除按钮删除该行数据。请问怎么绑定删除操作才更加高效？（提示如果每页显示20条数据，那么就需要绑定删除事件20次，有没有更高效的做法，不需要实现删除逻辑，只需要回答如何绑定）*
循环绑定，模板绑定，传入元素索引

// 6. 在我们公司采用前后端分离的模式开发，前端先定义接口，和后端讨论后将接口固定下来形成文档。现在有一个页面包含增删改查用户4个操作，请以文档的形式定义这4个接口。文档中每个接口应包括URL，Method，Parameter请求参数，Response响应数据4个部分。假设用户只有两个字段name和age。（提示：注意是接口文档）*

url：“地址”
Method：“psot”
data：”{name：”jcak“，age:18}“
Response:{msg:‘ok’,code:1000,data:“{}”},

// 7.以下代码中的两个函数非常相似（重复），你能够将这两个函数中重复的部分封装成一个函数吗？（注意不是把两个函数合成一个函数，而是把两个函数公共的部分抽象成一个函数，基于这个函数实现addThreeForEachItem和encodeEachItem会更简单。）

// js // //给数组中的每一项增加3 // function addThreeForEachItem(array){ // for(var i = 0; i < array.length; i++){ // array[i] = array[i] + 3; // } // return array; // } // //将数组中的每一项编码 // function encodeEachItem(array){ // for(var i = 0; i < array.length; i++){ // array[i] = encodeURIComponent(array[i]); // } // return array; // } //*

function clt(arr, mt) {
	for (var i = 0; i < array.length; i++) {
		if (mt == 'add') {
			array[i] = array[i] + 3;
		} else if (mt == 'encode') {
			array[i] = encodeURIComponent(array[i]);
		}
	}
	return arr
}

function encodeEachItem(array) {
return clt(array, ‘encode’)
}
// 8.在一个紧张的发布之夜，前端在修复最后一个bug之后让测试进行最后一次回归测试。突然测试提出一个严重的bug：所有页面的输入框都不能获得焦点了。请问1）最有可能是什么原因导致bug？2)你会如何快速定位bug?*
有可能是事件没有绑定，有可能是元素被覆盖，查看事件绑定，页面元素是否被覆盖

9.有两个GET请求: /url1, /url2 当两个请求都完成之后打印出’done’。请使用代码来完成这个需求，可以使用任何类库。还有没有其他方法？？？*

Vue.axios.get(“/url1”).then((response) => {
  console.log(‘done’)
})
 $.ajax({url:"/url2",success:function(result){
        console.log(‘done’)
    }});
  var  xhr = new XMLHttpRequest();
xhr.open("GET","/url2");
xhr.onreadystatechange = function() {
	if (xhr.readyState == 4) {
		
		if (xhr.status == 200) {
			
			console.log('done')
		} else {
			alert("AJAX服务器返回错误！");
		}
	}

}
xhr.send();

// 10.请将以下层层嵌套的source对象转换成扁平的简单对象：{“a.b.c”: “1”, “a.d”: “2”, “e”: “3”}

// var source = {
//     a: {
//         b: {
//             c: "1",
//         },
//         d: "2",
//      },
//     e: "3",
// };
// // 在此处添加代码实现flat函数逻辑
// var target = flat(source);
// console.log(target);*
var newobj = {};
function flat(cur, key2) {
	Object.keys(cur).forEach(function(key) {
		if (typeof cur[key] != "object") {
			if (key2) {
				newobj[key2 + key] = cur[key]
			} else {
				newobj[key] = cur[key]
			}
		} else if (typeof cur[key] == "object") {
			if (key2) {
				flat(cur[key], key2 + key + ".")
			} else {
				flat(cur[key], key + ".")
			}
		}
	});
	return newobj
}
var target = flat(source);
console.log(target);