JavaScript基础Day3

已于 2022-05-11 22:35:30 修改
阅读量683 收藏 2
点赞数 1
分类专栏： JavaScript基础 文章标签： javascript
于 2022-04-05 17:54:07 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/JOUKELOVE/article/details/123967639
版权

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
实际开发中，for用的要比while更多。
ex:

<script>
        // for (起始条件；退出条件；变化量) {
        //  循环语句
        // }
            for (let i = 1; i <= 10; i++) {
                document.write(`月薪过万 <br>`)
            }

    </script>

循环练习：
在这里插入图片描述
练习1：

for (let i = 1; i <= 100; i++) {
            document.write(`${i}岁 <br>`)
        }

练习2：

let sum = 0
        for (let i = 1; i <= 100; i++) {
            if (i % 2 === 0) {
                sum += i
            }
        }
        document.write(sum)

练习3：

for (let i = 1; i<= 5; i++) {
            document.write(`⭐`)
        }

练习4：
以前是这么写的：
在这里插入图片描述
但是如果用上for循环就会简易很多
代码：

let arr = ['马超', '赵云', '张飞', '关羽', '黄忠']
        for (let i = 0; i <= 4; i++) {
            document.write(`名字是：${arr[i]} <br>`)
        }

循环还有一个叫法，遍历。
循环最大的价值就是遍历数组。

arr.length 数组的长度，通过它可以告诉我们数组里有几个元素。将它放到代码里，帮助自动检测元素数量。

let arr = ['马超', '赵云', '张飞', '关羽', '黄忠']
        for (let i = 0; i < arr.length; i++) {
            document.write(`名字是：${arr[i]} <br>`)
        }
        document.write(arr.length)

循环小结：
在这里插入图片描述
for循环的退出循环：
在这里插入图片描述
在这里插入图片描述

continue和break在退出循环中的不同：

<script>
        for (let i = 1; i < 6; i++) {
            if (i === 2) {
                // continue // 退出本次循环，继续后面的循环，最后输出1345
                break  // 结束循环 退出整个循环 最后只输出1
            }
            document.write(i)
        }
    </script>

循环嵌套：
for循环嵌套：
在这里插入图片描述
在这里插入图片描述
for循环嵌套for循环，外部循环一次，里面循环执行全部，所以最后打印25个星

记忆单词案例：（每天背五个单词，一共三天）

<script>
        /* 记忆单词案例
        分析
        1.外面的循环 记录第n天 */
        for (let i = 1; i < 4; i++) {
            document.write(`第${i}天 <br>`)
            // 2. 里层的循环记录 几个单词
            for (let j =1; j < 6; j++) {
                document.write(`记住第${j}个单词 <br>`)
            }
        }
    </script>

在这里插入图片描述
for循环嵌套练习：
练习1：
在这里插入图片描述
代码：

<script>
        // 打印5行5列的星星
        for (let i = 1; i < 6; i++ ) {
            
            for (let j = 1; j < 6; j++) {
                document.write(`⭐`)
            }
            document.write(`<br>`)
        }
    </script>

练习2：（打印倒三角形星星）
在这里插入图片描述
代码：

// 外层打印几行
        for (let i = 1; i <= 5; i++ ) {
            // 里层打印几个星星
            for (let j = 1; j <= i; j++) {
                document.write(`⭐`)
            }
            document.write(`<br>`)
        }

练习3：
在这里插入图片描述

代码：

<style>
        div {
            display: inline-block;
            height: 25px;
            line-height: 25px;
            margin: 5px;
            background-color: pink;
            padding: 0 10px;
            border: 1px solid hotpink;
            color: deeppink;
            border-radius: 5px;
            box-shadow: 2px 2px 2px rgba(0, 0, 0, .2);
            text-align: center;
        }
    </style>
</head>
<body>
    <script>
        let x = `*`
        for (let i = 1; i <= 9; i++ ) {
            for (let j = 1; j <= i; j++) {
                let re = j * i
                document.write(`

                <div>${j} × ${i} = ${re} </div>

                `)
            }
            document.write(`<br>`)
        }
    </script>

效果：
在这里插入图片描述
左边粉色的是效果图。

数组：

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

<script>
        let arr = [2,6,1,7,4]
        let sum = 0
        let ave
        for (let i = 0; i < arr.length; i++) {
            sum += arr[i]
        }
        ave = sum / arr.length
        document.write(sum)
        document.write(`<br>`)
        document.write(ave)
    </script>

在这里插入图片描述

