cavszhouyou / front-end-interview-notebook Goto Github PK

View Code? Open in Web Editor NEW

7.3K 7.3K 1.6K 966 KB

:ant:前端面试复习笔记

front-end-interview-notebook's Introduction

Hi，我是晓天 👋

front-end-interview-notebook's People

Contributors

Stargazers

Watchers

Forkers

hanpengyang hitrailmaster jinyi2000 hellotest1024 libin1991 xianzhiyun avalian ilssn l0ittle bang-du ryanxjs genesislq zonghaoli777 fkhy456 web-one-git qappleh zanderzhang wanghngleee code945 ajingxxd geek665 crystalcst iwannerfly tearill 529303664 nealchristmas ytp327 ngdlbq rancho-xjq liumengge sirros seamanwarm 007sair yujiangming kzhiwei wwwjason1994 mzhren t122760862 interestingprojectlist cc-ww hachiaaa q788799660 bgcode-119 chenky zxhycxq lfnb sanyuesiyuewuyue apgyapgy yang0101 jinanxiaolaohu 627668410 hesuijun njdtdenggang santanderauhauh edith-w-zhang bolingsun xie-chen-yi x-yy woshidaniugroup zhangyezeng jimmeryzou stamhe ocean-zh sancdvs momikio yao-yue zys-contrib wangdongya hhy5277 baoguo cat2000 oldding666 lmyyyyy fangfuyan freezesoul smallbonelu zgfang1993 wjhhhh666 kaisruintao garfielden zhangweiabc li-yangfei jenvyxu ansonznl lvxm0 azzr1234 tchigher awesome-archive hardesthu programmerhl wenbugong qiujuyingshuang tidemaker hongyuji xiongjunhan priming codemingge dalovehui lzzlzz gujinlonghaha

front-end-interview-notebook's Issues

Javascript 159题，判断空对象忽略了Symbol

let obj = { [Symbol('a')]:2}
Object.keys(obj).length ===0 // true

js第15题

https://stackoverflow.com/questions/33164725/confusion-between-isnan-and-number-isnan-in-javascript

你的理解有点错误～～

是我看错了你这边的理解～-。-

JavaScript的17点转换成字符串

null 和 undefined 没有toString()方法
String()方法才可以将null 转换为 "null"，undefined 转换为 "undefined"

非常感谢大佬分享！有个问题想请教一下

js知识总结第一条

js 一共有六种基本数据类型，分别是 Undefined、Null、Boolean、Number、String，还有在 ES6 中新增的 Symbol 和 ES10 中新增的 BigInt 类型。

这里应该是笔误少写了object？

自适应正方形的问题报告

第一种方法绘制的正方形其实有一点点需要注意的地方，即父元素的大小（body）并不等于视窗大小，因为<body>在css中默认存在margin，故正方形的宽度略小于高度（在1920*1080的比例下为129.500*131.094）

css章节中第三个节点中:after问题。

大佬是不是少写了个:号啊，::after。
如果要举例伪类和伪元素，改为::before和:hover是否会更好一点。

JavaScript面试题总结的最后一题

小哥，JavaScript面试题的最后一题的正则要加修饰符i，不然句首的字母和一些专有名词的大写字母匹配不到。

有考虑增加框架类的面试总结吗？

React、Vue、Angular 相关的问题在面试中还是遇到挺多的
感觉可以单独开个类别🤔

javascript总结中有句话咋读都顺不下来

“这个对象包含了可以由该构造函数的所有实例共享的属性和方法” 这句描述是不是有点问题？

css.md中不少属性值间的空格丢失了

比如margin: 0auto 11auto border-color: tomatotransparenttransparenttransparent;之类的
虽然不至于造成阅读困难，但总是不严谨

本人介绍

本人从事十年年大数据相关工作，做过用户增长，BI，大数据中台，知识图谱，AI中台，擅长大数据AI相关技术栈。在CSDN输出很多专栏，是CSDN博客专家，CSDN大数据领域优质创作者，2018年参与共建WeDataSphere开源社区，社区属性是数据相关综合社区，共建过DataSphereStudio（开发管理集成框架），Exchangis（数据交换工具），Streamis(流式应用开发管理系统)，Apache Linkis (计算中间件) 。个人发起SolidUI数据可视化社区。Apache Asia 2022 讲师，Hadoop Meetup 2022 讲师，WeDataSphere Meetup 2022讲师。Apache Linkis Committer , EXIN DPO (数据保护官)。

2023年2月开始创业，全职运营SolidUI。

SolidUI介绍

一句话生成任何图形。

