每天10个前端小知识＜Day 5＞

最新推荐文章于 2024-06-17 23:49:16 发布

前端小天才

最新推荐文章于 2024-06-17 23:49:16 发布

阅读量823

点赞数 19

文章标签：前端

本文链接：https://blog.csdn.net/2301_76796512/article/details/135547247

版权

前端面试基础知识题

1. typeof 与 instanceof 有什么区别

typeof与instanceof都是判断数据类型的方法，区别如下： typeof会返回一个变量的基本类型，instanceof返回的是一个布尔值。instanceof 可以准确地判断复杂引用数据类型，但是不能正确判断基础数据类型。而 typeof 也存在弊端，它虽然可以判断基础数据类型（null 除外），但是引用数据类型中，除了 function 类型以外，其他的也无法判断。可以看到，上述两种方法都有弊端，并不能满足所有场景的需求如果需要通用检测数据类型，可以采用Object.prototype.toString，调用该方法，统一返回格式“[object Xxx]” 的字符串。

2. JavaScript中的事件模型有哪些

原始事件模型（DOM0级），标准事件模型（DOM2级），IE事件模型（基本不用）。具体描述请点击此链接

3. == 和 ===有什么区别，分别在什么情况使用？

等于操作符用两个等于号（ == ）表示，如果操作数相等，则会返回 true。
等于操作符（==）在比较中会先进行类型转换，再确定操作数是否相等。
两个都为简单类型，字符串和布尔值都会转换成数值，再比较。简单类型与引用类型比较，对象转化成其原始类型的值，再比较。两个都为引用类型，则比较它们是否指向同一个对象。null 和 undefined 相等。存在 NaN 则返回 false全等操作符由 3 个等于号（ === ）表示，只有两个操作数在不转换的前提下相等才返回 true。即类型相同，值也需相同。

4. Javscript数组的常用方法有哪些？

增 - 下面前三种是对原数组产生影响的增添方法，第四种则不会对原数组产生影响

push()
unshift()
splice()
concat()

删 - 下面三种都会影响原数组，最后一项不影响原数组：

pop()
shift()
splice()
slice()

改 - 即修改原来数组的内容，常用splice

splice()

查 - 即查找元素，返回元素坐标或者元素值

indexOf()
includes()
find()

具体描述请点击此链接

5. 遍历数组的方式有哪些？

javascript原生遍历方法的建议用法：

用for循环遍历数组
用for...in遍历对象
用for...of遍历类数组对象（ES6）
用Object.keys()获取对象属性名的集合

遍历.png

具体描述请点击此链接

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图片

具体描述请点击此链接

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 
};

具体描述请点击此链接

10. cookie、localStorage和sessionStorage 三者之间有什么区别

生命周期

cookie：可设置失效时间，没有设置的话，默认是关闭浏览器后失效
localStorage：除非被手动清除，否则将会永久保存。
sessionStorage：仅在当前网页会话下有效，关闭页面或浏览器后就会被清除。

应用场景
从安全性来说，因为每次http请求都会携带cookie信息，这样无形中浪费了带宽，所以cookie应该尽可能少的使用，另外cookie还需要指定作用域，不可以跨域调用，限制比较多。但是用来识别用户登录来说，cookie还是比stprage更好用的。
其他情况下，可以使用storage，就用storage。storage在存储数据的大小上面秒杀了cookie，现在基本上很少使用cookie了。
ie还需要指定作用域，不可以跨域调用，限制比较多。但是用来识别用户登录来说，cookie还是比stprage更好用的。
其他情况下，可以使用storage，就用storage。storage在存储数据的大小上面秒杀了cookie，现在基本上很少使用cookie了。
localStorage和sessionStorage唯一的差别一个是永久保存在浏览器里面，一个是关闭网页就清除了信息。localStorage可以用来夸页面传递参数，sessionStorage用来保存一些临时的数据，防止用户刷新页面之后丢失了一些参数。