JavaScript 基础02

冉冉柟

1039人浏览 · 2025-09-21 21:58:19

冉冉柟 · 2025-09-21 21:58:19 发布

第三部分

01-for循环基础

<script>
    // 1、打印1~100次
    for(let i = 1; i <= 100; i++){
        document.write(`文档打印第${i}份<br>`)
    }

    document.write(`------------------------<br>`)

    //2、求1~100之间的偶数和
    let sum = 0
    for(let i = 1; i <= 100; i++){
        if (i % 2 === 0) {
            sum += i
        }
    }
    document.write(`1~100之间的偶数和是：${sum}`)


    document.write(`<br>------------------------<br>`)


    //3、求1~100之间的偶数和
    let sum2 = 0
    for(let i = 1; i <= 100; i++){
        if (i % 2 !== 0) {
            sum2 += i
        }
    }
    document.write(`1~100之间的奇数和是：${sum2}`)

    document.write(`<br>------------------------<br>`)


    //4、求1~100之和
    let sum3 = 0
    for(let i = 1; i <= 100; i++){
        sum3 += i
    }
    document.write(`1~100之和是：${sum3}`)

</script>

02-for循环遍历数组

<script>
    let arr1 = ['刘德华','黎明','张学友','郭富城']
    //法一：
    for(let i = 0; i < 4;i++){
        console.log(arr1[i]);
    }

    console.log('----------------------')

    //法二：
    for(let i = 0; i < arr1.length;i++){
        console.log(arr1[i]);
    }

    console.log('----------------------')


    //法三：
    for(let i = 0; i <= arr1.length-1;i++){
        console.log(arr1[i]);
    }

    console.log('----------------------')

    //示例：
    let arr2 = []
    console.log(arr2)
    console.log(arr2[0])
    console.log(arr2[1])

</script>

03-循环嵌套

<script>
    //外层循环打印-第n天
    for(let i = 1; i <= 3 ; i++){
        document.write(`第${i}天<br>`)
        //里层循环打印-第n个单词
        for(let j = 1; j <= 10 ; j++){
            document.write(`记住了第${j}个单词<br>`)
        }
    }
</script>

04-打印小星星

<script>
    //打印5行5列小星星
    /**
    for(let i = 1; i <= 5; i++){
        for(let j = 1; j <= 5; j++){
            document.write('*')
        }
        document.write('<br>')
    }
        */

    //用户自定义小星星
    let row = +prompt('请输入行数：')
    let col = +prompt('请输入列数：')
    //外层循环打印行数
    for(let i = 1; i <= row; i++){
        //里层循环打印几个小星星
        for(let j = 1; j <= col; j++){
            document.write('*')
        }
        //进行换行显示：
        document.write('<br>')
    }
</script>

05-打印直角三角形

<script>
    //打印5行等星小星星
    for(let i = 1; i <= 5; i++){
        for(let j = 1; j <= i; j++){
            document.write('*')
        }
        document.write('<br>')
    }

    document.write('-----------------------------<br>')

    //用户自定义小星星
    let row = +prompt('请输入行数：')
    //外层循环打印行数
    for(let i = 1; i <= row; i++){
        //里层循环打印几个小星星
        for(let j = 1; j <= i; j++){
            document.write('*')
        }
        //进行换行显示：
        document.write('<br>')
    }
</script>

06-99乘法表精修版

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>99乘法表精选版</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }

        span{
            display: inline-block;
            width: 100px;
            text-align: center;
            padding: 5px 10px;
            border: 1px solid pink;
            margin: 2px;
            border-radius: 5px;
            box-shadow: 2px 2px 2px rgba(225，192，203，.4);
            background-color: rgba(225，192，203，.1);
        }
    </style>
</head>
<body>
    <script>
        //1、外层循环控制行数
        for(let i = 1; i <= 9; i++){
            //里层循环控制列数
            for(let j = 1; j <= i; j++){
                document.write(`<span>${i} ✖ ${j} ＝ ${i*j}</span>`)
            }
            //换行
            document.write('<br>')
        }
    </script>
