一个普普通通的小小码农的前端之路 | 2021 年终总结

1,161 阅读9分钟

「时光不负,创作不停,本文正在参加2021年终总结征文大赛

前言,很惭愧,来掘金那么久才发布第一篇文章,在掘金认识了许多技术大佬,在这里感谢一下大家的帮助,下面正文开始

光阴似箭,一年就快过去了,仿佛一切还在昨天。岁月如梭,12月到了,马上就要迎来2022年元旦。 2021年对于我来说,是非常重要的一年。今年我23岁了,也踏上了前端开发这条路。回顾一年,是从校园到社会的蜕变,接受了从象牙塔的保护到经历社会的毒打的过渡,经历了许多的人和事,看到了许多美丽的风景,自己也得到了历练和成长。

2021年初,从江西赣州做火车来到了深圳这座大城市,在这里先宣传一下家乡特色,2021年12月10日赣深高铁正式运营,两小时可以从深圳北到赣州,欢迎大家坐高铁来赣州游玩,可以体验生态休闲游,体验客家风情,感受红色故都的辉煌历史,体验苏区时期的红军生活,推荐品尝一些客家风味小吃,赣南脐橙、于都烧卷子、会昌酱干、南康甜柚、客家糯米酒、豆巴子、南安板鸭、宁都肉丸、酸枣糕、斋婆柚、上犹包米果、南康的荷包轧,米粉肉、艾米果、荷包胙、鱼浦、嗦粉子九层皮、多味花生、黄元米果、特色年货、腊肠等等等着你。报菜名报的我都快流口水了,另外澄清一下江西菜不全是辣的哦,小伙伴们大可以放心。

483b8ca3ea8d8d980881488a70b49ba.jpg

36ad034d604e3ee864d95d3c40b9e40.jpg

工作

日常搬砖, 技术沉淀

功不唐捐,玉汝于成

面试总结

分享几道经典面试题

  1. 数组扁平化
  2. 重绘与回流
  3. 闭包 mdn上有详细的例子
  4. 支付流程
  5. 封装请求,封装组件
  6. 性能优化

7. 字符串方法

charAt()  返回指定索引位置的字符

charCodeAt()  返回指定索引位置字符的 Unicode 值

concat()  连接两个或多个字符串,返回连接后的字符串

fromCharCode()  将 Unicode 转换为字符串

indexOf() 返回字符串中检索指定字符第一次出现的位置

lastIndexOf() 返回字符串中检索指定字符最后一次出现的位置

localeCompare() 用本地特定的顺序来比较两个字符串

match() 找到一个或多个正则表达式的匹配

replace() 替换与正则表达式匹配的子串

search()  检索与正则表达式相匹配的值

slice() 提取字符串的片断,并在新的字符串中返回被提取的部分

split() 把字符串分割为子字符串数组

substr()  从起始索引号提取字符串中指定数目的字符

substring() 提取字符串中两个指定的索引号之间的字符

toLocaleLowerCase() 根据主机的语言环境把字符串转换为小写,只有几种语言(如土耳其语)具有地方特有的大小写映射

toLocaleUpperCase() 根据主机的语言环境把字符串转换为大写,只有几种语言(如土耳其语)具有地方特有的大小写映射

toLowerCase() 把字符串转换为小写

toString()  返回字符串对象值

toUpperCase() 把字符串转换为大写

trim()  移除字符串首尾空白

valueOf() 返回某个字符串对象的原始值

8. 常用的数组方法

join():join(separator): 将数组的元素组起一个字符串,以separator为分隔符,省略的话则用默认用逗号为分隔符,该方法只接收一个参数:即分隔符。

push()和pop():push(): 可以接收任意数量的参数,把它们逐个添加到数组末尾,并返回修改后数组的长度。 pop():数组末尾移除最后一项,减少数组的 length 值,然后返回移除的项。

shift() 和 unshift():shift():删除原数组第一项,并返回删除元素的值;如果数组为空则返回undefined 。 unshift:将参数添加到原数组开头,并返回数组的长度

sort():按升序排列数组项——即最小的值位于最前面,最大的值排在最后面

reverse():反转数组项的顺序。

concat():将参数添加到原数组中。这个方法会先创建当前数组一个副本,然后将接收到的参数添加到这个副本的末尾,最后返回新构建的数组。在没有给 concat()方法传递参数的情况下,它只是复制当前数组并返回副本。

slice():返回从原数组中指定开始下标到结束下标之间的项组成的新数组。slice()方法可以接受一或两个参数,即要返回项的起始和结束位置。在只有一个参数的情况下, slice()方法返回从该参数指定位置开始到当前数组末尾的所有项。如果有两个参数,该方法返回起始和结束位置之间的项——但不包括结束位置的项。

splice():splice():很强大的数组方法,它有很多种用法,可以实现删除、插入和替换。

删除:可以删除任意数量的项,只需指定 2 个参数:要删除的第一项的位置和要删除的项数。例如, splice(0,2)会删除数组中的前两项。

插入:可以向指定位置插入任意数量的项,只需提供 3 个参数:起始位置、 0(要删除的项数)和要插入的项。例如,splice(2,0,4,6)会从当前数组的位置 2 开始插入4和6。

