前端0×01

〃KIяItò°

已于 2024-08-24 19:24:43 修改

阅读量375

点赞数 5

文章标签：前端 javascript 开发语言

于 2024-08-20 23:45:17 首次发布

本文链接：https://blog.csdn.net/weixin_55121503/article/details/141370170

版权

语句

目标：能说出表达式和语句的区别

表达式：

表达式是可以被求值的代码，JavaScript引擎会将其计算出一个结果。

x = 7
3 + 4
num++

语句：

语句是一段可以执行的代码。

比如：prompt()可以弹出一个输入框，还有 if 语句 for循环语句等等

区别：

表达式：因为表达式可被求值，所以它可以写在赋值语句的右侧。

表达式 num=3+4

语句：而语句不一定有值，所有比如alert()for和break等语句就不能被用于赋值。

语句 alert() 弹出对话框 console.log() 控制台打印输出

分支语句

目标：掌握流程控制，写出能"思考"的程序

程序三大流程控制语句

以前我们写的代码，写几句就从上往下执行几句，这种叫顺序结构

有的时候要根据条件选择执行代码，这种就叫分支结构

某段代码被重复执行，就叫循环结构

分支语句可以让我们有选择性的执行想要的代码
分支语句包含:

if分支语句

三元运算符

switch语句

1.if语句

if语句有三种使用：单分支、双分支、多分支
单分支使用与语法：

if(条件){
    满足条件要执行的代码
}

括号内的条件为true时，进入大括号里执行代码

小括号内的结果若不是布尔类型时，会发生隐式转换为布尔类型

如果大括号只有一个语句，大括号可以省略，但是，我们不提倡这么做

双分支if语句

if(条件){
    满足条件要执行的代码
}else{
    不满足条件执行的代码
}

多分支if语法

使用场景：适合用于多个结果的时候，比如学习成绩可以分为：优良中差

if(条件1){

    代码1
}else if (条件2){

    代码2
}else if (条件3){

    代码3
} else {

    代码n
}

释义：

先判断条件1，若满足条件1就执行代码1，其他不执行
若不满足则向下判断条件2，满足条件2执行代码2，其他不执行
若依然不满足继续往下判断，以此类推
若上条件都不满足，执行else里的代码n
注：可以写N个条件，但这里演示只写了2

2.三元运算符

目标：能利用三元运算符执行满足条件的语句

使用场景：
符号：

语法：

条件 ? 满足条件执行的代码 : 不满足条件执行的代码

一般用来取值

3.switch语句

目标：能利用switch执行满足条件的语句

switch(数据){
    case 值1：
        代码1
        break
    case 值2：
        break
    default：
        代码n
        break
}

释义：

找到跟小括号里数据全等的case值，比执行里面对应的代码
若没有全等===的则执行default里的代码
例：数据若跟值2全等，则执行代码2

循环语句

目标：掌握循环结构，实现一段代码重复执行

学习路径：

1.断点调试

作用：学习时可以帮助更好的理解代码运行，工作时可以更快找到bug
浏览器打开调试界面

1.按F12打开开发者工具

2.点到sources一栏

3.选择代码文件

while循环

目标：掌握while循环语法，能重复执行某段代码

循环：重复执行一些操作，while：在...期间，所以while循环就是在满足条件期间，重复执行某些代码。比如我们运行相同的代码输出5次（输出5句“我学的很棒”）

路径：

while循环基本语法

while循环三要素

1.while循环基本语法

while(循环条件){

    要重复执行的代码(循环体)
}

释义：

跟if语句很像，都要满足小括号里的条件为true才会进入循环体执行代码

while大括号里代码执行完毕后不会跳出，而是继续回到小括号里判断条件是否满足，若满足又执行大括号里的代码，然后再回到小括号判断条件，知道括号内条件不满足，即跳出

2.while循环三要素：

循环的本质就是以某个变量为起始值，然后不断产生变化量，慢慢靠近终止条件的过程。

所以，while循环需要具备三要素：

1.变量起始值

2.终止条件（没有终止条件，循环会一直执行，造成死循环）

3.变量变化量（用自增或者自减）

let i=1
while(i <= 3){
    document.write('我会循环三次<br>')
    i++
}

循环退出

目标：能说出continue和break的区别

循环结束：

break：退出循环

continue：结束本次循环，继续下次循环

区别：

continue 退出本次循环，一般用于排除或者跳过某一个选项的时候，可以使用continue

break 退出整个循环，一般用于结果已经得到，后续的循环不需要的时候可以使用

循环-for

for循环语法

作用:重复执行代码

好处：把声明起始值、循环条件、变化值写到一起，让人一目了然，它是最常用的循环形式

for (变量起始值; 终止条件;变量变化量){
    //循环体
}

2.退出循环

continue 退出本次循环，一般用于排除或者跳过某一个选项的时候，可以使用continue
break 退出for整个循环，一般用于结果已经得到，后续的循环不需要的时候可以使用

了解：

1.while(true)来构造"无限"循环，需要使用break退出循环。

2.for(;;)也可以来构造"无限"循环，同样需要使用break退出循环。

for循环嵌套

for (外部声明记录循环次数的变量; 循环条件; 变化值){

    for （内部声明记录循环次数的变量; 循环条件; 变化值）{

        循环体
    }
}

一个循环里再套一个循环，一般用for循环里

计算：假如每天记住5个单词，三天后一共能记住多少单词？

第一天：5个单词

第二天：5个单词