</body>
</html>

07-数组求和以及平均值

<script>
        //遍历数组
        let arr = [2,4,1,6,7]
        // for(let i = 0; i < arr.length; i++){
        //     console.log(arr[i])
        // }

        //遍历累加
        let sum = 0
        for(let i = 0; i< arr.length; i++){
            sum += arr[i]
        }
        console.log(`数组累加的结果是：${sum}`)


        //求平均值
        console.log(`数组累加后的平均值为：${sum / arr.length}`);
        
    </script>

08-数组比较最大值和最小值

<script>
    //最大值
    let arr = [2,6,1,7,4]
    //max里面需要存的是最大值
    let max = arr[0]
    //遍历数组
    for(let i = 1; i < arr.length; i++){
        //如果max比数组元素里面的值小，我们就要把这个数组元素赋值给max
        if(max < arr[i]){
            max = arr[i]
        }
    }
    //输出max
    console.log(max);


    console.log('---------------------')
    //最小值
    let min = arr[0]
    for(let i = 0; i < arr.length; i++){
        if(min > arr[i]){
            min = arr[i]
        }
    }
    console.log(min);

</script>

09-数组操作-修改

<script>
    let arr = []
    console.log(arr)
    console.log(arr[0])

    //定义（修改）
    arr[0] = 1
    arr[1] = 5
    console.log(arr);


    console.log('------------------')
    let arr2 = ['pink','red','green']
    //修改
    arr2[0] = 'black'
    console.log(arr2);

    //给所有数组元素后面加个同志（修改）
    for(let i = 0; i < arr2.length; i++){
        arr2[i] = arr2[i] + '老师'
    }
    console.log(arr2);

</script>

10-数组操作-新增

<script>
    let arr = ['pink','pink']
    //新增 push（新增至末尾）
    arr.push('yellow','green')
    console.log(arr)    //['pink', 'pink', 'yellow', 'green']


    //新增 unshift（新增至开头）
    arr.unshift('red','black')
    console.log(arr)   // ['red', 'black', 'pink', 'pink', 'yellow', 'green']

</script>

11-数组筛选

<script>
    //重点案例
    let arr = [2,63,5,98,4,29,8,35,7]
    //声明新的空数组
    let newArr = []
    //遍历旧数组
    for(let i = 0; i < arr.length; i++){
        if(arr[i] >= 10){
            //满足条件 添加到新数组
            newArr.push(arr[i])
        }
    }
    console.log(newArr);


    //数组去0案例
    let arr2 = [5,96,0,12,3,0,45,0,8,7,9,0,0]
    let newArr2 = []
    for(let i = 0; i < arr2.length; i++){
        if(arr2[i] !== 0){
            newArr2.push(arr2[i])
        }
    }
    console.log(newArr2)
</script>

12-数组操作-删除

<script>
    let arr = ['red','green','blue']
    console.log(arr.pop())    //打印删除的元素是哪一个
    //1、pop() 删除最后一个元素
    arr.pop()
    console.log(arr)

    console.log('------------')


    let arr2 = ['red','green','blue', 'pink', 'yellow']
    //2、shift() 删除第一个元素
    arr2.shift()
    console.log(arr2);

    console.log('------------')

    let arr3 = ['red','green','blue', 'pink', 'yellow']
    //3、splice 删除指定元素
    //splice(起始位置-索引号,删除元素个数)
    arr3.splice(1,1)
    console.log(arr3);

    console.log('------------')


    //splice(起始位置-索引号)
    //表示从起始位置-索引号开始删除后面所有元素
    arr3.splice(1)
    console.log(arr3)
</script>

