牛客JS练习题11-20

JS11 列表动态渲染

描述
请补全JavaScript代码,将预设代码中的"people"数组渲染在页面中。实现下面的列表:
牛油1号 20岁
牛油2号 21岁
牛油3号 19岁

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
    </head>
    <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');
            // 补全代码
            let info = "";
            for(const e of people) {
                info += `<li>${e.name} ${e.age}岁</li>`
            }
            ul.innerHTML = info;
           
        </script>
    </body>
</html>

JS12 模板字符串

描述
请补全JavaScript代码,实现以下功能:

  1. 根据已有的person对象的注册时间求出距离当前时间的天数(天数向下取整)。
  2. 将获得的天数和person数据拼接成字符串,作为h2标签的内容。
    注意:使用模板字符串进行字符串拼接,字符串最终内容如:尊贵的牛客网2级用户小丽您好,您已经注册牛客网3天啦~
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
    </head>
    <body>
        <h2></h2>

        <script>
            var person = {
                level: '2',
                name: '小丽',
                registTime: '2021-11-01',
            }
            var h2 = document.querySelector('h2');
            // 补全代码
            const registTime = new Date(person.registTime);
            const nowTime = new Date();
            const days = Math.floor((nowTime - registTime) / 1000 / 60 /60/24);
            h2.innerHTML = `尊贵的牛客网2级用户小丽您好,您已经注册牛客网${days}天啦~`
        </script>
    </body>
</html>

JS13 类继承

描述
请补全JavaScript代码,完成类的继承。要求如下:

  1. "Chinese"类继承于"Human"类
  2. “Human"类实现一个函数"getName”,返回该实例的"name"属性
  3. “Chinese"类构造函数有两个参数,分别为"name”、“age”
  4. “Chinese"类实现一个函数"getAge”,返回该实例的"age"属性

JS14 参数解析器

描述
请补全JavaScript代码,要求将字符串参数URL中的参数解析并以对象的形式返回。

示例1

输入:getParams(‘https://nowcoder.com/online?id=1&salas=1000’)
输出:{id:‘1’, salas: ‘1000’}

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
    </head>
    <body>

        <script>
            const _getParams = (url) => {
                // 补全代码
                const ans = {};
                url.substr(url.indexOf('?')+1).split('&').forEach(item => {
                    const [prop, value] = item.split("=");
                    ans[prop] = value;
                });
                return ans;
            }
        </script>
    </body>
</html>

JS15 生成页码

描述
请补全JavaScript代码,要求根据参数动态生成"li"标签页码并插入"ul"标签下。要求如下:

  1. "allItem"为总数据项个数,"pageItem"为每页的数据项个数
  2. "li"标签内容为当前页码数,页码从1开始

示例1

输入:_createPage(13,2)
输出:"li"长度为7,“li"内容依次为"1”,“2”,“3”,“4”,“5”,“6”,“7”

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
    </head>
    <body>
    	<ul id="ul">
            
        </ul>
        <script type="text/javascript">
            const _createPage = (allItem, pageItem) => {
                // 补全代码
                const pageNum = Math.ceil(allItem / pageItem);
                let info = "";
                for(let i = 1; i <= pageNum; ++i) 
                    info += `<li>${i}</li>`;
                ul.innerHTML = info;
            }
        </script>
    </body>
</html>

JS16 总成绩排名

描述
请补全JavaScript代码,要求将数组参数中的对象以总成绩(包括属性"chinese"、“math”、“english”)从高到低进行排序并返回。

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
    </head>
    <body>
    	
        <script type="text/javascript">
        function totalScore(a) { return a.chinese + a.math + a.english; }
        const _rank = array => {
            // 补全代码
            array.sort((a, b) => totalScore(b) - totalScore(a));
            return array;
        }
        </script>
    </body>
</html>

JS17 子字符串频次

描述
请补全JavaScript代码,该函数接受两个参数分别为字符串、子字符串,要求返回子字符串在字符串中出现的频次。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
    </head>
    <body>

        <script>
            const _searchStrIndexOf = (str, target) => {
                // 补全代码
                let count = 0, start = 0, idx;
                while((idx = str.indexOf(target, start)) != -1) {
                    ++count;
                    start = idx + target.length;
                }
                return count;
            }
        </script>
    </body>
</html>

JS18 继承

JS19 判断斐波那契数组

描述
请补全JavaScript代码,要求以Boolean的形式返回参数数组是否为斐波那契数列。在数学上,斐波那契数列以如下方法定义:F(0)=0,F(1)=1, F(n)=F(n - 1)+F(n - 2)(n ≥ 2,n ∈ N)
注意:

  1. [0,1,1]为最短有效斐波那契数列
<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
    </head>
    <body>
    	
        <script type="text/javascript">
            const _isFibonacci = array => {
                // 补全代码
                const length = array.length;
                if(length === 1) return array[0] === 0;
                if(length === 2) return array[1] === 1;
                for(var i = 2; i < length && (array[i] === array[i-1] + array[i-2]); ++i);
                return i === length;
            }
        </script>
    </body>
</html>

JS20 数组扁平化

描述
请补全JavaScript代码,要求将数组参数中的多维数组扩展为一维数组并返回该数组。
注意:

  1. 数组参数中仅包含数组类型和数字类型

示例1

输入:[1,[2,[3,[4]]]]
输出:[1,2,3,4]

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
    </head>
    <body>
        
        <script>
            function solution(array) {
                let ar = new Array();
                for(const item of array) {
                    if(typeof item === 'object') 
                        ar = ar.concat(solution(item));
                    else ar = ar.concat(item);
                }
                return ar;
            }
            const _flatten = arr => {
                // 补全代码
                return solution(arr);
            }
        </script>
    </body>
</html>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值