• JavaScript基础——巩固练习（3）

    求和函数封装练习

    要求:

    1. 封装函数, 名字为sum

    2. 功能: 根据传入的两个数,求和并且返回求和的结果（函数必须有return返回值）

    实现两个数的值交换(函数版本)

    分析:

    1. 函数名为 changeNum()

    2. 调用函数时, changeNum(1，2)

    3. 经过函数内部处理后,输出 第一个值的结果是2 第二个值的结果是1

    4. 可以多调用两次

     封装余额函数

    要求:

    1. 运行程序后, 浏览器显示输入确认框(prompt)

    2. 第一个输入确认框提示输入银行卡余额

    3. 第二个输入确认框提示输入当月食宿消费金额

    4. 第三个输入确认框提示输入当月生活消费金额

    5. 输入完毕后,在页面中显示银行卡剩余金额

    6. 提示: 所有功能代码封装在函数内部（函数需要把余额返回）

     封装一个函数,可以求任意数组的和 或 平均值

    要求：

    • 函数可以传递2个参数，比如 handleData(arr, true) handleData 处理数据的意思

      • 参数一： 接受实参传递过来的数组

      • 参数二: 布尔类型 如果是true或者不传递参数 是求和操作， 如果传递过来的参数是 false 则是求平均值

    1. function handleData(arr, flag = true) {
    2.       let sum = 0
    3.       for (let i = 0; i < arr.length; i++) {
    4.         sum += arr[i]
    5.       }
    6.       if (flag) {
    7.         return sum
    8.       } else {
    9.         return sum / arr.length
    10.       }
    11.     }
    12. // 打印输出查看结果
    13. console.log(handleData([1, 2, 3]))  // 6
    14. console.log(handleData([1, 2, 3], true))  // 6
    15. console.log(handleData([1, 2, 3], false))  // 2

    需求： 封装 some 函数查看数组是否存在某个元素 。

    • 要传递2个参数 元素、数组

    • 如果数组存在元素则返回true，如果没有存在元素就返回 false

    例如检测 香蕉 是否存在于 数组['苹果', '香蕉', '橘子', '荔枝', '梨子']中， 返回结果是 true

    1. function some(ele, arr = []) {
    2.    // console.log(ele, arr)
    3.    // 1. 声明一个flag变量，里面先存储 false
    4.    let flag = false
    5.    // 2. 遍历循环如果找到了则 修改 flag 里面的值为true， 同时中断循环 break
    6.    for (let i = 0; i < arr.length; i++) {
    7.      if (ele === arr[i]) {
    8.        flag = true
    9.        break
    10.      }
    11.    }
    12.    // 3. 返回这个 falg变量
    13.    return flag
    14.  }
    15. let re = some('荔枝', ['苹果', '香蕉', '橘子', '荔枝', '梨子'])
    16. console.log(re) // true
    17. let re1 = some('榴莲', ['苹果', '香蕉', '橘子', '荔枝', '梨子'])
    18. console.log(re1) // false

    需求： 封装 findeIndex 函数返回查找元素在数组中的索引号。

    • 要传递2个参数 元素、数组

    • 如果找到，则返回查找元素在数组中的索引号，如果查找不到，则返回 -1

    例如检测 香蕉 数组['苹果', '香蕉', '橘子', '荔枝', '梨子']中， 返回结果是 1

    1.

     点名: 每次刷新网页运行, 在控制台 随机输出一位同学的名字 ["老赵", "老李", "小传", "小黑"]，如果输出了，则数组中删除这个名字

    声明对象

    要求:

    1. 声明一个变量per, 类型为对象类型

    2. 该对象的属性为性别,年龄,爱好(3个)

    3. 该对象的方法有 说话, 吃饭(2个)

    4. 在控制台分别调用该对象的属性和方法

    1.

     调用对象的方法

    要求:

    1. 对象声明完毕后, 调用对象中的吃饭的方法

    2. 提示: 对象中的方法本质是函数, 调用需要加()

    3. 方法也可以传递参数的

    1.

     猜数字游戏，设定次数，最多猜8次

    1.

     随机生成颜色

    1.

    利用对象数组渲染英雄列表案例

    功能1：

    1. 利用对象数组里面的数据来渲染页面，渲染多个数据

    2. 鼠标经过停留会显示英雄名字

    1. DOCTYPE html>
    3.  
    5. 	
    6. 	
    7. 	
    8. 	渲染英雄列表案例
    9. 	
    11.  
    13. 	
    14. 	
    15. 	
    17.

     根据数据完成表格渲染

    功能需求：

    1. 表格行要求 编号、科目、成绩、和 删除链接

    2. 最后计算出总分 和 平均分

    1. DOCTYPE html>
    2. <html lang="en">
    3.  
    4. <head>
    5.   <meta charset="UTF-8" />
    6.   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    7.   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    8.   <link rel="stylesheet" href="./styles/index.css" />
    9.   <title>Documenttitle>
    10. head>
    11.  
    12. <body>
    13.   <script>
    14.     // 核心数据
    15.     const data = [
    16.       { subject: '语文', score: 46 },
    17.       { subject: '数学', score: 80 },
    18.       { subject: '英语', score: 100 },
    19.     ]
    20.     let tr = ''
    21.     let total = 0 // 计算总分
    22.     for (let i = 0; i < data.length; i++) {
    23.       tr += `
    24.         <tr>
    25.             <td>${i + 1}td>
    26.             <td>${data[i].subject}td>
    27.             <td>${data[i].score}td>
    28.             <td><a href="#">删除a>td>
    29.         tr>
    30.       `
    31.       total += data[i].score
    32.     }
    33.     document.write(`
    34.     <div id="app" class="score-case">
    35.       <div class="table">
    36.         <table>
    37.           <thead>
    38.             <tr>
    39.               <th>编号th>
    40.               <th>科目th>
    41.               <th>成绩th>
    42.               <th>操作th>
    43.             tr>
    44.           thead>
    45.           <tbody>
    46.             ${tr}
    47.           tbody>
    48.           <tbody>
    49.             <tr>
    50.               <td colspan="5">
    51.                 <span class="none">暂无数据span>
    52.               td>
    53.             tr>
    54.           tbody>
    55.  
    56.           <tfoot>
    57.             <tr>
    58.               <td colspan="5">
    59.                 <span>总分：${total}span>
    60.                 <span style="margin-left: 50px">平均分：${total / data.length}span>
    61.               td>
    62.             tr>
    63.           tfoot>
    64.         table>
    65.       div>
    66.  
    67.     div>
    68.     `)
    69.   script>
    70. body>
    71.  
    72. html>

  • 相关阅读:
    （二）Java 线程
    苹果的司法总监“知法犯法，监守自盗”，涉嫌操控股市被捕
    数千年中东文明史的五个阶段
    Mysql通过show查看资源性能状态——筑梦之路
    微服务-grpc-consul-protoBuf-micro
    工作簿和工作表的区别及编程实现
    NX二次开发-NX+VS写代码设断点调试技巧
    python第九节：类的使用（1）
    【无标题】
    linux001--初次体验vmware虚拟机
  • 原文地址：https://blog.csdn.net/weixin_48719464/article/details/133855956