前端——JavaScript基础学习【part 3】

最新推荐文章于 2024-07-12 22:54:26 发布

帆高#

最新推荐文章于 2024-07-12 22:54:26 发布

阅读量103

点赞数

分类专栏： JavaScript基础学习文章标签： javascript 前端学习

本文链接：https://blog.csdn.net/qq_73958269/article/details/130532411

版权

JavaScript基础学习专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一级目录

二级目录

三级目录

函数

1.为什么需要函数

1.1函数的定义

function，是被设计为执行特定任务的代码块

1.2函数的特点

函数可把具有相同或类似逻辑的代码“包裹”起来，通过函数调用来执行这些被“包裹”的代码逻辑
便于精简代码方便使用

2.函数的使用

2.1函数的声明语法

function 函数名（）{
函数体
}

2.2函数的命名规范

和变量命名基本一致
尽量是小驼峰写法
前缀应该是动词
一般常用动词约定

动词	含义
can	判断是否可执行某个动作
has	判断是否含义某个值
is	判断是否为某个值
get	获取某个值
set	设置某个值
load	加载某些数据

2.3函数的调用语法

函数名（）

之前已经声明好的函数必须调用才会被真正执行，使用( )调用函数

<!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>
  </head>
  <body>
    <script>
      // 函数的声明；即是把函数体封装到一个箱子里去
      function getRespect() {
        alert("学长好！");
        document.write("学长好！");
        // 函数体
      }
      // 函数的调用;函数不调用,自己是不会执行的;可以多次调用,每调用一次函数体代码便会重新执行一次
      getRespect();
    </script>
  </body>
</html>

3.函数传参

3.1声明语法

function 函数名（参数列表）{
函数体
}

3.2参数列表

传入数据列表
声明这个函数需要传入几个数据
多个数据用逗号隔开

3.3调用语法

函数名（传递的参数列表）

调用函数时，需要传入几个数据就写几个，用逗号隔开即可
形参：声明函数时写在函数名右边小括里的参数，即形式上的参数
注意：
形参可以被理解成在函数内声明的变量，但是不用声明可以直接使用，但是离开函数就无效
实参：调用函数时写在函数名右边小括里的参数，即实际上的参数
注意：
实参可以被理解给变量赋值
在开发中尽量保持形参和实参的个数一致

<!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>
  </head>
  <body>
    <script>
      //   function canSum(end) {
      //      检验一下end里面是否是50
      //     console.log(end);
      //     let sum = 0;
      //     for (let i = 1; i <= end; i++) {
      //       sum = sum + i;
      //     }
      //     alert(`1-${end}的求和结果是${sum}`);
      //   }
      //   canSum(50);
      //      把50传递给end，end = 50，完成了一次赋值操作
      //      1-50
      //   canSum(100);
      //     把100传递给end，end = 100，完成了一次赋值操作
      //    1-100
      function canSum(start, end) {
        // 形参：形式上的参数
        console.log(end);
        let sum = 0;
        for (let i = start; i <= end; i++) {
          sum = sum + i;
        }
        alert(`${start}-${end}的求和结果是${sum}`);
      }
      canSum(1, 50);
      //实参：实际的参数
      //   start=1,end=50
      //  1-50
      canSum(2, 50);
      //实参：实际的参数
      //  2-50
    </script>
  </body>
</html>

3.4特殊案例

<!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>
  </head>
  <body>
    <script>
      function canSum(num1 = 0, num2 = 0) {
        // 给定形参一个默认值，叫作形参默认值，使得程序更加严谨
        // 只会在缺少实参的时候被执行，有实参的时候优先执行传递过来的实参
        let sum = 0;
        sum = num1 + num2;
        document.write(`两个数的和是${sum}`);
      }
      canSum(56, 44);
      canSum();
      //   当声明一个变量而没有赋值的时候，默认的值是undefined
      //   undefined+undefined，所以结果是NaN
    </script>
  </body>
</html>

3.5实参可以是变量

<!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>
  </head>
  <body>
    <!-- 求n-m的累加和 -->
    <script>
      function getSum(n = 0, m = 0) {
        let sum = 0;
        for (let i = n; i <= m; i++) {
          sum += i;
        }
        console.log(sum);
      }
      let num1 = +prompt(`请输入起始数：`);
      let num2 = +prompt(`请输入终止数：`);
      getSum(num1, num2);
      //   实参可以是变量
    </script>
  </body>
