ofo前端面试

桃扇骨 2022-06-08 09:22 146阅读 0赞

1、自我介绍

2、在做系统的时候，都用到哪些前端相关的技术？

[前端开发人员必须了解的七大技能图谱][Link 1]

3、html标签的应用  
![Image 1][]  
  
4、标签的语义化

![Image 1][]

[http://www.html5jscss.com/html5-semantics-section.html][http_www.html5jscss.com_html5-semantics-section.html]

5、假设我有一个页面，做成三列，两边宽是200px，中间实现自适应。  
用css来实现  
padding-left：  
padding-right：

6、浮动和文档流的关系

脱离文档流的两种方式：

一、positon:absolute.其他盒子和盒子内的本文均看不见。

二、float.其他盒子看不见，但是其他盒子的文本呈现环绕状态。

7、position：

relative相对于父元素的位置。

absolute定位于距离自己最近的父元素position设置为absolute或者relative。否则以body为定位原点。

子元素为absolute。他的父元素设置为absolute，子元素相对于哪个？相对于父元素

8、浮动：有三个盒子  
![Image 1][]

问第四个会在哪里？

![Image 1][]

9、平时是怎么学习前端知识的？  
10、css的盒模型  
content、padding、border、margin、  
宽：content+padding+border  
对dom元素设置200px，请问是哪部分  
ie模式下：  
宽=content+border

11、清除浮动的方法（一共一种方法？）

1）给父元素设置高度

2）给父元素设置overflow:hidden

3）在浮动的元素下面增加新标签，设置clear:both;

4）使用伪元素清除浮动

clearfloat:after{
    　　　　　　centent:"";//设置内容为空
    　　　　　　height:0;//高度为0
    　　　　　　line-height:0;//行高为0
    　　　　　　display:block;//将文本转为块级元素
    　　　　　　visibility:hidden;//将元素隐藏
    　　　　　　clear:both//清除浮动
    }
    	clearfloat{
    zoom:1;
    }

clear有几个属性：

left,right,both,none,inherit

12、常用的算法

**1. 字符串**

1、charCodeAt方法返回一个整数，代表指定位置字符的Unicode编码。
    var str = "ABC"; 
    str.charCodeAt(0); 
    结果：65
    2、charAt方法返回指定索引位置处的字符。如果超出有效范围的索引值返回空字符串。
    var str = "ABC"; 
    str.charAt(1); 结果：B
    3、slice方法返回字符串的片段。
    var str = "ABCDEF"; 
    str.slice(2,4); 
    结果：CD
    4、substring方法返回位于String对象中指定位置的子字符串。
    var str = "ABCDEF"; 
    str.substring(2,4); // 或 str.substring(4,2); 
    结果：CD
    PS:
    substring和slice
    (1)arg2 > arg1，即参数2大于参数1时
    substring：自动颠倒位置，数值大的在arg2位置上，数值小的在arg1位置上
    slice：返回空字符串
    (2)对负数的处理
    substring：将数值为负数的参数转换为0
    slice：将数值为负数的参数转换为(字符串长度-参数数值)
    5、indexOf方法放回String对象内第一次出现子字符串位置。如果没有找到子字符串，则返回-1。
    var str = "ABCDECDF"; 
    str.indexOf("CD"，1); // 由1位置从左向右查找 123...2). 链表
    
    6、search方法返回与正则表达式查找内容匹配的第一个字符串的位置。
    var str = "ABCDECDF"; 
    str.search("CD"); // 或 str.search(/CD/i); 
    结果：2
    7、concat方法返回字符串值，该值包含了两个或多个提供的字符串的连接。
    8、将一个字符串分割为子字符串，然后将结果作为字符串数组返回。
    var str = "AA BB CC DD EE FF"; 
    alert(str.split(" "，3)); 
    结果： AA,BB,CC

**2. 链表**

栈Stack和队列Queue

链表翻转

单链表，双向链表，循环链表

**3.****树：指二叉树，每个节点都包含一个左孩子节点和右孩子节点**

1.	平衡 vs. 非平衡：平衡二叉树中，每个节点的左右子树的深度相差至多为1（1或0）。
    2.	满二叉树（Full Binary Tree）：除叶子节点以为的每个节点都有两个孩子。
    3.	完美二叉树（Perfect Binary Tree）：是具有下列性质的满二叉树：所有的叶子节点都有相同的深度或处在同一层次，且每个父节点都必须有两个孩子。
    4.	完全二叉树（Complete Binary Tree）：二叉树中，可能除了最后一个，每一层都被完全填满，且所有节点都必须尽可能想左靠。

**4.图**

**深度优先搜索，广度优先搜索**

**5.排序**

冒泡排序、选择排序、快速排序、二分法排序、堆排序，插入排序
    堆排序，归并排序，快排序掌握思想
    （1）当数据规模较小的时候，可以用简单的排序算法如直接插入排序或直接选择排序。
    （2）当文件的初态已经基本有序时，可以用直接插入排序或冒泡排序。
    （3）当数据规模比较大时，应用速度快的排序算法。
    （4）堆排序不会出现快排那样的最坏情况，且堆排序所需的辅助空间比快排要少。堆排序和快排序都不稳定。
    （5）归并排序可以用于内排序，也可以用于外排序。稳定。
    查找：二分法查找
    hash算法

**6.递归vs迭代**

**7.动态规划**

**8.位操作符**

<table> 
 <tbody> 
 <tr> 
 <td> OR (|) </td> 
 <td> AND (&amp;) </td> 
 <td> XOR (^) </td> 
 <td> Left Shift (&lt;&lt;) </td> 
 <td> Right Shift (&gt;&gt;) </td> 
 <td> Not (~) </td> 
 </tr> 
 <tr> 
 <td> 1|0=1 </td> 
 <td> 1&amp;0=0 </td> 
 <td> 1^0=1 </td> 
 <td> 0010&lt;&lt;2=1000 </td> 
 <td> 1100&gt;&gt;2=0011 </td> 
 <td> ~1=0 </td> 
 </tr> 
 </tbody> 
</table>

**9.概率问题**

**10.排列组合**

13、介绍一下二叉树，在数据结构里面如何构成的？

前序遍历：根、左、右  
中序遍历：左、中、右  
后续遍历：左、右、根  
14、快速排序的原理—》将那10种快速排序的算法弄懂  
给一个数组实现快速排序  
15、js用到哪些技术  
16、js的五种基本类型  
17、给一个数组，数组去重。  
数组常用的方法：splice/substring/pop/push/unshift/shift及其含义

18、ES6、ES7语法

[https://segmentfault.com/a/1190000004365693\#articleHeader2][https_segmentfault.com_a_1190000004365693_articleHeader2]

19、npm包  
20、用到什么包吗？什么库吗？

21、JQ的连式操作css().

链式操作可以使用上一步得到的对象进行操作。减少多次对dom的后驱

end()可以实现对上一个对象的调用。

andSelf()方法控制jQuery链，使用他本身和得到的对象，一起添加样式。

22、vue。angular。ract。reduct。框架。。。

[Link 1]: http://geek.csdn.net/news/detail/88239
[Image 1]: 
[http_www.html5jscss.com_html5-semantics-section.html]: http://www.html5jscss.com/html5-semantics-section.html
[https_segmentfault.com_a_1190000004365693_articleHeader2]: https://segmentfault.com/a/1190000004365693#articleHeader2