JavaScript第四天(2)函数传参，有参数的函数声明和调用，形参和实参，数组

在这里插入图片描述
参数列表：传入数据列表，声明这个函数需要传入几个数据，多个数据用逗号隔开

function getSum(num1,num2){document.write(num1+num2)}
getSum(10,20)
调用函数的时候，需要传入几个数据就写几个，用逗号隔开

形参：声明函数时写在函数名右边小括号里的叫形参（形式上的参数）
 实参：调用函数时写在函数名右边小括号里的叫实参（实际上的参数）
 形参可以理解为是在这个函数内声明的变量（比如 num1 = 10）实参可以理解为是给这个变量赋值
 开发中尽量保持形参和实参个数一致
 我们曾经使用过的 alert(‘打印’), parseInt(‘11’), Number(‘11’) 本质上都是函数调用的传参
实参：调用函数的时候写在函数名右边小括号里的叫做实参
形参：声明函数的时候写在函数名右边小括号里的叫做形参

函数传递参数的好处是？
 可以极大的提高了函数的灵活性
函数参数可以分为那两类？怎么判断他们是那种参数？
 函数可以分为形参和实参
 函数声明时，小括号里面的是形参，形式上的参数
 函数调用时，小括号里面的是实参，实际的参数
 尽量保持形参和实参的个数一致
参数中间用什么符号隔开？
 逗号
尽量保持形参和实参的个数是一致的
形参和实参的个数是一致的
参数中间用逗号符号隔开
函数可以分为形参和
函数封装求和
需求：采取函数封装的形式：输入2个数，计算两者的和，打印到页面中
兑现承诺：
合理利用逻辑中断
 形参如果不被赋值，就是undefined实参，

合理利用逻辑中断，形参如果不赋值就是undefined
function getSum(x,y){
x=x||0
y=y||0
console.log
(x+y)}
getSum(1,2)
函数封装-求学生总分
需求：学生的分数是一个数组,计算每个学生的总分
分析：
①：封装一个求和函数
②：传递过去的参数是一个数组
③：函数内部遍历数组求和

封装一个求和函数，传递过去的参数是一个数组，函数内部遍历数据求和
在这里插入图片描述
function getSum(num1,num2){
document.write(num1+num2)}
getSum(10,20)
4. 为什么要让函数有返回值
 提问：是什么是函数？
函数是被设计为执行特定任务的代码块
执行特定任务的代码块
函数是被设计为执行特定任务的代码块

缺点：把计算后的结果处理方式写死了，内部处理了
 解决：把处理结果返回给调用者
 有返回值函数的概念：
 当调用某个函数，这个函数会返回一个结果出来
 这就是有返回值的函数
function getSum(num1,num2){document.write(num1+num2)}
get(10,20)
在这里插入图片描述
let result=prompt(‘请输入您的年龄’)
letresult2=pareInt(‘111’)
只是这些函数是JS底层内置的.我们直接就可以使用
 当然有些函数，则没有返回值
只是这些函数是JS底层内置的，我们可以直接使用
5. 函数很多情况下需要返回值
函数很多情况下需要返回值
2 用return返回数据
 当函数需要返回数据出去时，用return关键字
 语法
return 数据
return 20
在这里插入图片描述
function getSum(x,y){
return x+y;}
let sum=getSum(10,30)
document.write(sum)
3.2 用return返回数据
 细节：
 在函数体中使用 return 关键字能将内部的执行结果交给函数外部使用
 函数内部只能出现 1 次 return，并且 return 后面代码不会再被执行，所以 return 后面的数据不要换行写  return会立即结束当前函数
 函数可以没有 return，这种情况函数默认返回值为 undefined
在函数体当中使用return关键字能够将内部的执行结果交给函数外部使用
return后面的数据不要换行写
return会立即结束当前函数
函数可以没有return这种情况默认返回undefined

为什么要让函数有返回值
 函数执行后得到结果，结果是调用者想要拿到的（一句话，函数内部不需要
输出结果，而是返回结果）  对执行结果的扩展性更高,可以让其他的程序使用这个结果
函数有返回值用那个关键字？有什么注意事项呢？
 语法：return 数据
 return后面不接数据或者函数内不写return，函数的返回值是undefined
 return能立即结束当前函数, 所以 return 后面的数据不要换行写