</html>

4.函数返回值

4.1返回值的概念

当调用某个函数时，这个函数会返回一个结果出来

4.2返回值的使用

js底层内置的函数，具备返回值
prompt（），parseInt（）
有些函数没有返回值
alert（）
根据我们的需求来设置是否需要返回值

4.3返回值的练习

<!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>
  </head>
  <body>
    <script>
      // 1.求最大值函数
      function getResult(num1 = 0, num2 = 0) {
        if (num1 > num2) {
          return num1;
        } else {
          return num2;
        }
      }
      let max = getResult(33, 44);
      console.log(max);
      //  2. 求任意数组的最大值,并且返回最大值
      function getArrMax(arr = []) {
        let max = arr[0];
        // （1）先准备一个max变量存放数组的第一个值
        for (i = 1; i < arr.length; i++) {
          if (arr[i] > max) {
            max = arr[i];
            // （2）进行遍历比较
          }
        }
        return max;
        // （3）返回值
      }
      let flag = getArrMax([1, 3, 5, 89]);
      console.log(flag);
      // 3.求任意数组的最大值和最小值
      function getOutcome(Arr = []) {
        let m = Arr[0];
        let n = Arr[0];
        for (let i = 1; i < Arr.length; i++) {
          if (Arr[i] > Arr[0]) {
            m = Arr[i];
          }
          if (Arr[i] < Arr[0]) {
            n = Arr[i];
          }
        }
        return [m, n];
        // 当需要返回多个值的时候，返回到数组，数组可以盛放多个数据
      }
      let aim = getOutcome([12, 45, 54, 98, 76, 0, 123]);
      console.log(`数组的最大值是${aim[0]}`);
      console.log(`数组的最小值是${aim[1]}`);
    </script>
  </body>
</html>

4.3语法

return 数据

当函数需要返回数据出去时，用return关键字

<!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>
  </head>
  <body>
    <script>
      // 函数的返回值
      function fh() {
        return 20;
      }
      //   相当于执行了fn()=20,fn()是调用者

      //   console.log(fh());
      let result = fh();
      console.log(result);
    </script>
  </body>
</html>

4.4细节

在函数体中使用return关键字能将内部的执行结果交给函数外部使用
return之后的代码不会再被执行，会立即结束当前函数，return之后跟的数据不要换行写
有些函数没有return，这种情况下，函数默认返回值为undefined

// 求和函数的写法
function getPrice(x, y) {
return x + y;
// return之后的代码不会被执行
}
let sum = getPrice(56, 44);
console.log(sum);

4.5补充

两个相同的函数后面的会覆盖前面的
在JavaScript中实参和形参的个数可以不一致
注：
（1）如果是形参过多，多的会自动填上undefined
（2）如果实参过多，多余的实参会被忽略（函数内部有一个arguments里面装着所有的实参）

5.作用域

5.1定义

一段程序代码中所用到的名字并不总是有效的和可用的，而限定这个名字的可用性的代码范围就是这个名字的作用域

5.2全局作用域

全局有效
作用于所有代码执行的环境，整个script标签内部或者是一个独立的js文件

5.3局部作用域

局部有效
作用于函数内的代码环境，就是局部作用域
因为是在某一个函数中有效，所以也被称作函数作用域

5.4全局变量

函数外部let的变量
全局变量在任何区域都可以访问和修改

5.5局部变量

函数内部let的变量
局部变量只能在所有的函数内部进行访问和修改

<!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>
  </head>
  <body>
    <script>
      // 1. 全局变量
      let num = 100;
      // i就是全局变量，在整个script标签内都是有效的
      console.log(num);
      //   结果是在控制台打印10
      function input() {
        console.log(num);
      }
      input();
      //   结果是在控制台打印10
      //   2.局部变量
      function input1() {
        let i = 99;
        // i就是局部变量，只在局部作用域(函数作用域)起作用
        console.log(i);
      }
      input1();
      //   结果是在控制台打印99
      console.log(i);
      //   会报错，这里i没有被声明
    </script>
  </body>
