滴滴網約車一面涼涼記錄

前言

面試日期爲 4月20日 19:00 今天由於我的緣由遲到了20分鐘,還好面試官小姐姐願意等待一謎同樣的男人(沒錯就老子),上來並無自我介紹,她直接開始問題了!!!

開始面試

說出下面標籤的字體色值

該題涉及到 CSS 繼承以及權重的關係

選擇器	格式	優先級權重
id選擇器	#id	100
類選擇器	.class	10
標籤選擇器	div	10
後代選擇器	li a	0

對於選擇器的優先級：

• 標籤選擇器、僞元素選擇器：1
• 類選擇器、僞類選擇器、屬性選擇器：10
• id 選擇器：100
• 內聯樣式：1000

1.先看代碼

<style type="text/css">
	#a {font-size:12px}
	div p{ font-size:13px }
	div .c{ font-size:14px }
    .a .b .c{ font-size:15px }
    #b{ font-size:16px }
</style>
<div id=」a」 class=」a」> <div id=」b」 class=」b」> <p id=」c」 class=」c」>I’am here</p> </div> </div>
複製代碼

ps :這裏我標籤c答錯了, 由於上來就開始問了,我比較緊張,說c會繼承b的字體顏色。

說出CSS那些屬性是能夠繼承的

其實這裏是根據上一題延伸出來的,基本後面的面試都是,面試官根據我所寫的和所說的,去對我進行考覈,因此面試官挺厲害的

• 字體系列屬性
  • font-family：字體系列
  • font-weight：字體的粗細
  • font-size：字體的大小
  • font-style：字體的風格
• 文本系列屬性
  • text-indent：文本縮進
  • text-align：文本水平對齊
  • line-height：行高
  • word-spacing：單詞之間的間距
  • letter-spacing：中文或者字母之間的間距
  • text-transform：控制文本大小寫（就是uppercase、lowercase、capitalize這三個）
  • color：文本顏色
• 元素可見性
  • visibility：控制元素顯示隱藏
• 列表佈局屬性
  • list-style：列表風格，包括list-style-type、list-style-image等
• 光標屬性
  • cursor：光標顯示爲什麼種形態

ps:這裏理論性的東西,我仍是比較在行的,通常考手寫我就拉了,

JavaScript閉包

這裏涉及了閉包,最開始覺得考的是執行上下文

var a=0,b=0;
 function A(a){
    A = function(b){alert(a + b++)}
    alert(a++);
 }
 A(1);
 A(2);
複製代碼

由於執行A(1)時，A的做用域裏並無A，因此A = function(b){alert(a + b++)}把本身從新賦值了，並擁有以前的做用域(包括形參a)。造成了一個閉包。在調用A(2)執行的就是alert(a + b++)，此時做用域中的a爲2,傳入的形參也是2，因此結果爲4。

ps :雖然這裏我解釋有那個意思,可是確定沒直觀的說到這個關鍵點上。

遍歷嵌套對象

編寫函數得到對象中的值1，必須使用到 str = 'a.b.c';

更好的答案在這

"估計個人答案使人大吃一驚,大家要是剛吃完飯就別看了,我怕大家噴出來"

//find(obj,'a.b.c') //1
//find(obj,'a.d.c') //undefined
var obj = {
    a:{
        b:{
            c:1
        }
    }
}
 
var str = 'a.b.c';

const find = (obj,str) => {
  let arr = []
  for (const key in str) {
    if (Object.hasOwnProperty.call(str, key)) {
      if (str[key]!= '.') {
        arr.push(str[key])
      }
    }
  }
  try {
    return `${obj[arr[0]][arr[1]][arr[2]]}`
  } catch (error) {
    return undefined
  }
}
複製代碼

這道題的重點就是要知道檢索對象中包含的值有什麼方法。

方法有兩種:

1. 在[]後綴中包括住一個字符串表達式的方法 如：obj[a]
2. 可使用.表示法 如：obj.a

ps :其中上面的解法就是採用[]的方法來解決這道題的,個人擴展性不高,可是這裏給本身留坑了!

Object.hasOwnProperty的做用

徹底就是上一題給本身留坑了有沒有,有沒有!!!!!

事實上,面試到這裏,個人節奏就已經沒了,可是還沒慌,