随着文本生成图像的语言模型兴起，SolidUI想帮人们快速构建可视化工具，可视化内容包括2D,3D,3D场景，从而快速构三维数据演示场景。SolidUI 是一个创新的项目，旨在将自然语言处理（NLP）与计算机图形学相结合，实现文生图功能。通过构建自研的文生图语言模型，SolidUI 利用 RLHF (Reinforcement Learning Human Feedback) 流程实现从文本描述到图形生成的过程。

SolidUI Gitee https://gitee.com/CloudOrc/SolidUI
SolidUI GitHub https://github.com/CloudOrc/SolidUI
SolidUI 官网地址 https://cloudorc.github.io/SolidUI-Website/
Discord https://discord.gg/NGRNu2mGeQ
SolidUI v0.3.0 发版文章 https://mp.weixin.qq.com/s/KEFseiQJgK87zvpslhAAXw
SolidUI v0.3.0 概念视频 https://www.bilibili.com/video/BV1GV411A7Wn/
SolidUI v0.3.0 教程视频 https://www.bilibili.com/video/BV1xh4y1e7j6/
SolidUI 演示环境 http://www.solidui.top/ admin/admin

JavaScript.md 163. EventEmitter 实现中 once方法实现存在函数this指向的问题

once(event, callback) {
    let wrapFun = (...args) =>{
      callback(...args);

      this.off(event, wrapFun);
    };
    this.on(event, wrapFun);

    return this;
  }
或者  
once(event, callback) {
 let _this=this
 let wrapFun = function(...args) {
      callback(...args);

      _this.off(event, wrapFun);
    };
    this.on(event, wrapFun);
    return this;
  }

大大，算法冒泡排序那里是不是有点问题？

// 内部循环优化的那部分，是通过lastIndex来记录最后一次交换的位置是吧，但是下面代码中，lastIndex一直为length-1，没有任何赋值
function bubbleSort(array) { 
  let length = array.length,
     lastIndex = length - 1;
  // 如果不是数组或者数组长度小于等于1，直接返回，不需要排序 
  if (!Array.isArray(array) || length <= 1) return;
  // 第一层循环判断元素浮到顶端的位置
  for (let i = length; i >= 2; i--) {
    // 判断是否已经排序好的标志
    let flag = true,
      k = lastIndex;
    // 第二层对相邻元素两两比较，将最小或最大的元素浮动到顶端
    for (let j = 0; j < k; j++) {
      if (array[j] > array[j + 1]) {
        // [array[j], array[j + 1]] = [array[j + 1], array[j]];
        swap(array, j, j + 1);
        flag = false;
        k = lastIndex;  
      }
    }
    // 如果一次交换都没有则跳出循环
    if(flag) break;
  }
  return array;
}

// 下面是我个人的做法
function bubbleSort(arr) {
    if (!Array.isArray(arr) || arr.length <= 1) return;
    let lastIndex = arr.length - 1;
    while (lastIndex > 0) { // 当最后一个交换的元素为第一个时，说明后面全部排序完毕
        let flag = true, k = lastIndex;
        for (let j = 0; j < k; j++) {
            if (arr[j] > arr[j + 1]) {
                flag = false;
              	lastIndex = j; // 设置最后一次交换元素的位置
                [arr[j], arr[j+1]] = [arr[j+1], arr[j]];
            }
        }
      	if (flag) break;
    }
}

感谢大佬分享，javascript53---疑问

谢谢大佬贡献资料，感觉这里有点困惑，

javascript53
[].forEach.call($$(""),function(a){a.style.outline="1px solid #"+(~~(Math.random()(1<<24))).toString(16)})

这里的代码展示不全，没看懂，放到控制台执行直接报错, 后来根据下面的分析发现少了两个星号。

[].forEach.call($$("*"),function(a){a.style.outline="1px solid #"+(~~(Math.random()*(1<<24))).toString(16)})

发现二级三级标题都可以用单行code的格式，链接好像不行

年前离职好好复习下

给个赞

代码错误

js 实现一个函数，完成超过范围的两个大整数相加功能

carry 在每一次循环完成前都没有进行处理，会导致死循环
加一句 carry -= carry % 10即可

使用 reduce 方法实现 forEach、map、filter有误

10. 使用 reduce 方法实现 forEach、map、filter

 function forEachUseReduce(array, handler) {
   array.reduce(function (pre, item, index) {
     handler(item, index);
   },null);// 这里少了初始化参数，如果没有初始化参数数组里的第一个会当做初始化参数导致数组第一个直接被忽略
 }
 forEachUseReduce([1,2,3],(ele)=>{console.log(ele)}) // 按文章里的写法这里只会出现2，3

详见MDN

智力题第11题错了

感谢总结，下面是我发现的一些小问题

算法 - 希尔排序一节中提到“希尔排序的平均时间复杂度为 O(nlogn) ”是不准确的。
原因：步长序列会影响希尔排序的时间复杂度，然而还没有一种补偿能达到O(nlogn)，最快的也只有O(n(logn)^2)

