web 前端 h5 学习记录

1、深拷贝 JSON.parse(JSON.stringify(data))

深拷贝可以解决数据改变却不渲染的问题，不过不能拷贝函数

2、原生监听dom 监听滚动

div 加style overflow: auto，则溢出就加个滚动条，监听滚动条h5端用原生dom,dom放在渲染完的生命周期里，则每次滚动都可监听到，centerContent为class

const centerScroll = document.querySelector('.centerContent');
centerScroll.onscroll =()=>{
  console.log('我滚动了')
}  

给个链接参考http://dev.ksazx.com/web_index.html，下面链接的js代码

3、遍历这样子的数组用hasOwnProperty

let carMap = {
      0: {
        quantity: 0,
        selling_price: 0,
        name: 0
      },
      aa:{
        f:2
      }
    };
for(let item in carMap){
      if(carMap.hasOwnProperty(item)){ //判断是否是继承属性（原型链继承）
        console.log(carMap[item])
      }
  }

打印出来长这样

image.png

4、async-awai异步方法

await会等待执行完再执行后面的代码

5、模板字符串基础

https://www.cnblogs.com/newze/p/7535470.html

6、后台传的完整的html展示出来用什么方法

vue 里面有个v-html，
原生 用insertAdjacentHTML

var str = `
这是一个插入的段落
        
这是一个插入的段落
        box.insertAdjacentHTML('afterend',str)

image.png

taro小程序

image.png

image.png

7map双循环用这样子的方法

image.png

下面这样子的写法是错误的，会改变原来的数组，所以不setData的时候也会改变

image.png

7 、一张图片的链接如果被第二张图片给替换了，在有缓存的情况下只会显示第一张图片

8、循环数据的方法

image.png

map循环

image.png

set 数组抓取再去重，数组数据必须是唯一的

image.png

只会返回为true的数据

image.png

image.png

用for in 就要去判断 这个属性是不是非继承的

image.png

image.png

9拼英排序 可数组自带的方法 sort 也 可以用这个 https://github.com/MisterChangRay/Mtils2

image.png

image.png

image.png

10、小说翻页动画用turnjs 但是是jq的

下面这个是自动翻页