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

再快一步`

已于 2023-10-16 13:10:35 修改

阅读量923

点赞数

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

于 2023-10-16 13:03:23 首次发布

本文链接：https://blog.csdn.net/weixin_48719464/article/details/133855956

版权

JavaScript 专栏收录该内容

32 篇文章 4 订阅

订阅专栏

本文介绍了JavaScript中的函数封装实践，包括基本的数值运算函数如求和、数组值交换，以及涉及对象、数组操作、数据验证和渲染的示例，如余额管理、数组处理、随机颜色生成和HTML模板渲染。

摘要由CSDN通过智能技术生成

求和函数封装练习

要求:

封装函数, 名字为sum

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

<script>
    function sum(x, y) {
    let res = x + y
      return res
      // return x + y
    }
    let te = sum(1, 2)
    document.write(`两者的和是${te}`)

</script>

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

分析:

函数名为 changeNum()

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

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

可以多调用两次

<script>
    function changeNum(x,y) { 
   
        let temp = x
        x = y 
        y = temp 
        document.write(`第一个值的结果是${x} <br> 第二个值的结果是${y}`)
    }
    changeNum(3,4)
    changeNum('blue', 'red')
</script>

封装余额函数

要求:

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

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

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

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

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

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

<script>
    function result() {
      let a = prompt('银行卡金额')
      let b = prompt('当月食宿消费金额?')
      let c = prompt('当月生活消费金额?')
      let d = a - b - c
      return d
    }
    let money = result() 
    document.write(`我的银行卡余额还有${money}元`)

</script>

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

要求：

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

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

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

function handleData(arr, flag = true) {
      let sum = 0
      for (let i = 0; i < arr.length; i++) {
        sum += arr[i]
      }
      if (flag) {
        return sum
      } else {
        return sum / arr.length
      }
    }
// 打印输出查看结果
console.log(handleData([1, 2, 3]))  // 6
console.log(handleData([1, 2, 3], true))  // 6
console.log(handleData([1, 2, 3], false))  // 2

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

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

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

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

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

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

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

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

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

 <script>
    // 封装函数返回元素的下标  [1, 5, 10, 22, 8, 7]
    // 1. 封装函数 findIndex，传递2个参数 元素、数组
    function findIndex(ele, arr = []) {
     	// 2. 声明一个index变量初始值为 -1
      let index = -1
      // 3. 遍历循环如果找到则修改index为当前的索引号，中断循环
      for (let i = 0; i < arr.length; i++) {
        if (ele === arr[i]) {
          index = i
          break
        }
      }
      // 4. 返回index变量
      return index
    }
    let index1 = findIndex(10, [1, 5, 10, 22, 8, 7])
    console.log(index1) // 2
    let index2 = findIndex(8, [1, 5, 10, 22, 8, 7])
    console.log(index2) // 4
    let index3 = findIndex(88, [1, 5, 10, 22, 8, 7])
    console.log(index3) // -1
</script>

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

<script>
        // 1.点名：每次刷新网页运行，在控制台随机输出一位同学的名字["老赵", "老李", "小传", "小黑","小陈"]，如果输出了，则数组中删除这个名字
        let arr = ["老赵", "老李", "小传", "小黑","小陈"]
        // 得到一个随机数，作为数组的索引号，这个随机数0-5
        let random = Math.floor(Math.random() * arr.length)
        // 页面输出数组里面的元素
        document.write(arr[random])
        // splice(起始位置（下标），删除几个元素)
        arr.splice(random,1)
        console.log(arr);
    </script>

声明对象

要求:

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

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

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

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

    <script>
        // 1. 声明一个变量per, 类型为对象类型
        // 2. 该对象的属性为性别,年龄,爱好(3个)
        // 3. 该对象的方法有 说话, 吃饭(2个)
        // 4. 在控制台分别调用该对象的属性和方法
        let per = {
            sex : 'man',// 年龄
            age : 18,// 性别
            hobby : 'studyAndGame' ,// 爱好
            speak: function(){
                    // 说话
                    document.write(`speak方法被调用了————<br>`)
                },
            eat:function(){
                document.write(`eat方法被调用了————`)
            }
        }
            // 调用部分
        document.write(`姓名:${per.sex} <br>`)
        document.write(`姓名:${per.age}<br>`)
        document.write(`姓名:${per.hobby}<br>`)
        // 调用方法
        per.speak()
        per.eat()
    </script>

调用对象的方法

要求:

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

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

方法也可以传递参数的

    <script>
        // 调用对象的方法
        // 1. 对象声明完毕后, 调用对象中的吃饭的方法
        // 2. 提示: 对象中的方法本质是函数, 调用需要加()
        // 3. 方法也可以传递参数的
        let per = {
            sex: 'man', // 年龄,
            age: 18, // 性别,
            hobby: 'studyAndGame', // 爱好
            speak: function () {
                // 说话,
                document.write(`speak方法被调用了---<br>`)
            },
            eat: function (f) {
                // 吃饭
                document.write(`我今天吃的是${f}`)
            }
        }
        // 下面是调用部分
        document.write(`姓名:${per.sex} <br>`)
        document.write(`姓名:${per.age}<br>`)
        document.write(`姓名:${per.hobby}<br>`)

        // 调用方法
        per.speak()
        per.eat('苹果')
    </script>

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

    <script>
        // 猜数字游戏，设定次数，最多猜8次
        function random(min,max){
            return Math.floor(Math.random() * (max - min + 1)) + min 
        }
        // 生成一个数字先，猜0-20之间的数
        let num = random(0,20)

        let flag = true
        // 最多猜8次
        for(let i = 1; i <= 8; i++){
            let userNum = prompt('请输入您要猜的数字')

            // 比较数字
            if(userNum > num){
                alert('您猜的数字大了')
            }else if(userNum < num){
                alert('您猜的数字小了')
            }else{
                flag = false
                alert('恭喜您猜对了')
                break
            }
        }
        if(flag){
            alert('太笨了，这都猜不到')
        }
    </script>

随机生成颜色

    <script>
        //随机生成颜色
        //1. 自定义一个随机颜色函数
        function getRandomColor(flag = true){
            
            if(flag){
                // 3.如果是true，则返回 #ffffff
                let str = '#'
                let arr = ['0','1','2','3','4','5','6','7','8','9','a','b','c','d','e','f']
                // 利用for循环随机抽6次，累加到str里面
                for(let i = 1; i <= 6; i++){
                    // 每次要随机从数组里面抽取一个
                    // random是数组的索引号 是随机的
                    let random = Math.floor(Math.random() * arr.length)
                    // str = str + arr[random]
                    str += arr[random]
                }
                return str
 
            }else{
                // 4.否则是false 则返回rgb(255,255,255)
                let r = Math.floor(Math.random() * 256)
                let g = Math.floor(Math.random() * 256)
                let b = Math.floor(Math.random() * 256)
                return `rgb(${r},${g},${b})`
            }
        }
        // 2.调用函数getRandomColor(布尔值)
        console.log(getRandomColor(false))
        console.log(getRandomColor(true))
        console.log(getRandomColor())
    </script>

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

功能1：

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

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

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

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>渲染英雄列表案例</title>
	<link rel="stylesheet" href="css/hero.css">
</head>

<body>
	<!-- 利用对象数组渲染英雄列表案例 -->
	<!-- <ul class="list">
		
	</ul> -->
	<script>
		const datas = [
			{ name: '司马懿', imgSrc: '01.jpg' },
			{ name: '女娲', imgSrc: '02.jpg' },
			{ name: '百里守约', imgSrc: '03.jpg' },
			{ name: '亚瑟', imgSrc: '04.jpg' },
			{ name: '虞姬', imgSrc: '05.jpg' },
			{ name: '张良', imgSrc: '06.jpg' },
			{ name: '安其拉', imgSrc: '07.jpg' },
			{ name: '李白', imgSrc: '08.jpg' },
			{ name: '阿珂', imgSrc: '09.jpg' },
			{ name: '墨子', imgSrc: '10.jpg' },
			{ name: '鲁班', imgSrc: '11.jpg' },
			{ name: '嬴政', imgSrc: '12.jpg' },
			{ name: '孙膑', imgSrc: '13.jpg' },
			{ name: '周瑜', imgSrc: '14.jpg' },
			{ name: 'XXX', imgSrc: '15.jpg' },
			{ name: 'XXX', imgSrc: '16.jpg' },
			{ name: 'XXX', imgSrc: '17.jpg' },
			{ name: 'XXX', imgSrc: '18.jpg' },
			{ name: 'XXX', imgSrc: '19.jpg' },
			{ name: 'XXX', imgSrc: '20.jpg' }
		]

		let str = ''
		for (let i = 0; i < datas.length; i++) {
			str += `
				<li><img src="./uploads/heros/${datas[i].imgSrc}" title="${datas[i].name}"></li>
			`
		}
		document.write(`
		<ul class="list">
			${str}
		</ul>
		`)
	</script>
</body>

</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" />
  <link rel="stylesheet" href="./styles/index.css" />
  <title>Document</title>
</head>

<body>
  <script>
    // 核心数据
    const data = [
      { subject: '语文', score: 46 },
      { subject: '数学', score: 80 },
      { subject: '英语', score: 100 },
    ]
    let tr = ''
    let total = 0 // 计算总分
    for (let i = 0; i < data.length; i++) {
      tr += `
        <tr>
            <td>${i + 1}</td>
            <td>${data[i].subject}</td>
            <td>${data[i].score}</td>
            <td><a href="#">删除</a></td>
        </tr>
      `
      total += data[i].score
    }
    document.write(`
    <div id="app" class="score-case">
      <div class="table">
        <table>
          <thead>
            <tr>
              <th>编号</th>
              <th>科目</th>
              <th>成绩</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            ${tr}
          </tbody>
          <tbody>
            <tr>
              <td colspan="5">
                <span class="none">暂无数据</span>
              </td>
            </tr>
          </tbody>

          <tfoot>
            <tr>
              <td colspan="5">
                <span>总分：${total}</span>
                <span style="margin-left: 50px">平均分：${total / data.length}</span>
              </td>
            </tr>
          </tfoot>
        </table>
      </div>

    </div>
    `)
  </script>
</body>

</html>

再快一步`

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
1
评论
JavaScript基础——巩固练习（3）

点名: 每次刷新网页运行, 在控制台随机输出一位同学的名字 ["老赵", "老李", "小传", "小黑"]，如果输出了，则数组中删除这个名字。例如检测香蕉是否存在于数组['苹果', '香蕉', '橘子', '荔枝', '梨子']中，返回结果是 true。例如检测香蕉数组['苹果', '香蕉', '橘子', '荔枝', '梨子']中，返回结果是 1。如果找到，则返回查找元素在数组中的索引号，如果查找不到，则返回 -1。提示: 对象中的方法本质是函数, 调用需要加()
复制链接

扫一扫