牛客JS题库

1.直角三角形

请补全JavaScript代码，要求在页面上渲染出一个直角三角形，三角形换行要求使用"br"实现。三角形如下：
*
**
***

 <div class="triangle"></div>
 
  <script>
    var triangle = document.querySelector('.triangle');
    var str = '';
    for (var i = 0; i < 3; i++) {
      for (var j = 0; j <= i; j++) {
        str += "*"
      }
      str += '</br>'
    }
    triangle.innerHTML = str;
  </script>

2.文件扩展名

请补全JavaScript代码，要求以字符串的形式返回文件名扩展名，文件名参数为"filename"。

  <!-- 以字符串的形式返回文件名扩展名，文件名参数为filename -->
  <script>
    const _fetExFilename = (filename) => {
      // 1. lastIndexOf获取最后一个“.”符号的位置；
      // 2.然后通过slice截取index（包括）之后的字符串。
      var index = filename.lastIndexOf('.');
      return filename.slice(index);
    }
 
  </script>

slice与splice的区别?

slice(start,end)：返回一个新数组，包含从start到end（不包含该元素）的数组元素。该方法不会改变原数组，而是返回一个子数组。

splice()：该方法向或者从数组中添加或者删除项目，返回被删除的项目。该方法会改变原数组。

3.千分位

  <script>
    function _comma(number) {
      if (number < 1000) {
        return number.toString();
      } else {
        //递归拼接
        return _comma(parseInt(number / 1000)) + ',' + _comma(number % 1000);
      }
    }
  </script>

 4.单向监听

请补全JavaScript代码，要求每当id为"input"的输入框值发生改变时触发id为"span"的标签内容同步改变。
注意：必须使用DOM0级标准事件（onchange）

  <input id="input" type="text">
  <span id="span"></span>
 
  <script>
    var input = document.getElementById('input');
    var span = document.getElementById('span');
    input.onchange = function () {
      span.innerText = input.value;
    }
  </script>

5.创建数组

请补全JavaScript代码，要求返回一个长度为参数值并且每一项值都为参数值的数组。
注意：请勿直接使用for/while

    const _createArray = (number) => {
      var arr = new Array(number);
      return arr.fill(number);
    }

6.判断版本

请补全JavaScript代码，该函数接收两个参数分别为旧版本、新版本，当新版本高于旧版本时表明需要更新，返回true，否则返回false。
注意：
1. 版本号格式均为"X.X.X"
2. X∈[0,9]
3. 当两个版本号相同时，不需要更新

    const _shouldUpdate = (oldVersion, newVersion) => {
      var oldVersion = parseInt(oldVersion.split('.').join(''));
      var newVersion = parseInt(newVersion.split('.').join(''));
      return newVersion > oldVersion;
    }

7.创建无重复数组

请补全JavaScript代码，实现一个函数，要求如下：
1. 根据输入的数字范围[start,end]和随机数个数"n"生成随机数
2. 生成的随机数存储到数组中，返回该数组
3. 返回的数组不能有相同元素
注意：不需要考虑"n"大于数字范围的情况

 <script>
            const _getUniqueNums = (start,end,n) => {
                // 补全代码
                var arr=[];
                while(arr.length<n){
                    let val=Math.floor(Math.random()*(end-start+1)+start);
                    if(!arr.includes(val))
                    arr.push(val)
                }
                return arr;
            }
</script>

8.数组排序

请补全JavaScript代码，根据预设代码中的数组，实现以下功能：
1. 列表只展示数组中的name属性
2. 实现点击"销量升序"按钮，列表内容按照销量升序重新渲染
3. 实现点击"销量降序"按钮，列表内容按照销量降序重新渲染
注意： 必须使用DOM0级标准事件（onclick）

  <button class='up'>销量升序</button>
        <button class='down'>销量降序</button>
        <ul></ul>
 
        <script>
            var cups = [
                { type: 1, price: 100, color: 'black', sales: 3000, name: '牛客logo马克杯' },
                { type: 2, price: 40, color: 'blue', sales: 1000, name: '无盖星空杯' },
                { type: 4, price: 60, color: 'green', sales: 200, name: '老式茶杯' },
                { type: 3, price: 50, color: 'green', sales: 600, name: '欧式印花杯' }
            ]
            var ul = document.querySelector('ul');
            var upbtn = document.querySelector('.up');
            var downbtn = document.querySelector('.down');
            // 补全代码
           // 1. 对sales进行升序排列
            let up = function() {
                return cups.sort((a,b)=>{return a.sales - b.sales});
            }
            // 2. 对sales进行降序排列
            let down = function() {
                return cups.sort((a,b)=>{return b.sales - a.sales});
            }
            // 3. 遍历重新排序的cups数组，获取name属性值
            let getName = function() {
                var str = '';
                for(var i = 0;i < cups.length; i++) {
                    str += '<li>' + cups[i].name + '</li>';
                }
                return str;
            }
            // 4.监听 销量升序按钮的点击事件
            upbtn.onclick = function() {
                up();
                ul.innerHTML = getName();
            }
            // 5.监听 销量降序按钮的点击事件
            downbtn.onclick = function() {
                down();
                ul.innerHTML = getName();
            }
        </script>

9.新数组

请补全JavaScript代码，该函数接受两个参数分别为数组、索引值，要求在不改变原数组的情况下返回删除了索引项的新数组。

 <script type="text/javascript">
            const _delete = (array,index) => {
                // 补全代码
               let newArr=[];
                for(let i=0;i<array.length;i++){
                    if(array[i]!==array[index])
                        newArr.push(array[i])
                }
                return newArr;
            }
</script>

10.计数器（闭包）

请补全JavaScript代码，要求每次调用函数"closure"时会返回一个新计数器。每当调用某个计数器时会返回一个数字且该数字会累加1。
注意：
1. 初次调用返回值为1
2. 每个计数器所统计的数字是独立的

 <script type="text/javascript">
            const closure = () => {
                // 补全代码
                var i=1;
                return function(){
                    return i++;
                }
            }
        </script>

11.列表动态渲染

请补全JavaScript代码，将预设代码中的"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='';
            for(var i=0;i<people.length;i++){
                str +='<li>'+people[i].name+people[i].age+'岁'+'</li></br>';
            }
            ul.innerHTML=str;
        </script>
    </body>

12.模板字符串

请补全JavaScript代码，实现以下功能：
1. 根据已有的person对象的注册时间求出距离当前时间的天数（天数向下取整）。
2. 将获得的天数和person数据拼接成字符串，作为h2标签的内容。
注意：使用模板字符串进行字符串拼接，字符串最终内容如：尊贵的牛客网2级用户小丽您好，您已经注册牛客网3天啦~

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

13.类继承

请补全JavaScript代码，完成类的继承。要求如下：
1. "Chinese"类继承于"Human"类
2. "Human"类实现一个函数"getName"，返回该实例的"name"属性
3. "Chinese"类构造函数有两个参数，分别为"name"、"age"
4. "Chinese"类实现一个函数"getAge"，返回该实例的"age"属性

 <body>
    	
        <script type="text/javascript">
            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;
                }
            }
        </script>
    </body>