</html>

5.6变量的特殊情况

如果函数内部，变量没有声明，直接赋值，也当做全局变量看【不提倡！】
函数内部的形参可以看作是局部变量

5.7变量的访问原则

只要是代码，就至少有一个作用域
写在函数内部的是局部作用域
如果函数中还有函数，那么在这个作用域中就又可以诞生一个作用域
在能够访问到的情况下，先局部，局部没有在找全局，就近原则

<!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>
  </head>
  <body>
    <script>
      function fx() {
        num = 10;
        // 在函数中未声明变量，直接赋值，直接当做全局变量使用
        console.log(num);
      }
      fx();
      //   结果是在控制台打印10
      console.log(num);
      //   结果是在控制台打印10
      function sum(a = 0, b = 0) {
        // a,b是形参，可以看作是函数的局部变量
        let result = a + b;
        console.log(result);
      }
      sum(234, 123);
      function big() {
        let num = 99;
        // 局部变量
        function small() {
          let num = 1;
          console.log(num);
          //   结果是在打印台打印1
        }
        small();
      }
      big();
    </script>
  </body>
</html>

6.匿名函数

6.1函数的分类

6.1.1具名函数

具备名字的函数

声明：function getSum（）{}
调用：getSum（）

6.1.2匿名函数

没有名字的函数

function（）{}

6.2匿名函数

6.2.1函数表达式

定义
将匿名函数赋值给一个变量，并且通过变量名称进行调用，我们将这个称为函数表达式
语法

let getSum=function（）{
函数体
}

<!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>
  </head>
  <body>
    <script>
      // 1.函数表达式
      let getSum = function () {
        let num = 99;
        console.log(num);
      };
      getSum();
      function sum() {
        console.log(1);
      }
      sum();
      //   函数表达式和具名函数的不同：
      // 1.具名函数的调用可以写到任何位置
      // 2.而函数表达式中是let语句，所以必须先声明，在调用
    </script>
  </body>
</html>

6.2.2立即执行函数

语法

// 1.第一种语法
(function () { 函数体 })();
// 2.第二种写法
（(function () { 函数体 })()）;

用处
防止变量被污染
注意：
（1）多个立即执行函数一定要用；隔开，否则会报错
（2）有些立即执行函数可以有名字

<!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>
  </head>
  <body>
    <script>
      // 1.第一种语法
      (function () {
        console.log(99);
      })();
      //   不用调用立即执行
      (function () {})();
      //   第一个小括号是形参
      //   第二个小括号是在调用函数,实参
      //   规定:立即执行的函数一定要加分号
      (function () {
        let a = 1;
      })();
      //   一定要加分号!
      (function () {
        let a = 99;
      })();
      //   2.第二种写法
      (function () {})();
      //   第一个小括号是形参
      //   第二个小括号是在调用函数,实参
    </script>
  </body>
</html>

7.转换时间案例

<!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>
  </head>
  <body>
    <script>
      // 1.用户输入
      let seconds = +prompt("请输入要计算的秒数：");
      //   隐式转换成数字型数据
      //   2.封装函数
      function getTime(t = 0) {
        // s是形参
        // console.log(t);
        // 3.转换
        // 小时：h=parseInt（总秒数/60/60%24）
        // 分钟：m=parseInt（总秒数/60%60）
        // 秒：s=parseInt（总秒数%60）
        let h = 0;
        let m = 0;
        let n = 0;
        h = parseInt((t / 60 / 60) % 24);
        m = parseInt((t / 60) % 60);
        s = parseInt(t % 60);
        // 不要忘记在补0之后需要重新赋值
        h = h <= 9 ? "0" + h : h;
        m = m <= 9 ? "0" + m : m;
        s = s <= 9 ? "0" + s : s;
        // h这时是number型数据
        // console.log(h, m, s);
        //  alert(`转换后的时间是：${h}时${m}分${s}秒`);
        return `转换后的时间是：${h}时${m}分${s}秒`;
      }
      let result = getTime(seconds);
      alert(result);
      //   seconds是实参
    </script>
  </body>
</html>

8.逻辑中断

8.1逻辑运算符里的短路

短路
只存在于与（&&），或（||）中，当满足一定条件会让右边的代码不执行

