前端笔试练习题——JS7 无重复数组、JS8 数组排序

绝地灬酷狼 2024-04-07 13:02 32阅读 0赞

**目录**

JS7 无重复数组

JS8 数组排序

--------------------

### JS7 无重复数组 ###

**描述**

> 请补全JavaScript代码，实现一个函数，要求如下：
> 
>  *  根据输入的数字范围\[start,end\]和随机数个数"n"生成随机数
>  *  生成的随机数存储到数组中，返回该数组
>  *  返回的数组不能有相同元素

> 注意： 不需要考虑"n"大于数字范围的情况

**示例：**

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

**JavaScript题解：**

<!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8">
        </head>
        <body>
    
            <script>
                const _getUniqueNums = (start,end,n) => {
                    // 补全代码
                    var nums = []
                    while(nums.length<n){
                        let num = parseInt(Math.random()*(end-start))+start
                        if(nums.indexOf(num) === -1){
                            nums.push(num)
                        }
                    }
                    return nums
                }
            </script>
        </body>
    </html>

**解析：**

> 在某个范围之内生成不重复的随机数并返回，核心步骤有：
> 
> 1.  创建一个空数组用来存储随机数；
> 2.  进入次数为n的循环中生成随机数，如果数组中没有该随机数，那么就将随机数存入数组；

--------------------

### JS8 数组排序 ###

**描述**

> 请补全JavaScript代码，根据预设代码中的数组，实现以下功能：  
> 1. 列表只展示数组中的name属性  
> 2. 实现点击"销量升序"按钮，列表内容按照销量升序重新渲染  
> 3. 实现点击"销量降序"按钮，列表内容按照销量降序重新渲染

> 注意：必须使用DOM0级标准事件（onclick）

**JavaScript题解：**

<!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8">
        </head>
        <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');
                // 补全代码
                for(let i=0; i<cups.length; i++){
                    let li = document.createElement('li')
                    li.innerHTML = cups[i].name
                    ul.append(li)
                }
                var lis = document.querySelectorAll('li')
                upbtn.onclick = function(){
                    cups.sort(function(a,b){
                        return a.sales-b.sales
                    })
                    for(var i=0; i<cups.length; i++){
                        lis[i].innerHTML = cups[i].name
                    }
                }
                downbtn.onclick = function(){
                    cups.sort(function(a,b){
                        return b.sales-a.sales
                    })
                    for(var i=0; i<cups.length; i++){
                        lis[i].innerHTML = cups[i].name
                    }
                }
            </script>
        </body>
    </html>

**解析：**

> 1.  创建重渲染函数，每当数组项顺序发生改变时触发该函数。该函数接收一个数组参数，函数内创建一个空字符串用于保存HTML模板，遍历数组项创建HTML模板并且拼接在空字符串之后，最终将字符串中的HTML模板值给ul的innerTHML
> 2.  给”销量升序“和”销量降序“绑定点击事件，分别按照"升序"、"降序"排列数组使用sort()方法，按照对象中sales属性进行排序，循环数组，更改li中的innerHTML;