![](https://img-blog.csdnimg.cn/20201014180756916.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
ES6/ES5
文章平均质量分 51
javascript
吃瓜群众欢乐多
菜鸟烦恼多
展开
-
setInterval倒计时以及解决倒计时误差
setInterval指定的是“开始执行”之间的间隔,并不考虑每次任务执行本身所消耗的时间。比如,setInterval指定每 100ms 执行一次,每次执行需要 5ms,那么第一次执行结束后95毫秒,第二次执行就会开始。可以从图中明显的看出打印的结果,大多数时间每次相差结果不等于1000,因此使用setInterval长期下去,误差会很大。为了确保两次执行之间有固定的间隔,可以不用setInterval,而是每次执行结束后,使用setTimeout指定下一次执行的具体时间。原创 2022-12-27 23:52:29 · 1397 阅读 · 1 评论 -
比较两个数组,将新数组中和旧数组不同的,过滤出来
比较旧请求list和新的请求list对比,将新的数据过滤出来到resultListimport _ from "lodash";const oldList = [{commentId:1},{commentId:2},{commentId:3},{commentId:4},{commentId:5},{commentId:6},{commentId:7},{commentId:8}];const newList = [{commentId:5},{commentId:6},{commentId:7}原创 2021-07-15 16:11:56 · 620 阅读 · 0 评论 -
代码整洁之道-多个if else代码的优化
1、利用对象let a=0,b=1;let result = '';if(a===1){ if(b===1){ result='a' } if(b===0){ result='b' }}if(a===0){ if(b===1){ result='c' } if(b===0){ result='d' }}优化为let obj = { 1: { 0: 'a', 1: 'b', }, '-1': {原创 2021-01-28 09:19:05 · 354 阅读 · 0 评论 -
执行上下文栈
函数多了,就有多个函数执行上下文,每次调用函数创建一个新的执行上下文,那如何管理创建的那么多执行上下文呢?JavaScript 引擎创建了执行上下文栈来管理执行上下文。可以把执行上下文栈认为是一个存储函数调用的栈结构,遵循先进后出的原则。从上面的流程图,我们需要记住几个关键点:JavaScript 执行在单线程上,所有的代码都是排队执行。一开始浏览器执行全局的代码时,首先创建全局的执行上下文,压入执行栈的顶部。每当进入一个函数的执行就会创建函数的执行上下文,并且把它压入执行栈的顶部。当前函数执行转载 2021-01-18 12:26:33 · 75 阅读 · 0 评论 -
js创建对象的三种模式(工厂模式、构造函数模式、原型模式)
1、工厂模式new Object()function createPerson(name, age, job) { let o = new Object(); o.name = name; o.age = age; o.job = job; o.sayName = function () { console.log(this.name); }; return o;}let person1 = createPerson("Nic原创 2021-01-16 20:25:35 · 333 阅读 · 0 评论 -
内存管理
在使用垃圾回收的编程环境中,开发者通常无须关心内存管理。不过,JavaScript运行在一个内存管理与垃圾回收都很特殊的环境。分配给浏览器的内存通常比分配给桌面软件的要少很多,分配给移动浏览器的就更少了。这更多出于安全考虑而不是别的,就是为了避免运行大量JavaScript的网页耗尽系统内存而导致操作系统崩溃。这个内存限制不仅影响变量分配,也影响调用栈以及能够同时在一个线程中执行的语句数量。将内存占用量保持在一个较小的值可以让页面性能更好。优化内存占用的最佳手段就是保证在执行代码时只保存必要的数据。如.原创 2021-01-15 22:26:00 · 136 阅读 · 0 评论 -
js的执行环境与作用域
4、执行环境与作用域变量或函数的上下文决定了它们可以访问哪些数据,以及它们的行为。每个上下文都有一个关联的变量对象(variable object),而这个上下文中定义的所有变量和函数都存在于这个对象上。全局上下文是最外层的上下文。在浏览器中,全局上下文就是我们常说的 window 对象,因此所有通过var 定义的全局变量和函数都会成为 window 对象的属性和方法。使用 let 和 const 的顶级声明不会定义在全局上下文中,但在作用域链解析上效果是一样的。上下文在其所有代码都执行完毕后会被销毁原创 2021-01-15 21:48:26 · 91 阅读 · 0 评论 -
基本类型和引用类型作用域和内存
基本类型undefined,null,String,Number,Boolean和Symbol保存原始值的变量是按值(byvalue)访问的,因为我们操作的就是存储在变量中的实际值基本类型不能添加属性引用类型保存在内存中JavaScript不允许直接访问内存中的位置,也就是说不能直接操作对象的内存空间。在操作对象时,实际上是在操作对象的引用而不是实际的对象,因此,引用类型的值是按引用访问的。引用类型能添加属性1、复制变量值基本类型var str = 'lisa';v原创 2021-01-15 21:33:46 · 98 阅读 · 0 评论 -
手写一个Promise-核心源码(分步骤讲解运行过程)
Promise的用法new Promise((resolve, reject) => { resolve(1); console.log(2);}).then(r => { console.log(r);},error=>{ console.log(error)});Promise()中传入两个resolve和reject两个函数,.then()中传入两个函数(成功执行,失败执行)。1、new PromiseFunc 时初始化PromiseFunc 的 .原创 2021-01-13 17:00:02 · 190 阅读 · 0 评论 -
深拷贝-序列化与反序列化的弊端
知识点:1.取不到值为undefined的键2.NaN和无穷转变为null3.原型内容4.date对象转为date字符串下面举个例子:let obj = { a:undefined, b:null, c:true, d:'', e:123, f:{}, g:[], h:NaN, i:Infinity, j:new Date(), k:function () { console.log("k.原创 2021-01-12 15:49:33 · 533 阅读 · 0 评论 -
import和require的区分
require会加载fs的所有方法,运行时加载// CommonJS模块let { stat, exists, readfile } = require('fs');// 等同于let _fs = require('fs');let stat = _fs.stat;let exists = _fs.exists;let readfile = _fs.readfile;上面代码的实质是整体加载fs模块(即加载fs的所有方法),生成一个对象(_fs),然后再从这个对象上面读取 3 个方法。原创 2021-01-12 10:59:51 · 116 阅读 · 0 评论 -
constructor、class、super之间的关系
我们在弄清楚关系之前,我们首先要清楚各自的概念.1、classclass是一种语法糖 类和模块的内部,默认就是严格模式 不存在变量提升 由于本质上,ES6 的类只是 ES5的构造函数的一层包装,所以函数的许多特性都被Class继承,包括name属性。2、constructorconstructor 是一种用于创建和初始化class创建的对象的特殊方法,class Polygon { constructor() { this.name = 'Polygon'; }}原创 2021-01-12 10:04:50 · 1701 阅读 · 1 评论 -
class类和普通构造函数(Constructor)继承的实现
classclass Parent { constructor(name, age) { this.name = name; this.age = age; this.run = this.run } run() { return `${ this.name } is running, age is ${this.age}`; } sleep() { return `${ this.name } is sleeping, age is $.原创 2021-01-11 15:44:50 · 617 阅读 · 0 评论 -
Symbol实用场景
可以避免实例自定义的属性或方法覆盖原型上的属性或方法转载 2021-01-11 11:47:50 · 188 阅读 · 0 评论 -
JavaScript:原型链
一切皆对象对象是由函数创建的原生构造函数:Array,String,Boolean,Number,RegExp,Functionlet test = new Function("name","age","console.log(name,age)");test('zzz',19);//zzz,19一个函数能充当两个作用,函数也是对象(能调用),也能new,同时函数含有构造函数的功能(类函数)function User(){} let user = new User();User.p.原创 2021-01-07 10:00:37 · 83 阅读 · 0 评论 -
箭头函数与普通函数的区别
JavaScript 箭头函数箭头函数表达式的语法比函数表达式更简洁,并且没有自己的this,arguments,super或new.target。箭头函数表达式更适用于那些本来需要匿名函数的地方,并且它不能用作构造函数。函数function,函数,是一个可以被其他代码或其自身调用的代码片段,或者是一个指向该函数的变量 。 当函数被调用时,参数被作为输入传递给函数,并且函数可以返回输出。在 JavaScript 中,函数也是一个对象。函数名是作为函数声明或函数表达式的一部分声明的标识符。函数的作用.原创 2021-01-04 17:19:01 · 2294 阅读 · 0 评论 -
JavaScript表达式和运算符之:逻辑或赋值(||= ),逻辑空赋值(??=) ,逻辑与赋值(&&=),空值合并操作符(??),可选链式操作符(?.)
逻辑或赋值(||= ),逻辑空赋值(??=) ,逻辑与赋值(&&=),空值合并操作符(??),可选链式操作符(?.)原创 2021-01-04 11:13:22 · 1481 阅读 · 6 评论 -
React实现列表点击某一项高亮显示的实现2种思路和demo,其他语言也类似思想
实现1:选中列表的某行高亮显示,之前我的实现思路是list[index].checked = ‘高亮’实现2:设置selectKey,选中某行,就将 selectKey = index,再在渲染的列表判断item.index === selectKey 如果相等,就高亮,否则就无效果思路一、设置checkedimport React from "react";class Test extends React.Component { state = { list: [{id: 11.原创 2020-12-24 15:14:58 · 2878 阅读 · 0 评论 -
react hooks 中useCallback的作用,实例讲解
useCallback如何起作用?实例讲解import React, { useState, useCallback, useEffect } from 'react';const set = new Set();export default function Parent() { const [count, setCount] = useState(1); const [val, setVal] = useState(''); const callback = useCallbac原创 2020-12-03 17:03:08 · 1210 阅读 · 3 评论 -
禁用chrome控制台
<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-原创 2020-11-26 09:26:52 · 2783 阅读 · 0 评论 -
长连接-常见于移动端向下滑动加载更多(load more)
长连接MDN - IntersectionObserver:异步观察目标元素与其祖先元素或顶级文档视窗(viewport)交叉状态的方法Document.createDocumentFragment():常用于创建空白文档片段,然后将这个片段添加到dom结构中<!DOCTYPE html><html lang="en"><head> <...原创 2020-04-26 09:28:07 · 560 阅读 · 0 评论 -
手写实现一个自己的promise
function myPromise(constructor) { let self = this; self.status = "pending"; self.value = undefined; self.reason = undefined; self.then = function (fullfill, reject) { swit...原创 2020-03-27 11:00:22 · 340 阅读 · 0 评论 -
window.Promise Demo
三个小球运动: var ball1 = document.querySelector('.ball1') var ball2 = document.querySelector('.ball2') var ball3 = document.querySelector('.ball3') var Promise = window.Promise原创 2016-10-10 17:10:28 · 1257 阅读 · 0 评论 -
在index.html中直接调用import,export需要注意的事项
在html中直接调用import,export需要注意的事项一、举例运用注意事项一、注意事项二、三、js加载标志四、只执行一次五、执行顺序六、其他用法一、举例运用js中导出// export.jslet obj = { click:function () { console.log("click me") }, name:'jane'};export {obj}...原创 2020-03-20 16:34:24 · 5295 阅读 · 1 评论 -
用jQuery和原生JavaScript实现发布订阅模式
通俗的说,发布订阅模式就是执行一个操作(如点击按钮,执行click事件)调用多个事件。比如报社和订阅者。报社一更新报纸,订阅者就能接收到快递员传递过来的新报纸。一、jqueryjquery.html<!doctype html><html lang="en"><head> <meta charset="UTF-8"> ...原创 2020-03-03 14:05:21 · 1011 阅读 · 0 评论 -
async和promise都是处理异步请求的,那么选用哪个更好呢
js 异步回调Async/Await与Promise的区别一、Promiseimport http from '....';// promise方法1function getData1() { return new Promise((resolve,reject) => { http.get('getData1', callback => { co...原创 2020-02-27 19:13:36 · 767 阅读 · 0 评论 -
target、this、currentTarget的区别
原文详情链接先诉重点理论:1. target:触发事件的某个具体对象,只会出现在事件流的目标阶段(谁触发谁命中,所以肯定是目标阶段)2. currentTarget:绑定事件的对象,恒等于this,可能出现在事件流的任意一个阶段中3. 通常情况下terget和currentTarget是一致的,我们只要使用terget即可,但有一种情况必须区分这三者的关系,那就是在父子嵌套的关...转载 2017-10-12 15:53:26 · 1239 阅读 · 0 评论 -
判断两个obj对象是否相等
var obj3={"a":"zxj","b":"zxl"}; var obj4={"a":"zxj","b":"zxl"}; var state = true; var compare = function (obj1,obj2) { for (var key in obj1) { ...原创 2017-04-11 09:39:24 · 1629 阅读 · 0 评论 -
数组去重的两种方法
// 1、数组中无NaN的项 var a = [ "zx", "fg", 12, 34, 56, "zx", "fg", 12,34, 56, false, false, true, null ]; var arr = []; a.forEach(function(item) { if (arr.indexOf === -1) { arr.push(item);...原创 2017-07-29 15:36:51 · 1244 阅读 · 0 评论 -
上传图片并预览-原生js代码
谷歌浏览器兼容<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <style type="text/css"> #showImg img{ width:50...原创 2017-08-11 18:03:35 · 2816 阅读 · 0 评论 -
实现通过跨域获取数据的几种方法
新建一个test.js,在当前目录的dos运行:node test.jsconst http = require('http');const fs = require('fs');http.createServer((req, res) => { console.log("req:" + req.url); res.writeHead('200', { 'A...原创 2018-11-07 16:06:32 · 2321 阅读 · 0 评论 -
跨域的几种方式-以获取天气数据为例
同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制。1、可以跨域的标签script的src,img的src等,css的link,video和audio嵌入多媒体资源。object embed applet的插件。@font-face 引入的字体。一些浏览器允许跨域字体( cross-origin fonts),一些需...原创 2019-05-13 19:07:08 · 1656 阅读 · 0 评论 -
js的单线程事件循环机制(event loop)的典型例子
事件循环机制宏任务微任务讲解,js的单线程事件循环机制(event loop)的典型例子原创 2019-04-19 14:38:13 · 502 阅读 · 1 评论 -
关于变量提升的典型例子
为啥执行函数b不报错 let a = function () { console.log(1) }; a(); b(); function b () { console.log(2); }匿名函数产生了变量提升未完待续。。。。。原创 2019-04-19 12:40:58 · 411 阅读 · 0 评论 -
apply、call、bind区别、用法-如何改变this的指向,以及实用场景
经常在各种三方插件看到这几个,但是对其用法区分一直懵懵懂懂的,今天抽空做了个总结正常调用f1函数,this指向window改变this指向bind若想要f1里的this依旧指向window,可如下设置(如:vue中使用导入js代码,若想js中正常使用this,则必须通过以下方式中的任意一种改变this指向)apply、call、bind区别、用法都是用来改变函...原创 2018-04-24 11:13:38 · 379 阅读 · 0 评论 -
element - NavMenu 导航菜单,针对于复杂的导航栏(不定级、多级)动态渲染的组件开发
针对于多级导航菜单栏的遍历的组件开发实现效果如图所示,1、router.js// Layout.vue 和 Main.vue 都是vue容器, 前者为全空的容器import Vue from 'vue'import Router from 'vue-router'import Login from '../views/Login.vue'import Layout from '...原创 2019-06-14 17:19:43 · 6047 阅读 · 3 评论 -
this-this永远指向的是最后调用它的对象,也就是看它执行的时候是谁调用的
var o = { a:10, b:{ a:12, fn:function(){ console.log(this.a); //undefined console.log(this); //window } }}var j = o.b.fn;j(); o = { ...原创 2018-03-16 15:58:09 · 531 阅读 · 0 评论 -
[代码优化]-针对于复杂的多层数据结构 - 获取选中的checkbox
获取不定级checbox选中的效果,如果选中所有子集,则默认取父级别的值,描述有不清楚的地方,做完后我会将代码全部上传到github上面查看效果,这样更利于理解旧代码,虽然也做多了获取不定级别的value值,但是代码看起来很冗余 let result = []; function getNode(item) { if (!item.children) r...原创 2019-05-08 12:50:37 · 215 阅读 · 0 评论 -
判断js中的数据类型的几种方法-包括用原型链(constructor、prototype、_prototype_)
判断js中的数据类型的几种方法instanceof用来判断对象和函数;instanceof 可以在继承关系中用来判断一个实例是否属于它的父类型。typeof 用来判断变量Object.prototype.toString.call(str) == “[object String]”;//完美constructor1、String let str = '1234'; str.__...原创 2019-04-26 18:28:43 · 211 阅读 · 0 评论 -
用v-for来解释diff的算法原理 及 diff算法与虚拟dom的关系解释
我的理解:diff算法:从上往下逐层进行比较,给每个节点生成标识符用在同级进行对比,:如果标识符相同,则继续比较此节点的下一级,如果子节点都相同则复用;如果子级有不同,则对此子节点进行判断,节点中如果出现了新的标识符,则新增;如果旧节点的标识符在新中没有出现,则删除;如果标识符相同,内容不同,则进行替换原创 2019-05-13 14:53:46 · 863 阅读 · 0 评论