阿里钉钉前端简历评估面试题
这是我前端第一面，献给了阿里钉钉部门，小姐姐很好很温柔，整个面试体验很好，但自己确实比较菜，简历面都挂了，重新整理心情，好好复盘一下面试内容；
1. 自我介绍
大家面试前一定要提前演练一下，推荐面对镜子自己对自己说一下，我当时太紧张有点卡壳。。。
我当时在B站看到有一种自我介绍思路还挺牛的，大家也可以参考一下，就是把自己的人生当成游戏，自己就是从新手村不断打怪升级的过程，然后才走到面试这一步，只不过你要把每一步都和职业发展联系在一起；
B站推荐视频
2. 有意向到江浙沪地带吗；
其实前面几个问题都是围绕着简历来问的，后面才开始问技术问题；
我本科是在湖南，研究生是在广东，所以面试官问有没有意向来江浙沪，大家可以打消面试官的疑虑，最好说有，然后说明理由，可以说有家人在那边啥的；
3. 研究生是保研吗；
4. 你是从哪一年开始学习前端的？
5. 你们现在有时间出来实习吗？
最好要说有，不然不是浪费面试官时间嘛
6. 你们实验室是做偏学术研究型还是项目型的；
7. 你能说说你项目经历遭遇的难点吗？
8. 你的实习项目中角色职责是什么；
9. 当前时间格式化年月日时分秒，应该怎么去做；
可以使用javascript中的Date对象来格式化时间戳。具体步骤如下：
- 创建一个Date对象，并传入时间戳（单位为毫秒）作为参数；
- 使用Date对象的方法获取各个时间部分的值，例如
getFullYear()获取年份，getMonth()获取月份（注意获取的月份是0-11，需要加1），getDate()获取日期，getHours()获取小时，getMinutes()获取分钟，getSeconds()获取秒数； - 将获取到的各个时间部分的值格式化成字符串，可以使用字符串的padStart方法来添加前导零；
- 将格式化后的时间部分字符串拼接在一起，形成完整的时间字符串；
具体示例如下所示：
function formatTimestamp(timestamp) {
const date = new Date(timestamp);
const year = date.getFullYear().toString().padStart(4, '0');
const month = (date.getMonth() + 1).toString().padStart(2, '0');
const day = date.getDate().toString().padStart(2, '0');
const hours = date.getHours().toString().padStart(2, '0');
const minutes = date.getMinutes().toString().padStart(2, '0');
const seconds = date.getSeconds().toString().padStart(2, '0');
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
}
// 示例用法
const timestamp = 1615150800000; // 时间戳：2021-03-08 08:00:00
const formattedTime = formatTimestamp(timestamp);
console.log(formattedTime); // 输出 "2021-03-08 08:00:00"
JavaScript 中还有很多第三方库可以用来格式化日期时间，Moment.js
const moment = require('moment');
const timestamp = 1615150800000; // 时间戳：2021-03-08 08:00:00
const formattedTime = moment(timestamp).format('YYYY-MM-DD HH:mm:ss');
console.log(formattedTime); // 输出 "2021-03-08 08:00:00"
day.js
const dayjs = require('dayjs');
const timestamp = 1615150800000; // 时间戳：2021-03-08 08:00:00
const formattedTime = dayjs(timestamp).format('YYYY-MM-DD HH:mm:ss');
console.log(formattedTime); // 输出 "2021-03-08 08:00:00"
10. 场景题：用户访问页面，第一次访问的时候会有一个新手引导，当他下一次访问的时候就不会出现这样一个引导，这个逻辑你是怎么控制的；
用localstorage去存储，设置一个属性的值为空，当用户访问过了，就设置成有值，通过判断这个属性是否有值，有值就说明已经访问过了，就不再展示新手引导页面；
11. 既然说到localstorage，我问一个场景，我在同一台电脑上，我在Chrome浏览器往localstorage里面种了一个标记，我在这台浏览器的Safira浏览器能不能读到这个localstorage的标记；
不同浏览器无法共享localstorage和sessionstorage的值，相同浏览器下，如果是同源窗口（协议、域名、端口一致），不同页面可以共享localStorage，Cookies值，通过跳转的页面可以共享sessionStorage值。
12. 那localstorage和sessionstorage的区别你能说一下吗；
生命周期不一样，localStorage:localStorage的生命周期是永久的，关闭页面或浏览器之后localStorage中的数据也不会消失。localStorage除非主动删除数据，否则数据永远不会消失。
sessionStorage的生命周期是在仅在当前会话下有效。sessionStorage引入了一个“浏览器窗口”的概念，sessionStorage是在同源的窗口中始终存在的数据。只要这个浏览器窗口没有关闭，即使刷新页面或者进入同源另一个页面，数据依然存在。但是sessionStorage在关闭了浏览器窗口后就会被销毁。同时独立的打开同一个窗口同一个页面，sessionStorage也是不一样的。
应用场景：localStoragese：常用于长期登录（+判断用户是否已登录），适合长期保存在本地的数据。sessionStorage：敏感账号一次性登录；
存储位置：localStorage和sessionStorage都保存在客户端，不与服务器进行交互通信。大小都是5MB；
13. 我们在当前页面怎么拿到浏览器所处的类型和版本；(好像是Navigation,面试官是这样说的)
具体可以看看这篇文章：
JS 获取当前浏览器类型（IE、Chrome、Edge、Firefox、Opera、UC、QQ）
14. 我看你项目经历，简历上用的都是react是吗，很多同学自学的时候都用的vue,为什么选择react;（面试官说现在他们技术栈也是react）
15. 你现在用的react是哪个版本的？
16. 你现在react里面常用的组件形式是什么，是类还是hooks;
17. 你最近写的react项目是哪个；
18. 你讲一下这个项目难点；
19. 再问一个js里面的小问题：我们数组遍历map和foreach他们两个的区别是什么；
forEach()方法不会返回执行结果，而是undefined。也就是说，forEach()会修改原来的数组。而map()方法会得到一个新的数组并返回。
20. 再问一个css方面的问题：现在有个div，我们不知道div宽高是不知道，但是div里面是有两个元素，你怎么设置这两个元素垂直水平居中排列；
使用弹性布局实现垂直左右居中：
display:flex; 设置.wrap为弹性布局
justify-content:center;定义项目在主轴(水平方向)上居中对齐
align-items:center;定义项目在交叉轴(垂直方向)上居中对齐
display:table-cell
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Demo001_displayTable</title>
<style>
/*** table-cell middle center组合使用 ***/
.cell {
display: table-cell;
vertical-align: middle;
text-align: center;
width: 240px;
height: 180px;
border:1px solid #666;
}
</style>
</head>
<body>
<div class="cell">
<p>我爱你</p>
</div>
<div class="cell">
<p>我爱你</p><p>亲爱的中国</p>
</div>
<div class="cell">
<p>我爱你</p><p>亲爱的中国</p><div style="width:100px;height:50px;border:1px solid #ccc;display:inline-block">div(inline-block)</div>
</div>
</body>
</html>
transform:translate(-50%,-50%)
.content {
padding:10px;
background:green;
color:#fff;
position:absolute;
top:50%;
left:50%;
border-radius: 5px;
-webkit-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
transform:translate(-50%,-50%);
}
21. 在页面性能优化这一块，你觉得可以从哪些方面着手；
我觉得这篇文章写的还可以，大家也可以参考一下这篇文章：
从一道经典的前端面试题——谈前端性能优化
22.手撕代码1
- 对两个多维数组拼接成一个数组，并进行降维排序，最终答案中不能有重复元素；
function Num1(num1,num2){
var newNum1=num1.flat(Infinity);
var newNum2=num2.flat(Infinity);
var newNum=newNum1.concat(newNum2);
var result=[];
for(var i=0;i<newNum.length;i++){
if(!result.includes(newNum[i]){result.push(Number(newNum[i]))}
else{continue;}
}
var result=(result.sort(a,b)=>a-b));
return result;
}
- 用vue或者react实现简单页面：页面中有两个输入框和一个按钮，点击按钮计算两个输入框的和，如果输入的不是数字，就在按钮后面显示错误，否则在按钮后面显示最后的答案，同时按钮用防抖函数实现；
<!--
* @Descripption:
* @version:
* @Author: LiYuan
* @Date: 2023-04-16 20:10:33
* @LastEditors: LiYuan
* @LastEditTime: 2023-04-16 22:41:10
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body>
<div id="like_button_container" style="height: 200px;"></div>
<script type="text/babel">
function Div1(props){
const input1= React.useRef(0);
const input2=React.useRef(0);
const [state1,setState1]=React.useState(false);
const [state2,setState2]=React.useState(0);
const addNumber=(input1,input2)=>{
console.log(input1)
if(Number(input1.current.value)!==NaN&&Number(input2.current.value!==NaN)){
setState1(false);
var sum=Number(input1.current.value)+Number(input2.current.value);
setState2(sum);
}else{
setState1(true);
}
}
if(state1){
return <div>
<input ref={input1} />
<input ref={input2}/>
<button onClick={()=>addNumber(input1,input2)}>相加</button>
<p>输入的必须是数字</p>
</div>
}else{
return <div>
<input ref={input1} type='text'/>
<input ref={input2} type='text'/>
<button onClick={()=>addNumber(input1,input2)}>相加</button>
<p>{state2}</p>
</div>
}
}
const domContainer = document.querySelector('#like_button_container');
ReactDOM.render(<Div1/>,domContainer);
</script>
</body>
</html>