滴滴前端面试
我面试的是滴滴前端实习生，面试官挺年轻的，是个前端程序猿小哥哥。只是这是我的第一次正经面试，在将近一小时的面试里，脑子一片空白。虽然我能感觉到问的问题都超级简单，而且都是我看过的，我还是回答的磕磕绊绊。。。。以后一定避免眼高手低，知识点不能只是看过，还得记熟。下面是我整理的问题和答案，欢迎补充和纠正：
1、作用域链是什么
答：一般情况下，变量取值到创建这个变量 的函数的作用域中取值。但是如果在当前作用域中没有查到值，就会向上级作用域去查，直到查到全局作用域，这么一个查找过程形成的链条就叫做作用域链。
2、弹性盒子
答：
.box{display: flex;/*display: inline-flex;*/
}
- 容器的属性
flex-direction： row | row-reverse | column |column-reverse;水平/垂直从上、下开始
flex-wrap： nowrap | wrap |wrap-reverse;不换行/换行/换行，第一行在下
flex-flow：flex-direction属性和flex-wrap属性的简写形式
justify-content: flex-start | flex-end | center | space-between | space-around;水平对齐方式
align-items: flex-start | flex-end | center | baseline |stretch;垂直对齐方式
align-content：flex-start | flex-end | center |space-between | space-around | stretch;多轴线对齐方式 - 项目的属性
order：数值越小，排列越靠前，默认为0。
flex-grow：放大比例，默认为0。即如果存在剩余空间，也不放大。
flex-shrink：缩小比例，默认为1，即如果空间不足，该项目将缩小。
flex-basis：项目占据的主轴空间（main size），默认值为auto，也可以自己设置数值。
flex:flex-grow, flex-shrink 和 flex-basis的简写。
align-self: auto | flex-start | flex-end | center | baseline | stretch;默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
3、说一下盒子模型
答：盒模型的组成，由里向外content,padding,border,margin.
在IE盒子模型中，width表示content+padding+border这三个部分的宽度。
在标准的盒子模型中，width指content部分的宽度。
box-sizing的使用：
box-sizing: content-box 是W3C盒子模型 （默认）
box-sizing: border-box 是IE盒子模型
4、vuex和props
答：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
React的核心思想就是组件化思想，页面会被切分成一些独立的、可复用的组件。组件从概念上看就是一个函数，可以接受一个参数作为输入值，这个参数就是props，所以可以把props理解为从外部传入组件内部的数据。
5、输出是什么
var a = {name: 'A',fun: function() {console.log(this.name);}
};a.fun();
a.fun.call({ name: 'B' });
var fun1 = a.fun;
fun1();
答案：A B undifined
6、如何给所有p标签变换样式
答：1、css中用标签选择器
2、js
<body><p >每天你和阳光都在</p>
</body>
<script src=".1.4/jquery.min.js"></script>
<script>$("p").css({"background-color":"blue","font-size":"14px"});
</script>
7、flex=1是什么意思
答：
8、css水平、垂直居中的写法
答：一、水平居中
- 行内元素:text-align: center
- 块级元素:margin: 0 auto
- position:absolute +left:50%+ transform:translateX(-50%)
- display:flex + justify-content: center
二、垂直居中
- 设置line-height 和height相等
- position：absolute +top:50%+ transform:translateY(-50%)
- display:flex + align-items: center
- display:table+display:table-cell + vertical-align: middle;
三、水平垂直居中
针对父盒子套子盒子的情况
<div class="wrapper"><div class="content"></div>
</div>
3、另
<style>
.center {padding: 40px 0;//不需要考虑宽高，但能设置高度text-align: center;border: 3px solid green;
}
</style>
</head>
<body>
<h2>垂直居中</h2>
<p>以上实例，我们使用 padding 属性实现元素的垂直居中，使用text-align 让 div 元素的水平居中：</p>
<div class="center"><p>我是水平垂直居中的。</p>
</div>
4、
<style>
.center { height: 200px;position: relative;border: 3px solid green;
}.center p {margin: 0;position: absolute;bottom: 50%;right: 50%;-ms-transform: translate(50%, 50%);transform: translate(50%, 50%);//或//top: 50%;//left: 50%;//-ms-transform: translate(-50%, -50%);//transform: translate(-50%, -50%);
}
</style>
9、如何判断变量类型
答：
1、typeof
typeof对大多数的类型判断都是正确的，返回的都是小写的字符串类型,但是无法区分数组，null，和真正的Object，它的判断都是"object"。
2、Object.prototype.toString.call()，
Object.prototype.toString.call()的方法，各种类型都合适，判断准确，也是我准备长期使用的一种方法，返回的结果如[Object Array]，据我所知，jQuery的内部工具、vue的内部工具，mock的内部工具，都是采用的这种方法。
3、instanceof
instanceof 操作符的左操作数是一个普通的对象，右操作数是一个函数。a instanceof Foo 回答的问题是:在 a 的整条 [[Prototype]] 链中是否有指向 Foo.prototype 的对象。
用法：
//数组：
var a= [1,2,3]； a instanceof Array //true
var a = new Array(1,2,3); a instanceof Array //true
//函数：
var a = function(){} a instanceof Fuction // true
var a = new Function(); a instanceof Function //true
// 对象：
var a= {};a instanceof Object //true
4、constructor.name
该方式大部分情况下都可以，弊端是undefined，或者null没有constructor。
用法：
var a = ''
a.constructor.name // 返回String
更多推荐
滴滴前端面试
发布评论