<script>
        let arr = [2,6,1,77,52,25,7]
        let max = arr[0]
        for (let i = 1; i < arr.length ; i++) {
            if (max < arr[i]) {
                max = arr[i]
            }
        }
        document.write(max)
    </script>

操作数组：

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
案例：
在这里插入图片描述

<script>
        let arr = [2,0,6,1,77,0,52,0,25,7]
        // 需要一个空的数组
        let newArr = []
        // 遍历旧数组
        for (let i = 0; i < arr.length; i++) {
            if (arr[i] >= 10) {
                // 满足条件的，依次追加给心的数组
                newArr.push(arr[i])
            }
        }
        document.write(newArr)
    </script>

案例：
在这里插入图片描述

<script>
        let arr = [2,0,6,1,77,0,52,0,25,7]
        let newArr = []
        for (let i = 0; i < arr.length; i++ ) {
            if (arr[i] !== 0) {
                newArr.push(arr[i])
            }
        }
        document.write(newArr)
    </script>

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
删除的使用场景：
在这里插入图片描述
在这里插入图片描述
数组案例：（冒泡排序）

在这里插入图片描述

<script>
        let arr = [2, 6, 4, 3, 5, 1]
        // 1. 外层循环控制  趟数   循环 4次   arr.length - 1
        for (let i = 0; i < arr.length - 1; i++) {
            // 2. 里层的循环 控制 一趟交换几次  arr.length - i - 1 次序
            for (let j = 0; j < arr.length - i - 1; j++) {
                // 交换两个变量
                // arr[j]   arr[j + 1]
                if (arr[j] > arr[j + 1]) {
                    let temp = arr[j]
                    arr[j] = arr[j + 1]
                    arr[j + 1] = temp
                }
            }
        }
        console.log(arr)

        // 复习变量
        // let num1 = 10
        // let num2 = 20
        // let temp = num1
        // num1 = num2
        // num2 = temp


    </script>

综合案例-柱状图

在这里插入图片描述
在这里插入图片描述

<!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>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            display: flex;
            width: 700px;
            height: 300px;
            border-left: 1px solid pink;
            border-bottom: 1px solid pink;
            margin: 50px auto;
            justify-content: space-around;
            align-items: flex-end;
            text-align: center;
        }

        .box>div {
            display: flex;
            width: 50px;
            background-color: pink;
            flex-direction: column;
            justify-content: space-between;
        }

        .box div span {

            margin-top: -20px;
        }

        .box div h4 {
            margin-bottom: -35px;
            width: 70px;
            margin-left: -10px;
        }
    </style>
</head>

<body>

    <!-- <div style="height: 123px;">
        <span>123</span>
        <h4>第1季度</h4>
    </div>
    <div style="height: 156px;">
        <span>156</span>
        <h4>第2季度</h4>
    </div>
    <div style="height: 120px;">
        <span>120</span>
        <h4>第3季度</h4>
    </div>
    <div style="height: 210px;">
        <span>210</span>
        <h4>第4季度</h4>
    </div> -->


    <script>
        // 1. 利用循环弹出四次输入框， 会得到4个数据，放到数组里面
        let arr = []
        for (let i = 1; i <= 4; i++) {
            // prompt(`请输入第 ${i} 季度的数据`)  ===  123
            arr.push(prompt(`请输入第 ${i} 季度的数据`))
        }
        // console.log(arr)
        // 注意我们渲染循环的是柱子 
        document.write(`<div class="box">`)
        // 循环4个柱子
        for (let i = 0; i < arr.length; i++) {
            document.write(`
                 <div style="height: ${arr[i]}px;">
                     <span>${arr[i]}</span>
                    <h4>第${i + 1}季度</h4>
                </div>
            `)
        }
        document.write(`</div>`)
    </script>



</body>

</html>

课后练习：

