[实战技巧]数组+对象+实际开发处理方式+实战技巧

reduce数组累加获取对象中3级内容

需要获取北京顺义
由于k值是变量 不能用点的方式，可以用[]中括号

reduce链式调用3级对象内部

相当于是obj.info.address.location

找出数组中没有重复的元素

    let arr = [1, 2, 5, 66, 66, 55, 1, 2]
    const c = arr.filter((item, index) => {
        //每次循环浅拷贝数组
        let newArr = [...arr]
        //删掉当前索引的元素
        newArr.splice(index, 1)
        //然后比对 如果删掉我 在我身上 找不到重复的 那就说明我是唯一的
        if (newArr.indexOf(item) === -1) {
            return item
        }
    })
    console.log(c);

数组扁平化

join & split
和上面的toString一样，join也可以将数组转换为字符串

function flatten(arr) {
    return arr.join(',').split(',').map(function(item) {
        return parseInt(item);
    })
}

递归求1 - 100 的 和

    function recursive(num) {
    //递归出口
        if (num == 1) {
            return 1
        }
        //返回
        return num + recursive(num - 1)
    }
    console.log(recursive(100));

slice方法 截取动态截取

1.先定义一个唯一的变量放在data中保存
2.保存一个完整的数组,以便于裁剪
3.开启一个定时器 唯一的变量值递增即可

数组对象去重

//数组对象去重
						let arr = []
						let obj = {}
						for(let i = 0 ; i < res.data.result.length; i++){
							if(!obj[res.data.result[i].symptomName]){
								arr.push(res.data.result[i])
								obj[res.data.result[i].symptomName] = true
							}
						}

2    //  方法2：利用reduce方法遍历数组,reduce第一个参数是遍历需要执行的函数，第二个参数是item的初始值
    var obj = {};
  arr = arr.reduce(function(item, next) {
     obj[next.key] ? '' : obj[next.key] = true && item.push(next);
       return item;
   }, []);

防抖

function showTop(e) {
        console.log(e[0]);
        var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
        console.log('滚动条位置：' + scrollTop + 'px');

    }
    document.addEventListener('scroll', debounce(showTop, 100))
    function debounce(fn, delay) {
        let timer = null //借助闭包
        let context = arguments
        return function () {
            let that = this
            if (!timer) {
                timer = true
                setTimeout(() => {
                    fn.call(that, arguments)
                    timer = false
                }, delay)
            }
        }
    }

图片资源懒加载1

1.该种方式性能消耗很高不推荐
2.在此之前你需要了解一些api

核心思路:给视口区域绑定滚动事件 遍历所有的图片，判断该图片是否进入视口区域，算法是：

图片资源懒加载2

推荐这种

/*
// 配置项目
 option = {
    root: "scroll-view || id容器",
    threshold: 1,
    rootMargin: "0px",
 },
 @params Object
*/
/*
// 图片组ID
 @params String
*/

/*
// 动画效果
 @params String
*/
//

export default class utilsTools {
    constructor(options, ImageList, animate) {

        this.animate = animate ? animate : ''

        // 给option配置根元素
        if (options['root']) {
            let el = document.getElementById(options['root'])
            options['root'] = el
            this.options = options
        } else {
            console.log('参数错误');
        }
        // 获取全部的图片列表
        this.ImageList = document.querySelectorAll(`#${ImageList}`)

        // 遍历图片列表 把每一项的传入
        this.ImageList.forEach(item => {
            this.LazeLoad(item)
        })
    }

    LazeLoad(item) {
        console.log(item);
        const io = new IntersectionObserver((entries, observer) => {
            console.log(entries);
            entries.forEach(entry => {
                // 判断时候是进入视口中
                if (entry.isIntersecting) {
                    const img = entry.target
                    const src = img.getAttribute('data-src')
                    img.setAttribute('src', src)
                    img.classList.add(this.animate)
                    observer.disconnect()
                }
            })
        }, this.options)
        io.observe(item)
    }
}

