0
0

【JavaScript】巩固JS开发中十个常用功能/案例（11-20）

🖥️ TypeScript专栏：TypeScript从入门到精通

🖥️ 蓝桥杯真题解析：蓝桥杯Web国赛真题解析

🧧 加入社区领红包：海底烧烤店ai（从前端到全栈）

🧑‍💼个人简介：即将大三的学生，一个不甘平庸的平凡人🍬
👉 你的一键三连是我更新的最大动力❤️！

🏆分享博主自用牛客网🏆：一个非常全面的面试刷题求职网站，真的超级好用🍬

文章目录

前言

博主发现了一个超级好用的刷题、面试、求职的网站：牛客网，它不仅具有公司真题、专项练习、面试题库、在线编程等功能，还具有非常强大的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+=`<li>${item.name}${item.age}岁</li>`})
        ul.innerHTML=str
    </script></body>

二、计算距离当前日期天数

案例要求：

  1. 根据已有的person对象的注册时间求出距离当前时间的天数（天数向下取整）
  2. 将获得的天数和person数据拼接成字符串，作为h2标签的内容 注意：使用模板字符串进行字符串拼接，字符串最终内容如：尊贵的牛客网2级用户小丽您好，您已经注册牛客网3天啦~
<h2></h2><script>var person ={level:'2',name:'小丽',registTime:'2021-11-01',}var h2 = document.querySelector('h2');// 补全代码// 当前时间戳let now =newDate().getTime()// 过去时间措let past =newDate(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

类诞生之前，我们是以函数的形式来书写构造函数，继承在构造函数的运用过程中扮演着非常重要的角色，看下面这个案例：

  1. 给Human构造函数的原型对象添加getName方法，返回当前实例name属性
  2. 将Chinese构造函数继承于Human构造函数
  3. 给Chinese构造函数的原型对象添加getAge方法，返回当前实例age属性
functionHuman(name){this.name = name
   this.kingdom ='animal'this.color =['yellow','white','brown','black']}functionChinese(name,age){Human.call(this,name)this.age = age
   this.color ='yellow'}// 补全代码// 给"Human"构造函数的原型对象添加"getName"方法Human.prototype.getName=function(){returnthis.name
}// 将"Chinese"构造函数继承于"Human"构造函数Chinese.prototype=newHuman()Chinese.prototype.constructor=Chinese

// 给"Chinese"构造函数的原型对象添加"getAge"方法Chinese.prototype.getAge=function(){returnthis.age
}

可以看到，普通的构造函数的继承我们主要是通过操作

prototype

原型对象来进行实现的，这显然是比较麻烦又不太安全的，所以在

ES6

之后就诞生了

class

类来替换这种写法

四、类的继承

ES6

新增了

class

类，其能够很好的替代上述构造函数的使用，

class

实际就是构造函数的语法糖，它的继承写法如下：

  1. Chinese类继承于Human类
  2. Human类实现一个函数getName，返回该实例的name属性
  3. Chinese类构造函数有两个参数，分别为name、age
  4. Chinese类实现一个函数getAge，返回该实例的age属性
classHuman{constructor(name){this.name = name
        this.kingdom ='animal'this.color =['yellow','white','brown','black']}// 补全代码getName(){returnthis.name;}}// 补全代码classChineseextendsHuman{constructor(name,age){super(name);this.age=age;}getAge(){returnthis.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

六、生成页码

在前后端交互过程中，分页功能非常常见，这个案例就是实现前端显示页码的效果：

  1. allItem为总数据项个数，pageItem为每页的数据项个数
  2. 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+=`<li>${i}</li>`}
           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)returnfalsefor(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=[]functioneach(arr){
        arr.forEach(item=>{if(!Array.isArray(item)){
                newArr.push(item)}else{each(item)}})}each(arr)return newArr
}

结语

这篇文章内容非常简单，主要是为了巩固自己的基础，正可谓基础不牢，地动山摇！！！

这篇文章的内容都出自于牛客网的JS篇题库，由此可见牛客网的

JS

题库还是非常贴合实际的，在写的过程中自己查漏补缺，收获了很多。

身为前端，之前的我非常迷茫，不知道怎么刷题，后端常刷的算法题又不太适合我，直到发现牛客网，才结束这一现状！牛客网里的题真的是对前端太友好了，强烈将牛客网推荐给大家！

🖥️ TypeScript专栏：TypeScript从入门到精通

🖥️ 蓝桥杯真题解析：蓝桥杯Web国赛真题解析

🧧 加入社区领红包：海底烧烤店ai（从前端到全栈）

🧑‍💼个人简介：即将大三的学生，一个不甘平庸的平凡人🍬
👉 你的一键三连是我更新的最大动力❤️！

🏆分享博主自用牛客网🏆：一个非常全面的面试刷题求职网站，真的超级好用🍬

标签： javascript 开发语言 ecmascript
本文转载自: https://blog.csdn.net/m0_51969330/article/details/126352984
版权归原作者 海底烧烤店ai 所有， 如有侵权，请联系我们删除。
登录后发布评论

“【JavaScript】巩固JS开发中十个常用功能/案例（11-20）”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

网络安全法-网络运行安全

使用selenium/drissionpage时如何阻止chrome自动跳转http到https

docker desktop 里部署的Open WebUI 管理员密码忘记了的处理方法

在ubuntu20.04中搭建onsite比赛运行环境

利用开源的低代码表单设计器FcDesigner高效管理和渲染复杂表单结构

Kafka学习笔记

【前端】浏览器输入url到页面呈现发生了什么？

文章导航