<script>
        // 1. 练习1: 使用for循环 - 求出数组元素的和 [5, 8, 9, 2, 1, 5]
        let arr = [5, 8, 9, 2, 1, 5]
        let sum = 0
        for (let i = 0;i < arr.length;i++) {
            sum += arr[i]
        }
        document.write(sum)


        // 2. 练习2: 使用for循环 - 求出数组里大于5的和 [4, 9, 5, 20, 3, 11]
        let arr = [4,9,5,20,3,11]
        let sum = 0
        for (let i = 0; i < arr.length;i++) {
            if (arr[i] > 5) {
                sum += arr[i]
            }
        }
        document.write(sum)


        //  练习3: 使用for循环 - 求出班级里同学们平均年龄[15, 19, 21, 33, 18, 24]
        let arr = [15,19,21,33,18,24]
        let pj
        let sum = 0
        for (let i = 0; i < arr.length;i++) {
                sum += arr[i]
        }
        pj = sum / arr.length
        document.write(pj)

        // 练习4: 打印数组里所有的奇数  [5, 2, 8, 10, 3, 7] 
        let arr = [5,2,8,10,3,7]
        for (let i = 0;i < arr.length;i++) {
            if (arr[i] % 2 !== 0) {
                document.write(`${arr[i]} <br>`)
            }
        }

        // 练习5: 计算[2, 6, 18, 15, 40] 中能被3整除的偶数的和
        let arr = [2,6,18,15,40]
        let sum = 0
        for (let i = 0;i < arr.length;i++) {
            if (arr[i] % 3 === 0 && arr[i] % 2 === 0) {
                sum += arr[i]
            }
        }
        document.write(sum)

        // 练习6: 计算[2, 6, 18, 15, 40] 中能被3整除的偶数的个数
        let arr = [2,6,18,15,40]
        let j = 0
        for (let i = 0;i < arr.length;i++) {
            if (arr[i] % 3 === 0 && arr[i] % 2 === 0) {
                j++
            }
        }
        document.write(j)

        // 练习7：给一个数字数组，该数组中有很多数字0，将不为0的数据存入到一个新的数组中
        let arr = [2,6,0,18,21,15,0,40,0]
        let newArr = []
        for (let i = 0;i < arr.length;i++) {
            if (arr[i] !== 0) {
                newArr.push(arr[i])
            }
        }
        document.write(newArr)
    </script>