函数执行后得到的结果，结果是调用者想要拿到的，一句话，函数内部不需要输出结果，而是返回结果，对执行结果的扩展性更高，
return后面不接数据或者函数内部不写return函数的返回值是undefined
return后面不接数据或者函数内不写return函数的返回值是undefined
函数返回值练习
求任意数组中的最大值并返回这个最大值
求任意数组中的最小值并返回这个最小值
求任意2个数中的最大值, 并返回
断点调试：
进入函数内部看执行过程 F11

<!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>
    <button>点击我</button>
    <script>
        let num = 10
        // 函数表达式
        let fn = function () {
    
    
            console.log(111)
        }
        fn()
        // let fn = function (x, y) {
    
    
        //     console.log(x + y)
        // }
        // fn(1, 2)
        let btn = document.querySelector('button')
        // btn.onclick = function () {
    
    
        //     alert('月薪过万')
        // }
        btn.addEventListener('click', function () {
    
    
            alert('月薪过10万')
        })
    </script>
</body>

</html>

let fn=function(x,y){console.log(x+y)}
querySelector()方法返回文档当中匹配指定的CSS选择器的一个元素
btn.addEventListener(‘click’,function(){alert(‘月薪10完’)})
btn.addEventListener(‘lick’,function(){alert(‘月薪10完’)})

<!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 fn = function() {
    
    }
        //    fn()
        // 1 第一个小括号放的 形参   第二个小括号放的是实参
        // (function () {
    
    
        //     console.log(111)
        // })()
        // (function (x, y) {
    
    
        //     console.log(x + y)
        // })(1, 2)
        // let num = 10
        //     (function () {
    
    
        //         // 防止变量污染
        //         let num = 20
        //     })()

        // (function () {
    
    
        //     console.log(111)
        // }())
        // (function fn() {
    
    
        //     console.log(111)
        // }())

        // let num = 10
        // let num = 20 
        (function () {
    
    
            console.log(111)
        })();
        let num = 10
            ; (function () {
    
    
                console.log(222)
            })()
    </script>
</body>

</html>

(function(x,y){console.log(x+y)})(1,2)
(function(){console.log(111)}())
(function(){console.log(111))})();
let num=0
(function(){console.log(2222)})()
let sum=0\10;
(function(){console.log(222)})()

<!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 second = +prompt('请输入总的秒数：')
        // 2. 计算时间  封装函数
        function getTimes(t) {
    
    
            // 小时：  h = parseInt(总秒数 / 60 / 60 % 24)
            // 分钟：  m = parseInt(总秒数 / 60 % 60)
            // 秒数: s = parseInt(总秒数 % 60)
            let h = parseInt(t / 60 / 60 % 24)
            let m = parseInt(t / 60 % 60)
            let s = parseInt(t % 60)
            h = h < 10 ? '0' + h : h
            m = m < 10 ? '0' + m : m
            s = s < 10 ? '0' + s : s
            return `计算之后的时间是${
     
     h}小时${
     
     m}分${
     
     s}秒`
        }
        // 3. 打印输出
        let str = getTimes(second)
        document.write(str)
        // document.write(str)
    </script>
</body>

</html>

let second=+prompt(‘请输入总的描述:’)
function getTimes(t){
let h=parseInt(t/60/60%24)
let m=parseInt(t/60^60)
h=h<10?‘0’+h:h
m=m<10?‘0’+m:m
return '计算之后的时间是 ${h}小时$ {m}分钟${s}秒}
let str=getTimes(second)
document.write(str))
let str=getTimes(second)
document.write(str)
let s=parseInt(t%60)
let m=parseInt(t/60%60)

