javascript基础

Javascript：js是一种运行在客户端的编程语言能够实现人机交互效果

特点：

网页特效：监听用户的一些行为让网页作出对应反馈
表单验证：针对表单合法性进行判断
数据交互（获取后台数据渲染到前端）
服务器编程（node.js）

javascript组成：

**ECMAScript:**规定js基础语法核心知识：变量、分支语句、循环语句、对象

Web APIs: DOM操作文档 对页面元素进行移动、大小、删除等他操作；BOM操作浏览器：页面弹窗、检测浏览器、存储数据到浏览器DOM 属于BOM

MDN权威网站

javascript书写位置

内部javascript

书写样式：弹出框警示框样式

<body>
    <!-- js样式要写在body底部前 -->
    <script>
        alert( '你好 弹框');
    </script>
</body>
</html>

外部javascript

1.首先引入*.js文件 2.html里面script里面路径找到该文件（script里面不需要填写内容）

<body>
    <script src="./02-外部js.js"></script>
    <!-- script里面不需要放内容 内容存储在外部.js文件中 -->
</body>

外部javascript（不常用） :

注意不能同时出现两个单引号或者双引号

<body>
   <button onclick="alert('你好 月薪过万')">点击月薪过万</button><br>
   <button onclick='alert("你好")'>点击月薪过万</button>
</body>

javascript注释：

单行注释：ctrl+/ ；块注释：shift+alt+a

javascript结束符：

结束符：分号；或者是换行

企业开发时有工具强制帮助做统一的格式化

javascript输入输出：

输出语法：

1.向body输出内容如果输出的是标签也会被解析为网页元素

2.可以把标签形式的字符串重新插入body里面

3.写标签字符串的时候最好用反引号包裹不换行的字符串也可以用单双引号

 <script>
        let str=(`<div>
        <p><button>这是一个按钮</button></p>
         </div>`);
         document.write(str);
         document.write(`
        <h1>标题</h1>
        `);
    </script>

2.弹出警示框

<body>
    <script src="./02-外部js.js"></script>
    <!-- script里面不需要放内容 内容存储在外部.js文件中 -->
</body>

3.控制台输出语法调试用快捷方法log+enter

<script>
        console.log('输出在控制台');
        // 控制台输出语法 调试用 快捷方法log+enter
</script>

输入语法

1.prompt("内容")；

<body>
    <script>
        // prompt("请输入用户名称");
        // 定义一个变量（名称随便不加引号）=输入框
        username = prompt("请输入用户名称");
        document.write(username)
        // 输入框内容为变量名称不加引号
    </script>
</body>

2.多个输入输出合并写

输出合并书写要加"+"

<body>
    <script>
        username = prompt("请输入用户名称");
        favorite = prompt("兴趣");
        food = prompt("最喜欢的食物");
        sport = prompt("最喜欢的运动");
    //    console.log( username);
    //    console.log( favorite);
    //    console.log( food);
    //    console.log( sport);
    // 合并写法
    console.log(username + favorite + food + sport )
    </script>
</body>

变量：

变量：计算机存储数据的容器

声明变量（创建变量）：

语法： let即关键字）变量名 **let age；**age即变量名称也叫标识符

变量赋值： 在变量名后加=，然后是数值 age=18；

<script>
        // 创建变量
        let username;
        // 变量赋值
        username = '陈';
        // 输出变量在控制台
        console.log(username);
</script>

声明多个变量： 注意：没有结束时候用“,” 结束时候用“;”

<script>
let count = '20',
    nickname = '张三';
console.log(count+ nickname);
</script>

变量替换：

 <script>  
    // 声明三个变量 一个空变量
    let num1='10', num2='20' ,temp;
    // 空变量放num1的值  num1=num2的值  num2=之前num1的值即空里面放的值
       temp='num1'
       num1='num2'
       num2='temp'
    </script>

变量命名规范规则：

1.可以使用特殊符号‘_’ ‘$’

2.可以用字母数字组合数字不能在开头

3.区分大小写

4.推荐使用小驼峰

5.内置关键词不允许做变量 let var if for

 <script>
        let _hello='你好',
            $h='2',
            hello='1',
            hello1='好'
            userName='陈',
            age='18',
            AGE='20';
   </script>