第三天：5个单词

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        for (let i = 1 ; i <= 3 ; i++) {
            document.write(`第${i}天</br>`)

            for (let j = 1 ; j <= 5 ; j++) {
                document.write(`记住了${j}个单词</br>`)
            }
        }
           
    </script>
</body>
</html>

运行结果

数组的基本使用

目标：能够声明数组并且能够获取里面的数据

1.声明语法

两种方法

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

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

let names = ['小米','小明','小刚','小红','小丽']

数组是按顺序保存，所以每个数据都有自己的编号计算机中的编号从0开始，所以小米的编号为0，小丽的编号为4，以次类推

2.数值取法

数组名[下标]

let names = ['小米','小明','小刚','小红','小丽']
names[0]    // 小米
names[1]    // 小丽

通过下标取数据

取出来是什么类型的，就根据这种类型特点来访问

3.一些术语

元素：数组中保存的每个数据都叫数组元素

下标：数组中的编号

长度：数组中数据的个数，通过数组的length属性获得

let names = ['小米','小明','小刚','小红','小丽']
console.log(names[0])    //  小米
console.log(names[1])    //  小刚
console.log(names.length)    //  5

4.遍历数组(重点)

目标：能够遍历输出数组里的元素

用循环把数组中每个元素都访问到，一般会用for循环遍历
语法

for （let i = 0 ; i < 数组名.length ; i++）{
    数组名[i]
}

let nums = [10, 20, 30, 40, 50] 
for (let i = 0; i < nums.length; i++) {
    document.write(nums[i])
}

练习 · 数组求和

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

分析：

声明一个就和sum。
变量这个数组，把里面每个数组元素加到sum里面
用求和变量sum除以数组的长度就可以的到数组的平均值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        let arr = [2,6,1,7,4]
        //1.就和的遍历 sum
        let sum = 0
        //2.遍历累加
        for (let i = 0; i < arr.length; i++ ){
        // sum = sum + arr[i]
            sum += arr[i]
        }
        document.write(`数组的和为：${sum}</br>`)
        //3.平均值 和/arr.length = 4
        document.write(`数组的平均值为：${sum / arr.length}</br>`)
    </script>
    
</body>
</html>

练习 · 数组求最大值和最小值

需求：求数组[2,6,1,77,52,25,7]中的最大值

分析：

声明一个保存最大元素的变量max。
默认最大值可以取数组的第一个元素。
遍历这个数组，把里面每个数组元素和max相比较。
如果这个数组元素大于max就把这个数组元素存到max里面，否则继续下一轮比较。
最后输出这个max

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        let arr =  [2,6,1,77,52,25,7]
        // max 里面要存的是最大值
        max = arr [0]
        for(i = 1; i < arr.length; i++){
            //如果max 比数组元素里面的值小，我们就把这元素给 mx
            if (arr [i] > max ){
                max = arr [i]
            }
            
        }
        //输出 max
        document.write(`最大值为${max}</br>`)
    </script>
    
</body>
</html>

结果

最小值同理

操作数组

数组的本质是数据的集合，操作数据无非就是增删改查语法：

查：查询数组数据数组[下标]

改：重新赋值数组[下标]=新值

增：数组添加新的数据 arr.push(新增的内容) arr.unshift(新增的内容)

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

操作数组-新增

目标：掌握利用push向数组添加元素（数据）

数组.push()方法将一个或多个元素添加到数组的末尾，并返回该数组的新长度(重点)

语法:

arr.push(元素1,...,元素n)

let arr = ['red','green']
arr.push('pink')
console.log(arr)    // ['red', 'green', 'pingk']

let arr = ['red','green']
arr.push('pink', 'hotping')
console.log(arr)    // ['red', 'green', 'pingk', 'hotping']

arr.unshift(新增的内容)方法将一个或多个元素添加到数组开头，并返回该数组的新长度

语法：

arr.unshift(元素1,...,元素n)

let arr = ['red','green']
arr.unshift('pink')
console.log(arr)    // ['unshift', 'red', 'green']

let arr = ['red','green']
arr.unshift('pink', 'hotping')
console.log(arr)    // ['pink', 'hotping',' red', 'green']

案例数组筛选

需求：将数组[2,0,6,1,77,9,52,0,25,7]中大于等于10的元素选出来，放入新数组

分析：

声明一个新的数组用于存放新数据newArr
遍历原来的旧数组，找出大于等于10的元素
一次追加给新数组 newArr

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
        <script>
            // 重点案例
            let arr = [2,0,6,1,77,9,52,0,25,7]
            // 1.声明新的空的数组
            let newArr = []
            // 2.遍历旧数组
            for (i = 0; i < arr.length; i++ ) {
                if (arr[i] >= 10)   {
                    // 3. 满足条件 追加给新的数组
                    newArr.push (arr[i])
                }

            }
            console.log(newArr);
            

        </script>
</body>
</html>

输出结果：

操作数组-删除

数组.pop()方法从数组中删除最后一个元素，并返回该元素的值

语法:

arr.pop()

例如:

let arr = ['rad', 'green']
arr.pop()
console.log(arr)  // ['red']

数组.shift()方法从数组中删除第一个元素，并返回该元素的值

语法：

arr.shift()

例如：

let arr = ['red', 'green']
arr.shift()
console.lig(arr)    // ['green']

数组.splice()方法删除指定元素

语法：

arr.splice(start, deleteCount)
arr.splice(起始位置，删除几个元素)

〃KIяItò°

关注

5
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