<!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 fn(x, y) {
    
    
        //     // x = 1 
        //     // y = undefined
        //     // 1 + undefined  =  NaN
        //     console.log(x + y)
        // }
        // fn(1, 2)

        // 1. 实参个数少于形参   返回的结果 NaN
        // fn(1)
        // 2. 实参个数大于形参   非诚勿扰
        function fn() {
    
    
            // arguments 函数内有效   表现形式 伪数组 
            // 伪数组 比真数组 少了一些 pop()  push()  等方法 
            console.log(arguments) //  [1,2,3]
            let sum = 0
            for (let i = 0; i < arguments.length; i++) {
    
    
                sum += arguments[i]
            }
            console.log(sum)
        }

        fn(1, 2, 3)


    </script>
</body>

</html>

实参个数小于形参，返回的结果是NaN
实参个数大于形参，
function fn(){arguments函数内有效，表现形式，维数组
维数组比真数组少了一些pop(),push()等方法，console.log(arguments)
function fn(){
console.log(arguments)
let sum=0
for(let i=0;i<arguemnets.length;i++){
在这里插入图片描述

作用域概述
通常来说，一段程序代码中所用到的名字并不总是有效和可用的，而限定这个名字的可用性的代码范围就是这
个名字的作用域。作用域的使用提高了程序逻辑的局部性，增强了程序的可靠性，减少了名字冲突。

一段代码当中所用到的名字并不总是有效的，有用的，而限定这个名字的可用性的代码范围就是这个名字的作用域，作用域的使用提高了程序的逻辑的局部性，增强了程序的卡考行在这里插入图片描述
全局作用域：作用域所有代码执行的环境，整个script标签的内部，或者一个独立的js文件
局部作用域：
作用域函数内的代码环境，就是局部作用域，因为根函数有关系，所以称为函数作用域
块级作用域由{}包括，if语句和for语句里面的{}等
局部作用域：作用域函数内的代码环境，就是局部作用域，因为根函数有关系，所以有称为函数作用域
在这里插入图片描述
全局变量：函数外部let变量，全局变量再任何区域都可以访问和修改
局部变量：函数内部的let变量：局部变量只能再当前函数的内部访问和修改，
块级变量{}内部的let变量，let定义的变量，只能再块级作用域里面访问，不能跨快访问，也不能跨函数访问
3. 变量的作用域
变量有一个坑，特殊情况：
如果函数内部或者块级作用域内部，变量没有声明，直接赋值，也当全局变量看，但是强烈不推荐
但是有一种情况，函数内部的形参可以看做是局部变量。

如果函数内部或者块级作用与的内部，变量没有声明，直接赋值，也当作全局变量看，
如果函数内部或者块级作用域内部，变量没有声明，直接赋值，也当作全局变量看，但是强烈不推荐，函数内部的形参可以看作局部变量

JS 中作用域分为哪三种？
 全局作用域。函数外部或者整个script 有效
局部作用域。也称为函数作用域，函数内部有效
块级作用域。 { } 内有效
根据作用域不同，变量分为哪三种？
 全局变量
局部变量
块级变量
有一种特殊情况是全局变量是那种？我们提倡吗？
 局部变量或者块级变量没有let 声明直接赋值的当全局变量看
我们强烈不提倡
 还有一种特殊情况，函数内部的形参可以当做局部变量看

全局作用域：函数外部或者整个script有效
局部作用域：也称为函数作用域，函数内部有效
块级作用域：{}内有效

局部变量或者块级变量，没有let声明直接赋值的当全局变量看
局部变量或者块级变量，没有let声明直接赋值的当全局变量看
函数内部的形参可以当作局部变量看
在这里插入图片描述
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 f1() {
    
    
            let num = 123

            function f2() {
    
    
                console.log(num)
            }
            f2()
        }
        let num = 456
        f1()
    </script>
</body>

</html>

function f1(){
let num=123
function f2(){
console.log(num)}
f2()}
let num=456
f1()
作用域链：采取就近原则的方式来查找变量最终的值
作用域链“采取就近原则的方式来查找变量最终的值
在这里插入图片描述

变量访问原则是什么？
 作用域链：采取就近原则的方式来查找变量最终的值
作用域链：采取就近原则的方式来查找变量的最终只
function(){}
匿名函数
具名函数function fn(){}
fn()
function(){}匿名函数
function(){}匿名函数
匿名函数
将匿名函数赋值给一个变量，并且通过变量名称进行调用我们将这个称为函数表达式
语法

let fn=function(){
    
    
//函数体
}

调用:
fn（）//函数名
let fn=function(){}
其中函数的形参和实参使用跟具名函数一致
其中函数的形参和实参使用跟剧名函数一致的
在这里插入图片描述
let btn=document.querySelector(‘button’)
btn.addEventListner(function(){alert(‘弹出’)})
let btn=document.querySelector(‘button’)
btn.addEventListner(function(){alert(‘弹出’)})
2. 立即执行函数
场景介绍: 避免全局变量之间的污染
语法
立即执行函数
避免全局变量之间的污染
（function(){console.log(11)})();
(function(){console.log(11)})();
多个立即执行函数要用;隔开，要不然会报错

立即执行函数有什么作用？
 防止变量污染
立即执行函数需要调用吗？有什么注意事项呢？
 无需调用，立即执行，其实本质已经调用了
 多个立即执行函数之间用分号隔开
无序调用，立即执行，其实本质已经调用了，多个立即执行函数之间用分号隔开

转换时间案例
需求：用户输入秒数，可以自动转换为时分秒
分析：
①：用户输入总秒数
②：计算时分秒（封装函数）里面包含数字补0
③：打印输出
计算公式：计算时分秒
小时： h = parseInt(总秒数 / 60 / 60 % 24)
分钟： m = parseInt(总秒数 / 60 % 60 )
秒数: s = parseInt(总秒数 % 60)
h=parseInt(总秒数/60/60%24)
m=parseInt（总秒数/60%60)
s=parseInt(总秒数%60)
掌握对象相关知识，具备对象数组数据渲染页面的能力
具备对象数组数据渲染页面的neng’i
保存网站用户信息，比如姓名，年龄，电话号码… 用以前学的数据类型方便吗？
 不方便，很难区分
我们是不是需要学习一种新的数据类型，可以详细的描述某个事物？
 姓名
 年龄
 电话
 …
一. 对象
1.1对象是什么？
对象（object）：JavaScript里的一种数据类型
 可以理解为是一种无序的数据集合
 用来描述某个事物，例如描述一个人
 人有姓名、年龄、性别等信息、还有吃饭睡觉打代码等功能
 如果用多个变量保存则比较散，用对象比较统一
 比如描述班主任信息：
 静态特征 (姓名, 年龄, 身高, 性别, 爱好) => 可以使用数字, 字符串, 数组, 布尔类型等表示
 动态行为 (点名, 唱, 跳, rap) => 使用函数表示

无序的数据集合
用来描述某个事物，动态行为=》使用函数表示
静态特征=》可以使用数字，字符串，数组，布尔类型等表示

对象是什么？
 对象是一种数据类型
 无序的数据的集合
对象有什么特点？
 无序的数据的集合
 可以详细的描述描述某个事物

let 对象名={}
let 对象模={}
let person={}
let person={}
对象有属性和方法组成
 属性：信息或叫特征（名词）。比如手机尺寸、颜色、重量等…  方法：功能或叫行为（动词）。比如手机打电话、发短信、玩游戏…  你还能举例吗？

let 对象名={
属性名：属性值；
方法名：函数}
属性：信息或者叫做特征比如手机尺寸，颜色，重量等
方法：功能或者行为动词，比如手机打电话，发短信，
属性
数据描述性的信息称为属性，如人的姓名、身高、年龄、性别等，一般是名词性的。
let person={
uname:‘andy’,
age:18,
sex:‘nan’}
属性都是成对出现的，包括属性名和值，它们之间使用英文 : 分隔
 多个属性之间使用英文 , 分隔
 属性就是依附在对象上的变量（外面是变量，对象内是属性）
 属性名可以使用 “” 或 ‘’，一般情况下省略，除非名称遇到特殊符号如空格、中横线等
属性就是依附在对象上的变量，外面是变量，对象内是属性
属性就是依附在对象上的变量，外面是变量，对象内是属性
属性就是衣服在对象上的变量，外面是变量，对象内是属性
属性名可以使用""或者’',一般情况下省略，除非名称遇到特殊符号如空格，中横线
对象属性有顺序吗？
 没有
属性和值用什么符号隔开？多个属性用什么隔开？
 属性和值用 ; 隔开
 多个属性用，逗号隔开
多个属性用,隔开
对象属性又顺序码？
没有

课堂单独案例
请声明一个产品对象，里面包如下信息：
要求：

对象是一个产品信息可以命名为： goods
商品名称命名为： name
商品编号： num
商品毛重： weight
商品产地： address

<!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 fn(x, y) {
    
    
        //     x = x || 0
        //     y = y || 0
        //     console.log(x + y)
        // }
        // fn(1, 2)
        // fn()
        // x 和 y 可以看做是 函数内部的局部变量
        // 调用的时候会有个内部判断是否有参数传递过来
        // 没有参数 则 执行 x = 0
        // 有参数，则执行 实参赋值
        function fn(x = 0, y = 0) {
    
    
            console.log(x + y)
        }
        fn()
        fn(3, 5)
    </script>
</body>

</html>

fn()
fn(3,50)

<!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 goods = {
    
    
        //     name: '小米10青春版',
        //     num: '100012816024',
        //     weight: '0.55kg',
        //     address: '中国大陆'
        // }
        // console.dir(goods)

        // 声明人对象
        let person = {
    
    
            uname: '刘德华',
            age: 18,
            sex: '男',
            // 方法名：function(){
    
    }
            sayHi: function () {
    
    
                console.log('hi~~~')
            },
            mtv: function (s) {
    
    
                console.log(s)
            }
        }
        // console.log(uname)
        // 1. 访问属性  得到值   对象.属性名
        console.log(person.uname)
        console.log(person.age)
        // 2. 访问属性  得到值   对象['属性名']
        console.log(person['sex'])
        // 调用方法 对象.方法名()
        person.sayHi()
        person.mtv('无间道')

        // document.write()
    </script>
</body>

</html>

console.log(person.uname)
console.log(person.age)
console.log(person[‘sex’)
person.sayHi()

对象的方法

<!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 ldh = {
    
    
            // 属性
            uname: '刘德华',
            // 方法   方法名: function(){
    
    }
            sing: function () {
    
    
                console.log('唱歌')
            },
            dance: function (s) {
    
    
                console.log(s)
            }
        }

        // 外部使用   对象.方法名()
        ldh.sing()
        ldh.dance('恭喜发财')
    </script>
</body>

</html>

对象是有属性和方法组成的，属性和方法都写在对象里面
let led={
uname:‘刘德华’,
sing:function(){console.log(‘唱歌’)},
dance:function(S){console.log(s)}}
let ldh={
uname:‘刘德华’.,
sing:function(){
console…lh(‘changge’)},
dance:function(s){
conole.log(s)}}
ldh.sng()

<!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 obj = {
    
    
            uname: '小明',
            age: 18

        }
        console.log(obj.age)
        // 修改  对象.属性 =  新值
        obj.age = 81
        console.log(obj)
        // 新增一个属性  js 可以非常方便的动态新增属性或者方法
        obj.sex = '男'
        // 会去对象里面找是否有 sex这个属性，如果有则更新值修改
        // 会去对象里面找是否有 sex这个属性，如果没有则新增这个属性
        obj.sing = function () {
    
    
            console.log('hi')
        }
        console.dir(obj)

        // 删除 (了解)
        delete obj.uname
        console.dir(obj)

    </script>
</body>

</html>

新增一个属性js可以非常方便的动态新增属性或者方法
for(let k in obj){
console.log(k)
console.log(obj[k])//属性值
obj[‘uname’]=
obj[‘sex’]==18

<!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 obj = {
    
    
            uname: '小明',
            age: 18,
            sex: '男',

        }
        // 请输出对象的名字 小明
        console.log(obj.uname)
        console.log(obj['uname'])
        // 遍历对象
        for (let k in obj) {
    
    
            // 得到的是带字符串的属性名
            // k === 'uname'  === 'age'  === 'sex'
            console.log(k)
            // console.log(obj.k)  不可行
            // console.log(obj['uname'])
            // console.log(obj['age'])
            // console.log(obj['sex'])
            console.log(obj[k])
        }
    </script>
</body>

</html>

obj[‘age’]obj[‘sex’]obj.k

数组复习

<!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 = [1, 'pink', true, undefined, null, {
    
    }, []]
        // console.log(arr)
        // 数组对象
        let students = [
            {
    
     name: '小明', age: 18, gender: '男', hometown: '河北省' },
            {
    
     name: '小红', age: 19, gender: '女', hometown: '河南省' },
            {
    
     name: '小刚', age: 17, gender: '男', hometown: '山西省' },
            {
    
     name: '小丽', age: 18, gender: '女', hometown: '山东省' }
        ]

    </script>
</body>

</html>

数组里面可以放任何的数据类型
let students={ {name：‘小米’,age:18,gender:‘难’,hometown:‘河北省’},{name:‘小红’,age:19,gender:‘女’,hometown：’henans’}}

<!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 = [1, 'pink', true, undefined, null, {
    
    }, []]
        // console.log(arr)
        // 数组对象
        let students = [
            {
    
     name: '小明', age: 18, gender: '男', hometown: '河北省' },
            {
    
     name: '小红', age: 19, gender: '女', hometown: '河南省' },
            {
    
     name: '小刚', age: 17, gender: '男', hometown: '山西省' },
            {
    
     name: '小丽', age: 18, gender: '女', hometown: '山东省' }
        ]
        // 怎么得到小明这个名字
        // students[0]   === 得到1 

        // 打印对象 其实里面的每一个对象都是 数组里面的元素 值 
        //  遍历数组
        for (let i = 0; i < students.length; i++) {
    
    
            console.log(students[i].name)
            console.log(students[i].hometown)
        }
    </script>
</body>

</html>

let students=[{name:‘小米’,age:18,gender:‘nan’.hometown:‘河北省’}.}

<!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>
        table {
    
    
            width: 600px;
            text-align: center;
        }

        table,
        th,
        td {
    
    
            border: 1px solid #ccc;
            border-collapse: collapse;
        }

        caption {
    
    
            font-size: 18px;
            margin-bottom: 10px;
            font-weight: 700;
        }

        tr {
    
    
            height: 40px;
            cursor: pointer;
        }

        table tr:nth-child(1) {
    
    
            background-color: #ddd;
        }

        table tr:not(:first-child):hover {
    
    
            background-color: #eee;
        }
    </style>
</head>

<body>
    <h2>学生信息</h2>
    <p>将数据渲染到页面中...</p>


    <!-- <tr>
        <td>1</td>
        <td>小明</td>
        <td>18</td>
        <td>男</td>
        <td>河北省</td>
    </tr>
    <tr>
        <td>1</td>
        <td>小明</td>
        <td>18</td>
        <td>男</td>
        <td>河北省</td>
    </tr>
    <tr>
        <td>1</td>
        <td>小明</td>
        <td>18</td>
        <td>男</td>
        <td>河北省</td>
    </tr>
    <tr>
        <td>1</td>
        <td>小明</td>
        <td>18</td>
        <td>男</td>
        <td>河北省</td>
    </tr>
    <tr>
        <td>1</td>
        <td>小明</td>
        <td>18</td>
        <td>男</td>
        <td>河北省</td>
    </tr>
    <tr>
        <td>1</td>
        <td>小明</td>
        <td>18</td>
        <td>男</td>
        <td>河北省</td>
    </tr> -->

    <script>
        // 定义一个存储了若干学生信息的数组
        let students = [
            {
    
     name: '小明', age: 18, gender: '男', hometown: '河北省' },
            {
    
     name: '小红', age: 19, gender: '女', hometown: '河南省' },
            {
    
     name: '小刚', age: 17, gender: '男', hometown: '山西省' },
            {
    
     name: '小丽', age: 18, gender: '女', hometown: '山东省' },
            {
    
     name: '晓强', age: 18, gender: '女', hometown: '山东省' }
        ]

        // 第一步 打印表格的头部和尾部
        document.write(`
         <table>
            <caption>学生列表</caption>
            <tr>
                <th>序号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>家乡</th>
            </tr>
        `)
        // 中间遍历行数  原则就是有几条数据，我就遍历几次

        for (let i = 0; i < students.length; i++) {
    
    
            document.write(`
            <tr>
                <td>${
     
     i + 1}</td>
                <td>${
     
     students[i].name}</td>
                <td>${
     
     students[i].age}</td>
                <td>${
     
     students[i].gender}</td>
                <td>${
     
     students[i].hometown}</td>
            </tr>
            `)
        }



        // 尾部
        document.write(`
         </table>
        `)
    </script>
</body>

</html>

table tr:nth-child(1){
background-color:#ddd;}
table tr:not(:first-child(:hoverPbackground-oclor:#eee}
table tr:not(:first-child):hover
table tr:not(first-child0：hover
for(let i=0;i<students.length;i++){
document.write(' ${i+!}</td>$ {students[i].name} $KaTeX parse error: Expected 'EOF', got '}' at position 16: studnets[i].age}̲$ students[i].gender}$students[i].hometown}

${i+!}<$students[i].gender}