数据类型：

基本数据类型：

简单类型又叫做基本数据类型或者值类型：

在存储时变量中存储的是值本身

数字类型 number

数字类型：整数、正数、小数、负数

数字类型不加引号

数字类型使用加号表示数字的和

字符串类型 string

通过单双引号包裹的内容就是字符串类型，推荐单引号

1.单双引号成对出现，

2.可以互相嵌套但是不能自己嵌套自己，

3.必要时候需要用转义符\来输出单引号或双引号

字符串使用+相当于两段文字拼接

<script>
      let userName= prompt('请输入名称');
      let age= prompt('请输入年龄');
       document.write(`大家好，我叫${userName} ，今年${age}岁了`);
   </script>

布尔型：boolean

有两个值肯定true 否定 false

console.log(true+1);/* true计算机中相当于数字1 false相当于0 */
console.log(Number("123b"));/* 结果为NaN */
console.log(parseInt("123b"));/* 结果是123只看数字不看别的 */

 <script>
 let  isEat=false;
      if (isEat===true){
        console.log("我去吃饭");
      }
      else{
        console.log("我不去吃饭"); 
      }
   </script>

未定义类型：undefined

undefined 表示未给变量赋值

空类型 : null

null表示给变量赋值了但是值为空

引用数据类型：

复杂数据类型：在存储变量中存储在栈中的存储的仅仅是地址（引用的）

数组

对象

函数

基本数据类型和引用数据类型注意事项：

1648906168306

let num=100;/* 基本数据类型 复制的新旧两个数据不影响 */
let num2=num;
num2=1000;
console.log(num);/* 输出结果是100 */

1648907703474

let person={username:"悟空"}/* 引用地址传递 复制 新旧数据本质一样 会受影响 */
let person2=person;
person2.username="八戒"
console.log(person);

1648907716428

检测数据类型：

typeof关键字检测数据类型

  <script>
        let age=18,
            username="陈",
           isRain=true;
       let food;
       let gender=null;
       console.log(typeof age);/* 数据类型 */
       console.log(typeof username);/* 字符串 */
       console.log(typeof isRain);/* 布尔型 */
       console.log(typeof food);/* undefin */
       console.log(typeof gender);/* 空 */
    </script>

数据类型转换：

转数字类型的隐式转换：

+两边只要有一个是字符串都会把另一个转为字符串
除了+以外的算数运算符其他“- ” “ * ” “ / ”都会把数据转换为数字类型
做加法时属性值前加“+” 可以修改成数字类型加法

 <script>
        let num1= +prompt( '请输入一个数字' ),
            num2= +prompt( '请输入一个数字' );
            console.log(num1 + num2);
    </script>

<script>
        let num1=+3,
            num2=+"4",
            num3=num1+num2
            num4=num1*num2
            // console.log(typeof num4);
            console.log(typeof num3);
    </script>

转数字类型的显式转换：

可以通过代码之间转换数据类型

把字符串转数字的话可能会失败：NaN（not a number）

  <script>
       let num1="123";
       let num2=Number (num1);/* 显式转换能够之间转换数据类型 */
       console.log(typeof num2);
       let num3=9.9;
        let num4=parseInt(9.9);
        let num5=parseFloat(9.9);
       console.log(num4);
   </script>

parseInt(数据)：只保留整数； parsefloat ：可以保留小数

转换为字符串隐式转换和显示转换

<script>
        let num=123;
        // let num1=123+"";
        // console.log(typeof num1)； /* 隐式转换 */
        // let str=String(num)
        // console.log(typeof str); /* 显示转换1 */
        let str = num.toString();
        console.log(typeof str);/* 显式转换2 */
    </script>

运算符

算数运算符

加+ 减- 乘* 除/ 取整求余% 多个运算符先乘除后加减有括号先算括号

取余使用场景 判断一个数是不是一个整数

<script>
        let num1=10,
            num2=2,
            num3=15,
            num4=3;
            console.log(num1 + num2);/* 12 */
            console.log(num1 - num2);/* 8 */
            console.log(num1 * num2);/* 20 */
            console.log(num1 / num2);/*  5*/
            console.log(num4 % num3);/* 3 */
            let r=prompt("请输入圆的半径");
             console.log('圆的面积是：'+ Math.PI *r*r );
    </script>

