快忘了的零散知识点

会飞的胖海

已于 2022-07-28 14:28:01 修改

阅读量806

点赞数

文章标签：排序算法 leetcode 算法

于 2022-04-29 14:48:58 首次发布

本文链接：https://blog.csdn.net/weixin_44074543/article/details/124492815

版权

以防万一记录一下，页面整体变灰效果代码

html{
    -webkit-filter:grayscale(100%);
    -moz-filter:grayscale(100%);
    -ms-filter:grayscale(100%);
    -o-filter:grayscale(100%);
    filter:grayscale(100%);
    filter:url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
    filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)
}

数组找出重复数字和次数，目前能想到的最优解

let data= [1,1,1,2,1,2,2,2,3,4,5,6,6,6]
let arr = data.sort()
let obj = {}
for(var i = 0; i < arr.length; i++) {
    let key = arr[i]
    // if else 判断
    // if(obj[key] == undefined) {
    //     obj[key] = 1
    // } else {
    //     obj[key]++
    // }
    // 三元运算符判断
    obj[key] == undefined ? obj[key] = 1 : obj[key]++
}
console.log(obj);//出现得最多排第一个，{1: 4, 2: 4, 3: 1, 4: 1, 5: 1, 6: 3}

数组排序

[[1,2,3],[3],[3,3,2,2,1]].sort((a,b)=>{
    //return a.length - b.length;//升序，长度最短的在第一个
    return b.length - a.length;//降序，长度最长的在第一个
})

// 语法：array.sort(fun)；参数fun可选。规定排序顺序。必须是函数。
// 注：如果调用该方法时没有使用参数，将按字母顺序对数组中的元素进行排序，说得更精确点，是按照字符编码的顺序进行排序。

// 如果想按照其他规则进行排序，就需要提供比较函数，该函数要比较两个值，然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数 a 和 b，其返回值如下：
// 若 a 小于 b，在排序后的数组中 a 应该出现在 b 之前，则返回一个小于 0 的值。
// 若 a 等于b，则返回 0。
// 若 a 大于 b，则返回一个大于 0 的值。
// 简单点就是：比较函数两个参数a和b，返回a-b 升序，返回b-a 降序

js打乱数组顺序

arr.sort((a, b)=>{ return Math.random() > 0.5 ? -1 : 1; });

自定义的数组/对象方法（放在原型链上的）

对象/数组.方法实现方式=>对象/数组.prototype.方法名=function(){

/*在这里面，this指向调用这个方法的对象/数组，说得直白点，this就是调用这个方法的对象/数组*/

}

大数据页面采用setInterval，websocket以及requestAnimationFrame更新数据的差异

通过setInterval每隔一段时间调用一次请求更新数据，清除用clearInterval，弊端：可能出现内存泄露，导致浏览器崩溃的问题

建立websocket长连接进行通信,让后端负责更新数据，弊端：数据量较大时socket链接会自动断开

websocket在vue中的使用

<template>
  <div></div>
</template>

<script>
export default {
  data() {
    return {
      audio: null,
      socket: null,
      timeout: 30 * 1000,
      heartBeatTimer: null,
      reconnectTimer: null
    }
  },
  methods: {
    initWebSocket() {
      this.createWebSocket();
      this.reconnectTimer = window.setInterval(() => {
        if (this.socket.readyState === 3) {
          this.stopHeartBeat();
          this.createWebSocket();
        }
      }, 60000)
    },
    stopHeartBeat() {
      this.heartBeatTimer = setInterval(() => {
        this.socket.send('hello server!');
      }, this.timeout);
    },
    startHeartBeat() {
      clearInterval(this.heartBeatTimer);
      this.heartBeatTimer = null;
    },
    createWebSocket() {
      const host = window.location.host;
      this.socket = new WebSocket(`wss://${host}/websocket`);
      this.socket.onopen = this.onopen;
      this.socket.onmessage = this.onmessage;
      this.socket.onclose = this.onclose;
      this.socket.onerror = this.onerror;
    },
    //用于指定连接成功后的回调函数。
    onopen(event) {
      this.startHeartBeat();
    },
    //用于指定当从服务器接受到信息时的回调函数。
    onmessage(event) {
      let self = this;
      let message = JSON.parse(event.data);
      if (message.type == 'sessionId') {
        //save sessionId
      } else {
        self.audio.play();
        //做业务处理
      }
    },
    //用于指定连接关闭后的回调函数。
    onclose(event) {
      console.log('成功关闭链接', event);
    },
    //用于指定连接失败后的回调函数。
    onerror(event) {
      console.log('链接出错', event);
    }
  },
  created() {
    this.audio = new Audio(require('./assets/audio/audio.mp3'));
  },
  mounted() {
    this.initWebSocket();
  },
  beforeDestroy() {
    this.socket.close();
    clearInterval(this.heartBeatTimer);
    clearInterval(this.reconnectTimer);
    this.heartBeatTimer = null;
    this.reconnectTimer = null;
  }
}
</script>

