3-2020-美团-前端-面试

目录

 

1.自我介绍

2.为什么要到***（城市）？为什么想辞职？为什么选择前端？

3.场景题（算法）：

4.左右上下垂直

5.css flex

6.angular-js脏检查？

angular呢？

7.判断nodejs异步输出顺序（setTimeOut为什么最后输出, promise内部的顺序）

8.列出知道的数组方法

9.给一个数组排序，列出所有的方法

快排法的时间复杂度：

如何计算的？

10.数组去重，列出所有的方法

11.string常用的方法

12.你觉得自己还有什么亮点？

---

1.自我介绍

2.为什么要到***（城市）？为什么想辞职？为什么选择前端？

3.场景题（算法）：

3.1斐波那契

3.2利用斐波那契把数组变成树结构

input=[

    {id:1,value:apple,parentID:null},

    {id:2,value:bear,parentID:1},

    {id:3,value:car,parentID:1},

    {id:4,value:doctor,parentID:2},

    {id:5,value:eraser,parentID:2},

    {id:6,value:flag,parentID:3}]

output={

    id:1,

    value:apple,

    children[

        id:2,

        value:bear,

        children[

    ]

]}

4.左右上下垂直

<div class='parent' >

<div class = 'children'></div>

</div>

实现parent全局布局，children左右上下垂直

1 百分比布局：基于绝对定位，要求有固定的宽高。不存在兼容性问题，但是需要事先知道子元素的宽高。对父元素定位，对子元素绝对定位，子元素left:50%,top:50%;margin-left:-子元素一半的宽度;margin-top: - 子元素一半的高度 

.parent {
	position: relative;
	width: 300px;
	height: 300px;
	border: 1px solid #333;
	margin: 50px auto;
}

.children {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100px;
	height: 100px;
	border: 1px solid #333;
	margin-top: -50px;
	margin-left: -50px;
}

2 定位 + 平移(translate变形函数)中使用百分比,不依赖固定宽高,不需要事先知道子元素的宽高，相对来说比方法1更加方便。缺点：使用了CSS3的属性(transform)，存在兼容性问题；

.parent {
	position: relative;
	width: 300px;
	height: 300px;
	border: 1px solid #333;
	margin: 50px auto;
}

.children {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100px;
	height: 100px;
	border: 1px solid #333;
	transform: translate(-50%, -50%);
}

3 伸缩盒布局：基于Flexbox解决方案-最佳解决方案，只需要考虑flex。相对于前面几种方式，flex布局无疑方便很多，子元素自动居中 ，但同样存在兼容性问题；

.parent {
	display: flex;
	justify-content: center; 
	align-items: center; 
	width: 300px;
	height: 300px;
	border: 1px solid #333;
	margin: 50px auto;
}

.children {	
	width: 100px;
	height: 100px;
	border: 1px solid #333;
}

 

4 定位布局：父子元素进行定位，对子元素绝对定位。注意：一定要加上margin：auto；特点：此方式不存在兼容性问题。

.parent {
	position: relative;
	width: 300px;
	height: 300px;
	border: 1px solid #333;
	margin: 50px auto;
}

.children {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	width: 100px;
	height: 100px;
	border: 1px solid #333;
	margin: auto;
}

5 父元素 display:table-cell; vertical-align:middle; 子元素变成一个内联元素display:inline-block

.parent{
    width:200px;
    height:200px;
    display:table-cell;
    vertical-align:middle;
    text-align: center;
}
.children{
    width:100px;
    height:100px;
    display:inline-block;
}

5.css flex

定义：Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。可以随着页面大小的改变自适应页面布局。目前被所有浏览器所支持。可以：

• 在不同方向排列元素
• 重新排列元素的显示顺序
• 更改元素的对齐方式
• 动态地将元素装入容器

设置：块级元素： .box{ display:flex; }
           行内元素也可以设置成flex布局: .box{ display:inline-flex; }。设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。

常见属性：

• flex-direction：排列方向。 row | column | row-reserve | column-reserve

• flex-wrap: 是否换行。 wrap | nowrap | wrap-reserve
• flex-flow：flex-direction&&flex-wrap简写模式。 默认值为：row nowrap。
• justify-content：定义了主轴的对其方式。 flex-start | flex-end | center | space-between | space-around;
• align-item：交叉轴上如何对齐。flex-start | flex-end | center | baseline | stretch;

内容宽度等分：

.main{
	width:100%;
    display:flex;
    height:100%;
    
}
.main div{
	flex:1;
    height:100%;
    border:1px solid #333;
}

	<div class="main">
    	<div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
    </div>

左右布局，一侧定宽一侧自适应填满：

.main{
	width:100%;
    display:flex;
    height:100%;
    
}
.left,.right{
	height:100%;
  	border:1px solid #333;
 	box