赋值运算符

右边的值赋值给左边变量 += ；-=； *=； /=

<script>
        let num=10;
        // num += 2;/* num=num + 2 */
        // num -= 2;/* num=num - 2 */
        // num *= 2;/* num=num * 2 */
        num /= 2; /* num=num / 2 */
        console.log(num);
    </script>

一元运算符（记数使用）

用一元运算符做自增计算(前置自增和后置自增独立计算时候没有区别)

前置自增：先自加再计算

**后置自增：**先计算再自加两步走

使用场景：记数使用

1648416515866

 <script>
       <script>
        let i = 1;
       /*  console.log(++i +2); *//* 先自增再算加2 */
        console.log(i++ +2);/* 直接算i+2的值3 再算i++ */
        console.log(i);/* 此时i++输出i等于2 */
    </script>
    </script>

比较运算符

比较两个数据大小、是否相等，输出的值是一个布尔 boolean值

字符与字符之间可以相互比较 依据是AscII码程序中之间可以直接转换为AscII码** 控制台上边可以之间输入代码查看AscII码

1648430438287

NaN不等于NaN

尽量不比较小数小数有精度

  console.log(3 > 5);
        console.log(3<4);
        console.log(4==3);/* 比较运算=只比较数值 */
        console.log(4==="3");/* 比较数值和数据类型 */
        console.log(4!=5);
        console.log(3<=3);/* 小于等于 */
        console.log("A" > "B");/* 字符之间比较根据ASCII码之间比较 */
        console.log( 4 > Number("3"));/* 直接隐式比较 */
        console.log("2" > "19");/* 字符串之间的比较会先进行第一个值的比较也就是"2"和"1"之间的比较 "2">"1" 得出结果后就不会继续比较"2"和"9"之间的大小*/

逻辑运算符

逻辑与 &&：有假则假

逻辑或 || :有真为真

逻辑非！：取反真变假假变真

逻辑运算符短路运算：

&&或者|| 当判断整段代码运算结果：最后被执行的表达式一般用在变量赋值

  console.log(10 && 20);/* 20 */
  console.log(10 || 20); /* 10 */

短路只存在&&和||中：

&&左边为false就为假（满足了去做）

||左边为true就为真（不满足才去做）

 <script>
        let num=6;
        console.log( num>3 && num<5);
        console.log(3>5 || 5>1 || 6>10);
        let rain=false;
        // rain && console.log("下雨吃海鲜") 工作中利用运算符短路实现代码技巧;
        rain || console.log("不下雨出去玩");
    </script>

转布尔类型后false：undefined ; null ; 0 ; " "即空字符串 ;false ;NaN 转为布尔类型是false 但是最终获取结果的时候还是本身

      console.log(false && 20);/* false */
      console.log(undefined && 20);/* undefined */
      console.log(NaN && 20);/* NaN */
      console.log(null && 20);/*null */
      console.log(0 && 20);/* 0 */
      console.log(false || 20); /* 20 */
      console.log(undefined || 20); /* 20 */
      console.log(NaN || 20); /* 20 */
      console.log(null || 20); /*20*/
      console.log(0 || 20); /* 20 */
      console.log(!Boolean(undefined));/* 转布尔型 */

运算符优先级：

优先级	运算符	顺序
1	小括号	（）
2	一元运算符	++ -- !（！运算级别最高）
3	算数运算符	先* / % 再+ -
4	关系运算符	> >= < <=
5	相等运算符	== !== === !==
6	逻辑运算符	先&& 再\|\| （&&比\|\|高）
7	赋值运算符	=
8	逗号运算符	，

语句

表达式和语句：

表达式表示计算一个结果语句可以表达当前的行为以；结束

3+4=7表达式（表达式也可以是语句）

分支语句

顺序结构：按照顺序书写

分支结构：功能能够选择性的执行想要的代码

switch多分支语句：

通常处理case确定的情况，