requestAnimationFrame 比起 setTimeout、setInterval的优势主要有两点：

1、requestAnimationFrame 会把每一帧中的所有DOM操作集中起来，在一次重绘或回流中就完成，并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率，一般来说，这个频率为每秒60帧。

2、在隐藏或不可见的元素中，requestAnimationFrame将不会进行重绘或回流，这当然就意味着更少的的cpu，gpu和内存使用量(直白点就是离开使用了requestAnimationFrame的页面，requestAnimationFrame就会暂停，和小程序中的onShow，onHide一样)。

清除requestAnimationFrame用cancelAnimationFrame

下面时具体的使用案例代码

    //当前执行时间
    var nowTime = 0;
    //记录每次动画执行结束的时间
    var lastTime = Date.now();
    //我们自己定义的动画时间差值
    var diffTime = 1000;//1秒
    //我们自己定义的动画结束时间
    var endTime = 5000;//5秒
    //记录动画执行结束的时间
    var lastEndTime = Date.now();
    //记录动画执行时间
    var newAnimation=null

    function render() {
        const date = new Date();
        let time = date.toLocaleString('zh'); 
        console.log('执行的内容,打印当前时间：',time )
    }

    //requestAnimationFrame效果
    (function animloop() {
        //记录当前时间
        nowTime = Date.now()
        // 当前时间-上次执行时间如果大于diffTime，那么执行动画，并更新上次执行时间
        if(nowTime-lastTime > diffTime){
            lastTime = nowTime
            render();
        }
        if(nowTime-lastEndTime > endTime){
            lastEndTime = nowTime
            console.log('执行的内容,结束了')
            return
        }
        newAnimation=requestAnimationFrame(animloop);

    })()

    //执行过程中结束动画
    //cancelAnimationFrame(newAnimation);

cookies、session、sessionStorage和localStorage

cookies：存储于浏览器端的数据。可以设置 cookies 的Max-Age或者Expires到期时间，如果不设置时间，则在浏览器关闭窗口的时候会消失。

session：存储于服务器端的数据。session 存储特定用户会话所需的属性和配置信息。

cookies 和 session 的区别在于：

http协议是无状态协议，缺少记忆能力，如果处理请求需要之前的信息，就必须重传，因此cookie用来传递处理请求需要的信息，用来储存信息。
cookies 数据存放在客户的浏览器上，session 数据存放在服务器上。
cookies 可能会被黑客利用作数据欺骗。重要信息储存在session。
session 如果在生效期内量过大，会占用服务器性能。
单个 cookies 保存的数据不能超过 4 K，很多浏览器限制一个站点保存最多 20 个 cookies。

sessionStorage：生命周期存在于标签页或窗口，用于本地存储一个会话（session）中的数据，这些数据会随着窗口或者标签页的关闭而被清空。

localStorage：生命周期是永久的，除非用户主动清除浏览器上存储的 localStorage 信息，否则它将会永久存在。

sessionStorage 和 localStorage 操作方法：setItem、getItem 、removeItem和clear

共同点

localStorage和sessionStorage和cookie共同点

同域（同源策略）限制：同源策略：请求与响应的协议、域名、端口都相同时同源，否则为跨源/跨域；
存储的内容都会转为字符串格式
都有存储大小限制
localStorage和sessionStorage共同点

API相同
存储大小限制一样基本类似
无个数限制

区别

localStorage和sessionStorage的存储数据是5MB，而cookies是4k

localStorage

没有有效期，除非删除，否则一直存在
同域下页面共享，同一个域名的所有标签页都可以访问
支持 storage 事件

sessionStorage

浏览器关闭，自动销毁
页面（单独一个标签页下，同一个域名）私有，即使在别的标签页打开同一个地址也不存在
不支持 storage 事件

浏览器也会在每次请求的时候主动组织所有域下的cookie到请求头 cookie 中，发送给服务器端
浏览器会主动存储接收到的 set-cookie 头信息的值
可以设置 http-only 属性为 true 来禁止客户端代码（js）修改该值
可以设置有效期 (如果不设置，默认浏览器关闭自动销毁)(不同浏览器有所不同)
同域下个数有限制，最好不要超过50个(不同浏览器有所不同)
单个cookie内容大小有限制（比会话、本地存储小），最好不要超过4000字节(不同浏览器有所不同)

cookie不受端口的限制，localStorage和sessionStorage必须全部一致

http://xxx.xx.x.xxx:8080 http://xxx.xx.x.xxx:9201

如果上面两个地址使用了cookie，那么cookies会被覆盖