当前位置：网站首页>【JS题解】牛客网JS篇1-10题

【JS题解】牛客网JS篇1-10题

2022-07-29 05:10:00 【海底烧烤店ai】

1、直角三角形

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

*
**
***

解：

    <script>
        var triangle = document.querySelector('.triangle');
        // 补全代码
        let htm = '';
        for (let i = 1; i <= 3; i++) {
    
            for (let j = 0; j < i; j++) {
    
                htm += '*';
            }
            htm += '<br>';
        }
        triangle.innerHTML = htm;
    </script>

2、文件扩展名

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

注意：返回的扩展名格式为.扩展

解：

    <script>
        const _getExFilename = (filename) => {
    
            // 补全代码
            const arr = filename.split(".")
            return '.' + arr[arr.length - 1]
        }
    </script>

将字符串通过split方法以.分割成数组，数组最后一位既是扩展名称

3、分隔符

补全JavaScript代码，要求返回参数数字的千分位分隔符字符串。

输入：_comma(12300)
输出：'12,300'

解：

    <script type="text/javascript">
        function _comma(number) {
    
            // 补全代码
            if (number < 1000) {
    
                return number + '';
            };
            return _comma(parseInt(number / 1000)) + ',' + number % 1000
        }
    </script>

举个例子：

当number为14360时，number / 1000为14.36，parseInt(number / 1000)为14，_comma(parseInt(number / 1000))为'14'， number % 1000为360，最终return的结果为'14,360'

4、单向绑定

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

解：

    <body>
    	<input id="input" type="text" />
        <span id="span"></span>

        <script type="text/javascript">
            // 补全代码
            const inp=document.getElementById('input');
            const spa=document.getElementById('span');
            inp.onchange=()=>{
    
                spa.innerText=inp.value
            }
        </script>
    </body>

5、创建数组

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

解：

	  <script type="text/javascript">
	      const _createArray = (number) => {
    
	          // 补全代码
	          return new Array(number).fill(number)
	      }
	  </script>

new Array(number)表示生成有number个元素的数组，元素内容默认为空属性：

fill() 方法用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。不包括终止索引。点击查看详情

arr.fill(value, start, end)
// - `value` 用来填充数组元素的值。

// - `start` 可选 起始索引，默认值为 0。

// - `end` 可选 终止索引，默认值为 this.length。

6、判断版本

请补全JavaScript代码，该函数接收两个参数分别为旧版本、新版本，当新版本高于旧版本时表明需要更新，返回true，否则返回false。
注意：

版本号格式均为"X.X.X"
X∈[0,9]
当两个版本号相同时，不需要更新

解：

    <script type="text/javascript">
        const _shouldUpdate = (oldVersion, newVersion) => {
    
            // 补全代码
            const oldNum=oldVersion.split('.').join('')+0;
            const newNum=newVersion.split('.').join('')+0;
            return newNum>oldNum
        }
    </script>

版本号格式均为"X.X.X"，且x为0-9的数字，直接可以对其通过split('.')分割成数组后为[x,x,x]，再进一步使用join('')将数组转换成字符串为'xxx'，加个0转换成数字number类型的，之后进行比较即可。

7、无重复数组

请补全JavaScript代码，实现一个函数，要求如下：

根据输入的数字范围[start,end]和随机数个数"n"生成随机数
生成的随机数存储到数组中，返回该数组
返回的数组不能有相同元素
注意：
不需要考虑"n"大于数字范围的情况

输入：getUniqueNums(2,10,4)
输出：[4,6,2,8]

解：

     <script>
         const _getUniqueNums = (start,end,n) => {
    
             // 补全代码
             const set=new Set();
             while(set.size<n){
    
                 const num=parseInt(Math.random()*(end-start)+start);
                 set.add(num)
             };
             return [...set]
         }
     </script>

利用ES6的Set数据结构，保证其中的数据不重复，通过Set的size属性获取其元素个数与n进行判断，少于指定元素时就生成随机数，然后通过add方法向Set中添加元素，之后返回时通过解构将Set结构转换成数组。

点此查看Set详情

8、数组排序

请补全JavaScript代码，根据预设代码中的数组，实现以下功能：

列表只展示数组中的name属性
实现点击"销量升序"按钮，列表内容按照销量升序重新渲染
实现点击"销量降序"按钮，列表内容按照销量降序重新渲染
注意：
必须使用DOM0级标准事件（onclick）

解：

<body>
    <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');
        // 补全代码
        function showList(list) {
    
            let str = '';
            list.forEach(item => {
    
                str += `<li>${
      item.name}</li>`
            })
            ul.innerHTML = str
        };
        showList(cups);
        upbtn.onclick = function () {
    
            cups.sort((next, prev) => next.sales - prev.sales);
            showList(cups);
        };
        downbtn.onclick = function () {
    
            cups.sort((next, prev) => prev.sales - next.sales);
            showList(cups);
        };
    </script>
</body>

点此查看数组排序sort方法详情

9、新数组

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

解：

    <script type="text/javascript">
        const _delete = (array,index) => {
    
            // 补全代码
            return array.filter((_,i)=>i!==index)
        }
    </script>

点此查看数组过滤filter方法详情

10、计数器

请补全JavaScript代码，要求每次调用函数"closure"时会返回一个新计数器。每当调用某个计数器时会返回一个数字且该数字会累加1。
注意：

初次调用返回值为1
每个计数器所统计的数字是独立的

解：

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