深浅拷贝、常见函数四种类型、渲染、渲染表格、for循环、foreach循环、内置对象、随机数函数

深拷贝和浅拷贝

深浅拷贝、常见函数四种类型、渲染、渲染表格、for循环、foreach循环、内置对象、随机数函数_第1张图片
深浅拷贝、常见函数四种类型、渲染、渲染表格、for循环、foreach循环、内置对象、随机数函数_第2张图片
深浅拷贝、常见函数四种类型、渲染、渲染表格、for循环、foreach循环、内置对象、随机数函数_第3张图片

常见函数的四种类型有哪些

深浅拷贝、常见函数四种类型、渲染、渲染表格、for循环、foreach循环、内置对象、随机数函数_第4张图片

匿名函数

深浅拷贝、常见函数四种类型、渲染、渲染表格、for循环、foreach循环、内置对象、随机数函数_第5张图片

回调函数:

深浅拷贝、常见函数四种类型、渲染、渲染表格、for循环、foreach循环、内置对象、随机数函数_第6张图片

递归函数

深浅拷贝、常见函数四种类型、渲染、渲染表格、for循环、foreach循环、内置对象、随机数函数_第7张图片

构造函数

深浅拷贝、常见函数四种类型、渲染、渲染表格、for循环、foreach循环、内置对象、随机数函数_第8张图片

渲染表格

深浅拷贝、常见函数四种类型、渲染、渲染表格、for循环、foreach循环、内置对象、随机数函数_第9张图片
深浅拷贝、常见函数四种类型、渲染、渲染表格、for循环、foreach循环、内置对象、随机数函数_第10张图片

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
head>
<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>

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

    <table>
        <caption>学生列表caption>
        <tr>
            <th>序号th>
            <th>姓名th>
            <th>年龄th>
            <th>性别th>
            <th>家乡th>
        tr>
        <script>
            //数据准备
            let students = [
                {
                    name: '小明', age: 18, gender: '男', hometown: '北京', arr: {
                        a: {
                            b: {
                                c: [{ name: '小红', age: 19, gender: '女', hometown: '山东' },
                                { name: '小刚', age: 20, gender: '男', hometown: '天津' },]
                            }
                        }
                    }
                },
                { name: '小红', age: 19, gender: '女', hometown: '山东' },
                { name: '小刚', age: 20, gender: '男', hometown: '天津' },
                { name: '小丽', age: 20, gender: '女', hometown: '四川' },
                { name: '小宝', age: 29, gender: '女', hometown: '浙江' }
            ]
            //渲染页面
            // for (let i = 0; i < students[0].arr.a.b.c.length; i++) {
            //     document.write(`
            //         
            //      ${i + 1}
            //      ${students[0].arr.a.b.c[i].name}
            //      ${students[0].arr.a.b.c[i].age}
            //      ${students[0].arr.a.b.c[i].gender}
            //      ${students[0].arr.a.b.c[i].hometown}
            // 
            //     `)
            // }

            students[0].arr.a.b.c.forEach((e, index, arr) => {
                document.write(`
                
                 ${index + 1}
                 ${e.name}
                 ${e.age}
                 ${e.gender}
                 ${e.hometown}
            
                `)
            })
        script>

    table>
body>

html>

for循环和foreach循环

深浅拷贝、常见函数四种类型、渲染、渲染表格、for循环、foreach循环、内置对象、随机数函数_第11张图片
深浅拷贝、常见函数四种类型、渲染、渲染表格、for循环、foreach循环、内置对象、随机数函数_第12张图片
深浅拷贝、常见函数四种类型、渲染、渲染表格、for循环、foreach循环、内置对象、随机数函数_第13张图片
深浅拷贝、常见函数四种类型、渲染、渲染表格、for循环、foreach循环、内置对象、随机数函数_第14张图片
深浅拷贝、常见函数四种类型、渲染、渲染表格、for循环、foreach循环、内置对象、随机数函数_第15张图片

> foreach(元素本身 下标、数组本身)

内置对象Math

官网:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Math/PI#%E6%B5%8F%E8%A7%88%E5%99%A8%E5%85%BC%E5%AE%B9%E6%80%A7
深浅拷贝、常见函数四种类型、渲染、渲染表格、for循环、foreach循环、内置对象、随机数函数_第16张图片
深浅拷贝、常见函数四种类型、渲染、渲染表格、for循环、foreach循环、内置对象、随机数函数_第17张图片
深浅拷贝、常见函数四种类型、渲染、渲染表格、for循环、foreach循环、内置对象、随机数函数_第18张图片

随机数函数

如何生成0-10的随机数呢

Math.floor(Math.random( ) * (10 + 1))

在这里插入图片描述

let arr =  ['red','pink','blue']
let random = Math.floor(Math.random() * arr.length)
console.log(arr[random]);

如何生成5-10的随机数

Math.floor(Math.random ( ) * ( 5 + 1))+5

如何生成N-M之间的随机数

Math.floor(Math.random ( ) * (M - N + 1)) + N

你可能感兴趣的:(前端)