58同城前端笔试

一、填空题

​ 1.号码段为131到139的11位手机号码正则校验：

/^13[1-9][0-9]{8}$/

注：史上最全常用正则表达式大全

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

<a herf=[tel:10086](tel:10086)>10086</a>

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

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

结果：“teacher” ; Uncaught ReferenceError: s is not defined

​ 解析： var声明的变量是没有块级作用域 （全局变量）

​ let 声明的变量具有块级作用域 （局部变量）

​ 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}卫

​ 解析： 在模板字符串中，嵌入变量，需要将变量名写在${}之中

​ 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"

  1. 端口号标识了一个主机上进行通信的不同的应用程序。

    SOCKS代理协议服务器常用端口号：1080

    FTP（文件传输）协议代理服务器常用端口号：21

    Telnet（远程登录）协议代理服务器常用端口号：23

    HTTP服务器，默认端口号为80

    HTTPS（securely transferring web pages）服务器，默认端口号为443

  2. MVC、MVP、MVVM 名词解释

    1、MVC（Model-View-Controller）

Model: 模型（用于封装与应用程序的业务逻辑相关的数据以及对数据的处理方法）

View: 视图（渲染页面）

Controller: 控制器（M和V之间的连接器，用于控制应用程序的流程，及页面的业务逻辑）
——————————————————————————————————————————————————————————————————————

2、MVP（Model-View-Presenter）是MVC的改良模式。
——————————————————————————————————————————————————————————————————————

3、MVVM（Model-View-ViewModel）

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

      .box{
	display: flex; 
	align-items: center 
}

二、简答题

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 o
case 1
undefined

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

方法 描述
Opacity 设置对象的不透明度当他的透明度为0的时候,视觉上它是消失了,但是他依然占据着那个位置。它也将响应用户交互
Display 当元素的display属性为none时,该元素就会就会从视觉中消失,并且连盒模型也不生成.也不会在页面占据任何位置
Visibility 类似opacity属性，该属性值为hidden的时候，元素将会隐藏，也会占据着自己的位置，并对网页的布局起作用，与 opacity 唯一不同的是它不会响应任何用户交互。
Clip-path 该属性是通过裁剪的方法实现隐藏的。被隐藏的内容依然占据着那个位置，它周围的元素的行为就如同它可见时一样。
Position 把元素脱离文档流移出视觉区域，添加该属性后既不会影响布局，又能让元素保持可以操作。

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’

解析：

第一空：函数中的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布局    //跟background-size的cover属性一样，保持页面的宽高比，取宽或高之中的较小者占满屏                      幕，超出的内容会被隐藏
	3、contain布局   //跟background-size的contain属性那样，保持页面的宽高比，取宽或高之中的较大者占                       满屏幕，不足的部分会用背景填充。
	4、样式缩放      //直接用px为单位按视觉进行开发
	5、rem缩放      //以Rem为单位来进行视觉开发，然后通过计算后改变html的front-size来对页面进行缩放。

三、应用题

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

//方法一：
function rand(arr) {
    var len = arr.length
    //首先从最大的数开始遍历，之后递减
    for(var i = arr.length - 1; i >= 0; i--) {
    //随机索引值randomIndex是从0-arr.length中随机抽取的
        var randomIndex = Math.floor(Math.random() * (i + 1));
    //下面三句相当于把从数组中随机抽取到的值与当前遍历的值互换位置
        var itemIndex = arr[randomIndex];
        arr[randomIndex] = arr[i];
        arr[i] = itemIndex;
    }
    //每一次的遍历都相当于把从数组中随机抽取（不重复）的一个元素放到数组的最后面（索引顺序为：len-1,len-2,len-3......0）
    return arr;
}

//方法二：
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)
}


//方法三：
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('.')
    //.split  把一个字符串分割成字符串数组。
    //如："2:3:4:5".split(":")  将返回["2", "3", "4", "5"]

    return res1.join('') > res2.join('') ? v1 : v2
    //.join把数组中的所有元素放入一个字符串
}

let res = compare(str1, str2)
console.log(res)

//<0   strA 小于 strB。
//=0   strA 等于 strB。
//>0   strA 大于 strB。

目录

致谢

posted @ 2020-08-27 17:11  CoderHao  阅读(410)  评论(0)    收藏  举报