【JavaScript】巩固JS开发中十个常用功能/案例(21-30)(牛客题解)

️ NodeJS专栏:Node.js从入门到精通
️ 蓝桥杯真题解析:蓝桥杯Web国赛真题解析
加入社区领红包:海底烧烤店ai(从前端到全栈)
‍个人简介:即将大三的学生,一个不甘平庸的平凡人
你的一键三连是我更新的最大动力❤️!

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


文章目录

  • 前言
  • 一、根据下拉框筛选数据
  • 二、判断质数
  • 三、身份证校验
  • 四、Symbol转换
  • 五、判断Set是否相同
  • 六、类的Getter
  • 七、控制旋转动画
  • 八、Map保存节点
  • 九、全选功能
  • 十、判断回文字符串
  • 结语

前言

最近博主一直在牛客网刷题巩固基础知识,牛客网不仅具有公司真题专项练习面试题库在线编程等功能,还具有非常强大的AI模拟面试功能,简直是求职者的福音!

牛客网里的题库非常全面的,无论你是前端还是后端,是想要备考还是准备面试又或者是想要提高自己,你都能在牛客网上找到适合自己的题,赶快点击链接去注册登录吧:点我进入牛客网

牛客网 牛客网
【JavaScript】巩固JS开发中十个常用功能/案例(21-30)(牛客题解)_第1张图片 【JavaScript】巩固JS开发中十个常用功能/案例(21-30)(牛客题解)_第2张图片

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

一、根据下拉框筛选数据

根据下拉框选中的条件变换重新渲染列表中展示的商品,且只展示符合条件的商品:

