第一次前端面试——滴滴

我面试的是滴滴前端实习生,面试官挺年轻的,是个前端程序猿小哥哥。只是这是我的第一次正经面试,在将近一小时的面试里,脑子一片空白。虽然我能感觉到问的问题都超级简单,而且都是我看过的,我还是回答的磕磕绊绊。。。。以后一定避免眼高手低,知识点不能只是看过,还得记熟。下面是我整理的问题和答案,欢迎补充和纠正:

1、作用域链是什么

答:一般情况下,变量取值到创建这个变量 的函数的作用域中取值。但是如果在当前作用域中没有查到值,就会向上级作用域去查,直到查到全局作用域,这么一个查找过程形成的链条就叫做作用域链。

2、弹性盒子

答:

.box{
  display: flex;
  /*display: inline-flex;*/
}
  1. 容器的属性
    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;多轴线对齐方式
  2. 项目的属性
    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。

第一次前端面试——滴滴_第1张图片

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、如何从var b = [1,2,3,4,5,6]中截取[3,4,5]

答:

  1. array.slice(start, end)
    方法可提取字符串的某个部分,并以新的字符串返回被提取的部分。参数start是必须有的,end可选。
  2. array.splice(index,howmany,item1,…,itemX)添加、删除元素,index从哪开始(必需),howmany删除几个(可选),item从index处添加元素(可选)。
  3. for循环

5、vuex和props

答:Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。
React的核心思想就是组件化思想,页面会被切分成一些独立的、可复用的组件。组件从概念上看就是一个函数,可以接受一个参数作为输入值,这个参数就是props,所以可以把props理解为从外部传入组件内部的数据。
(这个没有接触过,就先写一下概念,有时间可能会单独写一下。)

6、css 中经常有类似 background-image 这种通过 - 连接的字符,通过 javascript 设置样式的时候需要将这种样式转换成 backgroundImage 驼峰格式,请完成此转换功能以 - 为分隔符,将第二个起的非空单词首字母转为大写。

答:

 1 function cssStyle2DomStyle(sName) {
 2         var arr = sName.split('');
 3         if(arr[0]=='-'){
 4             arr.splice(0,1);
 5         }
 6         for(var i=0,len=arr.length; i<len; i++){
 7             if(arr[i]=='-'){
 8                 arr.splice(i,1);
 9                 arr[i]=arr[i].toUpperCase();
10             }
11         }
12         return arr.join('');    
13 }
14 //console.log(cssStyle2DomStyle('-webkit-border-image'));

7、输出是什么

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

8、如何给所有p标签变换样式

答:1、css中用标签选择器
2、js

<body>
    <p >每天你和阳光都在</p>
</body>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
    $("p").css({"background-color":"blue","font-size":"14px"});
</script>

9、flex=1是什么意思

答:
第一次前端面试——滴滴_第2张图片
第一次前端面试——滴滴_第3张图片

10、请描述一下 cookies,sessionStorage 和 localStorage 的区别?

答:cookie是网站为了标示用户身份而储存在用户本地终端(Client Side)上的数据(通常经过加密)。始终在同源的http请求中携带(即使不需要),记会在浏览器和服务器间来回传递。
sessionStorage和localStorage不会自动把数据发给服务器,仅在本地保存。
存储大小:cookie数据大小不能超过4k。sessionStorage和localStorage比cookie大得多,可以达到5M或更大。
有期时间:localStorage存储持久数据,浏览器关闭后数据不丢失除非主动删除数据;sessionStorage数据在当前浏览器窗口关闭后自动删除。cookie设置的cookie过期时间之前一直有效,即使窗口或浏览器关闭。

11、有一个宽度为500的盒子,怎么实现里面套三个宽度分别为100的水平摆放的盒子

答:

<style> 
.flex-container {
    display: flex;
	justify-content:space-between;//或flex-start | flex-end | center | space-between | space-around;
    width: 500px;
    background-color: lightgrey;
}

.flex-item {
    background-color: cornflowerblue;
    width: 100px;
    height: 100px;
    margin: 10px;
}
</style>

<body>
<div class="flex-container">
  <div class="flex-item">flex item 1</div>
  <div class="flex-item">flex item 2</div>
  <div class="flex-item">flex item 3</div>  
</div>
</body>

12、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;

13、js的数据类型

答:

  1. 值类型(基本类型):字符串(String)、数字(Number)、布尔(Boolean)、对空(Null)、未定义(Undefined)、Symbol。
  2. 引用数据类型:对象(Object)、数组(Array)、函数(Function)。

14、如何判断变量类型

答:
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 

你可能感兴趣的:(面试)