13-综合案例-根据数组生成柱状图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        .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 class="box">
        <div style="height: 123px;">
            <span>123</span>
            <h4>第1季度</h4>
        </div>
    </div>
    <div class="box">
        <div style="height: 123px;">
            <span>123</span>
            <h4>第1季度</h4>
        </div>
    </div>
    <div class="box">
        <div style="height: 123px;">
            <span>123</span>
            <h4>第1季度</h4>
        </div>
    </div>
    <div class="box">
        <div style="height: 123px;">
            <span>123</span>
            <h4>第1季度</h4>
        </div>
    </div> -->
    <script>
        /**
         * 
        //声明一个新的数组
        let arr = []
        //循环四次弹窗
        for(let i = 1; i <= 4; i++){
            let num = prompt(`请输入第${i}季度的数据：`)
            arr.push(num)
            //arr.push(prompt(`请输入第${i}季度的数据：`))
        }
        console.log(arr);
        *
        **/
        let arr = []
        for(let i = 1; i <= 4; i++){
            let num = prompt(`请输入第${i}季度的数据：`)
            arr.push(num)
        }
        //盒子开头
        document.write(`<div class="box">`)
        
        //盒子中间 利用循环的形式
        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>

14-冒泡排序

<script>
    //1、冒泡排序
    let arr = [5,4,3,2,1]
    for(let i = 0; i < arr.length - 1; i++){
        for(let j = 0; j < arr.length - i - 1; j++){
            //开始交换 但是前提 第一个数大于第二个数才交换
            if(arr[j] > arr[j + 1]){
                //交换2个变量
                let temp = arr[j]
                arr[j] = arr[j + 1]
                arr[j + 1] = temp
            }
        }
    }
    console.log(arr)

    console.log('--------------')

    //2、sort()排序 (默认升序)
    let arr2 = [5,4,3,2,1]
    arr2.sort()
    console.log(arr2)

    console.log('--------------')

    //3、sort(function(a,b)){
    //     return a - b    
    //  }      升序
    let arr3 = [5,4,3,2,1]
    arr3.sort(function(a,b){
        return a - b
    })
    console.log(arr3)
    console.log('--------------')

    //3、sort(function(a,b)){
    //     return b - a    
    //  }      降序
    let arr4 = [5,4,3,2,1]
    arr3.sort(function(a,b){
        return b - a
    })
    console.log(arr4)
</script>

第四部分

01-函数的使用

<script>
    //1、函数的声明
    function sayHi() {
        //document.write('Hi~~~')
        console.log('Hi~~~');

    }

    //2、调用函数 (调用一次执行一次)
    sayHi()
    sayHi()
    sayHi()

    //3、多次调用
    for(let i = 1; i <= 50; i++ ){
        sayHi()
    }
</script>

02-封装函数案例

<script>
    function getSum() {
        let num1 = +prompt('请输入第一个数：')
        let num2 = +prompt('请输入第二个数：')
        alert(`两数之和为：${num1+num2}`)
    }
    getSum()
</script>

03-函数参数

<script>
    //没有参数，函数较死板
    function getSum() {
        let sum = 0
        for(let i = 0; i <= 100; i++){
            sum += i
        }
        console.log(sum)
    }
    getSum()

    console.log('------------------')
    //单个形参
    //求1~X之和
    function getSum2(end) {
        let sum2 = 0
        for(let i = 0; i <= end; i++){
            sum2 += i
        }
        console.log(sum2)
    }
    getSum2(50)

    console.log('------------------')
    //两个形参
    //求X~X之和
    function getSum3(start,end) {  //在声明时为形参
        let sum3 = 0
        for(let i = start; i <= end; i++){
            sum3 += i
        }
        console.log(sum3)
    }
    getSum3(100,200)  //在调用时为实参

</script>

04-函数参数-默认参数