<body>
    <select name="" id="">
        <option value="0">请选择销量范围option>
        <option value="1"><100option>
        <option value="2">100~500option>
        <option value="3">>500option>
    select>
    <ul>
        <li>牛客logo马克杯li>
        <li>无盖星空杯li>
        <li>老式茶杯li>
        <li>欧式印花杯li>
    ul>

    <script>
        var cups = [
            { type: 1, price: 100, color: 'black', sales: 60, name: '牛客logo马克杯' },
            { type: 2, price: 40, color: 'blue', sales: 100, name: '无盖星空杯' },
            { type: 4, price: 60, color: 'green', sales: 200, name: '老式茶杯' },
            { type: 3, price: 50, color: 'green', sales: 600, name: '欧式印花杯' }
        ]
        var select = document.querySelector('select');
        var ul = document.querySelector('ul');
        // 补全代码
        select.onchange = function () {
            let newList = []
            switch (this.value) {
                case '1':
                    newList = cups.filter(item => item.sales < 100)
                    render(newList)
                    return;
                case '2':
                    newList = cups.filter(item => item.sales <= 500 && item.sales >= 100)
                    render(newList)
                    return;
                case '3':
                    newList = cups.filter(item => item.sales > 500)
                    render(newList)
                    return;
                default:
                    render(cups)
                    return;
            }
        }
        function render(list) {
            let str = ``
            list.forEach(item => {
                str += `
  • ${item.name}
  • `
    }) ul.innerHTML = str }
    script> body>

    【JavaScript】巩固JS开发中十个常用功能/案例(21-30)(牛客题解)_第3张图片

    二、判断质数

    Number对象的原型对象上添加"_isPrime"函数,该函数判断调用的对象是否为一个质数,是则返回true,否则返回false

    <script type="text/javascript">
    	// 补全代码
         Number.prototype._isPrime = function () {
        // valueOf() 方法返回指定对象的原始值。
        const num = this.valueOf()
        // Number.isInteger() 方法用来判断给定的参数是否为整数
        if (num < 2 || !Number.isInteger(num)) return false;
        // Math.floor() 返回小于或等于一个给定数字的最大整数
        // Math.sqrt() 函数返回一个数的平方根
        for (let i = 2, ceil=Math.floor(Math.sqrt(num)); i <= ceil; i++) {
            if (num % i === 0) {
                return false
            }
    
        }
        return true
    }
    script>
    

    质数是指在大于1的自然数中,除了1和它本身以外不再有其他因数的自然数

    思路:

    • 在原型prototype上添加方法
    • 先通过this.valueOf()获取调用该方法对象的原始值num
    • num小于2或者不是整数时返回false
    • 然后进入循环,i初始值为2 ,不需要遍历到最后,遍历到原数值的1/2处 即可判断出它是不是质数
    • 遍历过程中若num能被i整除,返回false
    • 其余情况返回true

    三、身份证校验

    _isCard为检验输入字符是否为身份证号的函数:

    const _isCard = str=> {
        // 补全代码
        var regx = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/
    	return regx.test(str)
    }
    

    思路:

    • 使用正则表达式:\d表示任意数字相当于[0-9]^表示开头$表示结尾,|表示或,{n}表示出现n
    • 一代身份证15位:/^\d{15}$/(验证15位数字)
    • 二代身份证18位:/^\d{18}$/(验证18位数字)
    • 在二代身份证18位数字中,最后一位有可能是数字也可能是xX/^\d{17}(\d|X|x)$/(检验前17位为数字,最后一位为数字或X或x)

    四、Symbol转换

    以键/值对的对象形式返回参数数组。要求如下:

    1. 键名的数据类型为Symbol
    2. 键值为当前数组项
    3. Symbol的描述为当前数组项
    4. 返回普通对象
    const _symbolKey = array => {
        // 补全代码
        let obj={}
        for(item of array){
        	// 使用Symbol方法获取Symbol类型的数据作为键名使用
            let key = Symbol(item);
            obj[key] = item;
        }
        return obj
    }
    

    五、判断Set是否相同

    boolean的形式返回两个Set对象参数是否一样,是则返回true,否则返回false

    const _isSameSet = (s1, s2) => {
        // 补全代码
        // 长度不同直接false
        if(s1.size !== s2.size) return false;
        // 判断s1内的元素是否都在s2中
        return [...s1.values()].every(item => s2.has(item))
    }
    
    • Set.prototype.size返回 Set 对象中的值的个数
    • Set.prototype.values()返回一个新的迭代器对象,该对象包含 Set 对象中的按插入顺序排列的所有元素的值。
    • every() 方法测试一个数组内的所有元素是否都能通过某个指定函数的测试。它返回一个布尔值。
    • Set.prototype.has(value)表示该值在 Set 中存在与否

    六、类的Getter

    完成名为"Rectangle"的矩形类。要求如下:

    1. 构造函数只包含两个参数,依次为"height"、“width
    2. 设置Getter,当获取该对象的"area"属性时,返回该对象"height"与"width"属性的乘积\

    示例:

    输入:new Rectangle(12,12).area
    输出:144

    class Rectangle {
       // 补全代码
       constructor(height,width) {
           this.height = height;
           this.width = width;
       }
       _area() {
           return this.height*this.width
       }
       get area() {
           return this._area()
       }
    }
    

    七、控制旋转动画

    要求当滑动id为"range"的滑块控件时可以改变id为"rect"的矩形旋转速度。要求如下:

    1. id为"rect"的矩形初始动画周期为10秒
    2. id为"range"的滑块控件默认值为1、最小值为1、最大值为10、滑动间隔为1
    3. 当滑动滑块值为1时,矩形动画周期为10秒、当…,为…、当滑动滑块值为10时,矩形动画周期为1秒
    <html>
        <head>
            <meta charset=utf-8>
            <style type="text/css">
                #rect {
                    width: 120px;
                    height: 100px;
                    background-color: black;
                    /*补全代码*/
                    /*rect动画名,linear动画匀速,infinite无限循环 */
                    animation:rect 10s linear infinite;
                }
                @keyframes rect {
                    from {
                        transform: rotate(0deg);
                    }
                    to {
                        transform: rotate(360deg);
                    }
                }
            style>
        head>
        <body>
            
        	<div id="rect">div>
        	
            <input id="range" type="range" min="1" max="10" step="1" value="1"/>
            
            <script type="text/javascript">
                // 补全代码
                 document.querySelector("#range").onchange = function(){
                    let inputVal = document.querySelector('#range').value;
                    let time = 10 - inputVal + 1;
                    let rect = document.querySelector("#rect");
                    rect.style.animationDuration = time + 's';
                 }
            script>
            
        body>
    html>
    

    八、Map保存节点

    将页面中的"p"标签以键名的形式保存在Map对象中,键名所对应的键值为该"p"标签的文字内容

    Map 对象保存键值对,并且能够记住键的原始插入顺序。任何值(对象或者基本类型)都可以作为一个键或一个值。

    <body>
    	<p>1p>
        <script type="text/javascript">
            const _elementKey = () => {
                // 补全代码
                const map = new Map()
                map.set(document.querySelector('p'),document.querySelector('p').innerText)
                return map
            }
        script>
    body>
    

    九、全选功能

    实现以下效果:

    1. 选中"全选"框,以下所有选项全部勾选。
    2. 把"全选"框从选中状态勾选成未选中状态,其他复选框全部取消选中效果。
    3. 当其他复选框全部选中,"全选框"为选中状态。
    4. 当其他复选框有一个未选中,"全选框"取消选中状态。
    DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
    head>
    <style>
        ul {
            list-style: none;
        }
    style>
    
    <body>
        <ul>
            <li>全选<input type='checkbox' id='all'>li>
            <li>Java<input type='checkbox' class='item'>li>
            <li>javaScript<input type='checkbox' class='item'>li>
            <li>C++<input type='checkbox' class='item'>li>
            <li>python<input type='checkbox' class='item'>li>
            <li>.net<input type='checkbox' class='item'>li>
        ul>
    
        <script>
            var all = document.getElementById("all")
            // 使用Array.from()将类数组转化为真正的数组
            var options = Array.from(document.querySelectorAll(".item"))
            // 补全代码
            all.onchange = () => {
                options.forEach((item) => item.checked = all.checked)
            }
            options.forEach((item) => {
                item.onchange = () => {
                    all.checked = options.every(x => x.checked)
                }
            })
        script>
    body>
    
    html>
    

    every() 方法测试一个数组内的所有元素是否都能通过某个指定函数的测试。它返回一个布尔值。

    十、判断回文字符串

    要求以boolean的形式返回参数字符串是否为回文字符串:

    回文字符串:正读和反读都一样的字符串

    const _isPalindrome = string => {
        // 补全代码
        return string == string.split('').reverse().join('');
    }
    

    思路:

    • 先获得反过来的字符串:字符串转数组后进行反转,之后再转换为字符串
    • 判断反过来的字符串与原字符串是否相等

    结语

    这篇文章的所有内容都出自于牛客网的JS篇题库:
    【JavaScript】巩固JS开发中十个常用功能/案例(21-30)(牛客题解)_第4张图片

    牛客网的JS题库非常贴合实际的,在写的过程中自己查漏补缺,收获了很多,身为前端,之前的我非常迷茫,不知道怎么刷题,后端常刷的算法题又不太适合我,直到发现牛客网,才结束这一现状!牛客网里的题真的是对前端太友好了,强烈将牛客网推荐给大家!

    如果本篇文章对你有所帮助,还请客官一件四连!❤️

    基础不牢,地动山摇! 快来和博主一起来牛客网刷题巩固基础知识吧!

    你可能感兴趣的:(JavaScript,#,JS题解,javascript,算法,前端)