JavaScript 基础(3) - 笔记

1 if 多分支语句和 switch的区别：

共同点
- 都能实现多分支选择，多选1
- 大部分情况下可以互换
区别：
- switch…case语句通常处理case为比较确定值的情况，而if…else…语句更加灵活，通常用于范围判断(大于，等于某个范围)。
- switch 语句进行判断后直接执行到程序的语句，效率更高，而if…else语句有几种判断条件，就得判断多少次。
- switch 一定要注意必须是 === 全等，一定注意数据类型，同时注意break否则会有穿透效果。
- 结论：
  - 当分支比较少时，if…else语句执行效率高。
  - 当分支比较多时，switch语句执行效率高，而且结构更清晰。

1.1 for 语句

掌握 for 循环语句，让程序具备重复执行能力

for 是 JavaScript 提供的另一种循环控制的话句，它和 while 只是语法上存在差异。

1.1.1 for语句的基本使用

实现循环的 3 要素

<script>
  // 1. 语法格式
  // for(起始值; 终止条件; 变化量) {
    
    
  //   // 要重复执行的代码
  // }

  // 2. 示例：在网页中输入标题标签
  // 起始值为 1
  // 变化量 i++
  // 终止条件 i <= 6
  for(let i = 1; i <= 6; i++) {
    
    
    document.write(`<h${i}>循环控制，即重复执行`)
  }
</script>

变化量和死循环，for 循环和 while 一样，如果不合理设置增量和终止条件，便会产生死循环。

跳出和终止循环

<script>
    // 1. continue 
    for (let i = 1; i <= 5; i++) {
    
    
        if (i === 3) {
    
    
            continue  // 结束本次循环，继续下一次循环
        }
        console.log(i)
    }
    // 2. break
    for (let i = 1; i <= 5; i++) {
    
    
        if (i === 3) {
    
    
            break  // 退出结束整个循环
        }
        console.log(i)
    }
</script>

结论：

JavaScript 提供了多种语句来实现循环控制，但无论使用哪种语句都离不开循环的3个特征，即起始值、变化量、终止条件，做为初学者应着重体会这3个特征，不必过多纠结三种语句的区别。
起始值、变化量、终止条件，由开发者根据逻辑需要进行设计，规避死循环的发生。
当如果明确了循环的次数的时候推荐使用for循环,当不明确循环的次数的时候推荐使用while循环

注意：for 的语法结构更简洁，故 for 循环的使用频次会更多。

1.2 循环嵌套

利用循环的知识来对比一个简单的天文知识，我们知道地球在自转的同时也在围绕太阳公转，如果把自转和公转都看成是循环的话，就相当于是循环中又嵌套了另一个循环。

实际上 JavaScript 中任何一种循环语句都支持循环的嵌套，如下代码所示：

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

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

拆解：

第一天：5个单词
第二天：5个单词
第三天：5个单词

// 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>`)
    }
}

记住，外层循环循环一次，里层循环循环全部

1.2.1 倒三角

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

1.2.2 九九乘法表

样式css

span {
   
   
    display: inline-block;
    width: 100px;
    padding: 5px 10px;
    border: 1px solid pink;
    margin: 2px;
    border-radius: 5px;
    box-shadow: 2px 2px 2px rgba(255, 192, 203, .4);
    background-color: rgba(255, 192, 203, .1);
    text-align: center;
    color: hotpink;
}

javascript

 // 外层打印几行
for (let i = 1; i <= 9; i++) {
   
   
    // 里层打印几个星星
    for (let j = 1; j <= i; j++) {
   
   
        // 只需要吧 ★ 换成  1 x 1 = 1   
        document.write(`
        <sapn> ${j} x ${i} = ${
     
     j * i} </span>
     `)
    }
    document.write('<br>')
}

2 数组

知道什么是数组及其应用的场景，掌握数组声明及访问的语法。

2.1 数组是什么？

数组：(Array)是一种可以按顺序保存数据的数据类型。

使用场景：如果有多个数据可以用数组保存起来，然后放到一个变量中，管理非常方便。

2.2 数组的基本使用

1.声明语法

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

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

数组是按顺序保存，所以每个数据都有自己的编号。
计算中的编号从0开始，所以小明的编号为0，小刚编号为1，以此类推。
在数组中，数据的编号也叫索引或下标。
数组可以存储任意类型的数据。

2.取值语法

数组名[下标]

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

通过下标取数据。
取出来是什么类型的，就根据这种类型特点来访问。

3.一些术语：

元素：数组中保存的每个数据都叫数组元素。
下标：数组中数据的编号。
长度：数组中数据的个数，通过数组的length属性获得。

let names = ['小明', '小刚', '小红', '小丽', '小米']
console.log(names[0])  // 小明
console.log(names[0])  // 小刚
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.2.1 定义数组和数组单元

