#JavaScript(基础入门保姆级教程)【初级02（基础完结篇）】

已于 2023-09-04 00:39:05 修改
阅读量111 收藏
点赞数 1
文章标签： javascript 开发语言 ecmascript
于 2023-09-04 00:35:31 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_79501633/article/details/132644380
版权

目录

一，表达式和语句

        1.1，表达式和语句区别：

        1.2，程序三大流程控制语句(案例代过)

二，数组

       2.1，声明数组

    2.2，数组求和

2.3，数组求最大值和最小值

2.4，数组的操作(crud ，增删查改) 

2.5，数组的筛选

2.6，数组去0案例

  2.7，综合案例（略）

  2.8，数组实现排序（冒泡排序）

三，函数

3.1，函数的声明，封装，调用

3.2，函数的返回值

3.3，函数细节补充

​编辑

3.4，函数的作用域

​编辑

3.5，作用域变量补充（注意）

3.5.1，补充一：

3.5.2，补充二：

3.5.3，补充三：

3.6，匿名函数

 Webapis 会使用

3.7，立即执行函数

3.8,小案例 

3.9，逻辑中断 

 五，面向对象编程

5.1，对象是什么以及它的特点：

5.2，对象的声明方法

5.3，对象的组成

5.4，对象的操作 增删改查(Crud)

5.4.1， 查的另外一种方法

5.5，方法：

5.6，重点 遍历对象（for  in 语法）

5.7，遍历数组对象

5.8，渲染

 根据数据渲染成表格（略）

5.9，内置对象

5.9.1， 内置对象--生成任意随机数

5.9.2，随机生成颜色

5.10，拓展不同数据类型的储存的方式不同（堆 和 栈）

5.10.1，简单数据类型和复杂数据类型举例

                                                  js基础完结篇 

一，表达式和语句

        1.1，表达式和语句区别：

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

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

        1.2，程序三大流程控制语句(案例代过)

案例演示：