注意：输入的类型保持一致即case那里是字符加""; break不要忘。

  let fruit=prompt("请输入水果");
        switch (fruit) {
            case "苹果":
            alert("苹果3.5元一斤");
                break;
            case "香蕉":
            alert("香蕉3元一斤");
                break;
            case "橙子":
            alert("橙子5元一斤");
                break;
            case "榴莲":
            alert("榴莲35元一斤");
                break;
            default:
                alert("没有此水果");
                break;
        }

if单分支

 <script>
        let score=+prompt("请输入分数");/* 分数是个数字需要隐性转换 */
        if(score>500){
            alert("恭喜进入高校")
        };
    </script>

if双分支

 <script>
      let score = +prompt("请输入分数");
      if (score > 700) {
        alert("去三亚");
      } else {
        alert("家里蹲");
      }
    </script>

if多分支:可以写无数个条件

判断范围的情况用if

<script>
      let day = +prompt("请输入今天周几");
      if (day ===1 ) {
        console.log("海鲜");
      } else if (day === 2) {
        console.log("牛排");
      } else if (day === 3) {
        console.log("火锅");
      } else if (day === 4) {
        console.log("奶茶");
      } else if (day === 5) {
        console.log("炸鸡");
      } else {
        console.log("快乐水");
      }
    </script>

多分支-三元运算符：

三元表达式一般用来取值

语法：条件？满足条件执行代码1 ：不满足条件下执行代码2

<script>
        // 数字小于10 前边补0
        <script>
        // 数字小于10 前边补0
        let time=+prompt("请输入一个数字");
        let strNum = time<10 ? time="0" + time : time;
       console.log(strNum);
    </script>
    </script>

断点调试

打开调试页面F12 ---> source---->代码文件；在某句代码上加标记点叫断点，当程序执行到标记点后代码会暂停

1648433535313

循环结构：

循环：重复执行某些语句或者代码

由循环体和循环语句和终止条件组成

while循环：

不明确循环次数while循环

重复执行某段代码：1.变量初始值 2.终止条件（没有终止条件循环一直执行变成死循环）3.变量变化量（自增或自减）

<script>
      let i = 1;/* 变量初始值 */
      while (i <= 3) /* 终止条件 */{
      document.write(`这是第${i}次循环 <br>`);
      i++;/* 变量变化量 */
      }
    </script>

 <script>
      let input;
      let money = 0; /* 定义一个没有赋值的变量 */
      while ( input !== 4) {/* 当输入值是4时候停止循环 */
        //   输入数字的时候变量一定要转换
        input = +prompt(` 
        请选择您的操作：
        1.取款
        2.存款
        3.查看余额
        4.退出`);
        if (input === 1) {/* 取款定义一个变量为存款金额 */
          let num1 = +prompt(`请输入取款金额`);
          money -= num1;
          // 此时金额为总金额减去取款金额
        }
        else if (input === 2) {/* 存款定义变量 */
          let num2 = +prompt(`请输入存款金额`);
          money += num2;
          // 此时金额为总金额加存款金额
        }
        else if (input === 3) {
          input = +alert(`余额是,${money}元`);
          // 查看余额
        }
        else if (input === 4){
console.log("退出");
        }
      }
    </script>

for循环：

for循环里面不能声明变量否则会报错

起始值、循环条件、变化量写到一起(明确循环次数用for循环)

for（初始化变量；终止条件；操作表达式（递增或者递减））{循环体}

<script>
      for (let index = 1; index <= 100; index++) {
        console.log(i);
      }
      let sum = 0;
      for (let index = 1; index <= 100; index++) {
        index % 2 === 0 && (sum += index);
      }
      console.log(`偶数和是`, sum);
      let star='';
      for (let index = 1; index <= 100; index++) {
      star+='★';
      }
      document.write(star);
    </script>

continue：结束本次（当前次循环）循环继续下次循环（不是必须得使用的）

 <script>
        // for (let index = 1; index <=10; index++) {
        //   if(index % 2===0){
        //       console.log(index);
        //   }
        // }/* 和下边代码一样的效果 */
        for (let index = 1; index <=10; index++) {
          if(index % 2!==0){
             continue
          }
          console.log(index);
        }
    </script>

break：跳出本次循环（循环结束）（不是必须使用的尽量使用break）

 <script>
        for (let index = 1; index <= 10; index++) {
           if (index===5) {
               break
           }
           console.log(index);
        }
    </script>