替换:可以向指定位置插入任意数量的项,且同时删除任意数量的项,只需指定 3 个参数:起始位置、要删除的项数和要插入的任意数量的项。插入的项数不必与删除的项数相等。例如,splice (2,1,4,6)会删除当前数组位置 2 的项,然后再从位置 2 开始插入4和6。

splice()方法始终都会返回一个数组,该数组中包含从原始数组中删除的项,如果没有删除任何项,则返回一个空数组。

indexOf()和 lastIndexOf() (ES5新增):indexOf():接收两个参数:要查找的项和(可选的)表示查找起点位置的索引。其中, 从数组的开头(位置 0)开始向后查找。

lastIndexOf:接收两个参数:要查找的项和(可选的)表示查找起点位置的索引。其中, 从数组的末尾开始向前查找。

这两个方法都返回要查找的项在数组中的位置,或者在没找到的情况下返回1。在比较第一个参数与数组中的每一项时,会使用全等操作符。

forEach() (ES5新增)forEach():对数组进行遍历循环,对数组中的每一项运行给定函数。这个方法没有返回值。参数都是function类型,默认有传参,参数分别为:遍历的数组内容;第对应的数组索引,数组本身。

map() (ES5新增)map():指“映射”,对数组中的每一项运行给定函数,返回每次函数调用的结果组成的数组。

filter() (ES5新增)filter():“过滤”功能,数组中的每一项运行给定函数,返回满足过滤条件组成的数组。

every() (ES5新增)every():判断数组中每一项都是否满足条件,只有所有项都满足条件,才会返回true。

some() (ES5新增)some():判断数组中是否存在满足条件的项,只要有一项满足条件,就会返回true。

reduce()和 reduceRight() (ES5新增)这两个方法都会实现迭代数组的所有项,然后构建一个最终返回的值。reduce()方法从数组的第一项开始,逐个遍历到最后。而 reduceRight()则从数组的最后一项开始,向前遍历到第一项。

这两个方法都接收两个参数:一个在每一项上调用的函数和(可选的)作为归并基础的初始值。

传给 reduce()和 reduceRight()的函数接收 4 个参数:前一个值、当前值、项的索引和数组对象。这个函数返回的任何值都会作为第一个参数自动传给下一项。第一次迭代发生在数组的第二项上,因此第一个参数是数组的第一项,第二个参数就是数组的第二项。

9. Git常用命令

git init 初始化        *

git clone 克隆代码库    *

git config 配置

git add 增加文件到暂存区 *

git commit 提交暂存区到仓库  *

git branch 名称  新建分支  *

git checkout 切换分支  *

git merge 合并分支   *

git branch -d 删除分支  *

git tag 打tag 包  *

git status 查看状态  *

git log  查看日志 *

git diff 查看暂存区和工作区差异

git fetch  下载远程仓库的变动   *

git pull 取回远程仓库变化,并与本地分支合并 *

git push 上传本地指定分支到远程仓库  *

解决冲突:

10. 事件循环 , promise

let n = 0;

       (async function a(num){

           console.log('1-',num);

           b(num++)

           console.log('2-',num);

       })(n)

       async function b(num){

           console.log('3-',num++);

           await c(num++)

           console.log('4-',++num);

       }

       async function c(num){

           console.log('5-',num);

         setTimeout(() => {

            console.log('6-',num);

         });

           console.log('7-',num);

       }

       debugger;

       new Promise(resolve=>{

           console.log('8-',n);

           resolve(n)

       }).then(num=>{

        console.log('9-',n++);

       })

       console.log('10-',n++ > n);

       console.log('11-',n);
         // 请问执行结果,以及为什么是?
new Promise((resolve) => {

            resolve();

        })

            .then(() => {

                new Promise((resolve) => {

                    resolve();

                })

                    .then(() => {

                        console.log(111);

                    })

                    .then(() => {

                        console.log(222);

                    });

            })

            .then(() => {

                new Promise((resolve) => {

                    resolve();

                })

                    .then(() => {

                        new Promise((resolve) => {

                            resolve();

                        })

                            .then(() => {

                                console.log(333);

                            })

                            .then(() => {

                                console.log(444);

                            });

                    })

                    .then(() => {

                        console.log(555);

                    });

            })

            .then(() => {

                console.log(666);

            });

      // 请问执行结果,以及为什么是?
  1. 一般会考察js逻辑功底,页面还原能力;
  2. 考察实际工作中遇到问题会如何处理;
  3. 版本管理,协作开发能力;
  4. 自主学习和扛压能力;
  5. 学历是块敲门砖;

学习

一般上b站或github学习

Stay hungry, Stay foolish

技多不压身

生活

追剧,偶尔下厨,和朋友开黑,旅游

1. 热爱coding 2. 热爱分享 3. 热爱生活

2022年flag

  1. 多存点小钱钱
  2. 再瘦一点点
  3. 看基本技术类的书(红宝石书,黄皮书,mdn等)
  4. 快速解决bug
  5. 大家身体健康,万事如意

就先写到这了,欢迎大家留言,后续还会分享面经,下篇文章再见。