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"
-
埠號標識了一個主機上進行通訊的不同的應用程式。
SOCKS代理協議伺服器常用埠號：1080
FTP（檔案傳輸）協議代理伺服器常用埠號：21
Telnet（遠端登入）協議代理伺服器常用埠號：23
HTTP伺服器，預設埠號為80
HTTPS（securely transferring web pages）伺服器，預設埠號為443
-
MVC、MVP、MVVM 名詞解釋
1、MVC（Model-View-Controller） Model: 模型（用於封裝與應用程式的業務邏輯相關的資料以及對資料的處理方法） View: 檢視（渲染頁面） Controller: 控制器（M和V之間的聯結器，用於控制應用程式的流程，及頁面的業務邏輯） —————————————————————————————————————————————————————————————————————— 2、MVP（Model-View-Presenter）是MVC的改良模式。 —————————————————————————————————————————————————————————————————————— 3、MVVM（Model-View-ViewModel）-
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。
目錄