<template>
  <div>
    <h1>懒加载图片</h1>
    <img :src="imgP" alt="" />
    <div class="scroll-view" id="scroll-view">
      <!-- 没用的文字代码 只是为了占位高度 -->
      <div>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt
          reprehenderit rem quia, ut deserunt tempora? Optio accusantium
          doloremque veritatis, nemo maiores velit quis! Modi illum doloremque
          voluptatum cumque animi amet laudantium vero, eaque, porro inventore
          quisquam! Magni inventore quo rem voluptatibus dicta possimus
          voluptatum ut error quam nam corporis, a nemo cumque dolore eveniet
          consequatur nobis maiores ipsam aspernatur! Ducimus, eveniet officia?
          Provident est at veniam sit, omnis aliquam deleniti voluptatem
          mollitia perspiciatis quo officiis maxime voluptate repudiandae quae
          asperiores corrupti! Nihil labore esse ipsa iure dolorem quo sed.
          Molestias accusamus libero, exercitationem aut rem ipsum officiis iure
          possimus. Eum?
        </p>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt
          reprehenderit rem quia, ut deserunt tempora? Optio accusantium
          doloremque veritatis, nemo maiores velit quis! Modi illum doloremque
          voluptatum cumque animi amet laudantium vero, eaque, porro inventore
          quisquam! Magni inventore quo rem voluptatibus dicta possimus
          voluptatum ut error quam nam corporis, a nemo cumque dolore eveniet
          consequatur nobis maiores ipsam aspernatur! Ducimus, eveniet officia?
          Provident est at veniam sit, omnis aliquam deleniti voluptatem
          mollitia perspiciatis quo officiis maxime voluptate repudiandae quae
          asperiores corrupti! Nihil labore esse ipsa iure dolorem quo sed.
          Molestias accusamus libero, exercitationem aut rem ipsum officiis iure
          possimus. Eum?
        </p>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt
          reprehenderit rem quia, ut deserunt tempora? Optio accusantium
          doloremque veritatis, nemo maiores velit quis! Modi illum doloremque
          voluptatum cumque animi amet laudantium vero, eaque, porro inventore
          quisquam! Magni inventore quo rem voluptatibus dicta possimus
          voluptatum ut error quam nam corporis, a nemo cumque dolore eveniet
          consequatur nobis maiores ipsam aspernatur! Ducimus, eveniet officia?
          Provident est at veniam sit, omnis aliquam deleniti voluptatem
          mollitia perspiciatis quo officiis maxime voluptate repudiandae quae
          asperiores corrupti! Nihil labore esse ipsa iure dolorem quo sed.
          Molestias accusamus libero, exercitationem aut rem ipsum officiis iure
          possimus. Eum?
        </p>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt
          reprehenderit rem quia, ut deserunt tempora? Optio accusantium
          doloremque veritatis, nemo maiores velit quis! Modi illum doloremque
          voluptatum cumque animi amet laudantium vero, eaque, porro inventore
          quisquam! Magni inventore quo rem voluptatibus dicta possimus
          voluptatum ut error quam nam corporis, a nemo cumque dolore eveniet
          consequatur nobis maiores ipsam aspernatur! Ducimus, eveniet officia?
          Provident est at veniam sit, omnis aliquam deleniti voluptatem
          mollitia perspiciatis quo officiis maxime voluptate repudiandae quae
          asperiores corrupti! Nihil labore esse ipsa iure dolorem quo sed.
          Molestias accusamus libero, exercitationem aut rem ipsum officiis iure
          possimus. Eum?
        </p>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt
          reprehenderit rem quia, ut deserunt tempora? Optio accusantium
          doloremque veritatis, nemo maiores velit quis! Modi illum doloremque
          voluptatum cumque animi amet laudantium vero, eaque, porro inventore
          quisquam! Magni inventore quo rem voluptatibus dicta possimus
          voluptatum ut error quam nam corporis, a nemo cumque dolore eveniet
          consequatur nobis maiores ipsam aspernatur! Ducimus, eveniet officia?
          Provident est at veniam sit, omnis aliquam deleniti voluptatem
          mollitia perspiciatis quo officiis maxime voluptate repudiandae quae
          asperiores corrupti! Nihil labore esse ipsa iure dolorem quo sed.
          Molestias accusamus libero, exercitationem aut rem ipsum officiis iure
          possimus. Eum?
        </p>
      </div>
      <!-- 核心代码 -->
      <ul>
        <img
          v-for="(img, idx) in arrList"
          :key="idx"
          :data-src="img.src"
          id="img"
          class="img-ani"
        />
      </ul>
    </div>
  </div>
</template>

<script>
// 作用域插槽的使用
import utilsTools from "../utils/LazyLoadImage";
export default {
  data() {
    return {
      arrList: [],
      imgP: require("../assets/logo.png"),
      option: {
        root: "scroll-view",
        threshold: 1,
        rootMargin: "0px",
      },
    };
  },
  created() {
    let op = {
      src: this.imgP,
      name: "",
    };
    for (let i = 0; i < 50; i++) {
      this.arrList.push(op);
    }
  },
  mounted() {
    this.$nextTick(() => {
      const lazy = new utilsTools(this.option, "img", "fade");
    });
  },
  computed: {},
};
</script>

<style>
h1 {
  height: 200px;
  background: red;
}
.scroll-view {
  overflow-y: auto;
  overflow-x: hidden;
  height: calc(100vh - 200px);
}
li {
  list-style: none;
}
ul {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
img {
  height: 150px;
  width: 150px;
  margin-bottom: 20px;
  border: 1px red dashed;
}
.img-ani {
  transition: all 2s;
  opacity: 0;
  transform: translateY(-20%);
}
.fade {
  transition: all 2s;
  opacity: 1;
  transform: translateY(0);
}
</style>  

自动编码递增函数

    setInterval(num) {
      let len = num.length
      let endNumber
      const subStr = (splice) => {
        endNumber = num.substring(len - splice)
        if ((parseInt(endNumber) + 1).toString().length > endNumber.toString().length && parseInt(endNumber).toString() !== 'NaN') {
          subStr(splice + 1)
        } else if ((parseInt(endNumber) + 1).toString() !== 'NaN') {
          return (parseInt(endNumber) + 1).toString()
        }
        return endNumber
      }
      let sub = subStr(1)
      num = num.substring(0, len - sub.length) + sub
      return num
      // return num
    },