语句综合案例

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=`, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    let money = 100
    while (true) {
      let re = +prompt(`
        ATM
        请你选择操作：
        1.存钱
        2.取钱
        3.查看余额
        4.退出
        `)
      if (re === 4) {
        break
      }
      switch (re) {
        case 1:
          let save = +prompt("请输入存款金额：")
          money += save
          break
        case 2:
          let qu = +prompt("请输入取款金额：")
          if (qu > money) {
            alert(`您的钱不够，您的余额为${money}小于${qu}`)
          }
          else
            money -= qu
          break
        case 3:
          alert(`您的银行卡余额是${money}`)
          break
      }
    }
  </script>
</body>

</html>

for循环打印数组：

补充无限for循环  for(;;)

二，数组

       2.1，声明数组

<!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>
        //使用new Array 构造函数声明 
    let array = new Array(1,2,3,4)
        //字面量声明数组
    let arr = [1,2,3,4]
  </script>
</body>

</html>

    2.2，数组求和

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

<!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 sum = 0
    let tempt
    let arr = [2, 6, 1, 7, 4]
    for (let i = 0; i < arr.length; i++) {
      sum += arr[i]
      tempt = sum / 5

    }
    console.log(sum);
    document.write(`和为${sum},平均值为${tempt}`)
  </script>
</body>

</html>

2.3，数组求最大值和最小值

需求：求数组[2,6,1,77,52,25,7]里面所有元素的最大值以及最小值

<!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]
    let max = arr[0]
    let min = arr[0]
    for (let i = 1; i < arr.length; i++) {
      if (max < arr[i]) {
        max = arr[i]
      }
      if (min > arr[i]) {
        min = arr[i]
      }
    }
    document.write(`最大值是${max},最小值是${min}`)
  </script>
</body>

</html>
<!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]
    let max = arr[0]
    let min = arr[0]
    for (let i = 1; i < arr.length; i++) {
      max < arr[i] ? max = arr[i] : max
      min > arr[i] ? min = arr[i] : min
    }
    document.write(`最大值是${max},最小值是${min}`)
  </script>
</body>

</html>

2.4，数组的操作(crud ，增删查改) 

文档查具体细节 ， MDA文档 

 删除补充

2.5，数组的筛选

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

<!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, 0, 52, 0, 25, 7]
    let list = []
    for (let i = 0; i < arr.length; i++) {
      if (arr[i] > 10) {
        list.push(arr[i])
      }
    }
    console.log(list);
    document.write(list)
  </script>
</body>

</html>

2.6，数组去0案例

 需求：将数组[2,0,6,1,77,0,52,0,25,7] 中的零去掉

<!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, 0, 52, 0, 25, 7]
    let list = []
    for (let i = 0; i < arr.length; i++) {
      if (arr[i] !== 0) {
        list.push(arr[i])
      }
    }
    console.log(list);
    document.write(list)
  </script>
</body>

</html>

  2.7，综合案例（略）

  2.8，数组实现排序（冒泡排序）

<!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 循环是为了实现冒泡排序算法。冒泡排序的思想是通过相邻元素之间的比较和交换，逐步将最大（或最小）的元素移动到数组的一端。

首先，外层的 for 循环使用变量 i 控制每一轮比较的起点位置，从数组的第一个元素开始。内层的 for 循环使用变量 j 控制比较的终点位置，从 i+1 开始，遍历 i 后面的所有元素。

内层循环中的条件 j < arr.length 确保了在每一轮比较中都会遍历到数组的最后一个元素。而外层循环中的条件 i < arr.length - 1 确保了比较轮次不会超过数组的长度减一，这是因为在最后一轮比较中，最后一个元素已经处于正确的位置上了（无需再比较）。

这种嵌套的 for 循环可以确保每个元素都与其后面的元素进行比较，并根据需要执行交换操作，以达到排序的目的。
    */
    let arr = [1, 3, 2, 5, 4];
    let temp;

    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]) {
          temp = arr[j];
          arr[j] = arr[j + 1];
          arr[j + 1] = temp;
        }
      }
    }

    console.log(arr);
    document.write(arr);
  </script>
</body>

</html>

三，函数

3.1，函数的声明，封装，调用

<!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>
    /*
    function 函数名（）{
      具体实现的代码块
      也就是函数体
    }
    
    调用
    函数名（）
    */
    //封装函数
    function bubbleSort() {
      let arr = [1, 3, 2, 5, 4];
      let temp;

      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]) {
            temp = arr[j];
            arr[j] = arr[j + 1];
            arr[j + 1] = temp;
          }
        }
      }

      console.log(arr);
      document.write(`从小到大排序结果=${arr}`);
    }
      //  调用函数
    bubbleSort()
  </script>
</body>

</html>

函数命名与变量命名规范相同 

3.2，函数的返回值

<!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>
    function fn(){
      return 20
    }
    //相当于 fn() = 20
  </script>
</body>

</html>

    打断点的位置

                                    

点击行数就可以打断点了

3.3，函数细节补充

3.4，函数的作用域

<!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 num = 10 //全局变量
    console.log(num)
    function fn(){
      console.log(num); //可以打印
    } 

    //局部变量
    function fun(){
      let str = 'bestwishesn'

    }
      console.log(str) //不能打印
  </script>
</body>

</html>

3.5，作用域变量补充（注意）

3.5.1，补充一：

如果函数内部，变量没有声明，直接赋值，也可以当全局变量看，但不推荐使用

<!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>
    function fun(){
      str = 'bestwishesn'

    }
      console.log(str) //可以打印
  </script>
</body>

</html>

3.5.2，补充二：

           不同作用域下变量名相同并不冲突

<!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 str = 'hello world'
    function fun(){
      let str = 'bestwishesn'
      console.log(str);
    }
      console.log(str) //可以打印
  </script>
</body>

</html>

       函数内打印的内容为bestwishesn    外部打印的内容是hello  world

3.5.3，补充三：

每当声明一个函数就会产生新的作用域

<!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 str = 'hello world'
    function fun(){
      let str = 'bestwishesn'
      console.log(str);
      function fun2(){
        let str = 'abc'
        console.log(str)
      }
    }
      console.log(str) //可以打印
  </script>
</body>

</html>

                 变量访问原则，先从当前作用域查找如果没有就向外一步一步查找（就近原则）

3.6，匿名函数

 Webapis 会使用

<!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 fn = function (x, y) {
      console.log(x + y);
    }
    fn(1, 2)
    //具名函数的特点 在任意位置调用
  </script>
</body>

</html>

                                               

                                                 匿名函数必须先声明后调用

3.7，立即执行函数

避免变量污染问题

声明方法：

  • 第一种声明方法
  <script>
    //立即执行函数的写法
  (function(){})()
  </script>
  • 第二种声明方法（推荐）
  <script>
    (function () { }())
  </script>

使用： 

<!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>
    //立即执行函数的写法
    //必须加分号  加前面后面都可以
    ; (function () {
      let num = 10
    })();
    ; (function () {
      let num = 20
    })(); //后面小括号本质是在调用函数
    //(function(形参){})(实参)
  </script>
</body>

</html>

                省略调用的步骤，避免与用户变量名冲突

3.8,小案例 

秒数转换案例

  <!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>5
    100

    //用户输入
    let second = +prompt("请输入秒数")
    function getTime(time) {
      console.log(time);//总的秒数
      let h = parseInt(time / 60 / 60 % 24)
      let m = parseInt(time / 60 % 60)
      let s = parseInt(time % 60)
      h = h < 10 ? "0" + h : h;
      s = s < 10 ? "0" + s : s;
      m = m < 10 ? "0" + m : m;
      // console.log(h, m, s);
      return `转换之后是${h}小时，${m}分钟，${s}秒`
    }
    let str = getTime(second)
    document.write(str);
    console.log(str);
  </script>
</body>

</html>

3.9，逻辑中断 

<!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>
    function fn(x, y) {
      x = x || 0
      y = y || 0
      console.log(x + y);
    }
    fn(0, 0)
  </script>
</body>

</html>

 五，面向对象编程

5.1，对象是什么以及它的特点：

  • 对象（object）:JavaScript中的一种数据类型，是数据的集合
  • 对象是无序的

5.2，对象的声明方法

  <script>
    let 对象名 = {}
    let 对象名 = new Object()
  </script>

5.3，对象的组成

  • 属性：特征（名词）
  • 方法：行为（动词）
  <script>
    let 对象名 = {
      属性名：属性值，
      方法：函数;
    }
  </script>

                在对象外面的叫变量 在对象里面的叫属性

<!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 bestwishes = {
      //属性
      uname: 'bestwishesn',
      age: 18,
      gender: '男'
    }
    console.log(bestwishes);
    console.log(typeof bestwishes);
  </script>
</body>

</html>

对象属性没有顺序

属性和值用冒号隔开（英文格式）

属性与属性用逗号隔开（英文格式）

5.4，对象的操作 增删改查(Crud)

<!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 person = {
      //属性
      uname: 'bestwishesn',
      age: 18,
      gender: '男',
      weight: '56kg',
      address: '北京'
    } 
    //查 --->对象.属性
    let name = person.uname
    let age = person.age
    let gender = person.gender
    let weight = person.weight
    let address = person.address
    //改 --->对象.属性 = 新值
    person.gender = '女'
    person.address = '西安'
    console.log(person.uname);
    console.log(typeof person);
    //增 ---> 对象.属性
    person.hobby = '羽毛球'
    //删  delete 对象.属性
    delete person.weight
  </script>
</body>

</html>

5.4.1， 查的另外一种方法

  <script>
    let person = {
      //属性
      uname: 'bestwishesn',
      age: 18,
      gender: '男',
      weight: '56kg',
      address: '北京'
    }
    //查 --->对象[属性名]
    let name = person['uname']
  </script>

                                          属性名一点要加‘’

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>
    let person = {
      //属性
      uname: 'bestwishesn',
      age: 18,
      gender: '男',
      weight: '56kg',
      address: '北京',
      // 方法命名--->方法名：function(){}
      code:function(){
        console.log('code');
      }
    }
    //方法的调用---> 对象名.方法名()  例如 document.write()
    person.code
  </script>
</body>

</html>

5.6，重点 遍历对象（for  in 语法）

返回的是字符串类型

<!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 person = {
      //属性
      uname: 'bestwishesn',
      age: 18,
      gender: '男',
      weight: '56kg',
      address: '北京',
      // 方法命名--->方法名：function(){}
      code: function () {
        console.log('code');
      }
    }
    for (let k in person) {
      //获得对象的属性是看，获得对象的属性值是person[k]
      // k 是属性名 --->字符串类型 
      // console.log(k);
      //console.log(person.k); 相当于 console.log(person.'uname')
      console.log(person[k]); //输出属性名 person[k]
    }
  </script>
</body>

</html>

5.7，遍历数组对象

<!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 students = [
      { name: '小明', age: 18, gender: '男', hometown: '西安' },
      { name: '小黑', age: 19, gender: '男', hometown: '北京' },
      { name: '小栏', age: 20, gender: '女', hometown: '重庆' },
      { name: '小白', age: 21, gender: '女', hometown: '威海' },
    ]
    for (let i = 0; i < students.length; i++) {
      let j = students[i]
      for (let k in j) {
        let people = j[k]
        console.log(people);
      }
    }
  </script>
</body>

</html>

5.8，渲染

 根据数据渲染成表格（略）

    let students = [
      { name: '小明', age: 18, gender: '男', hometown: '西安' },
      { name: '小黑', age: 19, gender: '男', hometown: '北京' },
      { name: '小栏', age: 20, gender: '女', hometown: '重庆' },
      { name: '小白', age: 21, gender: '女', hometown: '威海' },
    ]

5.9，内置对象

(Math内置对象）

                查找内置对象 在MDN 文档中查看

MDNicon-default.png?t=N7T8https://developer.mozilla.org/zh-CN/

5.9.1， 内置对象--生成任意随机数

 Math.random() 返回0-1之间 [0,1)  ---->小数

  <script>
    console.log(Math.random());
  </script>

随机生成0-10之间的数  Math.floor(Math.random()*(10+1))

  <script>
    console.log(Math.floor(Math.random() * 11))
  </script>

随机生成N-M的随机数函数 

    function getRandom(N, M) {
      return Math.floor(Math.random() * (M - N + 1)) + N
    }

随机点名案例 自己写

<!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 = ['red', 'green', 'blue','张飞','gaunyu ']
    let random = Math.floor(Math.random() * arr.length)
    console.log(arr[random]);

  </script>
</body>

</html>

   去除抽奖过的人，数组的删除方法pop 删除最后一个元素,shift删除第一个元素，splice（起始位置（下标），删除几个元素）

<!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 = ['red', 'green', 'blue', '张飞', 'gaunyu ']
    let random = Math.floor(Math.random() * arr.length)
    document.write(arr[random]);
    arr.splice(random, 1)
    console.log(arr);
  </script>
</body>

</html>

5.9.2，随机生成颜色

                                                                     视频演示

随机颜色实现

                                                              具体代码如下

<!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>
    div {
      width: 300px;
      height: 300px;
    }
  </style>
</head>

<body>
  <div></div>
  <script>


    function getRandomColor(flag = true) {
      //如果是true 则返回#ffffff
      if (flag) {
        let str = '#'
        let arr = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9',
          'a', 'b', 'c', 'd', 'e', 'f']
        for (let i = 1; i <= 6; i++) {
          let random = Math.floor(Math.random() * arr.length)
          str += arr[random]
        }
        return str

      } else {
        //否则是false 则返回rgb(255,255,255)
        let r = Math.floor(Math.random() * 256)
        let g = Math.floor(Math.random() * 256)
        let b = Math.floor(Math.random() * 256)
        return `rgb(${r},${g},${b})`
      }
    }
    console.log(getRandomColor(false))
    console.log(getRandomColor(true))
    console.log(getRandomColor())
    const div = document.querySelector('div')
    div.style.backgroundColor = getRandomColor()
  </script>
</body>

</html>

5.10，拓展不同数据类型的储存的方式不同（堆 和 栈）

值类型和引用类型 

5.10.1，简单数据类型和复杂数据类型举例

思考：

  <script>
    let num1 = 10
    let num2 = num1
    num2 = 20
    console.log(num1);
  </script>

 引用数据类型

  <script>
    let obj1 = {
      age: 18
    }
    let obj2 = obj1
    obj2.age = 20
    console.log(obj1.age);
  </script>

简单数据类型的值储存在栈中，引用数据类型的值储存在堆中

bestwishesn
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值