JavaScript巩固JS开发中十个常用功能/案例(11-20)

Posted 海底烧烤店ai

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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 =  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对应的时间戳
  • 根据两个时间戳的差值计算出两个时间之间的天数
  • 使用模板字符串拼接数据

三、构造函数的继承

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

  1. Human构造函数的原型对象添加getName方法,返回当前实例name属性
  2. Chinese构造函数继承于Human构造函数
  3. 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实际就是构造函数的语法糖,它的继承写法如下:

  1. Chinese类继承于Human
  2. Human类实现一个函数getName,返回该实例的name属性
  3. Chinese类构造函数有两个参数,分别为nameage
  4. Chinese类实现一个函数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

六、生成页码

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

  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>

但目前这种写法好像还没形成标准,所以保险起见尽量还是不要使用!

七、数据排序/总成绩排名

这个案例是需要将数组参数中的对象以总成绩(包括属性chinesemathenglish)从高到低进行排序并返回:

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)=0F(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(从前端到全栈)

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

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

以上是关于JavaScript巩固JS开发中十个常用功能/案例(11-20)的主要内容,如果未能解决你的问题,请参考以下文章

注意:PHP7中十个需要避免的坑

Java中十个常见的违规编码

PHP7中十个需要避免的坑

vb高手看过来 我一个窗体中十个combobox,分别命名为combo1〜combo10,每个co

十个JavaScript中易犯的小错误,你中了几枪?

JavaScript中十种一步拷贝数组的方法