前端面试经

Q:用过类组件还是函数组件？什么是函数式组件？

没有内部状态，没有生命周期钩子函数，没有this(不需要实例化的组件)。

Q:执行setState之后会做哪些操作？ setState内部底层帮你做了哪些事情？（底层方面：提示虚拟dom）

—2个参数，实现同步功能

Q:哪年毕业？

Q:哪些情况必须加上Key？(想实现性能很高)

Q:列表不加key会发生什么？（每条数据的身份证id）

Q:用过refs吗？（答：如何写）

Q:移动端项目做的多吗？(近2年h5,实习做过)

Q: px和rem的优缺点？(px灵活些) 

px精确稳定,只适合web页面查看

em:相对值,适配移动端页面,实现字体适配缩放,一般是相对于body的font-size值, em是相对于父元素的属性而计算的14px=1em。

rem: 

是相对于根元素html的font-size计算,比起em相对于父元素,就必须得知道父元素的属性,所以em很局限.相反rem,就只需要在根元素确定一个参考值,页面下面其他的元素就只参照根元素统一即可

Q: rem如何计算？---OK(html的font-size)

Q:有用过VH,VW吗？场景题：（不会）

把视口宽度分成100份就是vw,把市口高度分成100份就是vh

Q：transform,transition,animate作用和区别？

①transform:2D& 3D旋转, 移动,缩放,

 ②transition: 过渡 width 2s, height 2s, transform 2s; // 宽延伸用2s, 高延伸用2s, transform: 2D旋转

div:hover { // Body中的div
    width: 200px;
    height: 200px;
    -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
    transform: rotate(180deg);
}

③animate: 动画

Q: 弹框自下往上弹出来代码如何实现？＋＋＋

transition和animation分别什么时候会生效/各自使用场景？

不同点：

1. 触发条件不同。transition通常和hover等事件配合使用，由事件触发。animation则和gif动态图差不多，立即播放。

2. 循环。 animation可以设定循环次数。

3. 精确性。 animation可以设定每一帧的样式和时间。tranistion 只能设定头尾。 animation中可以设置每一帧需要单独变化的样式属性， transition中所有样式属性都要一起变化。

4. 与JavaScript的交互。animation与js的交互不是很紧密。tranistion和js的结合更强大。js设定要变化的样式，transition负责动画效果，天作之合，比之前只能用js时爽太多。

结论：

1. 如果要灵活定制多个帧以及循环，用animation.

2. 如果要简单的from to 效果，用 transition.

3. 如果要使用js灵活设定动画属性，用transition.

Q: 数组有哪些插入的方法？---OK（splice、push、unshift）

目前就这几个

Q:splice()的几个参数---（OK）

Q:用户数组的原型方法吗？查号

map()如何实现中断？

---return false ，结束本次循环，进入下一次循环

forEach和map的区别？

区别:forEach()方法不会返回执行结果，而是undefined。也就是说，forEach()会修改原来的数组。而map()方法会得到一个新的数组并返回。

相同点:

• 都是循环遍历数组中的每一项
• 只能遍历数组(亲测)
• forEach和map方法里每次执行匿名函数都支持3个参数，参数分别是item（当前每一项）、index（索引值）、arr（原数组）
• 匿名函数中的this都是指向window

Q:filter和find的区别？

https://blog.csdn.net/qq_39652441/article/details/79248127

const list = [{'name':'1',index:1},{'name':'2'},{'name':'1'}]
let list2 = list.find(i=>i.name==='1') 

let list3 = list.filter(i=>i.name==='1')

console.log(list); [ { name: '1', index: 1 }, { name: '2' }, { name: '1' } ]
console.log(list2); { name: '1', index: 1 }
console.log(list3);[ { name: '1', index: 1 }, { name: '1' } ]
find 和 filter 都是不改变原数组的方法

但是find只查出第一个符合条件的结果像例子里是直接返回了一个对象而不是数组！

，而filter返回全部结果仍然是数组。

Q：如何判断一个对象是不是数组？（instance of、object.toString.call()、isArray()）还有吗？

④Object.getPropertyOf(arr)===Array.Prototype;

⑤arr.constructor === Array;

⑥Array.Prototype.isPrototypeOf(arr);

Q: instance of如何判断一个元素是一个数组？<===>怎么判断出来的<==> 如何手写一个instance of?(凭感觉瞎答)＋＋＋

 

Q:A的类，B类继承A类，let 小b  = new 大B(); 小b instance of 大A 是否为true？（凭感觉瞎猜）

Q:type of 会返回哪些可能的值？（全可以）

Q：a字符串和b字符串？比如一篇文章中如何知道xx某个词语出现多少次？（split (‘xx词语’)）

Q：split()和split(‘’)区别？

split()分割的时候会把多个空格当做一个空格，split(’ ')时候，多个空格也要分割，会分割出来空。

 

Q:promise()用过吗？（new，then catch() 异步，.all()和.race()）

Q:async和await用的多吗？（异步改写成同步）

Q:用promise异步封装一个setTimeout2秒的操作，该如何封装？ （function（）{ setTimeout( 语句,2000)}）

 

Q：箭头函数有用过吗？出场景考察和funtion普通函数在不同场景的this指向？如何让var obj = { a: ()=>{} } 箭头函数如何实现function的效果？引发问apply, bind,call区别？

Q: let、 const 、var区别？(会)  场景题：for(let I;i<10;i++){ console.log(‘打印结果’，)} let的打印结果:10个10，改成var后，打印出1-10。了、连问：let如何实现var的打印效果？《===》有哪些方法可以保证他的作用域？

Q: 扩展运算符用过吗？是深拷贝还是浅拷贝？（浅拷贝）

Q：列举深拷贝的例子？（JSON.stringify(JSON.parse())）有哪些对象不能被深拷贝？什么对象是不能被序列化的？（errror,正则，日期）引发问：如何序列化一个window？（回去试试）

Q: git 场景：错误的代码提交上去了，如何回退？还要保留？（git log、git stash、git reset 前7位版本号）

Q:移动端页面卡住了如何排查报错？（safriy控制台、debugger打断点、）

Q:抓包工具（连接代理将内容挪到手机上）

Q:快速排序的原理？（二分法）

Q:递归实现一个算法？ 就声明1个变量，只用这一个变量该如何实现？（不想声明太多的变量）