面试后反思总结

%程序羊%

于 2021-08-21 15:29:50 发布

阅读量416

点赞数

文章标签：面试算法懒加载

本文链接：https://blog.csdn.net/weixin_45890764/article/details/119835249

版权

一、切割数组，不改变原数组

第一种做法

	let arr = [1,2,3,4,5,6,7,8,9]
        function cut(arr,target){
            let arr1 = []
           for(let i = 0;i<arr.length;i=i+target){
               arr1.push(arr.slice(i,i+target))
           }
           return arr1
        }
        cut(arr,3)

第二种做法

  function cut(arr, target) {
            let arr1 = []
            let arr2 = []
            for (let i = 0; i < arr.length; i++) {
                arr1.push(arr[i])
                if (arr1.length === target) {
                    arr2.push(arr1)
                    arr1 = []
                }
              
            }
           arr2.push(arr1)
           return arr2
        }

第三种做法

 let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9,10,11]
        function cut(arr, target) {
            let arr1 = []
            let arr2 = JSON.parse(JSON.stringify(arr))
            let i = 0
            while(arr2.slice(i,i+target).length === target){
                arr1.push(arr2.splice(i,i+target))
            }
            if(arr2.length){
                 arr1.push(arr2)
                 console.log(arr1)
            }else{
                console.log(arr1)
            } 
        }
        cut(arr, 2)

二、输出数组数组中两数之和为target的对应下标
第一种：

  let arr = [1, 4, 7, 9, 5]
        function subscript(nums, target) {
            let map = new Map();
            for (let i = 0, len = nums.length; i < len; i++) {
                if (map.has(target - nums[i])) {
                    return [map.get(target - nums[i]), i];
                } else {
                    map.set(nums[i], i);
                }
            }
            return [];
        };
        let c = subscript(arr, 10)
        console.log(c)

第二种：

 let arr = [1,2,4,6,8]
        function findSum(arr,target){
            let obj = {}
            for(let i = 0;i<arr.length;i++){
                if(obj[target-arr[i]] !== undefined){
                    return [obj[target-arr[i]],i]
                }else{
                    obj[arr[i]] = i
                }
            }
        }
      let c =  findSum(arr,7)
      console.log(c)

三、什么时候出现滚动条？

内容宽度或者高度大于父层的宽度和高度，正常情况下如果我们给定一个盒子大小，里边内容大于这个大小时，会直接溢出来，不会出现滚动条，所以需要加overflow:auto属性

<style>
    .container{
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .middle{
        width: 200px;
        height: 200px;
        background-color: antiquewhite;
        overflow: auto;
    }
    li {
        list-style-type: none;
    }
</style>
<body>
    <div class="container">
        <div class="middle">
            <li>hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh</li>
            <li>hhh</li>
            <li>hhh</li>
            <li>hhh</li>
            <li>hhh</li>
            <li>hhh</li>
            <li>hhh</li>
            <li>hhh</li>
            <li>hhh</li>
            <li>hhh</li>
            <li>hhh</li>
            <li>hhh</li>
            <li>hhh</li>
        </div>
    </div>
</body>

效果：

四、图片懒加载手写

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>图片懒加载</title>
    <style>
        img {
            display: block;
            width: 100%;
            height: 300px;
            margin-bottom: 20px;
        }
    </style>
</head>

<body>
    <img data-src="./images/1.jpg" alt="">
    <img data-src="./images/2.jpg" alt="">
    <img data-src="./images/3.jpg" alt="">
    <img data-src="./images/4.jpg" alt="">
    <img data-src="./images/5.jpg" alt="">
    <img data-src="./images/6.jpg" alt="">
    <img data-src="./images/7.jpg" alt="">
    <img data-src="./images/1.jpg" alt="">
    <img data-src="./images/2.jpg" alt="">
</body>
<script>
    var imgs = document.querySelectorAll('img');
    function lazyLoad(imgs) {
        var CH = document.documentElement.clientHeight;//获取可视区域高度
        var ST = document.documentElement.scrollTop || document.body.scrollTop;
        for (var i = 0; i < imgs.length; i++) {
            if (CH + ST > imgs[i].offsetTop) {
                imgs[i].src = imgs[i].getAttribute('data-src');
            }
        }
    }
    let canRun = true
    window.onload = lazyLoad(imgs)
    window.onscroll = function () {
        if (!canRun) {
            return;
        } else {
            canRun = false
            setTimeout(() => {
                lazyLoad(imgs)
                console.log(1)
                canRun = true;
            }, 1000);
        }

    }
</script>

</html>

效果：

怎么出现滚动条->图片懒加载
在实现图片懒加载的过程中，又用到了后面问的防抖节流。人家是一条线的。
愿大家面对面试有良好的心态，其次，实力是心态的有效支撑。努力提高自己吧

%程序羊%

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
面试后反思总结

一、切割数组，不改变原数组第一种做法 let arr = [1,2,3,4,5,6,7,8,9] function cut(arr,target){ let arr1 = [] for(let i = 0;i<arr.length;i=i+target){ arr1.push(arr.slice(i,i+target)) } return arr1
复制链接

扫一扫