符号	短路条件
&&	左边为flase就短路
ll	左边为true就短路

原因
通过左边能得到整个式子的结果，因此没有必要在判断右边

8.2转换为Boolean型

8.2.1显式转换

Boolean
空字符串，0，undefined，null，

8.2.2隐式转换

有字符串的加法，拼接
减法只能用于数字，它会使空字符串转换为0
null经过数字转换之后会变为0
undefined经过数字转换之后会变为NaN

<!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>
  </head>
  <body>
    <script>
      console.log(Boolean("happy"));
      //   结果在打印台输出true
      console.log(Boolean(""));
      //   结果在打印台输出false,字符串里只有空字符串是假（false）
      console.log("-------------------------------------------");
      console.log(Boolean(269));
      //   结果在打印台输出true
      console.log(Boolean(0));
      //   结果在打印台输出false,数字型数据里只有0是假（false）
      console.log("-------------------------------------------");
      console.log(Boolean(undefined));
      //   结果在打印台输出false,此时不做操作
      console.log(Boolean(null));
      //   结果在打印台输出false
      console.log(Boolean(NaN));
      //   结果在打印台输出false
      console.log("0" + 1);
      // 字符串的加法，是拼接，结果是01
      console.log("" - 269);
      // 字符串的减法，它会使空字符串转换为0，结果是-269
      console.log(null - 269);
      //  null经过数字转换之后会变为0，结果是-269
      console.log(undefined + 269);
      //   undefined经过数字转换之后会变为NaN，结果是NaN
      //   undefined除了拼接字符串以外，做任何运算结果都是NaN
      console.log(undefined == null);
      // 结果是true，他们的值一样都当做false看
      console.log(undefined === null);
      // 结果是false，他们的值虽然一样，但是数据类型不一样
    </script>
  </body>
</html>

对象

1.对象是什么

1.1定义

对象（object）是JavaScript里的一种数据类型
注意：
可以理解是一种无序的数据集合，注意区分数组是有序的数据集合
用来详细描述某个事物

2.对象使用

2.1对象声明语法

let 对象名={ }
{ }是对象字面量

2.2对象由属性和方法组成

2.2.1属性

信息或特征（名词）
比如：尺寸，颜色，内存，牌子

注意：
（1）属性都是成对出现的，包括属性名和值，他们之间使用英文的：相隔开
（2）多个属性之间使用英文的，相隔开
（3）属性就是依附在对象上的变量
（外面是变量，对象内是属性,本质都是一样的，看作是盒子来装东西)
（4）属性名可以使用或" "或’ '，一般情况下省略，除非遇到特殊符号如空格，中横线等

2.2.2方法

功能或行为（动词），本质是函数
比如：打游戏，发短信，打电话，聊天，刷剧

方法是由方法名和函数两部分构成，它们之间使用 : 分隔
多个属性之间使用英文分隔
方法是依附在对象中的函数
方法名可以使用""或’’,一般情况下省略，除非遇到特殊符号如空格，中横线等
声明对象，并添加了若干方法以后，可以使用，调-用对象中函数，称之为方法调用
也可以添加实参和形参

<!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>
  </head>
  <body>
    <script>
      let today = {
        uname: "jay",
        // 方法（对象里）
        // 函数（对象外）
        sing: function () {
          //   这里如果有参数是形参
          console.log("无关风月，我题序等你回，悬笔一绝，那岸边浪千叠");
        },
      };
      //   方法的调用 对象名.方法名
      today.sing();
      //   这里如果有参数是实参
      //   document.write()
      //   典型对象，document是对象，write是对象中的方法
    </script>
  </body>
</html>

2.3对象的操作

2.3.1查

对象名.属性名

2.3.2改

对象名.属性名=新值

2.3.3增

对象名.新属性名=新值

注意：改和增语法是一样的，

2.3.4删

delete 对象名.属性

2.3.5查的补充

对象名[‘函数名’]

对于多词属性或含-的一些属性，点操作就不在管用了，我们采取对象名['函数名'],单双引号都可以