循环嵌套：

 <script>
      let day = +prompt("请输入天数");
      let count = +prompt("请输入单词数量");
      for (let index1=1; index1 <= day; index1++) {
        document.write(`第${index1}天 <br>`);
        for (let index=1; index <= count; index++) {
          document.write(`第${index}个单词 <br>`);
        }
      }
    </script>

数组：

数组：可以按顺序保存数据的数据类型

1.声明变量 let 数组名=[数据1, 数据2, 数据3,...,数据n]

数组按照顺序保存，每个数组有自己的编号，计算机的编号从0开始。数据的编号叫索引或下标

取值语法：数组名 [下标] 数组名.length 数组长度

如果取值超出数组长度输出为undefined

<script>
       let name=["李明","陈多多","张小花"]
       console.log(name[0]);
       console.log(name.length);/* 查看数组长度 */
       console.log(name.length[10]);/* 数组输出长度大于数组长度的话输出为undefined */
    </script>

数组一般搭配for循环使用使用数组做for循环的时候 let index=0，index<arr.length

  <script>
 let num=[2,6,1,7,4];
        let sum=0;
        let average;
        for (let index = 0; index < num.length; index++) {
           sum+=num[index];/* index是下标（索引）要想拿里面的值需要加数组前缀 num[index] */
           average=sum/num.length;/* 平均值等于总和除以数组长度 */
        }
        console.log(`数组的总和是${sum}`);
        console.log(`数组的平均值是${average}`);
    </script>

操作数组

数组增加新的数据：

数组.push();新数据在数组末尾，并且返回该数组新长度

数组.unshift（新增内容），将新增内容放到数组的开头

   userName.push("小芬");/* 添加内容在数组借结尾 */
   userName.unshift("小青");/*添加内容放在数组开头*/

 <script>
       let name=[];
        for (let index = 0; index <4; index++) {
           let userName=prompt("请输入名字");/* 弹框是用户名称*/
           name.push(userName);/* 添加的内容就是弹框内容即用户名称 */
        }
        console.log(name);/* 输出的是数组 */
    </script>

数组筛选:

 <script>
 /* 1.定义一个空数组用来筛选大于10的数 
    2.for循环取值
    3.当值大于10的时候把取出来的num[index]放到num1.push添加数组里面*/
        let num=[2,0,6,1,77,0,52,0,25,7];
        let num1=[];
        for (let index = 0; index < num.length; index++) {
            if (num[index]>10) {
                num1.push(num[index]);
            }
        }
        console.log(num1);
    </script>

删除数组中元素

删除数组中最后一个元素：数组.pop();

删除数组中第一个元素：数组.shift();

<script>
        let fruit=["香蕉","橘子","葡萄","草莓"];
        let del=fruit.pop();/* 删除数组中最后一个元素 */
        fruit.shift();/* 删除数组中第一个元素 */
        fruit.push("猕猴桃");/* 在数组最后添加元素 */
        fruit.unshift("榴莲");/* 在数组前边添加元素 */
        console.log(fruit);
        console.log(del);/* 返回该元素值 */
    </script>

指定数组中的元素进行删除和增加

splice（"想要删除的元素的下标","想要删除几个"）；

splice("想要增加元素的后边元素下标"，"想要删除元素的个数", "增加的元素" )

 <script>
        let fruit=["香蕉","橘子","葡萄","草莓","椰子"];
        let del=fruit.splice("2","2");/* 第一个数字是删除元素的下标 第二个数字是删除选中元素后边几个元素 */
        let sum=fruit.splice("0","0" ,"菠萝" ,"樱桃");/* 在下标为0的位置前边 删除0个元素增加元素 */
        console.log(fruit);
        console.log(del);
    </script>

获取数组的最后一个元素：

数组长度-1索引就是最后一个元素

console.log(arr[arr.length -1])

修改数组中元素

修改数组中元素：arr[索引数]=“修改的内容”

如果索引数这里有元素就是修改成当前内容如果索引数没有元素就是添加

把数组里面内容清空 arr[] 或者arr.length = 0；

只保留数组中n个元素 arr.length=n ；

函数

function是执行特定任务的代码块：可以包裹相同或者相似的代码。作用：精简代码方便复用。

