微语 微语:代码适合中午敲,早晚出BUG

日期格式转换 yyyy-MM-dd JavaScript

let d1 = new Date(this.lists.joindate);
this.lists.joindate = d1.getFullYear() + "-" + (d1.getMonth() + 1) + "-" + d1.getDate();


对$nexttick的理解 JavaScript

$nexttick 的详细说明:

$nexttick 是一个异步编程的概念,常见于一些 JavaScript 框架和库中,比如 Vue.js 和 React.js。它允许你推迟一个函数的执行,以便在当前的 JavaScript 代码块执行完成之后再执行该函数。这对于处理一些需要在 UI 更新后执行的操作非常有用。

在 JavaScript 中,所有代码都运行在一个单线程的事件循环中。事件循环负责不断从消息队列中取出任务并执行它们。通常情况下,JavaScript 会按照代码的顺序一次执行任务,中途不会插入其他任务。这就意味着,如果有一个耗时较长的任务,它会阻塞其他任务的执行。

这时,$nexttick 就派上了用场。它的主要作用是将一个回调函数推迟到下一个事件循环中执行,而不是立即执行。这样,当前代码块的执行可以顺利完成,不会被耗时较长的任务阻塞。

在 Vue.js 和 React.js 中,$nexttick 通常用于处理 DOM 的更新。当你修改了 Vue.js 或 React.js 组件中的数据或状态时,框架会进行异步的 DOM 更新。而有时你可能需要在 DOM 更新完成后执行一些操作,比如获取元素的尺寸、操作真实的 DOM 元素等。这时你可以把这些操作放在 $nexttick 的回调函数中,确保在 DOM 更新完成后再执行它们。

值得注意的是,$nexttick 并不是 JavaScript 的原生 API,它是一些框架和库提供的特定方法。因此,具体的使用方式和语法可能会有所差异。在 Vue.js 中,你可以使用 Vue.nextTick(callback) 来注册一个 $nexttick 回调函数。在 React.js 中,你可以使用 ReactDOM.nextTick(callback) 来实现类似的功能。

$nexttick 的简单理解:

$nexttick 允许你推迟一个函数的执行,以确保在当前的 JavaScript 代码块执行完成之后再执行该函数。它常见于一些 JavaScript 框架和库中,用于处理异步操作和 DOM 的更新。

简单来说,$nexttick 就是让某个函数在 JavaScript 的事件循环中的下一个周期执行,而不是立即执行。这样可以避免长时间运行的函数阻塞主线程,保证其他任务的执行。在一些前端框架中,它常用于确保在 DOM 更新完成后再执行一些额外的操作。例如,在改变 Vue.js 或 React.js 组件的数据或状态后,你可以使用 $nexttick 来确保在 DOM 更新完毕后再进行一些操作,比如获取元素的尺寸或操作真实的 DOM 元素。


本地存储和会话存储的用法和区别 JavaScript

一.localStorage:本地存储

提供的是一种永久性的存储方法,在关闭掉网页重新打开时,存储的内容依然保留

将data保存到localStorage(本地存储)


方法一:

localStorage.setItem("data", data)

方法二:

localStorage.data=data

从localStorage中获取data数据

方法一:

localStorage.getItem("data")

方法二:

localStorage.data

二.sessionStorage:会话存储

提供的是本次会话的存储,在关闭掉会话时,存储的内容会被清除

将data保存到sessionStorage(会话存储)


方法一:

sessionStorage.setItem("data", data)

方法二:

sessionStorage.data = data

从localStorage中获取data数据

方法一:

sessionStorage.getItem("data")

方法二:

sessionStorage.data

三:一些常用的方法

1.清空存储中的所有key

localStorage.clear()

2.清空key中的参数

localStorage.removeItem("data")

SE5寄生组合式继承 JavaScript

   // ES5继承三步骤:
        // 1).在子类构造函数中调用父类构造函数,让子类实例化出来的对象拥有父类的属性
        // 2).让子类的原型成为父类的实例,让子类实例化出来的对象拥有父类的方法
        // 3).找回丢失的构造函数
        // 定义父类
        function User(username, password) {
            this.username = username;
            this.password = password;
        }
        User.prototype.login = function () {
            console.log(this.username + "登录成功!");
        }
        // 定义子类
        function Student(uid, ...arr) {
            this.uid = uid;
            // 1)
            User.apply(this, arr);
        }
        Student.prototype = Object.create(User.prototype)
        Student.prototype.constructor = Student
        let p1 = new Student("001", "小明", "151568")
        console.log(p1);
        p1.login()

        //寄生组合式继承原理
        function create(obj) {
            function F() {

            };
            F.prototype = obj;
            return new F();
        }

ES6继承 JavaScript

      // SE6的继承
        class User {
            constructor(username, password) {
                this.username = username;
                this.password = password;
            }
            login() {
                console.log(this.username + "登录成功!");
            }

        }
        class Student extends User {

        }
        //实例化
        let p1 = new Student("张三", 16456486)
        console.log(p1);
        p1.login()

类型检测-toString JavaScript

        //   toString可以检测所有类型
        // 前言:由于大部分的类型都有 toString()方法,无法通过原型链找到Object的toString() 方法,所以需要强制使用Object.prototype.toString.call(对象)

        //基本类型检测
        console.log(Object.prototype.toString.call(100)); //返回值:[object Number]
        console.log(Object.prototype.toString.call('张三'));//返回值:[object String]
        console.log(Object.prototype.toString.call('张三'));//返回值:[object String]
        console.log(Object.prototype.toString.call(true));//返回值:[object Boolean]
        console.log(Object.prototype.toString.call(undefined));//返回值:[object Undefined]
        console.log(Object.prototype.toString.call(null));//返回值:[object Null]

        //引用类型检测
        function show() {

        }
        console.log(Object.prototype.toString.call([1, 2, 3, 4, 5]));//返回值:[object Array]
        console.log(Object.prototype.toString.call({ name: "tom" }));//返回值:[object Object]
        console.log(Object.prototype.toString.call(show));//返回值:[object Function]
        // 注:call 指的是修改this指向

检测类型-isArray JavaScript

        // isArray判断是否为数组
        let arr = [1, 2, 3, 4, 5]
        let arr1 = {
            name: "张三"
        }
        console.log(Array.isArray(arr)); //判断arr是否为数组,返回值:true
        console.log(Array.isArray(arr1));//判断arr1是否为数组,返回值false

类型检测-instanceof JavaScript

  let arr = [1, 2, 3, 4]
        // 判断arr是否属于某个类
        console.log(arr instanceof Array);//判断是否属于数组类  返回值:true
        console.log(arr instanceof Object);//判断是否属于引用类 返回值: true

        let obj = {}
        console.log(obj instanceof Array);//判断是否为数组类 返回值:false
        console.log(obj instanceof Object);//判断是否为引用类 返回值:true

        //检测构造函数
        function Person(color, like) {
            this.color = color;
            this.link = like;
        }
        let p1 = new Person("#ff0000", "旅游")
        console.log(p1 instanceof Person); //判断p1是否属于Person类 返回值:true
        console.log(p1 instanceof Function); //判断p1是否属于Function类 返回值:false