面試官小姐姐笑起來瞬間讓人不緊張了。

MDN的官方解釋

ps :我答的是判斷是否爲null或者undefined,在面試官再三的鼓勵下,我說出來判斷原型鏈~~

這裏面試官小姐姐笑吟吟的好好看😊😊😊

原型以及原型鏈的理解

根據上一題,面試官小姐姐又提出了一個這個問題,

const b = 2
a = b
// 問 : a的原型鏈指向誰?是怎麼個查找順序
// 答 : a是指向的b

// 問 : 怎麼修改a的原型指向
// 答 : 深淺拷貝
// 問 : 除了拷貝呢
// 答 : 思考再三,我說了construvtor (這不對)
// 答 : 經過構造函數

// 下一題(≧﹏ ≦)
複製代碼

正確答案:a的原型不是指向b，是Number，b是基礎類型，因此a是從新賦值，a的原型指向是Number。(通過評論區大佬提醒,才知道本身理解錯了)

ps :這裏徹底是基礎沒打好,由於項目經驗比較多,忽略了這些原理性的東西,這就致使在技術考覈中,這屬於薄弱的項。

項目數據可視化,Vue高階組件

這裏看了個人簡歷,項目中有寫過數據可視化的項目,而項目中使用了Vue高階組件(組件懶加載)

組件懶加載代碼

const MonthlyAddition = () => ({
  // 須要加載的組件 (應該是一個 `Promise` 對象)
	component: import('@/components/Echart/MonthlyAddition.vue'),
  // 展現加載時組件的延時時間。默認值是 200 (毫秒
	delay: 900, // 延遲加載，默認200毫秒
  // 加載失敗時使用的組件
	error: Hebberror, // 加載失敗顯示組件
  // 異步組件加載時使用的組件
	loading: Hebberror, // 加載時使用組件
  // 若是提供了超時時間且組件加載也超時了，
  // 則使用加載失敗時使用的組件。默認值是：`Infinity`
	timeout: 2000, // 超時時間，默認 Infinity
});
複製代碼

JSX

export default {
	props: {
		nowTime: {
			type: String,
			default: '',
		},
	},
	render() {
		return (
			<time class="head__time" datetime={this.nowTime}>
				{this.nowTime}
			</time>
		);
	},
};

複製代碼

ps :這裏其實展現了本身的的一些算是項目經驗吧,主要是那個高階組件。

高階組件延伸題目

由上一題的高階組件,延伸出 Promise 加定時器, 根據狀態去判斷是否顯示異常組件

/** * * @param {Object} falg 標識 * @param {Object} date 數據 * @returns  */
function componentsShow(falg = true,date) {
  let componentsTime = null
    return new Promise(function (resolve,reject) {
      if (falg) {
        componentsTime = setTimeout(function () {
          resolve()
        },200)
      }else{
        clearTimeout(componentsTime)
        if (date) {
          resolve()
        }else{
          reject()
        }
      }

  })
}
複製代碼

項目優化

這裏實際上是個送分題,優化方面我仍是比較擅長的,剎那間,感受來了

• 懶加載
• CDN
• 文件優化
• Webpack優化

項目中參與公司模板封裝

封裝多環境,Ecahrts插件,axios,公共Css樣式,Esilit,

ps 這裏粗略的看了下個人項目,我也將本身作的大概說一下。

Webpack 都使用過那些loader

• babel-loader → 轉義代碼
• css-loader →加載css,支持文件導入
• style-loader →把css代碼注入到javaScript中,
• scss-loader → 轉義scss

ps :這裏考察了我對Webpack的理解,其實答得並不顯得不少,感受本身答的不是特別好。

總結

面試官對個人評價是原理仍是差一點,項目經驗是能夠的,

從她言語中透露出我仍是不太合適,基本上第三層道題後,其實雙方都心領神會的知道這場面試的結果。

經過此次面試我瞭解了本身的不足的地方，面試過程當中也沒有去引導面試官步入我認爲理論性較強的地方,基本以後我會根據面試去補習原理方面的,爭取跟這個小姐姐成爲同事,

看着更好看的面試官小姐姐,沒有鼓起勇氣要個微信啥的,太虧了,但願半年後她還在。