function 函数名（形参）{函数体} 调用函数：函数名（实参）

  //    函数初体验 ：函数名命名最好是小驼峰形式 声明完函数记得调用 调用几次生成几个函数.  /* 形参和实参的个数最好是相等 不相等输出为NaN */
<script>
    function calcSum(num1,num2) {
        let sum=num1+num2;
        console.log(sum);
    }
    calcSum(30,20);
    function calcSum1() {    
    }
    </script>

函数的返回值：

1.函数执行完毕时会返回的数据；2.不能执行多次return；3.如果书写多次return下边代码不再执行；4.如果一个函数没有return相当于写了个return undefined

return 函数名;

  <script>
      function getMax(a) {
        let max = a[0];
        for (let index = 0; index < a.length; index++) {
          if (a[index] > max) {
            max = a[index];
          }
        }
        return max; /* 返回最大值 */
      }
      let a1 = [3, 4, 8, 9, 7, 2, 1, 0];
      console.log(getMax(a1)); /* 如果不加getMax 意思就是没有调用函数 */
      function getMin(arr) {
        let min = arr[0];
        for (let index = 0; index < arr.length; index++) {
          if (arr[index] < min) {
            min = arr[index];
          }
        }
        return min; /* 返回最小值 */
      }
      document.write(getMin(a1));
    </script>

函数作用域：

作用域：限定变量使用范围一段代码中所用的名字并不总是有效和可用的限定名字的可用性代码区域就是作用域

全局作用域：函数外边js里面的

局部作用域：函数作用域函数里面的

块级作用域：if语句 for语句{}里面

变量的作用域：

全局变量：在任何地方都能访问

局部变量：局部变量不能在超出他的大括号使用

块级变量：超出自身大括号不能使用

作用域链： 代码寻找变量的一种机制。不同作用域声明同样的变量采取就近原则如果作用域里面没有变量找外层看看有没有变量直到找到全局作用域停下。

就近原则是根据函数的定义来判断不是函数的调用来判断的

let b=100;
function func1() {
    console.log(b);/* 同一作用域内必须先声明再调用否则报错 */
    let b=200;}
    func1()

匿名函数：

没有具体函数名称

 let fn= function(params) {};

自执行函数：

函数在定义的时候就直接执行了

(匿名函数)()一般和匿名函数一块使用

对象

对象 object：1.是一种数据类型；2.无序数据的集合; 3.用来描述某个事物。4.静态特征==》用数字、字符串、数组、布尔类型表示；动态特征==》用函数表示

声明对象：

let 对象名={

属性名：属性值，

方法名：函数

}

   <script>
        let person={
            name:"张",
            age:20,
            sayHi :function(a) {
                console.log(a);/* 在控制台上输出a变量 */
                document.write(a);
                return `"你爱我吗？"`
            }
        }
        // 方法就是个函数 函数用来接收参数 函数有返回值 
        person.sayHi("你好 <br>")/* 给变量a赋值并且调用 */
        person.sayHi("你真好 <br>")/* 给变量a赋值并且调用 */
        let result=person.sayHi(`你是我的最爱`)/* 给输出的结果赋值并且调用 */
        console.log("==========");/* 在控制台输出一个值 */
                              // let result=person.sayHi()
        console.log(result);/*相当于给输出结果赋值再调用  */
    </script>

属性访问：

第一种：good.name 第二种：good["name"]

如果good[name]** name没有加双引号那么表示name是一个变量，如果程序中没有这个变量则会报错

<script>
        let userName="color";/* 如果没有userName这个变量那么会报错 */
        let person={
            userName:"张",
            color:"yellow"
        }
        console.log(person.userName);
        console.log(person["color"]);
        console.log(person[userName]);/* 相当于找userName这个变量 这个变量等于color 输出是黄色 */
    </script>

如果访问不存在的属性会出现undefined

第一种：console.log(`手机的名称是${good.name}手机的型号是${good.size}手机的价格是${good.price}`);
第二种:document.write(`手机的名称是${good["name"]}<br>手机的型号是${good["size"]}<br> 手机的价格是${good["price"]}`)

对象中的方法：

操作对象

增加和修改：

