滴滴前端--小白面试日记

把被打击当成一种习惯，钢铁就炼成了。奥利给！

1.自我介绍

 介绍了教育经历和自学前端的过程（自己不会的技能或者没做过的东西不要在简历上写，面试官建当场建议）

2.css置灰

参考链接：https://blog.csdn.net/butterfly5211314/article/details/81050588

代码展示：

html {
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
  filter: gray;
  filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
}

3.animation和transition动画的区别

参考链接：https://blog.csdn.net/cccct1/article/details/82743631

4.标签语义化的意义和有哪些标签语义化

参考链接：https://blog.csdn.net/cccct1/article/details/82743631

5.有没有用css写过原生API 写过哪些？

参考链接：https://blog.csdn.net/weixin_44137393/article/details/86550661

6.实现过页面一键置顶功能

参考链接：https://blog.csdn.net/minedayu/article/details/13276223

7.css隐藏元素的方法

参考链接：https://blog.csdn.net/weixin_42160828/article/details/80980333

8.css伪类和伪元素还有after和before实现

参考链接：

https://blog.csdn.net/weixin_42381413/article/details/88827375?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-3.channel_param&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-3.channel_param

https://www.jianshu.com/p/7d86345ac877

9.编程题：var arr = [ [1, 2, 2], [3, 4, 5, 5],[6, 7, 8, 9,[11, 12,[12, 13, [ 14 ] ] ] ], 10];编写一个程序将数组扁平化去并除其中重复部分数据，最终得到一个升序且不重复的数组。

function flat(arr) {
    // 验证 arr 中，还有没有深层数组 [1, 2, [3, 4]]
    const isDeep = arr.some(item => item instanceof Array)
    if (!isDeep) {
        return arr // 已经是 flatern [1, 2, 3, 4]
    }
    // oncat只能解决单层[]
    const res = Array.prototype.concat.apply([], arr)
    return flat(res) // 递归
} 
const res = flat( [1, 2, [3, 4, [10, 20, [100, 200]]], 5] )
console.log(res)
 
function flattern(arr) {
  return arr.reduce((preValue, currValue, currIndex, array) => {
    return preValue.concat(Array.isArray(currValue) ? flattern(currValue) : currValue)
  }, []) // []作为第一个preValue
}
 
// toString & split
function flattern2(arr) {
  return arr.toString().split(',').map(item => {
    return Number(item) // split分隔后数组元素为字符串形式, 需要转换为数值形式
  })
}
 
// join & split
function flattern3(arr) {
  return arr.join(',').split(',').map(item => { // join方法和toString方法效果一样?
    return parseInt(item)
  })
}
 
// 扩展运算符
function flattern5(arr) {
  while (arr.some(item => Array.isArray(item))) { // 如果数组元素中有数组
    arr = [].concat(...arr) // [].concat(...[1, 2, 3, [4, 5]]) 扩展运算符可以将二维数组变为一维的
  }
  return arr
}