每天10个前端小知识 <Day 5>
前端面试基础知识题
1. typeof 与 instanceof 有什么区别
typeof与instanceof都是判断数据类型的方法，区别如下：
typeof会返回一个变量的基本类型，instanceof返回的是一个布尔值。instanceof 可以准确地判断复杂引用数据类型，但是不能正确判断基础数据类型。而 typeof 也存在弊端，它虽然可以判断基础数据类型（null 除外），但是引用数据类型中，除了 function 类型以外，其他的也无法判断。可以看到，上述两种方法都有弊端，并不能满足所有场景的需求 如果需要通用检测数据类型，可以采用Object.prototype.toString，调用该方法，统一返回格式“[object Xxx]” 的字符串。
2. JavaScript中的事件模型有哪些
原始事件模型（DOM0级），标准事件模型（DOM2级），IE事件模型（基本不用）。具体描述请点击此链接（https://fe.ecool.fun/topic/82a3da79-23fb-42be-8f4b-9d52fc595954?orderBy=updateTime&order=desc&titleKey=%E4%BA%8B%E4%BB%B6%E6%A8%A1%E5%9E%8B）
3. == 和 ===有什么区别，分别在什么情况使用？
等于操作符用两个等于号（ == ）表示，如果操作数相等，则会返回 true。
等于操作符（==）在比较中会先进行类型转换，再确定操作数是否相等。
两个都为简单类型，字符串和布尔值都会转换成数值，再比较。简单类型与引用类型比较，对象转化成其原始类型的值，再比较。两个都为引用类型，则比较它们是否指向同一个对象。null 和 undefined 相等。存在 NaN 则返回 false全等操作符由 3 个等于号（ === ）表示，只有两个操作数在不转换的前提下相等才返回 true。即类型相同，值也需相同。
4. Javscript数组的常用方法有哪些？
增 - 下面前三种是对原数组产生影响的增添方法，第四种则不会对原数组产生影响
push()
unshift()
splice()
concat()
删 - 下面三种都会影响原数组，最后一项不影响原数组：
pop()
shift()
splice()
slice()
改 - 即修改原来数组的内容，常用splice
splice()
查 - 即查找元素，返回元素坐标或者元素值
indexOf()
includes()
find()
具体描述请点击此链接（https://fe.ecool.fun/topic/4b009a64-6d98-4469-89d4-9c254d682fa6?orderBy=updateTime&order=desc&titleKey=%E6%95%B0%E7%BB%84%E7%9A%84%E5%B8%B8%E7%94%A8）
5. 遍历数组的方式有哪些？
javascript原生遍历方法的建议用法：
用for循环遍历数组
用for...in遍历对象
用for...of遍历类数组对象（ES6）
用Object.keys()获取对象属性名的集合
具体描述请点击此链接（https://fe.ecool.fun/topic/914e2cac-b426-467e-b61c-e0987031ea84?orderBy=updateTime&order=desc&titleKey=遍历）
6. async/await 怎么进行错误处理？
(async () => { const fetchData = () => { return new Promise((resolve, reject) => { setTimeout(() => { resolve('fetch data is me') }, 1000) }) } // 抽离成公共方法 const awaitWrap = (promise) => { return promise .then(data => [null, data]) .catch(err => [err, null]) } const [err, data] = await awaitWrap(fetchData()) console.log('err', err) console.log('data', data) // err null // data fetch data is me })()
7. CSS动画和JS实现的动画分别有哪些优缺点？
CSS动画：
优点 - 浏览器可以对动画进行优化。代码相对简单,性能调优方向固定。对于帧速表现不好的低版本浏览器，CSS3可以做到自然降级，而JS则需要撰写额外代码。
缺点 - 运行过程控制较弱,无法附加事件绑定回调函数。代码冗长，想用CSS实现稍微复杂一点动画,最后CSS代码都会变得非常笨重。
JS动画：
优点 - 控制能力很强, 可以在动画播放过程中对动画进行控制：开始、暂停、回放、终止、取消都是可以做到的。动画效果比css3动画丰富,有些动画效果，比如曲线运动,冲击闪烁,视差滚动效果，只有js动画才能完成。CSS3有兼容性问题，而JS大多时候没有兼容性问题。
缺点 - 代码的复杂度高于CSS动画。JavaScript在浏览器的主线程中运行，而主线程中还有其它需要运行的JavaScript脚本、样式计算、布局、绘制任务等,对其干扰导致线程可能出现阻塞，从而造成丢帧的情况。
8. 前端实现动画有哪些方式？
前端常用的动画实现方式有以下种：
css3的transition 属性
css3的animation 属性
原生JS动画
使用canvas绘制动画
SVG动画
Jquery的animate函数
使用gif图片
具体描述请点击此链接（https://fe.ecool.fun/topic/8b516cb7-fa94-4d68-929f-d3c628d1b7a2?orderBy=updateTime&order=desc&titleKey=动画）
9. 写一个返回数据类型的函数，要求自定义的类实例化的对象返回定义的类名
function myTypeof(data) { var toString = Object.prototype.toString; var dataType = data instanceof Element ? "Element" : toString.call(data).replace(/\[object\s(.+)\]/, "$1") if(dataType === 'Object'){ return data.constructor.name } return dataType };
具体描述请点击此链接（https://fe.ecool.fun/topic/c25081e4-6374-4e78-abec-1a31999e528e?orderBy=updateTime&order=desc&titleKey=返回数据类型）
10. cookie、localStorage和sessionStorage 三者之间有什么区别
生命周期
cookie：可设置失效时间，没有设置的话，默认是关闭浏览器后失效
localStorage：除非被手动清除，否则将会永久保存。
sessionStorage：仅在当前网页会话下有效，关闭页面或浏览器后就会被清除。
应用场景
从安全性来说，因为每次http请求都会携带cookie信息，这样无形中浪费了带宽，所以cookie应该尽可能少的使用，另外cookie还需要指定作用域，不可以跨域调用，限制比较多。但是用来识别用户登录来说，cookie还是比stprage更好用的。
其他情况下，可以使用storage，就用storage。storage在存储数据的大小上面秒杀了cookie，现在基本上很少使用cookie了。
localStorage和sessionStorage唯一的差别一个是永久保存在浏览器里面，一个是关闭网页就清除了信息。localStorage可以用来夸页面传递参数，sessionStorage用来保存一些临时的数据，防止用户刷新页面之后丢失了一些参数。
文章出自：https://juejin.cn/post/7129420025814843406
作者：马祎繁