JavaScript 初级（三）

最新推荐文章于 2024-09-29 11:25:09 发布

受气包boo

最新推荐文章于 2024-09-29 11:25:09 发布

阅读量1.1k

点赞数 37

分类专栏： JavaScript学习手册（零基础版）文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/weixin_65216469/article/details/135012533

版权

JavaScript学习手册（零基础版）专栏收录该内容

3 篇文章 0 订阅

订阅专栏

前言

这篇文章为本人学习时所作，如有不严谨之处还请多多包涵。本文章包含了js基础知识与实战案例。方便大家练习。

一、基础知识

1.隐式类型转换

发生在各种运算中。true ==>隐士转换为数字1。false ==>隐式转换为数字0。也可以通过强制类型转换回来。Boolean(值) 强制的将当前值转换为布尔值。

特殊的值：哪些可以转换为false? ：0，空字符串，null ，undefined。

2.短路运算

如果是 && 运算，只要遇到 false ，就立即短路，不会再向下执行，直接返回当前值。

如果是 || 运算，只要遇到 true 就立即短路，不会再执行，直接返回当前值。

如果逻辑运算中，既有 && 又有 || ，先计算 && ，后计算 || 。

console.log(1 || 2);//返回值为1
console.log(0 || '' || 2 || 3);//返回值为2

console.log(1 && 2);//2

console.log(0 && 1 || 2);//2

3.循环语句

3.1while循环

while(条件) {
        //循环执行的代码
        //修改变量值
       }

语法解释：

1.初始化变量（定义变量并赋值）不能随便初始化。

2.程序会自动将变量带入到while循环的条件中，判断条件是否成立，如果成立，则立即执行循环体中的代码。

3.执行完循环体中的代码后，再修改变量的值，然后将修改的值再带入到条件中，如果条件成立，则继续执行循环体中的代码。

3.2.for循环

语法：

for(初始化变量; 条件; 变量自增; (变量自减)) {
                //循环体代码
            }

for 循环嵌套（一个循环中可以嵌套一个或多个循环）

for (let i = 1; i <= 5; i++){
                console.log('-----------');
                for(let j = 1; j <= 3; j++) {
                    console.log('hhh');
                }
            
            }

上述代码输出结果如下：

代码的具体如何执行大家可以亲自去进行断点调试。

循环嵌套是如何执行的？执行顺序是什么？

1.第一次先执行最外层的循环。

2.然后将循环内部的代码全部执行完后

3.再执行下一次的外层循环

4.断点调试

是程序员必备的调错，梳理逻辑的技能。

如何调试？

1.运行程序；

2.在浏览器控制台中2，选择scorces选项。

3.单击对应的html页面。

4.在代码第一行位置处，插入断点，设置断点。（在对应的行号上点击鼠标左键）

5.重新刷新页面，执行程序。

6.手动让程序逐行执行，点击F10，或者下一步按钮。

7.将鼠标放到变量上，或者某个条件上，就可以看见执行结果。

5.数组

5.1 定义数组

let 数组名 = [数据1, 数据2, 数据3, ..., 数据n]

let arr = new Array(数据1, 数据2, ..., 数据n];

5.2 遍历数组（通过循环的方式获取数组中的值）

案例：将数组的每一个值分别输出到控制台中

let ary = ['a', 'b', 'c', 'd', 'f', 'g'];
           for(let i = 0; i < ary.lengthl; i++) {
                console.log(ary[i]);
           }

5.3 操作数组

具体的操作方式：

1.增

数组名.push(新增的内容)
数组名.unshift(新增的内容)

代码演示：

let ary = ['a'];
           ary.push('b','c');//第一种方式 添加到末尾
           ary.unshift('受气包','boo');//第二种方式 添加到前面

           console.log(ary);

2.删

具体三种方法。

数组.pop()
数组.shift()
.splice(操作的下标，删除的个数)

代码演示：

let ary = ['a', 'b', 'c', 'd'];
           ary.pop();//第一种方式 删除数组最后一个值
           ary.shift();//第二种方式 将数组第一个值删除
           ary.splice(1,1);//可以删除任意的值

           console.log(ary);

3.改

基本语法：数组[索引] = 值；

代码演示：

let ary = ['a', 'b', 'c', 'd'];
           ary[1] = 'B';

           console.log(ary);

4.查

二、实战案例

案例1 while循环

要求：输出十次月薪过万。重复输出，用循环解决。

 let i = 1;
      while(i <= 10) {
        console.log('aaa');
        i++;
      }

while循环练习

要求：输出1~100之间的所有数字。

let i = 1;
      while(i <= 100){
        document.write(`当前数字是：${i} <br> `);
      }

要求：计算1~100之间所有的数字累加和。

let i = 1;
      let sum = 0;
      while(i <= 100){
        sum = sum + i;
        i++;
        console.log(`当前结果是：${sum} `);
      }

案例2 ATM机体验

let m = 100;

      while(true) {
        let res = prompt('请选择您的操作:1.存钱 2.取钱 3.查看余额 4.退出');
        if(res == '4') {
            break;
        }
        switch(res) {
            
            case '1' :
            let money = Number(('请输入存款金额'));
            m += money;
            break;

            case '2':
                let money1 = Number(('请输入取款金额'));
                if(m < money1) {
                    alert('余额不足');
                }
                else {
                    m -= money1;
                }
            break;

            case '3':
                alert(`账户余额是：${m}`);
            break;
                
        }

案例3 for循环练习

1.输出1~100之间的数字

for(let i = 1; i <= 100; i++){
                console.log(i);
            }

2.输出1~100之间的偶数和

let sum = 0;
for(let i = 1; i <= 100; i++) {
if(i % == 0) sum += i;
}
console.log(sum);

3.在页面中输出一行5个星星

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

4.双for循环练习

要求：页面打印出5行5列的星星

 for (let i = 1; i <= 5; i++){
                document.write(`<br>`);
                
                for(let j = 1; j <= 5; j++) {
                    document.write('★');
                }
            
            }

5.打印三角形

for( i = 1; i <= 5; i++) {
            document.write(`<br>`);
            for(j = 1; j <= i; j++)
            document.write('★');
           }

6.九九乘法表

for(let i = 1; i <= 9; i++) {
            document.write(`<br>`);
            for(let j = 1; j <= i; j++)
            
            document.write(`<span>${i} x ${j} = ${i * j} &nbsp;&nbsp</span>`);
           }

案例4 数组的深度体验

要求：求数组[2,6,1,7,4]里面所有元素的和以及平均值。

let ary = [2, 6, 1, 7, 4];
           for(i = 0; i < ary.length; i++) {
                sum += ary[i];
           }
           console.log('最后的和是：'+ sum);

           console.log('平均值是：' + sum / ary.length);

求数组中的最大值。

let ary = [2, 6, 1, 77, 52, 25, 7];
           let max = ary[0];
           for(let i = 1; i < ary.length; i++) {
                if(ary[i] > max) {
                    max = ary[i];
                }
                
           }
           console.log(max);