新增属性和修改属性新增方法写匿名函数新增和修改属性一样的

删除属性 delete +属性名

<script>
        let person={
            color:"yellow",
            hobby:"篮球"
        }
        person.userName="张";/* 新增变量 */
        person.color="white";/* 修改变量 */
        delete person.hobby;/* 删除变量 */
        person.sayHi =function() {
            console.log("这是新增的名字为sayHi的函数");
        } /* 增加匿名函数固定写法 */
       person.sayHi()/* 调用函数 */
       console.log(person);
   </script>

遍历对象

 <script>
        let person={
            name:"zhang",
            age:24,
            height:180
        }/* 遍历对象 从key属性名到person这个对象 */
        for (const key in person) {
        //   console.log( key);/* 打印属性名 */
        //   console.log(  person[key]);/* 打印属性值 */
          console.log(`属性名是:${key} 属性值是:${person[key]}`);
        }
    </script>

遍历数组：

<script>
        let students=[{ name: "小明", age: 18, gender: "男", adress:"河南省" },
        { name: "小红", age: 20, gender:" 女" , adress:"广东省" },
        { name: "小黑", age: 25, gender:  "男", adress:"安徽省" }]
        tableHtml=` <table>
        <caption>学生列表</caption>
        <thead>
            <th>序号</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
            <th>住址</th>
        </thead>`/* 开头 */
        /* 遍历数组 */
        for (let index = 0; index <students.length; index++) {
           tableHtml+=` <tr>
          <td>${index+1}</td>
          <td>${students[index].name}</td>
          <td>${students[index].age}</td>
          <td>${students[index].gender}</td>
          <td>${students[index].adress}</td>
        </tr>`
        }
        tableHtml+=` </table>`/* 结尾 */
        document.write(tableHtml);
    </script>

遍历数组和对象

<script>
        let students=[{ name: "小明", age: 18, gender: "男", adress:"河南省" },
        { name: "小红", age: 20, gender:" 女" , adress:"广东省" },
        { name: "小黑", age: 25, gender:  "男", adress:"安徽省" }]
        tableHtml=` <table>
        <caption>学生列表</caption>
        <thead>
            <th>序号</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
            <th>住址</th>
        </thead>`/* 开头 */
        /* 遍历数组 */
        for (let index = 0; index <students.length; index++) {/* 遍历数组 */
           tableHtml+=` <tr>
          <td>${index+1}</td>`/* 遍历对象 */
         for (const key in students[index]) {/* students[index]相当于数组里面对象的属性值 */
            tableHtml+=` <td>${students[index][key]}</td>`/* students[index][key]相当于数组里面对象的属性值 打印属性值 */
         }
          tableHtml+=` </tr>`
        }
        tableHtml+=` </table>`/* 结尾 */
        document.write(tableHtml);
    </script>

内置对象

js内部所提供的对象包含各种属性和方法给开发者调用

Math：js提供的数学对象

方法有：

序号	方法名	作用
1	random	生成0-1之间的随机数（包含0不包含1）
2	ceil	向上取整
3	floor	向下取整
4	max	找最大数
5	min	找最小数
6	pow	幂运算
7	abs	绝对值
8	round	四舍五入

 <script>
     console.log(Math.random());/* 打印一个0-1之间的随机数可以等于0不能等于1 */
  console.log(Math.ceil(3.2));/* 向上取整 */
  console.log(Math.floor(3.2));/* 向下取整 */
  console.log(Math.round(3.2));/* 四舍五入 */
  console.log(Math.round(3.7));/* 四舍五入 */
  console.log(Math.min(3,4,2,1,0,-1));/* 最小值 */
  console.log(Math.max(3,4,2,1,0,-1))/* 最大值 */
  console.log(Math.pow(3,3))/* 幂运算 第一个是数字 第二个是次幂 */
  console.log(Math.pow(3,1/3))/* 3的三分之一次方相当于次幂 */
  console.log(Math.abs(-10))/* 绝对值 */
    </script>

获取M-N的随机数：

1648889377442

公式：Math.round( Math.random()*(M-N))+N

 function getRandom(min,max) {
            return Math.round(Math.random()*(max-min)+min)
        }
        console.log(getRandom(3,9));

JavaScript基础课程