一、数组扁平化

1、递归实现

    const data = [undefined, { name: 'QF001' }, 1, 2, 3, [4, 5, 6, [7, 8, 9]]]
        // console.log(data)
        // console.log([1, 2, 3, 4, 5, 6, 7, 8, 9])


        /**
         *  当前函数能够帮助我们完成数组的扁平化
        */
        function flat(arr) {
            // 1. 创建一个数组, 存储扁平化后的内容
            const target = []

            // 2. 核心代码: 完成扁平化
            function setArr(origin) {

                origin.forEach(item => {
                    if (Object.prototype.toString.call(item) !== '[object Array]') {
                        target.push(item)
                    } else {
                        // 当前分支只要执行, item 的值 一定是一个数组
                        setArr(item)
                    }
                })

            }
            setArr(arr)

            // 3. 将处理好的数据返回
            return target
        }

        const res = flat(data)
        console.log(res)

2、利用 数组的 toString

• 会将数组的中括号全部去掉, 并把所有元素都转化为字符串拼接在一起
• 弊端: 数组内不能出现引用数据类型

let newArr = arr.toString().split(",");

3、利用数组.flat(拆几层), 该方法会帮助我们实现数组扁平化

let newArr = arr.flat(Infinity);

二、图片懒加载

    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .top {
            height: 2000px;
        }

        img {
            width: 500px;
            height: 500px;
        }
    </style>

     <div class="top"></div>
    <img data-src="https://img1.baidu.com/it/u=481689849,3217240113&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500" alt="">
    <script>
        /**
         *  图片懒加载
         * 
         * 
         *      在 图片 展示出来前, 我们不渲染图片
         *      等到图片到达(快到达) 可视区域窗口的时候, 我们在渲染图片
         *
         *
         *  懒加载的优点: 提升首页加载速度
        */

        const imgEl = document.querySelector('img')


        window.onscroll = function () {
            // console.log('开始判断')
            if (imgEl.src !== '') return

            // 屏幕的高度 + 页面卷去的高度 > 图片的顶部偏移量
            const h = window.innerHeight
            const pageH = document.documentElement.scrollTop
            const top = imgEl.offsetTop


            // - 200 是为了留出一点让网络请求图片的时间, 其实当前案例中 加不加 无所谓
            if (h + pageH > top - 200) {
                console.log('渲染图片')
                imgEl.src = imgEl.dataset.src
            }
        }
    </script>

三、JQuery 和 layUI

• JQuery 是一个 JS 库, 能够帮助我们简化很多代码的操作
• JQ 的使用:
  • 1. 安装: 官网地址: jquery.com/
       CDN 在线引入:
  • 2. 教程:官网地址: api.jquery.com/
       W3C: www.w3school.com.cn/jquery/inde…
• lay_UL:
  • 地址： 最新版: layui.dev/
    稳定版: layui.dev/2.7/