Rookie_wbe
关注
专栏目录
JavaScript第五天作业案例
qq_41943654的博客
04-02 2514
JavaScript第五天作业案例 1. 练习1: 使用for循环 - 求出数组元素的和 [5, 8, 9, 2, 1, 5] 运行结果 2. 练习2: 使用for循环 - 求出数组里大于5的和 [4, 9, 5, 20, 3, 11] 运行结果 练习3: 使用for循环 - 求出班级里同学们平均年龄[15, 19, 21, 33, 18, 24] 运行结果 练习4: 打印数组里所有的奇数 [5, 2, 8, 10, 3, 7] 运行结果 练习5: 计算[2, 6, 18, 15, 40]
JavaScript基础知识day01
weixin_44036797的博客
12-22 88
JS基本知识
定义一个数组，并给出8个任意的初始数值，求改数组中大于平均值的数的个数，和小于平均值的个数
LY__lyxka的博客
08-14 3468
方法有两种 // 方法一 var arr = []; var sum = 0; var avg = 0; for(var i = 0;i < 8;i++) { var num = Math.floor(Math.random()*12); arr.push(num); sum = sum + num; ...
golang数组练习题：定义一个数组，并给出8个整数，求该数组中大于平均值的数的个数，和小于平均值的数的个数
qq_41955595的博客
08-08 308
go语言练习题：定义一个数组，并给出8个整数，求该数组中大于平均值的数的个数，和小于平均值的数的个数
js中这六种值为"假"，其他均为"真"
吉帅振博客
07-13 6065
写在前面：通常在以下语句结构中需要判断真假1.if分支语句 2.while循环语句 3.for里的第二个语句一、JavaScript中有 6 种值为“假”1.false (布尔型) 2.null (用于定义空的或者不存在的引用) 3.undefined (未定义值) 4.0 (数值型) 5."'' (空字符串) (字符型) 6.NaN这里面 false 本身是布尔类型，其它 5 个则不是。除了这 ...
js基础之数组
m0_56713342的博客
11-03 609
数组（Array：就是一组数据的集合，每条数据也叫元素，可以 存放任意类型的数据，每个元素以逗号分隔.
【02】JavaScript基础
oschina_41559824的博客
03-16 1115
所有的对象都是通过new 函数的方式创建的var u1 = new User("邓", "旭明");// 对象 u1 通过 new User 创建var u2 = {// 对象 u2 通过 new Object 创建firstName: "莫",lastName: "妮卡",// 等效于u2.firstName = "莫";u2.lastName = "妮卡";上面的代码形成的原型图如下原型对象本身也是一个对象，默认情况下，是通过new Object。
JavaScript基础练习_day11
10-26
### JavaScript基础练习_day11知识点解析 #### 一、变量声明与作用域 **知识点概述：** 本部分内容涉及JavaScript中的变量声明方式以及不同声明方式之间的区别。JavaScript中有多种声明变量的方式，每种方式都有其...
JavaScript基础练习_day3
08-24
### JavaScript基础练习_day3知识点详解 #### 一、变量赋值与条件判断 **知识点**： 1. **变量声明与赋值**：在JavaScript中，`var`关键字用于声明变量，可以用来存储各种数据类型（如布尔型、字符串、数字等）。 ...
JavaScript基础练习_day13
02-28
### JavaScript基础练习_day13知识点总结 #### 一、JavaScript数据类型 1. **基本数据类型**：在JavaScript中，基本数据类型包括`number`、`string`、`boolean`、`null`、`undefined`、`bigint`、`symbol`。 - `...
JavaScript基础练习_day4
08-27
### JavaScript基础练习_day4 #### 知识点概述 本次基础练习主要针对JavaScript中的几个核心概念进行探讨，包括但不限于变量作用域、异步操作、定时器的行为以及闭包的应用等。通过具体的代码示例，帮助初学者理解...
day09_JavaScript基础1
08-08
学习JavaScript的基础，主要包括以下几个方面： 1. **基本语法**：JavaScript的语法与Java有相似之处，但也存在差异。例如，注释可以使用单行注释`//`或多行注释`/* ... */`。在数据类型上，JavaScript有五种原始...
Python 大数字相加（整数）
weixin_38564268的博客
07-30 4065
问题：Python 中，进行求和操作时，当整数超过20位时，会产生科学计数法，不能显示完整的数字。 思路：从右向左，相同位上数字相加，有进位的保留进位，加入下轮的数字相加，最后的出结果字符串。 # num1, num2 两个字符串 def long_int_sum(num1,num2): # 参数准备 carry = 0 # 默认进位为0 res = "" # 最后...
程序基本算法习题解析 验证任意一个大于5的奇数可以表示为3个素数之和
elma_tww的博客
12-14 5504
题目： 验证任意一个大于5的奇数可以表示为3个素数之和。 附上代码： // Chapter1_9.cpp : Defines the entry point for the application. // 验证任意一个大于5的奇数可以表示为3个素数之和 #include "stdafx.h" #include&lt;iostream&gt; #include&lt;math.h&gt; ...
学习JavaScript基础的练习题
aimishake的博客
08-12 1439
使用for循环 - 求出班级里同学们平均年龄[15, 19, 21, 33, 18, 24]使用for循环 - 求出数组里大于5的i和 [4, 9, 5, 20, 3, 11]使用for循环 - 求出数组元素的和 [5, 8, 9, 2, 1, 5]给一个数字数组，该数组中有很多数字0，将不为0的数据存入到一个新的数组中。找出数组中 元素为10的下标，有则打印该下标，没有则打印-1。例如: [88,20,10,100,50] 打印 2。例如: [88,20,30,100,50] 打印-1。...
javascript数组基础练习题
weixin_52088589的博客
12-24 5103
练习1: 使用for循环 - 求出数组元素的和 [3, 9, 9, 2, 7, 5] //循环实现 /* let arr = [5, 8, 9, 2, 1, 5] let sum = 0 for (let i = 0; i < arr.length; i++) { sum += arr[i] } console.log(sum); */ // 套函数实现 function ayy(
Leetcode—5.n sum 问题python解答
柳杰的博客
04-19 1269
文章目录1.两数之和—two sum1.1 1.两数之和—two sum 给定一个整数数组 nums 和一个整数目标值 target，请你在该数组中找出和为目标值的那两个整数，并返回它们的数组下标。数组中同一个元素在答案里不能重复出现。 这道题有三种解法： a.暴力解法 class Solution: def twoSum(self, nums: List[int], target: int) -> List[int]: """ 暴力解法:时间复杂度为O(n
js中【Worker】相关知识点详细解读
最新发布
2301_79858914的博客
09-11 869
JavaScript 中的 Worker 是一个可以在后台线程中运行代码的 API，这样可以避免主线程（通常是 UI 线程）被阻塞。使用 Worker 时，JavaScript 可以在多线程环境中工作，解决了单线程的瓶颈问题。通常情况下，JavaScript 是单线程的，也就是所有的代码（包括 DOM 操作和事件处理等）都在同一个线程里执行。如果某段代码需要大量计算，或者运行时间过长，会阻塞整个页面，导致界面卡顿甚至崩溃。Worker提供了一种将复杂或耗时的任务分配到后台线程执行的方法。
JavaScript Day_03：循环语句详解
"JavaScript Day_03 - 学习前端开发中的循环语句，包括while、do-while和for循环，以及break和continue关键字的使用" 在JavaScript中，循环语句是编程中非常重要的一部分，它允许我们重复执行一段代码，尤其在处理...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值