滴滴网约车一面凉凉记录

前言

面试日期为 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的理解,其实答得并不显得不少,感受本身答的不是特别好。

总结

面试官对个人评价是原理仍是差一点,项目经验是能够的,

从她言语中透露出我仍是不太合适,基本上第三层道题后,其实双方都心领神会的知道这场面试的结果。

经过此次面试我了解了本身的不足的地方，面试过程当中也没有去引导面试官步入我认为理论性较强的地方,基本以后我会根据面试去补习原理方面的,争取跟这个小姐姐成为同事,

看着更好看的面试官小姐姐,没有鼓起勇气要个微信啥的,太亏了,但愿半年后她还在。