<script>
    //函数求和  无默认函数参数
    function getSum(x , y) {
        document.write(x + y)
    }
    getSum(1,2)
    document.write('---')
    getSum()   //未设置默认值结果为NaN（undefined+undefined）


    document.write('---')

    //函数求和  设置默认函数参数
    function getSum1(x = 0 , y = 0) {
        document.write(x + y)
    }
    getSum1(1,2)
    document.write('---')
    getSum1()   //设置默认值后结果为0

    //无默认函数参数
    function getSum2(start,end) {
        let sum2 = 0
        for(let i = start; i <= end; i++){
            sum2 += i
        }
        console.log(sum2)
    }
    getSum2(100,200)

    console.log('------------------')

    //设置默认函数参数
    function getSum3(start = 0,end = 0) {
        let sum3 = 0
        for(let i = start; i <= end; i++){
            sum3 += i
        }
        console.log(sum3)
    }
    getSum3(100,200)
</script>

05-函数封装数组求和

<script>
    //给一个参数的默认值
    function getArrSum(arr = []) {
        let sum = 0
        for(let i = 0; i < arr.length; i++){
            sum += arr[i]
        }
        console.log(sum)
    }
    getArrSum()
    console.log('------------')
    getArrSum([11,22,33])
    getArrSum([1,2,3,4,5,6,7,8,9,10])
</script>

06-实参可以是变量

<script>
    //求n~m的累加和
    function getSum(n = 0,m = 0) {
        let sum = 0
        for(let i = n; i <= m; i++){
            sum += i 
        }
        alert(sum)
    }
    let num1 = +prompt('请输入累加起始值：')
    let num2 = +prompt('请输入累加结束值：')
    getSum(num1,num2)
</script>

07-函数的返回值

<script>
    //函数的返回值
    function fn() {
        return 100
    }

    //调用函数fn法一：
    console.log(fn())

    //调用函数fn法一：
    let resulte = fn()
    console.log(resulte)

    console.log('------------------------')

    //求和函数的写法
    function getTotalPrice(x , y){
        return x + y
        //return 后面的代码不会被执行
    }
    let sum = getTotalPrice(1,2)
    console.log(sum)
</script>

08-求最大值函数

<script>
    //1、求最大值函数
    function getMax(x , y) {
        return x > y ? x : y
    }
    let max = getMax(111,222)
    console.log(max)

    //2、求任意数组的最大值，并且返回
    function getArrValue(arr = []) {
        //(1)先准备一个max变量存放数组的第一个值
        let max = arr[0]
        //(2)遍历比较
        for(let i = 1; i < arr.length; i++){
            if(max < arr[i]){
                max = arr[i]
            }
        }
        return max
    }
    let resulteMax = getArrValue([11,43,6,7,90,46])
    console.log(resulteMax)

</script>

09-同时得出最大值和最小值

<script>
    function getArrValue(arr = []) {
        //(1)先准备一个max变量存放数组的第一个值
        let max = arr[0]
        //(2)再准备一个min变量存放数组的第一个值
        let min = arr[0]
        //2、遍历比较 max
        for(let i = 1; i < arr.length; i++){
            if(max < arr[i]){
                max = arr[i]
            }

            //min
            if(min > arr[i]){
                min = arr[i]
            }
        }
        return [max , min]
    }
    let resulteMax = getArrValue([11,43,6,7,90,46])
    console.log(resulteMax)
</script>

10-变量访问原则

<script>
    let a = 1
    function fn1() {
        let a = 2
        let b = '22'
        fn2()
        function fn2() {
            let a = 3
            fn3()
            function fn3() {
                let a = 4
                console.log(a)
                console.log(b)

            }
        }
    }
    fn1()
</script>

11-函数表达式

<script>
    //函数表达式
    //fn() 必须先声明后调用，否则报错
    let fn = function (x , y) {
        console.log('我是函数表达式')
    }
    fn()  //正确
    console.log(fn);


    console.log('----------------')


    //2、具名函数的调用可以写道任意位置
    fun()  //此位置可行
    function fun() {
        console.log('我是具名函数')
    }
    fun()  //此位置也可行

    //
    let sum = function () {}
    console.log(sum)
    console.log(sum())  //无return时，则返回undefined

</script>

12-立即执行函数