<!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>
  </head>
  <body>
    <script>
      // 1.声明对象
      let teacher = {
        uname: "zhang",
        age: 18,
        gender: "女",
        height: 180,
      };
      console.log(teacher);
      console.log(typeof teacher);
      //   是对象数据类型
      //   2.使用属性
      // （1）查 对象名.属性名
      console.log(teacher.age);
      console.log(teacher.uname);
      //   (2)改 对象名.属性名=新值
      teacher.age = 99;
      console.log(teacher.age);
      teacher.uname = "liu";
      console.log(teacher.uname);
      //   (3)增 对象名.新属性名=新值
      teacher.agoAge = 18;
      console.log(teacher.agoAge);
      teacher.hobby = "羽毛球";
      console.log(teacher.hobby);
      //   （4）删  delete 对象名.属性
      delete teacher.agoAge;
      //   查的另一种属性
      // 对象名['函数名']
      let people = {
        "goods-name": "zhao",
      };
      console.log(people["goods-name"]);
      // 综上所述：查的两种方法
      //   （1）对象名.属性名
      //   （2）对象名['函数名']
    </script>
  </body>
</html>

3.遍历对象

3.1for循环遍历对象的问题

对象没有像数组一样的length属性，所以无法确定长度
对象里面是无序的键值对，没有规律，不像数组里面有规律的下标

let obj = {
uname: ‘andy’,
age:18,
sex:‘boy’,
}
for (let k in obj){
console.log(k) // 打印属性名字符串类型
console.log(obj[k]) // 打印属性值
}

注意：
（1）一般不使用这种方式遍历数组，主要用来遍历对象
（2）for in语法中的k是一个变量，在循环过程中依次代表对象的属性名
（3）由于k是变量，必须采用第二种查
（4）k是获取对象的属性名，对象名[k]是获得属性值

3.2遍历数组对象

<!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>
  </head>
  <body>
    <script>
      let students = [
        { names: "小明", age: 18, gender: "男", hometown: "北京市" },
        // 数组元素
        { names: "小红", age: 17, gender: "女", hometown: "重庆市" },
        { names: "小离", age: 19, gender: "女", hometown: "上海市" },
        { names: "小北", age: 16, gender: "男", hometown: "广东省" },
      ];
      for (let i = 0; i < students.length; i++) {
        // console.log(i);输出的是数组的索引号
        // console.log(students[i]);输出的是数组的每一个元素
        console.log(students[i].names);
        console.log(students[i].age);
        console.log(students[i].gender);
        console.log(students[i].hometown);
      }
    </script>
  </body>
</html>

3.3渲染学生信息案例

<!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>
  </head>
  <style>
    table {
      width: 600px;
      text-align: center;
    }
    table,
    th,
    td {
      border: 1px solid black;
      border-collapse: collapse;
    }
    cpation {
      font-style: 18px;
      margin-bottom: 10px;
      font-weight: 700;
    }
    tr {
      height: 40px;
      cursor: pointer;
    }
    tr > th {
      color: white;
    }
    table tr:nth-child(1) {
      background-color: gray;
    }
    table tr:not(:first-child):hover {
      background-color: #1d4261;
      color: white;
    }
  </style>
  <body>
    <table>
      <caption>
        学生列表
      </caption>
      <tr>
        <th>序号</th>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
        <th>家乡</th>
      </tr>
      <!-- <script></script>写在要被渲染的地方 -->
      <script>
        // 1.数据准备
        let students = [
          { names: "小明", age: 18, gender: "男", hometown: "北京市" },
          { names: "小红", age: 17, gender: "女", hometown: "重庆市" },
          { names: "小离", age: 19, gender: "女", hometown: "上海市" },
          { names: "小北", age: 16, gender: "男", hometown: "广东省" },
        ];
        // 2. 渲染行
        for (let i = 0; i < students.length; i++) {
          document.write(`
             <tr>
                <td>${i + 1}</td>
                <td>${students[i].names}</td>
                <td>${students[i].age}</td>
                <td>${students[i].gender}</td>
                <td>${students[i].hometown}</td>
            </tr>
            `);
        }
      </script>
    </table>
  </body>
</html>

4.内置对象

4.1内置对象是什么

JavaScript内部提供的对象，包含各种属性和方法给开发者随时调用

4.2内置对象Math

介绍
Math对象是JavaScript提供的一个“数学”对象
作用
提供了一系列做数学运算的方法
Math对象包含的方法有

