2024-09-05 JS第二课笔记

判断

   <script>
        let a =5
        let b='5'
        // if判断
        // 语法 if (判断条件) {条件成功执行代码}
        if (a==b) {
            console.log('条件成立');  
        }else{
            console.log('条件不成立'); 
            //  else-->否则
        }
        // 多条件判断 else if 
        if (a < b) {
            console.log("a确实小于b");
        } else if (a == b) {
            console.log("a确实等于b");
        } else {
            console.log("a大于b"); 
        }
        // 逻辑运算符  and-->&&        or-->||
        // &&左右两边条件都为真 才为真 只要有一个条件为假 那么就为假
        if (a >0 && b>0 ){
            console.log("我是成立的");
        }else{
            console.log("条件不成立");
        }
        // ||左右两边只有有一个条件为真 那就为真
        if ( a >0 || b>10 ){
            console.log("我是成立的");
        }else{
            console.log("条件不成立");
        }
        //  not--->! 表示对结果进行取反
        if (! ( a >0 || b>10 )){
            console.log("我是成立的");
        }else{
            console.log("条件不成立");
        }
    </script>

循环

    <script>
        // 普通for循环语法
        for (语句1; 语句2; 语句3) {
            被执行的代码块
        }
        for (let i = 0; i < 5; i++) {
            console.log(i);
        }
    </script>
    <script>
        for (let 变量名 of 对象) {
            被执行的代码块
        }
        // 除了写法的区别 逻辑都是一样的
        let arr = [1, 2, 3, 4, 5, 6]//数组名字叫arr
        //for来遍历 关键词后面总会接上一个括号 都是来写逻辑
        for (let i of arr) {
            // 只需要打印item就可以获取对象arr的值
            console.log(i);
        }
    </script>
    <script>
        // 根据object对象循环语法
        for (let 变量名 in 对象) {
        }
        let a = {
            name: "景明",
            age: 18,
        }
        // 使用for...in...遍历对象
        for (let i in a) {
            console.log(i);
            // console.log(a.i);
            // 它会默认从对象a里面找i键值对
            // 注意 如果要拿对象里面的值必须使用 对象[] 记住就行
            console.log(a[i]);
        }
    </script>


    <script>
        // while循环
        while (条件) {
            执行代码
        }
        let aa = 10
        while (aa == 10) {
            console.log('因为a等于10 满足条件 代码一直执行');
        }
        // 结束死循环
        let aaa = 0
        // 是在网页中写while会占用浏览器内存 无限循环 导致浏览器卡死
        while (aaa < 10) {//判断a==10
            console.log("无限循环")
            // 我们也可通过条件来终止循环 
            a++  //a++ 每次循环 a都会加1 累加
        }
        /* break与continue break:结束整个循环
        continue:结束当前循环,进入下一轮循环
        for循环和while循环同等作用 */
        // break
        let ab = [1, 2, 3, 4]
        for (let i of ab) {
            // 当i为3时
            if (i == 3) {
                // break退出整个循环
                break
            }
            console.log(i);
        }
        // continue
        let ax = [1, 2, 3, 4]
        for (let i of ax) {
            // 当i为3时
            if (i == 3) {
                // continue 当 i==3 跳过
                continue
            }
            console.log(i);
        }

    </script>

反引法

    <script>
        // 可以在 `` 通过 ${} 插入变量
        let a = 10
        console.log(`我今年${a}岁了`);
    </script>

函数

<script>
    // 函数
    //1.普通函数 
    // 创建一个函数叫a 语法
    function a() {
        console.log("我是函数a");
    }
    // 调用函数
    a()
    // 2.箭头函数  需要写一个剪头
    // 区别:1.箭头函数 看起来 更简单和简洁
    // let b创建一个变量叫b它存着一个剪头函数
    let b = () => {  // 函数的名字叫b
        console.log("我是函数b");
    }
    b()
</script>
<script>
    // 形参和实参
    // let name = (形参1, 形参2) => {
    // }
    // name(实参1, 实参2)

    // 2.箭头函数  需要写一个箭头
    // 区别:1.箭头函数 看起来 更简单和简洁
    // let b创建一个变量叫b它存着一个剪头函数
    // 在创建函数b 接受的形参叫实参
    let ba = (x, y, z) => {  // 函数的名字叫ba
        console.log(x, y, z);
    }
    ba(1, "武大郎", 3)//调用函数b可以传入实参
</script>


<script>
    // return 返回函数内部的值
    let bb = (x, y) => {  // 函数的名字叫b
        return x + y
    }
    // 因为函数内部返回结果 你要是想拿到结果 就必须要通过打印函数调用
    console.log(bb(1, 3));
</script>


<script>
    // 函数形参默认值 y不传就默认y的默认值 传了就以传过来的实参为准

    // 函数的默认值
    let bc = (x, y = 20) => {  // 函数的名字叫bc
        return x + y
    }
    // 因为函数内部返回结果 你要是想拿到结果 就必须要通过打印函数调用
    console.log(bc(1, 3));

</script>

<script>
    // 函数嵌套 
    // 函数的嵌套
    let ac = () => {
        console.log("我是函数a");
        // 在函数a的内部调用函数b
        bd()
    }
    let bd = () => {
        console.log("我是函数b");
    }
    // 从上到下执行
    // 函数的执行顺序和调用顺序有关
    // 一层套一层换这个叫嵌套函数
    ac()//调用函数ac

    //箭头函数更加简洁更加方便
    // 函数的嵌套
    let g = (x, y) => {
        return x + y//这里只有一行代码
    }
    console.log(g(1, 2));
    // 这是箭头函数独有的简写方式普通函数不具备
    let bg = (x, y) => x + y
    console.log(bg(1, 2));


</script>



<script>
    /*作用域
在JavaScript中同样也有作用域之分,在函数内部叫做局部作用域,在函数外部叫做全局作用域。
变量在函数内声明,变量为局部变量,具有局部作用域。
局部变量:只能在函数内部访问*/

    let function1 = () => {
        let ar = 10
        console.log(ar);
    }
    function1()
    // console.log(ar);  ar is not defined ar在局部变量 外部无法调用
    // 变量在函数外定义,即为全局变量。
    // 全局变量:网页中所有脚本和函数均可使用。
    let as = 10
    let function2 = () => {
        console.log(as);
    }
    function2()
    console.log(as); 
</script>

定时器

    <script>
        /*闹钟 到了某个时间 做什么
        JavaScript 定时器,有时也称为“计时器”,用来在经过指定的时间后执行某些任务,类似于我们生活中的闹钟。
        JavaScript 中提供了两种方式来设置定时器,分别是 setTimeout() 和 setInterval(),它们之间的区别
        如下:*/
        // setTimeout()  在指定的时间后(单位为毫秒),执行某些代码,代码只会执行一次
        //                按照指定的周期(单位为毫秒)来重复执行某些代码,定时器不会自动停止,除
        // setInterval()  非调用 clearInterval() 函数来手动停止或着关闭浏览器窗口
        // setTimeout() 函数用来在指定时间后执行某些代码,代码仅执行一次
        // setTimeout(() => {
        //     console.log("2秒钟后执行此代码");
        // }, 2000)
    </script>
    <script>
        // setInterval() 函数可以定义一个能够重复执行的定时器,每次执行需要等待指定的时间间隔
        setInterval(() => {
            alert("每隔3秒,这个代码弹窗一次");
            console.log("每隔3秒,这个代码执行一次");
            
        }, 2000)
    </script>
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容