面经总结归纳整理（牛客网）-- 58同城2018秋招前端笔试试题分享

58同城2018秋招前端笔试试题分享

https://www.nowcoder.com/discuss/67508?type=2&order=3&pos=21&page=1

题目：1.号码段为131到139的11位手机号码正则校验： /^13[1-9][0-9]{8}$/

知识点：
①正则表达式（基础知识）：http://www.runoob.com/regexp/regexp-metachar.html
②常见的正则表达式的用法：https://www.cnblogs.com/fozero/p/7868687.html
题目分析：
^：匹配输入字符串的起始位置
KaTeX parse error: Expected 'EOF', got '\d' at position 72: … Pattern = /^-?\̲d̲+/ 匹配整数 ？代表匹配0次或1次

题目：2. 移动端，如何在html中通过链接调起拨打电话10086

3. 以下代码的输出结果：

{
    var t=‘teacher’;
    let s=‘student’;
}
console.log(t);
console.log(s);

答案：“teacher” ; Uncaught ReferenceError: s is not defined
知识点：变量声明中let和var的区别
题目分析：var会发生变量提升问题，而let不会。
let是ES6新增的变量声明
参考资料：阮一峰的ES6入门书

4. HTTP协议的状态码200、400、500分别代表什么？

答案：200: OK; 400: Bad Request; 500: Internal Server Error

5. JavaScript算术运算：

		   ‘10’+ 1结果为‘101’ 
		   ‘10’-1结果为9

6. var ting = 1, shi=3, wei=2;用ES6字符串模板的方式输出：1室3厅2卫。

答案：${ting}室${shi}厅${wei}卫
知识点：ES6中的模板字符串
题目分析：在模板字符串中，嵌入变量，需要将变量名写在${}之中。

7. 用ES6解构的方式，将下面代码中的obj.name赋值给n，obj.age赋值给a

let obj = {name:’韩梅梅’, age:’20’};
let n, a;

答案：let {name: n, age: a} = obj;
知识点：ES6中的对象的解构赋值
题目解析：
变量与属性同名情况下，var { bar,foo } = { foo:“aaa”,bar:“bbb”} ,次序不一致不重要；
变量名与属性不一致（题目这种情况）：var {foo:baz} = {foo:"aaa",bar:"bbb"}; baz //"aaa"

8. HTTP协议默认的端口号__80__,HTTPS协议的端口号__443__

9. 名词解释：MVC：_____ 、MVP：_____ 、MVVM：_______

答案：model-view-controller、model-view-presenter、model-view-viewmodel
答案解析：（三者的区别和使用的场合）https://blog.csdn.net/victoryzn/article/details/78392128
【未读】

10. Flex布局实现容器box内部元素item垂直居中对齐。

答案：.box {display: flex; align-items: center }
知识点：（flex布局）http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

11.CSS3的box-sizing的取值及各值的说明。

box-sizing: content-box|border-box|inherit;

值	描述
content-box	宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框。
border-box	为元素设定的宽度和高度决定了元素的边框盒。就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。
inherit	规定应从父元素继承 box-sizing 属性的值。

12. 请写出下列代码的执行结果：

function switchCase(value){
    switch(value){
        case '0':console.log('case 0');
        case '1':console.log('case 1');break;
        case undefined:console.log('undefined');break;
        default:console.log('default');
}
}
  
// 写出下列输出结果
switchCase(0);
switchCase('0');
switchCase();

答案：
default
case 0
case 1
undefined
知识点：switch循环
题目解析：
switchCase(0); //传入数值0，发现没有相同参数的条件，返回default
switchCase(‘0’); //传入参数‘0’，有对应，并且没有break，则返回数据case 0 case1之后又break，随即停止。
switchCase(); //没有传入参数，即undefined

13. 列举出通过CSS样式隐藏元素的方法，并说明其区别。

知识点：（css样式隐藏元素）https://www.cnblogs.com/cythia/p/5981306.html

14. 请写出下面代码的执行结果：

var s = {
    s: 'student',
    getS: function(){
    console.log(this.s);
}
};
var t = {
    s: 'teacher'
};
  
var getS = s.getS;
var getS1 = getS.bind(s);
  
// 写出以下输出结果
s.getS();
s.getS.apply(t);    
getS();
getS1.call(t);

答案：
‘student’
‘teacher’
{
s:“student”
getS(){}
}
‘student’
知识点：call()、apply()、bind() http://www.cnblogs.com/pssp/p/5215621.html
题目解析：
·第一空：函数中的this对象，即指代的是s。
·第二空：函数中的this对象，由于apply绑定到了t对象上，则对应的就是t对象中的’teacher’
·第三空：这里有一个小陷阱，首先，getS是由s对象中的函数赋值的，那么getS就是一个函数function(){console.log(this.s)}; 在此处的函数已经被提取出来，赋值给了getS，同s对象已经没有关联了，此处的this指向的是window，即window.s；那么我们就在代码中寻找s，刚好与s对象同名，所以，此处答应的就是s对象，即{s:“student”，getS(){}}。
第四空：首先，getS1绑定了参数s，bind绑定了之后，随后通过apply或者call都无法改变其绑定的对象，所以，打印出来就是student。

15. 列出移动端开发中适配各种屏幕尺寸的解决方案(至少3种)

答案：
1、响应式布局
2、cover布局
3、contain布局
4、样式缩放
5、rem缩放
知识点：响应式 https://www.cnblogs.com/mengruying/p/5522494.html

16. 用js实现一个随机打乱数组顺序的函数，要求可以设定数组种任意1个元素的位置不变，其他位置的元素位置随机变化。

答案：

//方法1
var arr = [1, 2, 3, 4]
function mess(index){
    let res = arr.splice(index, 1)[0]
    arr.sort((a, b)=>Math.random()-0.5)
    arr.splice(index, 0, res)
    console.log(arr)
}
//方法2
function (array,index2){
	array.map(function(item,index){
		if(index!=index2){
		var x=parseInt(Math.random()*(array.length));
			if(x!=index2){
			array[index]=array[x];
			array[x]=item;
			}
		}
	})
	console.log(array);
}

17. 用js实现一个比较APP版本号的大小的函数，版本号各市由数字和.组成。例如：1.1.0、1.10、1.2.3等。

答案：

function compare(v1, v2){
    let res1 = v1.split('.')
    let res2 = v2.split('.')
//  function giveZero(arr, start, end){
//      for(let i = start; i <= end; i++){
//          arr[i] = '0';
//      }
//  }
//  if(res1.length > res2.length){
//      giveZero(res2, res2.length, res1.length - 1)
//  }else if(res1.length < res2.length){
//      giveZero(res1, res1.length, res2.length - 1)
//  }
// 
    return res1.join('') > res2.join('') ? v1 : v2
}
let res = compare(str1, str2)
console.log(res)