方法	作用
random	生成0-1之间的随机小数（包含0不包含1）
ceil	向上取整
floor	向下取整
round	四舍五入
max	找最大数
min	找最小数
pow	幂运算

<!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>
  </head>
  <body>
    <script>
      // 属性
      console.log(Math.PI);
      //   方法
      console.log(Math.ceil(1.1)); //2
      console.log(Math.ceil(9.1)); //10
      //   ceil是天花板，往大取整数
      console.log(Math.floor(1.1)); //1
      console.log(Math.floor(9.1)); //9
      //   floor是地板，往小取整数
      //   parseInt()是取整函数，无论小数点后有多少，直接抹去；不同点在于parseInt()还可以放字符串
      console.log(Math.round(9.1)); //9
      console.log(Math.round(99.5)); //100
      console.log(Math.round(-12.5)); //-12
      console.log(Math.round(-12.52)); //-13
      console.log(Math.round(-12.49)); //-12
      //   round 四舍五入
      console.log(Math.max(-12, 49, 99, 101, 87)); //101
      console.log(Math.min(0, 49, 99, 101, 87)); //0
      // 求最大值和最小值
      console.log(Math.abs(-12)); //12
      //   求幂
      console.log(Math.pow(-12, 2)); //(-12)的平方=144
      //   平方根
      console.log(Math.sqrt(121)); //121开平方=11
    </script>
  </body>
</html>

<!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>
  </head>
  <body>
    <script>
      console.log(Math.random());
      //   [0,1)左闭右开的区间
      console.log(Math.floor(Math.random() * 11));
      //   0-10的随机整数
      let arr = ["JAY", "张碧晨", "周深"];
      let random = Math.floor(Math.random() * arr.length);
      //   random是[0-2]之间的随机整数
      console.log(arr[random]);
      console.log(Math.floor(Math.random() * 5 + 1)) + 5;
      // 是[5-10]之间的随机整数
      function getRandom(N, M) {
        return Math.floor(Math.random() * (M - N + 1)) + N;
        //   是[N-M]之间的随机整数
      }
    </script>
  </body>
</html>

4.3随机点名案例1.0

<!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>
  </head>
  <body>
    <script>
      let names = [
        "高数",
        "线代",
        "数分",
        "离散",
        "数电",
        "网页",
        "java",
        "算法",
        "刑法学（选修）",
        "数思",
      ];
      let random = Math.floor(Math.random() * names.length);
      //   1.得到一个随机数，作为数组的索引号
      document.write(names[random]);
      //   2.在页面输出数组中相对应索引号的元素
    </script>
  </body>
</html>

4.4随机点名案例2.0

<!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>
  </head>
  <body>
    <script>
      let arr = [
        "高数",
        "线代",
        "数分",
        "离散",
        "数电",
        "网页",
        "java",
        "算法",
        "刑法学（选修）",
        "数思",
      ];
      //   1.得到一个随机数，作为数组的索引号
      let random = Math.floor(Math.random() * arr.length);
      //   2.在页面输出数组中相对应索引号的元素
      document.write(arr[random]);
      // splice(起始位置（下标），删除几个元素)
      arr.splice(random, 1);
      console.log(arr);
    </script>
  </body>
</html>

4.5猜数字游戏

<!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>
  </head>
  <body>
    <script>
      // 1. 随机生成一个数字1~10
      //   是[N-M]之间的随机整数
      function getRandom(N, M) {
        return Math.floor(Math.random() * M - N) + N;
      }
      let random = getRandom(1, 10);
      console.log(random);
      //   2.设定三次，三次没有猜中就直接退出
      let flag = true;
      //   开关变量，判断程序是否会弹出次数已经用尽的框
      for (let i = 1; i <= 3; i++) {
        let num = +prompt("请输入你猜的数字：");
        if (num > random) {
          alert("你猜大了~");
        } else if (num < random) {
          alert("你猜小了~");
        } else {
          flag = false;
          alert("游戏over,你猜对了!");
          break;
        }
      }
      if (true) {
        alert("游戏失败,次数已经用完");
      }
    </script>
  </body>
</html>

4.6随机颜色案例

