JavaScript 基础练习题

最新推荐文章于 2024-04-14 14:00:27 发布

置顶提灯寻猫

最新推荐文章于 2024-04-14 14:00:27 发布

阅读量1k

点赞数 2

分类专栏： JavaScript 文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/m0_53452298/article/details/121758412

版权

JavaScript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

文章目录

一、算法
二. 实战
- 2.1 全选与反选

提示：以下是本篇文章正文内容，下面案例可供参考

一、算法

1.1 计算给定数组 arr 中所有元素的总和

    <script>
        function sum(arr) {
            let s = 0;
            for (let i = 0; i < arr.length; i++) {
                s += arr[i]
            }
            return s;
        }
        let sum = sum([1, 2, 3, 4]);
        console.log(sum); // 10
        // 变量冲突
    </script>

解析

  1.将给定的数组传入sum这个函数中
  2.定义一个变量,将它的值设置为0
  3.循环遍历数组,进行累加
  4.将累加的值返回

提示：

我用let声明的变量sum和定义的函数sum会有变量冲突的问题,这也是留的一个小坑
如果将 let 改为 var 的话就不会报错

1.2 超出范围用省略号代替

要求如下：

创建一个函数truncate(str, maxlength)，来检查 str 的长度。
如果超过 maxlength —— 应使用 “…” 来代替 str 的结尾部分，长度仍然等于 maxlength。
函数的结果应该是截断后的文本。

<script>
        function truncate(str, maxlength) {
            if(str.length>maxlength){
                let  str1= str.substring(0,maxlength-1)+"\u2026";
                return str1;
            }
            return str
        }
        let str1 = truncate("What I'd like to tell on this topic is:", 20);
        console.log(str1); // "What I'd like to te…"
        let str2 = truncate('Hi everyone!', 20);
        console.log(str2); // "Hi everyone!"

解析

1.向truncate 函数传入两个实参,分别用str 和 maxlength 这两个形参来接收
2.如果传入字符串的长度比 maxlength 大的话,就用 substring 方法来进行截取,
这里的长度要减一是因为,省略号要占一个位置,我这里使用的是省略号的Unicode
编码来占据一个位置。
3.如果传入的字符串长度比 maxlength 来的小的话就不需要修改。

1.3 数组去重

要求如下：
数组去重，编写一个函数unique(arr),将数组中有重复出现的元素，只保留一个。

<script>
        function unique(arr) {

            let arr1=[];
            for(let i=0; i<arr.length;i++){
                if(arr1.indexOf(arr[i])==-1){
                    arr1.push(arr[i])
                }
            }
            return arr1;

        }
        let rs3 = unique([1, 2, 3, 4, 2]);
        console.log(rs3); // [1, 2, 3, 4]

解析

1.在 unique 函数中,声明一个空数组
2.遍历传入的数组，使用indexOf方法来判断空数组中是否有这个元素,如果
有就不添加,如果没有就添加

1.4 删除数组区间外的所有值

要求如下：

写一个函数，该函数获取一个数组arr，并删除其中介于a和b区间以外的所有值
检查：a <= x <= b。该函数应该只修改数组，不应该返回任何值。

<script>
        function filterRangeInPlace(arr, item1, item2) {
            for (let i = 0; i < arr.length; i++) {
                if (arr[i] < item1 || arr[i] > item2) {
                    console.log(arr[i]);
                    console.log(i);
                    arr.splice(i, 1);
                    i--;
                }
            }

        }
        let arr4 = [2, 3, 4, 5, 6, 1];
        filterRangeInPlace(arr4, 1, 4);
        console.log(arr4); // [2, 3, 1]
    </script>

解析

1.遍历数组,找寻不符合区间的数
2.使用splice() 方法，删除该数
3.这里的 i-- 是为了,返回上一层循环

1.5 统计字符在字符串出现的位置

要求如下：

获取字符串里出现子串的位置。
写一个函数appear(str, str_target),返回str_target子串在str中出现的所有位置

<script>
        function appear(str, str_target) {
            let index = str.indexOf(str_target);
            let arr = [];
            while (index != -1) {
                arr.push(index)
                console.log(str_target + "出现的位置是" + index);
                index = str.indexOf(str_target, index + 1)
            }
            return arr;
        }
        let arr5 = appear('abascbascbabasbascbascascbab', 'ab');
        console.log(arr5);
    </script>

解析

 1.声明一个变量,使用 indexOf 来判断字符串中该字符的位置
 2.用 while 循环来检索index的值
 3.只要符合条件,index+1

二. 实战

2.1 全选与反选

