这些前端基础知识你可能不知道

Daw
189 阅读3分钟

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第7天，点击查看活动详情

最近处于面试找工作阶段，面了几家之后发现自己的基础知识不够牢固，很多基础知识处于模糊或者不清楚状态，故此重新复习之前学习基础知识做的笔记，通过翻阅笔记发现一些已经淡忘的基础知识还是很有趣的，由于现在开发都是框架一把梭，很少用原生去写，久而久之就忘却了。万丈高楼平地起，基础知识还是要拾回来的。

字符串

  1. 字符串比较是逐位获取 Unicode 码进行比较，可以手动调用API获取字符的 Unicode 编码，或者通过传入 Unicode 码获取其所标示的字符
// 字符a Unicode 为 97
'a'.charCodeAt()

// Unicode 97 表示字符 a
String.fromCharCode(97)

这组API在实际业务开发中很少用到，但是在做算法题的时候用途还是很大的，一般用来映射字符索引。

  1. 字符截取
// end 传入负数时表示从后往前截取，Vue源码中用来截取值类型
str.slice(begin, end)

// 用法与 slice 类型，但begin > end时，两值会互换
str.substring(begin, end)
  1. 字符出现次数
// split 可用作于计算字符出现次数
let str = "hello world";

// 字符 l 出现的次数为：

str.split('l').length - 1 // 3

image.png

数组

  1. 数组遍历

数组有很多遍历函数，如 forEach、map等，但是 for 循环的效率比这些函数要高

  1. find 函数

记得当年作为应届生去面试的时候，面试官让我纸上手写find，当时基础知识不牢固，以为find普通函数，传入查找值返回true/false，然后照着这个手写了一版，被面试官嘲笑了，他说是传入一个函数，找到时返回索引，找不到返回 -1，然而抱着怀疑心态面完回去查发现并不是这样，只怪自己学艺不精，不然当时挺想反驳回去的。

find 是 es6 出现的数组 API，是一个高阶函数，以函数为入参，找到则返回该值，找不到返回 undefined，第二个参数可指定 fn 的执行上下文。

// 手写实现一下
Array.prototype.myFind = function(fn, thisArg) {
    if (!Array.isArray(this)) return ;
    for (let i = 0; i < this.length; i++) {
        let ans = false;
        if (thisArg) ans = fn.call(thisArg, this[i], i, this);
        else ans = fn(this[i], i, this);
        if (ans) return this[i];
    }
}

image.png

es6 特性

  1. 数组新增了很多方法，包括数组扁平化等。较少用到的可能是 of 函数，of函数创建数组解决了 new Array 创建的一些弊端。

  2. fill 方法解算法题的时候用到的比较多，需要注意的是如果填充引用值，如 fill([])，那么所有的填充项都是同一个数组，都会指向同一个地址，填充项改成new Array 或者函数都试过了，结果都是一样，所以只能用循环去一项项填充，目前没找到更好的办法。

image.png

Dom操作

  1. dom操作很多，记住常用的几个就好，研究 Vue diff 实现的时候比较有用。

image.png

Event

  1. 自定义事件
<div>event dom</div>
<div>other</div>

<script>
    // 事件的派发和监听需要是同一个元素
    const eventEl = document.querySelectorAll('div')[0]
    const otherEl = document.querySelectorAll('div')[1]

    const myEvent = new CustomEvent('myEvent')
    eventEl.addEventListener('myEvent', () => {
        console.log('自定义事件执行')
    })
    otherEl.onclick = () => {
        console.log('click !!')
        eventEl.dispatchEvent(myEvent)
    }
</script>

很多框架底层都用了这套API做自定义事件。

image.png

正则表达式

  1. 正则在处理一些复杂的字符匹配替换问题的时候会有妙用，不过规则较多不容易记全，需要系统的做一个笔记方便查阅。比如非贪婪匹配，正向预查和反向引用，解决一些复杂匹配问题的时候非常香。

image.png

总结

基础知识还是相当重要的，回头学习复习时发现了已模糊的知识。比如addEventListener的第三个参数作用。

现在业务开发一般都是用框架一把梭，基础知识很少使用，久而久之就忘记了，系统学习基础知识的时，可边学边做笔记，方便后续复习查阅笔记。

image.png

dawsky.top/

上面这个网址是作者近几个月做的搭建平台开源项目，目前处于基础功能阶段，功能陆续更新中，感觉搭建平台有很大的可玩性，欢迎试用和提意见！

avatar
文章
阅读
粉丝