大佬太强了，节省了我很多时间

花一两个星期背背面试题，希望下家公司能冲击一下年薪十万。

发现有人商用笔者笔记

https://www.kancloud.cn/pillys/qianduan#/dashboard
几乎和笔者的笔记一模一样,并且还有近两百人买了

回流和重绘

小哥，回流跟重绘的图好像配反了。

7. null 和 undefined 的区别

可以加一条，转换成数字，+null 输出 0 ，+undefined输出NaN

83. 如何判断当前脚本运行在浏览器还是 node 环境中 --勘误

首先谢谢大佬提供的材料，发现这里好像有问题。

83. 如何判断当前脚本运行在浏览器还是 node 环境中？（阿里）

console.log(typeof window !== 'undefined' ?'browser': 'node' )
感觉可以通过判断window对象的类型来区分环境

关于" 21. CSS 如何阻塞文档解析？（浏览器解析过程）"的疑惑

能否给出这个结论的信息源呢？

21. CSS 如何阻塞文档解析？文中描述的是：

“JS可能会去获取样式信息，如果未加载，可能得到错误的值，所以要等到CSS加载完毕”

因为我觉得可能不太成立，因为JS也可能去获取未解析的文档信息，对吧？也没说要等到DOM解析完了再加载的。

拼写错误？？

工具这一节中第四点疑似存在拼写错误。原文如下：

git merge 和 git rebase 都是用于分支合并，关键在 commit 记录的处理上不同。

git merge 会新建一个新的 commit 对象，然后两个分支以前的 commit 记录都指向这个新 commit 记录。这种方法会
保留之前每个分支的 commit 历史。

git merge 会先找到两个分支的第一个共同的 commit 祖先记录，然后将提取当前分支这之后的所有 commit 记录，然后
将这个 commit 记录添加到目标分支的最新提交后面。经过这个合并后，两个分支合并后的 commit 记录就变为了线性的记
录了。

git merge 关于commit 操作的说明有两点，没有关于git rebase 关于commit 的说明。

双飞翼布局那个问题可能有bug

双飞翼的代码可能会有bug（或者因为您的代码有注释没有正常显示导致我对您的代码理解出现偏差），我拷贝到浏览器中并为出现对应的效果，我简单修改过的代码如下：

<head>
    <style>
        .outer {
            height: 100px;
        }

        .wrapper {
            float: left;
            width: 100%;
            height: 100px;
            background: lightgreen;
        }

        .left {
            float: left;
            width: 100px;
            height: 100px;
            background: tomato;
        }

        .right {
            float: right;
            margin-left: -200px;

            width: 200px;
            height: 100px;
            background: gold;
        }

        .center {
            margin-left: 100px;
            margin-right: 200px;
            height: 100px;
        }
    </style>
</head>

<body>
    <div class="outer">
        <div class="left"></div>
        <div class="right"></div>
        <div class="center">
            <div class="wrapper"> </div>
        </div>
    </div>
</body>

并且圣杯布局也存在类似的错误，烦请明察

手写promise有问题，then没有返回Promise对象

如何捐赠？

还更新吗

算法知识总结-快速排序

作者快速排序算法的实现似乎没有考虑到数组中有相同元素的情况。在把元素划分到 pivot 两侧的时候，如果遇到和 pivot 值相同的元素，就会出现错误。如输入为 [5,1,1,2,0,0] 时。

    while (array[end] > pivot && start < end) {
      end--;
    }

    // 将比枢纽值小的值交换到 start 位置
    array[start] = array[end];

    // 移动 start 值，当 start 指针指向的值小于枢纽值时，start 指针向后移动
    while (array[start] < pivot && start < end) {
      start++;
    }

    // 将比枢纽值大的值交换到 end 位置，进入下一次循环
    array[end] = array[start];

可以改成：

    while (array[end] >= pivot && start < end) {    // 处理 和 pivot 值相等的元素
      end--;
    }

    // 将比枢纽值小的值交换到 start 位置
    array[start] = array[end];

    // 移动 start 值，当 start 指针指向的值小于枢纽值时，start 指针向后移动
    while (array[start] < pivot && start < end) {
      start++;
    }

    // 将比枢纽值大的值交换到 end 位置，进入下一次循环
    array[end] = array[start];

css.md中的overflow:hidden;

第82条：元素设置了overflow:hidden声明，里面内容高度溢出的时候，滚动依然存在，仅仅滚动条不存在！
这里的解释错了吧。hidden时不存在滚动条，也不存在滚动，会把溢出的部分隐藏。
滚动条不存在是什么意思呢？滚动条的样式？

关于假值类型那里

描述里说获取到dom的类数组对象强制类型转换成布尔后为false，我试了下，是true啊