【JavaScript】巩固JS开发中十个常用功能/案例（1-10）

原创

海底烧烤店 2022-11-15 21:55:16 ©著作权

©著作权归作者所有：来自51CTO博客作者海底烧烤店的原创作品，请联系作者获取转载授权，否则将追究法律责任

🖥️ TypeScript专栏：TypeScript从入门到精通
🖥️ 蓝桥杯真题解析：蓝桥杯Web国赛真题解析

🧧 加入社区领红包：海底烧烤店ai（从前端到全栈）

🧑‍💼个人简介：即将大三的学生，一个不甘平庸的平凡人🍬
👉 你的一键三连是我更新的最大动力❤️！

🏆分享博主自用牛客网🏆：一个非常全面的面试刷题求职网站，真的超级好用🍬

前言

博主发现了一个超级好用的刷题、面试、求职的网站：牛客网，它不仅具有公司真题、专项练习、面试题库、在线编程等功能，还具有非常强大的AI模拟面试功能，简直是求职者的福音！

牛客网里的题库还是比较全面的，无论你是前端还是后端，都能在牛客网上找到适合自己的题，赶快点击链接去注册登录吧：点我进入牛客网

本篇文章所有示例来自于牛客网题库/在线编程/JS篇（1-10题），这些都是前端开发中常用的功能，借此记录一下刷题过程，巩固基础

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个元素的数组，元素内容默认为空属性：

【JavaScript】巩固JS开发中十个常用功能/案例（1-10）_数组

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>

这题主要考试的就是JS的闭包，点击查看闭包详情

结语

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

这篇文章的内容都出自于牛客网的JS篇题库，由此可见牛客网的JS题库还是非常贴合实际的，在写的过程中自己查漏补缺，收获了很多。

身为前端，之前的我非常迷茫，不知道怎么刷题，后端常刷的算法题又不太适合我，直到发现牛客网，才结束这一现状！牛客网里的题真的是对前端太友好了，强烈将牛客网推荐给大家！

🖥️ TypeScript专栏：TypeScript从入门到精通
🖥️ 蓝桥杯真题解析：蓝桥杯Web国赛真题解析

🧧 加入社区领红包：海底烧烤店ai（从前端到全栈）

🧑‍💼个人简介：即将大三的学生，一个不甘平庸的平凡人🍬
👉 你的一键三连是我更新的最大动力❤️！

🏆分享博主自用牛客网🏆：一个非常全面的面试刷题求职网站，真的超级好用🍬