【学姐面试宝典】前端基础篇Ⅳ（JavaScript）_前端javascript宝典

最新推荐文章于 2024-07-12 17:53:13 发布

jarckv

最新推荐文章于 2024-07-12 17:53:13 发布

阅读量631

点赞数 29

分类专栏：程序员文章标签：大数据面试学习

本文链接：https://blog.csdn.net/jarckv/article/details/138880609

版权

程序员专栏收录该内容

59 篇文章 0 订阅

订阅专栏

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上大数据知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

需要这份系统化资料的朋友，可以戳这里获取

onmouseover 和 onmouseenter 的区别

onmouseover：当鼠标移入元素或其子元素都会触发事件，所以有一个重复触发冒泡的过程。对应的移出事件是onmouseout。
onmouseenter：当鼠标移入元素本身（不包含元素的子元素）会触发事件，也就是不会冒泡，对应的移出事件是onmouseleave。

==和

===

===、以及 Object.is 的区别

== 主要存在：强制转换成 number，null==undefined

" "==0 //true
"0"==0 //true
" " !="0" //true
123=="123" //true
null==undefined //true

Object.is（）方法判断两个值是否是相同的值，主要的区别就是+0 != -0，而 NaN

==NaN
(相对比

===

===和

==的改进)

null == undefined 为什么

要比较相等性之前，不能将 null 和 undefined 转换成其他任何值，但 null == undefined 会返回 true 。ECMAScript 规范中是这样定义的。

this 的指向有哪几种

默认绑定：全局环境中，this 默认绑定到 window。
隐式绑定：一般地，被直接对象所包含的函数调用时，也称为方法调用，this 隐式绑定到该直接对象。
隐式丢失：隐式丢失是指被隐式绑定的函数丢失绑定对象，从而默认绑定到 window。
显式绑定：通过 call()、apply()、bind()方法把对象绑定到 this 上，叫做显式绑定。
new 绑定：如果函数或者方法调用之前带有关键字new，它就构成构造函数调用。对于 this 绑定来说，称为 new 绑定。

写一个函数，第一秒打印 1，第二秒打印 2

//方法一：用 let 块级作用域
for (let i = 1; i < 6; i++) {
      setTimeout(() => {
        console.log(i)
      }, 1000 \* i)
    }
//方法二：闭包
for (var i = 1; i < 6; i++) {
      (function (i) {
        setTimeout(function () {
          console.log(i)
        }, 1000 \* i)
      })(i)
    }

JS 的各种位置，比如 clientHeight、scrollHeight、offsetHeight、以及 scrollTop、clientTop的区别

clientHeight：表示可视区域的高度，不包含 border 和滚动条。
offsetHeight：表示可视区域的高度，包含了 border 和滚动条。
scrollHeight：表示了所有区域的高度，包含了因为滚动被隐藏的部分。
clientTop：表示边框 border 的厚度，在未指定的情况下一般为 0。
scrollTop：滚动后被隐藏的高度，获取对象相对于由 offsetParent 属性指定的父坐标(css定位的元素或 body 元素)距离顶端的高度。

将原生的 ajax 封装成 promise

var myNewAjax = function (url) {
   return new Promise(function (resolve, reject) {
     var xhr = new XMLHttpRequest();
     xhr.open('get', url);
     xhr.send(data);
     xhr.onreadystatechange = function () {
       if (xhr.status == 200 && readyState == 4) {
         var json = JSON.parse(xhr.responseText);
         resolve(json)
       } else if (xhr.readyState == 4 && xhr.status != 200) {
         reject('error');
       }
     }
   })
}

性能优化

减少 HTTP 请求
使用内容发布网络（CDN）
添加本地缓存
压缩资源文件
将 CSS 样式表放在顶部，把 javascript 放在底部（浏览器的运行机制决定）
避免使用 CSS 表达式
减少 DNS 查询
使用外部 javascript 和 CSS
避免重定向
图片 lazyLoad

今天的分享就到这里啦✨

\textcolor{red}{今天的分享就到这里啦✨}

今天的分享就到这里啦✨

原创不易，还希望各位大佬支持一下

\textcolor{blue}{原创不易，还希望各位大佬支持一下}

原创不易，还希望各位大佬支持一下

🤞

点赞，你的认可是我创作的动力！

\textcolor{green}{点赞，你的认可是我创作的动力！}

点赞，你的认可是我创作的动力！

⭐️

收藏，你的青睐是我努力的方向！

\textcolor{green}{收藏，你的青睐是我努力的方向！}

收藏，你的青睐是我努力的方向！

✏️

评论，你的意见是我进步的财富！

\textcolor{green}{评论，你的意见是我进步的财富！}