️ TypeScript专栏：TypeScript从入门到精通
️ 蓝桥杯真题解析：蓝桥杯Web国赛真题解析
加入社区领红包：海底烧烤店ai（从前端到全栈）
个人简介：即将大三的学生，一个不甘平庸的平凡人
你的一键三连是我更新的最大动力❤️！分享博主自用牛客网：一个非常全面的面试刷题求职网站，真的超级好用
文章目录
- 前言
- 一、列表动态渲染
- 二、计算距离当前日期天数
- 三、构造函数的继承
- 四、类的继承
- 五、解析URL参数
- 六、生成页码
- 七、数据排序/总成绩排名
- 八、计算子字符串频次
- 九、判断斐波那契数列
- 十、数组扁平化处理
- 结语
前言
博主发现了一个超级好用的刷题、面试、求职的网站：牛客网，它不仅具有公司真题、专项练习、面试题库、在线编程等功能，还具有非常强大的AI模拟面试功能，简直是求职者的福音！
牛客网里的题库还是比较全面的，无论你是前端还是后端，都能在牛客网上找到适合自己的题，赶快点击链接去注册登录吧：点我进入牛客网
本篇文章所有示例来自于牛客网题库/在线编程/JS篇（11-20题），这些都是前端开发中常用的功能，借此记录一下刷题过程，巩固基础
一、列表动态渲染
列表的动态渲染是前端开发中最常见的效果，这个案例中我们需要将people数组渲染在页面中，实现下面的列表：
- 牛油1号 20岁
- 牛油2号 21岁
- 牛油3号 19岁
<body> <ul></ul> <script> var people = [ { name: '牛油1号', id: 1, age: 20 }, { name: '牛油2号', id: 2, age: 21 }, { name: '牛油3号', id: 3, age: 19 }, ] var ul = document.querySelector('ul'); // 补全代码 var str='' people.forEach((item)=>{ str+=`${item.name} ${item.age}岁` }) ul.innerHTML=str </script></body>二、计算距离当前日期天数
案例要求：
- 根据已有的
person对象的注册时间求出距离当前时间的天数（天数向下取整） - 将获得的天数和
person数据拼接成字符串，作为h2标签的内容
注意：使用模板字符串进行字符串拼接，字符串最终内容如：尊贵的牛客网2级用户小丽您好，您已经注册牛客网3天啦~
<h2></h2><script> var person = { level: '2', name: '小丽', registTime: '2021-11-01', } var h2 = document.querySelector('h2'); // 补全代码 // 当前时间戳 let now = new Date().getTime() // 过去时间措 let past = new Date(person.registTime).getTime() // 相距天数 let days = Math.floor( (now - past)/(24 * 60 * 60 * 1000)) h2.innerText = `尊敬的牛客网${person.level}级用户${person.name}您好，你已经注册牛客网${days}天啦~`</script>解题步骤：
- 获取当前时间对应的时间戳
- 获取
person.registTime对应的时间戳 - 根据两个时间戳的差值计算出两个时间之间的天数
- 使用模板字符串拼接数据
三、构造函数的继承
在ES6的class类诞生之前，我们是以函数的形式来书写构造函数，继承在构造函数的运用过程中扮演着非常重要的角色，看下面这个案例：
- 给
Human构造函数的原型对象添加getName方法，返回当前实例name属性 - 将
Chinese构造函数继承于Human构造函数 - 给
Chinese构造函数的原型对象添加getAge方法，返回当前实例age属性
function Human(name) { this.name = name this.kingdom = 'animal' this.color = ['yellow', 'white', 'brown', 'black']}function Chinese(name,age) { Human.call(this,name) this.age = age this.color = 'yellow'}// 补全代码// 给"Human"构造函数的原型对象添加"getName"方法Human.prototype.getName=function(){ return this.name}// 将"Chinese"构造函数继承于"Human"构造函数Chinese.prototype=new Human()Chinese.prototype.constructor=Chinese// 给"Chinese"构造函数的原型对象添加"getAge"方法Chinese.prototype.getAge=function(){ return this.age}可以看到，普通的构造函数的继承我们主要是通过操作prototype原型对象来进行实现的，这显然是比较麻烦又不太安全的，所以在ES6之后就诞生了class类来替换这种写法
四、类的继承
ES6新增了class类，其能够很好的替代上述构造函数的使用，class实际就是构造函数的语法糖，它的继承写法如下：
Chinese类继承于Human类Human类实现一个函数getName，返回该实例的name属性Chinese类构造函数有两个参数，分别为name、ageChinese类实现一个函数getAge，返回该实例的age属性
class Human { constructor(name) { this.name = name this.kingdom = 'animal' this.color = ['yellow', 'white', 'brown', 'black'] } // 补全代码 getName () { return this.name; }}// 补全代码class Chinese extends Human { constructor(name,age){ super(name); this.age=age; } getAge () { return this.age; }}class类是通过extends关键字来继承基类的，同时使用super来调用基类（Human）的构造器（constructor）
五、解析URL参数
解析URL参数在前端开发中也是非常常见的功能，看下面这个例子：
输入：
getParams('https://nowcoder.com/online?id=1&salas=1000')
输出：{id:1, salas: 100}
const _getParams = (url) => { // 补全代码 const params=url.split('?')[1].split('&') const obj={} params.forEach(item=>{ obj[item.split('=')[0]]=item.split('=')[1] }) return obj}这主要就是使用了分割字符串的方法split
六、生成页码
在前后端交互过程中，分页功能非常常见，这个案例就是实现前端显示页码的效果：
allItem为总数据项个数，pageItem为每页的数据项个数li标签内容为当前页码数，页码从1开始
具体要求实际就是需要在ul内通过li显示所有的页码，而_createPage 就是进行这一操作的函数
<body><ul id="ul"></ul> <script type="text/javascript"> const _createPage = (allItem, pageItem) => { // 补全代码 // ceil 向上取整 var liNum= Math.ceil(allItem/pageItem) var nums='' for(var i=1;i<=liNum;i++){ nums+=`${i}` } ul.innerHTML=nums } </script></body>这里注意一下，我们使用 ul.innerHTML时并没有事先通过document.getElementById获取ul，那我们为什么能直接操作这个ul呢？
原因在于：目前不使用getElementById方法，也可以用id直接操作对应id的元素，这也适用于一些元素的name属性：
<img name="myDiv" alt="Ailjx"></img><img name="myDiv" alt="Ailjx2"></img><script> console.log(myDiv[0].alt); // Ailjx</script>但目前这种写法好像还没形成标准，所以保险起见尽量还是不要使用！
七、数据排序/总成绩排名
这个案例是需要将数组参数中的对象以总成绩(包括属性chinese、math、english)从高到低进行排序并返回：
const _rank = array => { // 补全代码 return array.sort((prevItem,nextItem)=>{ const prev = prevItem.chinese+prevItem.math+prevItem.english const next = nextItem.chinese+nextItem.math+nextItem.english return next - prev })}对于数组排序，一个sort方法就可搞定！
八、计算子字符串频次
_searchStrIndexOf 函数接受两个参数分别为字符串str、子字符串target，要求返回子字符串target在字符串str中出现的频次：
const _searchStrIndexOf = (str, target) => { // 补全代码 return str.split(target).length-1}这个例子，巧妙的使用分割字符串的方法split将字符串在子子字符串处进行分割，形成数组，最后根据数组长度-1即可得到子字符串在字符串中出现的频次
九、判断斐波那契数列
要求以Boolean的形式返回参数数组是否为斐波那契数列：
在数学上，斐波那契数列以如下方法定义：
F(0)=0，F(1)=1,F(n)=F(n - 1)+F(n - 2)（n ≥ 2，n ∈ N）
注意：[0,1,1]为最短有效斐波那契数列
const _isFibonacci = array => { // 补全代码 if(array.length<3) return false for(let i=0;i<array.length;i++){ if(i<2) { return array[i]===i } else { return array[i]===array[i-1]+array[i-2] } }}十、数组扁平化处理
将数组参数中的多维数组扩展为一维数组并返回该数组：
输入：
[1,[2,[3,[4]]]]
输出：[1,2,3,4]
const _flatten = arr => { // 补全代码 const newArr=[] function each(arr){ arr.forEach(item=>{ if(!Array.isArray(item)){ newArr.push(item) }else { each(item) } }) } each(arr) return newArr}结语
这篇文章内容非常简单，主要是为了巩固自己的基础，正可谓基础不牢，地动山摇！！！
这篇文章的内容都出自于牛客网的JS篇题库，由此可见牛客网的JS题库还是非常贴合实际的，在写的过程中自己查漏补缺，收获了很多。
身为前端，之前的我非常迷茫，不知道怎么刷题，后端常刷的算法题又不太适合我，直到发现牛客网，才结束这一现状！牛客网里的题真的是对前端太友好了，强烈将牛客网推荐给大家！
️ TypeScript专栏：TypeScript从入门到精通
️ 蓝桥杯真题解析：蓝桥杯Web国赛真题解析
加入社区领红包：海底烧烤店ai（从前端到全栈）
个人简介：即将大三的学生，一个不甘平庸的平凡人
你的一键三连是我更新的最大动力❤️！分享博主自用牛客网：一个非常全面的面试刷题求职网站，真的超级好用