小米 / 前端 / 一面+二面 / 许愿OC

小米

许愿OC,十年老米粉了，给了就签

小米一面8.13

面试情况：挺好

面试时长：40分钟

面试官态度: ★★★★★

面试感受：挺好的，小哥哥很和蔼

开场

自我介绍
为什么会选择前端呐？
JS和Java、python，你觉得你对前端更感兴趣哪个点？
你觉得前端哪些地方需要抠细节呐？

八股

CSS+HTML
1. H5新特性
  
  （补充：增强表单、Canvas、SVG、地理位置、拖放API、WebWorker、WebStorage、WebSocket）
2. 说说localStorage和SessionStorage应用
3. localStorage什么情况下会被清空？如何手动清空
  
  （忘了，尴尬）
  - 保存数据：localStorage.setItem(key,value);
  - 读取数据：localStorage.getItem(key);
  - 删除单个数据：localStorage.removeItem(key);
  - 删除所有数据：localStorage.clear();
  - 得到某个索引的key：localStorage.key(index);
4. SessionStorage什么情况下会被清空？如何手动清空
  
  SessionStorage：用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。
  
  (关闭当前页面数据的销毁与否有两种情况：①如果它的页面中没有其他的超链接，或者没有打开，那么关闭当前页面，数据就会被销毁。②而如果通过当前这个页面，打开了其他的页面，那么只有当这些页面都关闭了，数据才会销毁。)
5. 块级元素和行内元素区别
6. img是块状元素还是行内元素
  
  （尴尬，这个也忘了，img是行内块元素）
7. 定位position
8. 了解fixed吗
  
  （回答的不太好
  - static，默认值。处于文档流的位置。
  - inherit，从父元素继承 position 属性的值。
  - fixed，生成绝对定位的元素。可定位于相对于浏览器窗口的指定坐标。但当祖先元素具有transform属性且不为none时，就会相对于祖先元素指定坐标，而不是浏览器窗口。
  - absolute，相对于距该元素最近的已定位的祖先元素进行定位。
  - relative，相对于该元素在文档中的初始位置进行定位。
9. 了解sticky吗
10. 默认定位是什么定位
11. CSS画三角形
12. flex实现左上角元素移动到左下角
13. flex-shrink
14. align-item和align-content区别
JS
1. let和var
2. 原型链
3. map和forEach区别
  
  （map有返回值（返回一个新数组，原数组不变），forEach返回undefined）
  
  （讲错了，讲了forEach不可以终止，其实他们都不能终止）
4. 那你说说那些其他遍历方法可以终止
  
  （some和every）
5. 检测一个空对象
  
  （for in、Json.stringtyfy与''比较、Object.keys）
HTTP
1. 状态码
2. 同源策略
  
  （为什么要同源没回答好）
3. 跨域解决方案
项目
1. 接触过webpack相关的吗
2. 双绑原理
3. v-if和v-show
4. v-if怎么实现的？
5. display:none和visibility:hidden区别
  
  （按照我的理解，display:none是不会被继承的，否则子元素可以改为display:block之后就能显示。反之visibility:hidden可以继承，子元素也可以通过改变visibility:visible显示）
6. vue组件传值/通讯
7. 用过vuex
8. 说说vuex的api
9. 说说vuex的action和mutation
10. vue-router了解吗
11. 路由原理了解吗

手撕

将数组中所有id变为code，所有title变为name

const list = [{
    id: 'a',
    title: 'A'
}, {
    id: 'b',
    title: 'B',
    children: [{
        id: 'c',
        title: 'C'
    }, {
        id: 'd',
        title: 'D'
    }]
}]