<!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>
  </head>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    div {
      width: 300px;
      height: 100px;
      border-radius: 10px;
      border: 1px solid black;
      margin: 0 auto;
    }
  </style>
  <body>
    <div></div>
    <script>
      // 1. 自定义一个随机颜色的函数
      function getRandomColor(flag = true) {
        // 3. 如果布尔值是true，则返回#ffffff
        if (flag) {
          let arr = [
            "0",
            "1",
            "2",
            "3",
            "4",
            "5",
            "6",
            "7",
            "8",
            "9",
            "a",
            "b",
            "c",
            "d",
            "e",
            "f",
          ];
          let result = "#";
          //   console.log(result);
          // 利用for循环随机抽取6次，并且每一次都要用字符串的方式拼接到result里面
          for (let i = 1; i <= 6; i++) {
            let random = Math.floor(Math.random() * arr.length);
            // 数组元素的索引号（随机）
            result = result + arr[random];
            // 字符串拼接！！！
          }
          return result;
        }

        // 4. 如果布尔值是false，则返回rgb(255,255,255)
        else {
          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})`;
        }
      }
      //  2. 调用函数getRandomColor(布尔值)
      console.log(getRandomColor(false));
      console.log(getRandomColor(true));
      //   没有实参的时候
      console.log(getRandomColor());

      const div = document.querySelector("div");
      div.style.backgroundColor = getRandomColor();
    </script>
  </body>
</html>

拓展

1.术语解释

术语	解释	举例
关键字	在JavaScript中有特殊意义的词汇	let、var、function、if、else、 switch、case、break
保留字（备胎）	在目前的JavaScript中没意义，但未来可能会具有特殊意义的词汇	int、short、long、char
标识（标识符）	变量名、函数名的另一种叫法	无
表达式	能产生值的代码，一般配合运算符出现	10 + 3、age >= 18
语句	一段可执行的代码	If () ，for()

2.基本数据类型和引用数据类型

简单类型又叫做基本数据类型或者值类型，复杂类型又叫做引用类型

值类型：在存储变量时，其中存储的是值本身，因此叫做值类型
比如：string ，number，boolean，undefined，null
复杂数据类型：在存储变量时，其中存储的仅仅是地址（引用），因此叫做引用数据类型
例如：通过 new 关键字创建的对象（系统对象、自定义对象），如Object、Array、Date等

3.堆和栈空间分配

栈（操作系统）：由操作系统自动分配释放存放函数的参数值、局部变量的值等。其操作方式类似于数据结构中的栈；
简单数据类型存放到栈里面
堆（操作系统）：存储复杂类型(对象)，一般由程序员分配释放，若程序员不释放，由垃圾回收机制回收。
引用数据类型存放到堆里面
简单类型的空间分配
（1）值类型（简单数据类型）： string ，number，boolean，undefined，null
（2）值类型变量的数据直接存放在变量（栈空间）中
复杂类型的内存分配
（1）引用类型（复杂数据类型）：通过 new 关键字创建的对象（系统对象、自定义对象），如 Object、Array、Date等
（2）引用类型变量（栈空间）里存放的是地址，真正的对象实例存放在堆空间中

<!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>
  </head>
  <body>
    <script>
      let num1 = 10;
      let num2 = num1;
      num2 = 20;
      console.log(num1); //10

      let obj1 = {
        height: 180,
      };
      let obj2 = obj1;
      // obj2,obj1里面装的是一样的地址，所以在堆里对应一样的东西
      obj2.height = 185;
      console.log(obj1.height); //185
    </script>
  </body>
</html>

帆高#

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端——JavaScript基础学习【part 3】

目录一级目录二级目录三级目录函数1.为什么需要函数1.1函数的定义1.2函数的特点2.函数的使用2.1函数的声明语法2.2函数的命名规范2.3函数的调用语法3.函数传参3.1声明语法3.2参数列表3.3调用语法3.4特殊案例3.5实参可以是变量4.函数返回值4.1返回值的概念4.2返回值的使用4.3返回值的练习4.3语法4.4细节4.5补充5.作用域5.1定义5.2全局作用域5.3局部作用域5.4全局变量5.5局部变量5.6变量的特殊情况5.7变量的访问原则6.匿名函数6.1函数的分类6.1.1具名函数6.
复制链接

扫一扫