写点什么

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

  • 2022 年 9 月 21 日
    河南
  • 本文字数:3232 字

    阅读完需:约 11 分钟

【JavaScript】巩固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}
复制代码

结语

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


发布于: 刚刚阅读数: 5
用户头像

前端之行,任重道远! 2022.08.25 加入

本科大三学生、CSDN前端领域新星创作者、华为云享专家、第十三届蓝桥杯国赛三等奖获得者

评论

发布
暂无评论
【JavaScript】巩固JS开发中十个常用功能/案例(11-20)_算法_海底烧烤店ai_InfoQ写作社区