要求如下：

	1. 当用户选中“全选”时，自动选中所有语言，并把“全选”变成“全不选”；

    2. 当用户去掉“全不选”时，自动不选中所有语言；

    3. 但该用户点击“反选”时，自动把所有语言的复选框状态反转（选中的变为未选，未选的变为选中）；
    
    4. 当用户把所有语言都手动勾上是，“全选”被自动勾选，并变为“全不选”；
    
    5. 当用户手动去掉选中至少一种语言时，“全不选”自动变为“全选”，且全选复选框不选中；
    
    6. 点击提交按钮后，弹框将所有选中的语言展示出来。

这里主要用 jQuery 的方式实现

代码如下：

html 代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
   <!-- 引入 jq 的库-->
    <script src="jquery-3.6.0.min.js"></script>
    <!-- 引入自己的js文件-->
    <script src="./DT.js"></script>
    <style>
        legend {
            font-size: 16px;
            line-height: 30px;
        }
        
        div {
            font-size: 14px;
            line-height: 2;
        }
        
        pre {
            background-color: #f2f2f2;
            padding: 10px 0;
        }
    </style>
</head>

<body>
    <form action="#" id="testForm">
        <legend>请选择想要学习的编程语言：</legend>
        <fieldset>
            <div>
                <input type="checkbox" id="checkAll" class="q_check"><label for="checkAll" class="nocheck">全选</label>
                <input type="checkbox" id="reverse" class="f_check"><label for="reverse">反选</label>
            </div>
            <div>
                <input type="checkbox" name="lang" value="javascript" class="item"> JavaScript
            </div>
            <div>
                <input type="checkbox" name="lang" value="python" class="item"> Python
            </div>
            <div>
                <input type="checkbox" name="lang" value="ruby" class="item"> Ruby
            </div>
            <div>
                <input type="checkbox" name="lang" value="java" class="item"> Java
            </div>
            <div>
                <input type="checkbox" name="lang" value="php" class="item"> PHP
            </div>
            <div>
                <input type="button" value="提交" id="sub">
            </div>
        </fieldset>
    </form>
    <pre>

        <b>要求：</b>

        自行创建外部js文件：answer.js文件，并引入到本html文件中。实现下列功能的代码请写在js文件中。为了方便阅卷，js文件请和html文件放在同一级目录下。

        绑定合适的事件处理函数，实现一下逻辑：

        1. 当用户选中“全选”时，自动选中所有语言，并把“全选”变成“全不选”；

        2. 当用户去掉“全不选”时，自动不选中所有语言；

        3. 但该用户点击“反选”时，自动把所有语言的复选框状态反转（选中的变为未选，未选的变为选中）；
        
        4. 当用户把所有语言都手动勾上是，“全选”被自动勾选，并变为“全不选”；
        
        5. 当用户手动去掉选中至少一种语言时，“全不选”自动变为“全选”，且全选复选框不选中；
        
        6. 点击提交按钮后，弹框将所有选中的语言展示出来。

    </pre>
</body>

</html>

js 代码如下:

//jq 的入口函数
$(function() {
    // 获取复选框
    let $items = $(".item");
    // 获取全选框的值
    let $quanxuan = $(".nocheck");
    console.log($items);
    // 点击全选时
    $(".q_check ").click(function() {
            // 让复选框的checked属性等于全选的checked
            $items.prop("checked", $(this).prop("checked"));
            //判断全选框的cheeked,
            //如果是选中状态就将它的值改为全不选
            //如果是未选中状态,则反之
            if ($(this).prop("checked")) {
                $quanxuan.text("全不选");
            } else {
                $quanxuan.text("全选");
            }
        })
        // 当用户把所有语言都手动勾上时，
        // “全选”被自动勾选，并变为“全不选”
        // 这里封装成一个方法
    function yes() {
        let len1 = $items.length;
        // console.log(len1);
        let len2 = $('.item:checked').length;
        // console.log(len2);
        if (len1 == len2) {
            $('.q_check').prop('checked', true);
            $('.nocheck').text('全不选')
        } else {
            $('.q_check').prop('checked', false);
            $('.nocheck').text('全选')
        }
    }
    // 点击反选
    $(".f_check").click(function() {
            // 遍历复选框元素,让它们的checked值与自身相反
            $items.each(function() {
                    this.checked = !this.checked;
                })
                // 如果点击反选时,
                // 复选框中中没有一个元素被选中时触发
            yes();
        })
        // 复选框全部勾选时触发
    $items.click(function() {
        yes();
    })

    // 点击提交时触发
    let $sub = $("#sub");
    $sub.click(function() {
        // 声明一个变量存储选中的值
        let str = '';
        // 遍历复选框,将复选框中带有checked属性的筛选出来
        $items.each(function(index, val) {
                // each 遍历的是dom对象,所以要转换为jq对象
                if ($(val).prop("checked")) {
                    str += $(val).val() + "  ";
                }
            })
            // 判断str有没有值
            // 如果有就输出
            // 没有则提示
        if (str != '') {
            alert("你选中的有 " + str)
        } else {
            alert("你没有选中任何数")
        }
    })
})