<script>
  // 1. 语法，使用 [] 来定义一个空数组
  // 定义一个空数组，然后赋值给变量 classes
  // let classes = [];

  // 2. 定义非空数组
  let classes = ['小明', '小刚', '小红', '小丽', '小米']
</script>

通过 [] 定义数组，数据中可以存放真正的数据，如小明、小刚、小红等这些都是数组中的数据，我们这些数据称为数组单元，数组单元之间使用英文逗号分隔。

2.2.2 访问数组和数组索引

使用数组存放数据并不是最终目的，关键是能够随时的访问到数组中的数据（单元）。其实JavaScript 为数组中的每一个数据单元都编了号，通过数据单元在数组中的编号便可以轻松访问到数组中的数据单元了。

我们将数据单元在数组中的编号称为索引值，也有人称其为下标。

索引值实际是按着数据单元在数组中的位置依次排列的，注意是从0 开始的，如下图所示：

观察上图可以数据单元【小明】对应的索引值为【0】，数据单元【小红】对应的索引值为【2】

<script>
  let classes = ['小明', '小刚', '小红', '小丽', '小米']

  // 1. 访问数组，语法格式为：变量名[索引值]
  document.write(classes[0]) // 结果为：小明
  document.write(classes[1]) // 结果为：小刚
  document.write(classes[4]) // 结果为：小米

  // 2. 通过索引值还可以为数组单重新赋值
  document.write(classes[3]) // 结果为：小丽
  // 重新为索引值为 3 的单元赋值
  classes[3] = '小小丽'
  document.wirte(classes[3]); // 结果为： 小小丽
</script>

2.2.3 数据单元值类型

数组做为数据的集合，它的单元值可以是任意数据类型。

<script>
  // 6. 数组单值类型可以是任意数据类型

  // a) 数组单元值的类型为字符类型
  let list = ['HTML', 'CSS', 'JavaScript']
  // b) 数组单元值的类型为数值类型
  let scores = [78, 84, 70, 62, 75]
  // c) 混合多种类型
  let mixin = [true, 1, false, 'hello']
</script>

2.2.4 数组长度属性

重申一次，数组在 JavaScript 中并不是新的数据类型，它属于对象类型。

<script>
  // 定义一个数组
  let arr = ['html', 'css', 'javascript']
  // 数组对应着一个 length 属性，它的含义是获取数组的长度
  console.log(arr.length) // 3
</script>

练习：数组求和

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

分析：

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

let arr = [2, 6, 1, 7, 4]
// 1.求和的变量 sum
let sum = 0

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

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

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

分析：

①：声明一个保存最大元素的变量max。

②：默认最大值可以取数组中的第一个元素。

③：遍历这个数组，把里面每个数组元素和max相比较。

④：如果这个数组元素大于max就把这个数组元素存到max里面，否则继续下一轮比较。

⑤：最后输出这个max。

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

2.3 操作数组

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

2.3.1 操作数组-改

// let arr = []
// console.log(arr)
// // console.log(arr[0])  // undefined
// arr[0] = 1
// arr[1] = 5
// console.log(arr)
let arr = ['pink', 'red', 'green']
// 修改
// arr[0] = 'hotpink'
console.log(arr)
// 给所有的数组元素后面加个老师  修改
for (let i = 0; i < arr.length; i++) {
   
   
    console.log(arr[i])
    arr[i] = arr[i] + '老师'
}
console.log(arr)

2.3.2 操作数组-新增

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

语法：

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

例如：

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

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

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

语法：

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

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

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

案例：数组筛选

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

分析：

①：声明一个新的数组用于存放新数据newArr。

②：遍历原来的旧数组，找出大于等于10的元素。

③：依次追加给新数组newArr。

// 重点案例
let arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7]
// 1.声明新的空的数组
let newArr = []
// 2.遍历旧数组
for (let i = 0; i < arr.length; i++) {
   
   
    if (arr[i] >= 10) {
   
   
        // 3.满足条件 追加给新的数组
        newArr.push(arr[i])
    }
}
// 4.输出新的数组
console.log(newArr)

案例：数组去0

需求：将数组 [2,0,6,1,77,0,52,0,25,7] 中的0去掉后，形成一个不包含0的新数组。

分析：

①：声明一个新的数组用于存放新数据newArr。

②：遍历原来的旧数组，找出不等于0的元素。

③：依次追加给新数组newArr。

let arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7]
// 1.声明一个新的数组
let newArr = []
// 2.遍历筛选
for (let i = 0; i < arr.length; i++) {
   
   
    if (arr[i] !== 0) {
   
   
        newArr.push(arr[i])
    }
}
// 输出新数组
console.log(newArr)

2.3.3 操作数组-删除

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

语法：

arr.pop()

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

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

语法：

arr.shift()

例如：

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

需求使用场景：

随机抽奖，中奖的用户就需要从数组里面删除，不允许重复抽奖。
点击删除按钮，相关的数据会从商品数据中删除。