<script>
    //()          ()
    //函数声明  函数调用
    //(function () {})()

    (function () {
        console.log(11)

    })();  //唯一必须加分号结束的表达式！！！！！！

    //实例：
    (function (x,y) {
        console.log(x + y)
    })(2,3);
</script>

13-综合案例

<script>
    //1、用户输入
    let second = +prompt('请输入秒数：')
    //2、封装函数
    function getTime(time) {
        console.log(time)
        //3、转换
        // 小时：h = parseInt(总秒数 / 60 / 60 % 24)
        // 分钟：m = parseInt(总秒数 / 60 % 60)
        // 秒数：s = parseInt(总秒数 % 60)
        let h = parseInt(time / 60 / 60 % 24)
        let m = parseInt(time / 60 % 60)
        let s = parseInt(time % 60)

        //若小于数字10，在前面补0
        h = h < 10 ? '0' + h : h
        m = m < 10 ? '0' + m : m
        s = s < 10 ? '0' + s : s
        console.log(h , m , s)

        return `转换成时分秒为：${h}小时：${m}分钟：${s}秒`
    }
    let srt = getTime(second)
    document.write(srt)

</script>

14-逻辑中断

<script>
    function fn(x,y) {
        x = x || 0
        y = y || 0
        console.log(x + y)
    }
    fn(1,2)

    console.log('---------------')
    console.log(false && 22);
    console.log('---------------')
    console.log(false && 3 + 5);
    console.log('---------------')
    console.log(false || 22);
    console.log('---------------')
    console.log(false || 3 + 5);
    console.log('---------------')

    let age = 18
    console.log(false && age++)
    console.log(false || age++)
    console.log('---------------')
    console.log(true && age++)
    console.log(true || age++)

</script>

15-转换为布尔型

<script>
    //显示转换：
    //''\0\undefined\null\false\NaN转换为布尔值后都是false，其余为true
    console.log(Boolean(''))
    console.log(Boolean(0))
    console.log(Boolean('pink'))
    console.log(Boolean(90))
    console.log(Boolean(-1))
    console.log(Boolean(undefined))
    console.log(Boolean(null))
    console.log(Boolean(NaN))
    console.log('----------------------')

</script>

亚马逊云科技技术品牌专区

更多推荐

open-code-review Codex 插件教程：对话式调用评审技能指南

本文是一份面向新手的 **open-code-review Codex 插件教程**，教你在 Codex 中通过对话式方式调用 open-code-review 的 AI 代码评审技能。open-code-review 是阿里巴巴开源的 AI 代码评审工具，采用"确定性流水线 + LLM Agent"混合架构，内置多语言评审规则（NPE、线程安全、XSS、SQL 注入等），可在 Codex 里用一

亚马逊云科技技术品牌专区

OBS Studio 完整指南：免费开源录屏与直播软件从零上手

想做一场像模像样的直播，或者把屏幕内容录成教程视频，但一想到商用软件的订阅费就有些犹豫？其实你不需要花一分钱。OBS Studio 是一款免费开源的直播与录屏软件，支持 Windows、macOS 和 Linux，采集、混音、编码、推流、录制，一条流水线全包了。## 先搞清楚 OBS Studio 是什么OBS Studio 是一个"场景化"的采集合成工具：你把摄像头、窗口、浏览器、图片、

亚马逊云科技技术品牌专区

如何用MediaCrawler爬取小红书抖音数据？7大平台爬虫从安装到实战完整指南

MediaCrawler 是一个支持小红书、抖音、快手、B站、微博、百度贴吧、知乎的开源自媒体数据采集工具。它能按关键词、按帖子、按创作者主页三种方式抓取笔记/视频内容、评论甚至二级评论，并把结果存成 JSON、CSV、Excel 或数据库。适合做市场调研、竞品监控、内容选题的运营人员，以及想要现成爬虫框架而不想从零写 JS 逆向的开发者。## 从一次"手动抄数据"说起想象这个场景：你负责