后面我们会用到删除操作，特别是 splice

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

语法：

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

解释：

start 起始位置：
- 指定修改的开始位置（从0计数）。
deleteCount：
- 表示要移除的数组元素的个数。
- 可选的。如果省略则默认从指定的起始位置删除到最后。

let arr = ['red', 'green', 'blue']
// console.log(arr.pop())  // blue
// pop()  删除最后一个元素
// arr.pop()
// arr.pop()
// console.log(arr)
// 2.shift()  删除第一个元素
// arr.shift()
// console.log(arr)
// 3. splice 删除指定元素  splice(起始位置-索引号, 删除几个)
arr.splice(1, 1)  // 是从索引号1的位置开始删除，只删除1个
// arr.splice(1)  // 从gree 删除到最后
console.log(arr)

数组做为对象数据类型，不但有 length 属性可以使用，还提供了许多方法：

push 动态向数组的尾部添加一个单元
unshit 动态向数组头部添加一个单元
pop 删除最后一个单元
shift 删除第一个单元
splice 动态删除任意单元

使用以上4个方法时，都是直接在原数组上进行操作，即成功调任何一个方法，原数组都跟着发生相应的改变。并且在添加或删除单元时 length 并不会发生错乱。

<script>
  // 定义一个数组
  let arr = ['html', 'css', 'javascript']

  // 1. push 动态向数组的尾部添加一个单元
  arr.push('Nodejs')
  console.log(arr)
  arr.push('Vue')

  // 2. unshit 动态向数组头部添加一个单元
  arr.unshift('VS Code')
  console.log(arr)

  // 3. splice 动态删除任意单元
  arr.splice(2, 1) // 从索引值为2的位置开始删除1个单元
  console.log(arr)

  // 4. pop 删除最后一个单元
  arr.pop()
  console.log(arr)

  // 5. shift 删除第一个单元
  arr.shift()
  console.log(arr)
</script>

案例：根据数据生成柱形图

需求：用户输入四个季度的数据，可以生成柱形图。

分析：

①：需要输入4次，所以可以把4个数据放到一个数组里面

利用循环，弹出4次框，同时存到数组里面

②：遍历改数组，根据数据生成4个柱形图，渲染打印到页面中

柱形图就是div盒子，设置宽度固定，高度是用户输入的数据
div里面包含显示的数字和第n季度

<!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>
    <script>
        // 1.四次弹窗效果
        // 声明一个新的数组
        let arr = []
        for (let i = 1; i <= 4; i++) {
    
    
            // let num = prompt(`请输入第${i}季度的数据：`)
            // arr.push(num)
            arr.push(prompt(`请输入第${
      
      i}季度的数据：`))
            // push记得加小括号，不是等号赋值的形式
        }
        // console.log(arr)  ['123','135','345','234']
        // 盒子开头
        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>

3 冒泡排序

冒泡排序是一种简单的排序算法。
它重复地走访过要排序的数列，一次比较两个元素，如果他们的顺序错误就把他们交换过来。走访数列的工作是重复地进行直到没有再需要交换，也就是说该数列已经排序完成。
这个算法的名字由来是因为越小的元素会经由交换慢慢“浮”到数列的顶端。
比如数组 [2,3,1,4,5] 经过排序成为了 [1,2,3,4,5 ]或者 [5,4,3,2,1] 。

// let arr = [5, 4, 3, 2, 1]
let arr = [2, 4, 3, 5, 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]) {
   
   
//             // 交换两个变量
//             let temp = arr[j]
//             arr[j] = arr[j + 1]
//             arr[j + 1] = temp
//         }
//     }
// }
arr.sort()  // 排序
console.log(arr)

数组.sort() 方法可以排序。
语法：

let arr = [4, 2, 5 ,1 ,3]
// 1.升序排列写法
arr.sort(function (a, b) {
   
   
    return a - b
})
console.log(arr)  // [1, 2, 3, 4, 5]
// 降序排列写法
arr.sort(function (a, b) {
   
   
    return b - a
})
console.log(arr)  // [5, 4, 3, 2, 1]

JavaScript 基础(3) - 笔记

JavaScript 基础(3) - 笔记

1 if 多分支语句和 switch的区别：

1.1 for 语句

1.1.1 for语句的基本使用

1.2 循环嵌套

1.2.1 倒三角

1.2.2 九九乘法表

2 数组

2.1 数组是什么？

2.2 数组的基本使用

2.2.1 定义数组和数组单元

2.2.2 访问数组和数组索引

2.2.3 数据单元值类型

2.2.4 数组长度属性

练习：数组求和

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

2.3 操作数组

2.3.1 操作数组-改

2.3.2 操作数组-新增

案例：数组筛选

案例：数组去0

2.3.3 操作数组-删除

案例：根据数据生成柱形图

3 冒泡排序

热门文章

最新文章

相关课程

相关电子书

相关实验场景