javascript
文章平均质量分 76
低调的小犬_Hansen
心领神会
展开
-
记一次前端时间埋点基于vue版本的
前端页面时长埋点原创 2022-08-16 17:32:28 · 676 阅读 · 0 评论 -
typescript笔记
typescript的知识,基础类型,interface,type,联合类型,类类型,泛型原创 2022-08-12 15:57:05 · 1204 阅读 · 0 评论 -
js千分位拆分法(按位取余法性能最好)
js千分位法原创 2022-03-16 11:23:47 · 865 阅读 · 0 评论 -
我喜欢的Array.prototype.reduce登场
1.reduce的简述reduce() 方法接受一个数组作为输入值并返回一个值,这点比起其他方法来说非常的有趣。reduce 接受一个回调函数,回调函数参数包括一个累计器【accumulator】(数组每一段的累加值,它会像雪球越滚越大),当前值【currentValue】,和索引【currentIndex】, 和当前数组【array】。reduce 也接受一个初始值【initalval】作为第二个参数:let finalVal = oldArray.reduce( (accumulator, cu原创 2021-07-07 11:36:18 · 114 阅读 · 0 评论 -
用docker+jenkins+github+nginx 搭建自动化构建
这里主要是介绍docker+jenkins+github+nginx 搭建自动化构建平台。首先,这里不会具体讲他们四个环境是怎么搭建的,因为网上已经有很多类似的文章了,可能只会穿插的讲讲他们搭建的时候的一些坑,以及最重要的还是讲他们怎么连通以及如何进行自动化 构建吧。 ...原创 2021-01-09 20:27:39 · 527 阅读 · 0 评论 -
npm link的基本用法及实例说明
如果我们想自己开发一个依赖包,在多个项目中使用它,如果直接发布到官网上固然可以,但如果修改则会非常麻烦,而且不利于在多个项目中使用。npm link命令可以帮助我们实现这个事情假如我们开发一个名为allenModule95的依赖包。首先需要在该依赖包下运行npm init命令,并编写index.js文件module.exports = { name: "allenModule95Name", sayHello: function(){ console.log(原创 2020-11-11 18:51:57 · 6136 阅读 · 0 评论 -
js的eval代码快速解密
此方法就是对一些已经混淆过的代码进行反解密,亲测有效方法:新建一个html文件,把上面eval替换成document.write输出即可。备注,前后加xmp标签的作用是完整的输出html标签,并且不做任何转义。代码如下:<html><head><title>eval解密</title></head><body><script type="text/javascript">document.wr原创 2020-07-07 11:22:43 · 488 阅读 · 0 评论 -
Uncaught TypeError: cannot set property “onclick” of undefined 解决办法
如果把js内容直接放在这个head标签以内,button按钮不能正常点击更换body的背景颜色,报错提示:demo6.html:16 Uncaught TypeError: Cannot set property 'onclick' of null,分析解决办法如下:<!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta nam转载 2020-06-24 22:04:55 · 6052 阅读 · 1 评论 -
js常用的工具库
数组篇数组去重var fruits1 = ['banana', 'apple', 'orange', 'watermelon', 'apple', 'orange', 'grape', 'apple'];var uniqueFruits1 = Array.from(new Set(fruits1))console.log(uniqueFruits1)//["banana", "apple", "orange", "watermelon", "grape"]var uniqueFruits2 = [原创 2020-05-31 15:35:47 · 477 阅读 · 0 评论 -
js的this讲解
涉及面试题:如何正确判断 this?箭头函数的 this 是什么?先记住了一句话this取什么值是在函数执行时候确定的,而不是在函数定义时候确定的!场景一:作为普通函数function foo(){ console.log(this)}foo()对于直接调用foo来说,不管foo函数被放在了什么地方,this一定是window场景二:作为对象去调用:...原创 2020-03-21 13:47:56 · 183 阅读 · 0 评论 -
js之词法作用域及闭包
一、作用域我们平常用的作用域叫做词法作用域,词法作用域的内涵是,作用域在词法分析阶段就被确定了(写代码的时候就确定了),也就是说,变量在代码中所处的位置 (而不是运行时所处的位置),决定了作用域。下面介绍作用域分【全局作用域】、【函数作用域】、【块级作用域】、【作用域链】、【闭包】。看张全景图:二、全局作用域全局变量有全局作用域: 网页中所有脚本和函数均可使用。var...原创 2020-03-21 13:19:52 · 292 阅读 · 0 评论 -
var 与 const let的区别
一、var 变量可以挂载在window上,而const、let不会挂载的window上。var a = 100;console.log(a,window.a); // 100 100let b = 10;console.log(b,window.b); // 10 undefinedconst c = 1;console.log(c,window.c); //...原创 2020-03-17 21:07:12 · 114 阅读 · 0 评论 -
前端进阶知识(一)之浏览器渲染机制
这张主要分5个环节寻行渐近的回答,分别是【什么是DOCTYPE及作用】、【浏览器渲染过程】、【重绘Reflow】、【重绘Repaint】,很多都是直接通过本人用大白话讲。一、什么是DOCTYPE及作用1.DTD(文档类型定义):DTD就是告诉浏览器我是什么类型,浏览器根据这个判断用什么来解析渲染它。而DOCTYPE就是告诉浏览器是哪个DTD(文档类型)比如:① h5方式的,<...原创 2020-03-10 21:57:44 · 203 阅读 · 0 评论 -
Javascript性能优化(初步完结)
性能优化原则1.多使用内存、缓存或其他办法2.减少CPU计算量,减少网络加载耗时3.空间换时间(适用于所有编程的性能优化)让加载更快1.减少资源体积:压缩代码2.减少访问次数:合并代码,SSR服务器端渲染,缓存3.使用更快的网络:CDN让渲染更快1.css放在head,JS放在body最下面2.尽早开始执行JS,用DOMContentLoaded触发...原创 2019-11-20 17:09:07 · 244 阅读 · 0 评论 -
javascript之错误监控方式
错误监控大白话就是发现代码中出现的错误。一、前端错误的分类1.即时运行错误:代码错误console.log(a)错误信息:2.资源加载错误如css、js资源加载错误二、错误的捕获方式1.即时运行错误的捕获方式1) try...catch<input type="text" placeholder="请输入用户名" id="username">...原创 2020-03-07 17:34:12 · 354 阅读 · 0 评论 -
JavaScript之运行机制,以及Event-Loop的讲解
这章节采用先题目后原理的说法为大家讲解。一、引入题目我们先看一道题目吧!console.log(1); setTimeout(()=>{ console.log(2)},0);console.log(3)你们觉得上面打印的顺序是什么呢?如果你不了解JS运行机制,那么你就犯错吧。其实上面打印的是1 3 2,是不是很奇怪呢?这是为什么呢?相信小伙伴现在已经出现了100...原创 2020-03-06 11:58:39 · 240 阅读 · 0 评论 -
JavaScript的继承
这一章节主要说的是类与实例(包括类的声明、生成实例),类与继承(包括如何继承、继承的几种方式)一、类的声明 /** * 类的声明 * */ function Animal (){ this.name = 'name1' } /** * ES6中class的声明 * */ class Animal2 { constructor ()...原创 2020-03-04 12:03:25 · 205 阅读 · 0 评论 -
JavaScript☞原型与原型链
本章内容一共分为四大项,然后寻行渐近的说名,这四大项是 【创建对象有几种方法】【原型、构造函数、实例、原型链、instanceof原理、new运算符】一、创建对象的几种方式第1种:字面量let n1 = {a: 1}let n2 = new Object({a: 2})第2种: 通过构造函数let M = function(name){ this...原创 2020-03-02 17:39:43 · 150 阅读 · 0 评论 -
javascript将一维数组的分割成多个数组
要求:把一个数组arr按照制定的数组大小newArrLength分割成若干个数组块。样本:changeArrGroup([1,2,3,4,5,6,7,8,9],3) 返回 [[1,2,3],[4,5,6],[7,8,9]]changeArrGroup([1,2,3,4,5,6,7],2) 返回[[1,2],[3,4],[5,6],[7]]算法:提供两种方法一funct...原创 2020-01-31 20:20:59 · 2184 阅读 · 0 评论 -
ES6之Promise原理及常用的api
前言:1.Promise原理解析2.后面部分讲 then,resolve与reject,all,race的操作一.Promise原理先看原理图:①执行new Promise时会返回一个空状态(pending挂起状态),此时返回的是undefined(既不是成功,也不是失败②Promise内部有两个方法,resolve和reject。resolve是将pending状态变...原创 2019-12-19 21:21:52 · 486 阅读 · 0 评论 -
ES6的解构赋值
一、解构赋值解构赋值语法是一种 Javascript 表达式。通过解构赋值,可以将属性/值从对象/数组中取出,赋值给其他变量。解构赋值使用了相同的语法,不同的是在表达式左边定义了要从原变量中取出什么变量。如代码1:let [firstName, surname] = ['Ilya', 'Kantor']console.log(firstName) // Ilyacon...原创 2019-12-15 21:00:04 · 152 阅读 · 0 评论 -
ES6新增的一些对象【ES6 object语法,map数据结构,set数据结构,object.assign】
前言1.本章讲的是ES6 object语法,map数据结构,set数据结构,object.assign一、对象属性1.简单属性(Property Shorthand)①.ES5的做法: Object 的属性必须是 key-value 形式var x = 0, y = 0;obj = { x: x, y: y };②.ES6的做法:简写的形式来表达var x =...原创 2019-12-08 20:58:39 · 557 阅读 · 0 评论 -
前端分页导航制作
前言:1.本案例是讲分页导航的,包括上一页,下一页,还有页码导航的2.用ajax+php+js+mysql去做的环境介绍:MySql、XAMPP、VSCode语言介绍:ES5、ES6、html、css、javascript、jQuery、ajax、php一、输入mysql语句部分代码如下:goods表CREATE TABLE IF NOT EXI...原创 2019-12-08 20:44:43 · 507 阅读 · 0 评论 -
ES5普通函数与ES6箭头函数的说明【拓展:它们的this指向问题】
前言1.ES5的函数形式2.ES6的函数形式3.ES5与ES6的this指向问题一、ES5的普通函数1.函数声明式代码如下:function fn (a, b, c) { // ...}2.函数表达式形式代码如下:let fn = function (a, b, c) { // ...}二、ES6的箭头函数代码1:参数的三种形式...原创 2019-12-06 16:35:31 · 420 阅读 · 1 评论 -
ES5与ES6之函数参数的默认值【拓展rest运算和rest的逆运算】
前言1.介绍ES5与ES6传入默认参数的方式2.介绍ES5与ES6怎么将多余的参数转换成数组的方式,即获取函数有几个参数和怎么处理参数 rest的运算3.介绍ES5与ES6怎么将数组打散成参数的操作一、ES5中函数参数默认值的做法代码1:function fn(a, b, c){ b = b || 1; c = c || 2; return a + b +...原创 2019-12-05 17:23:01 · 589 阅读 · 0 评论 -
ES5与ES6之静态方法与实例方法
前言:本节讲的是JavaScript的静态方法与实例方法1.静态方法就是定义在 构造函数的方法;2.实例方法就是定义在 构造函数原型(prototype)上的方法;下面通过ES5与ES6的代码分别演示说明。一、ES5演示静态方法与实例方法静态方法是面向对象最常用的功能,在 ES5 中利用 function 实现的类是这样实现一个静态方法的。代码1:let ...原创 2019-12-05 13:31:31 · 1212 阅读 · 0 评论 -
javascript中的set与get到底是什么西西呢
前言:set和get能用ES5写,只要将get与set通过原型链的方式,即公有方式去写,参考我的ES5与ES6的class基础语法(如何声明一个类),本文采用ES6语法去写。一、get与set介绍1.getter是获取属性值,setter是设置属性值,getter不带任何参数,setter设置键值,值以参数的形式传递,在setter函数体中,一切的return都是无效的,当只有se...原创 2019-12-04 20:09:29 · 964 阅读 · 1 评论 -
ES5与ES6的class基础语法(如何声明一个类)
一、在ES5的时候,是没有类的概念的代码如下:let Animal = function (type) { this.type = type this.walk = function () { console.log('I am walking') }}let dog = new Animal('dog')let monkey = new Animal('mo...原创 2019-12-04 16:48:08 · 400 阅读 · 0 评论 -
ES5与ES6中数组find、findIndex,数组如何查找
一、ES5中的查找1.Array.some()方法测试数组中是不是至少有1个元素通过了被提供的函数测试。它返回的是一个Boolean类型的值。语法:arr.some(callback(element[, index[, array]])[, thisArg])callback用来测试每个元素的函数,接受三个参数:element数组中正在处理的元素。index...原创 2019-12-04 13:40:16 · 4181 阅读 · 0 评论 -
ES5与ES6中数组实用的数据结构之Array.of-fill,如何修改数组生成新的数组
一、ES5怎么生成新的数组因为数组是引用类型的,所以生成新数组会改变原来的数组1.push方法用于在数组的末端添加一个或多个元素,并返回添加新元素后的数组长度。var arr = [];arr.push(1) // 1arr.push('a') // 2arr.push(true, {}) // 4arr // [1, 'a', true, {}]2.pop方法...原创 2019-12-03 19:20:59 · 445 阅读 · 0 评论 -
ES5与ES6中数组实用的数据结构之Array.from
提问,如果ES5要将伪数组转化为数组怎么做呢?那什么是伪数组呢?它具有说明特性?伪数组的回答:数组是开发中经常用到的数据结构,它非常好用。在 JavaScript 的世界里有些对象被理解为数组,然而缺不能使用数组的原生 API,比如函数中的 arguments、DOM中的 NodeList等。当然,还有一些可遍历的对象,看上去都像数组却不能直接使用数组的 API,因为它们是伪数组(A...原创 2019-12-03 17:05:46 · 331 阅读 · 0 评论 -
ES5与ES6 数据遍历之隐藏的知识点
一、ES5之常用的for遍历for循环是我们最常用的循环了,而且他能使用break和continue两个方法,在这里不做过多的赘述,直接上代码欣赏下!let arr = [1, 2, 3, 4, 5, 6]for (let i = 0, length = arr.length; i < length; i++) { if(arr[i] === 2){ continue...原创 2019-12-03 00:09:42 · 194 阅读 · 0 评论 -
javascript的浅拷贝和深拷贝
深拷贝和浅拷贝简单解释 浅拷贝和深拷贝都只针对于引用数据类型,浅拷贝只复制指向某个对象的指针,而不复制对象本身,新旧对象还是共享同一块内存;但深拷贝会另外创造一个一模一样的对象,新对象跟原对象不共享内存,修改新对象不会改到原对象; 区别:浅拷贝只复制对象的第一层属性、深拷贝可以对对象的属性进行递归复制;浅拷贝简单,这里主要是做一个深拷贝的研究深拷贝的实现...原创 2019-11-20 22:03:34 · 126 阅读 · 0 评论 -
原生js实现懒加载
我所使用的方法:在写网页img标签时并不会将图片的路径放入src属性。而是自定义一个其他的属性eg:data-src。将路径放入这个自定义的属性中。那么在加载页面时,这个图片一开始是无法加载的。而当浏览器的可视区域移动到此图片上时,将data-src中的路径赋值给src属性,并开始加载。代码实现<!DOCTYPE html><html lang="en">&l...原创 2019-09-12 16:41:46 · 198 阅读 · 0 评论 -
性能优化-防抖(debounce)和 节流(throttle)
防抖debounce+.监听一个输入框,文字变化后触发change事件+.如果没有用防抖,直接用keyup事件,则会频发change事件,影响性能+.但是采用防抖:用户输入结束或者暂停时,彩绘触发change事件debounce 一段时间内连续的函数调用,只允许其函数执行一次。原理是,维护一个定时器,只有定时器结束才可以继续触发事件。未封装代码代码(用于巩固理解):let...原创 2019-11-20 20:58:47 · 648 阅读 · 0 评论 -
jQuery.proxy()的用法(解决函数this转移问题)
<!--DOM结构--><div id="test" style="width:100px;height:100px">Click Here!</div>在某些情况下,我们调用Javascript函数时候,this指针并不一定是我们所期望的那个,例如:test.onclick = function(){ setTimeout(functio...原创 2019-10-18 00:00:47 · 162 阅读 · 0 评论 -
ES6的一些小总结
一、let constlet 相当于之前的var。const 常量,定义好后不可以改变。let注意:1.没有预解析,不存在变量提升在代码块内,只要let定义变量,在之前使用,都是错误的。2.在同一个作用域里面,不能重复定义变量。3.for循环,for循环里面是父级作用域,里面又是一个。const:特性盒let是一样的。1. const定义变量不能修改2. const定义完...原创 2019-04-24 18:30:54 · 501 阅读 · 0 评论 -
js中Object.keys的使用
描述Object.keys()方法会返回一个由一个给定对象的自身可枚举属性组成的数组,数组中属性名的排列顺序和使用for...in循环遍历该对象时返回的顺序一致 。如果对象的键-值都不可枚举,那么将返回由键组成的数组。Object.keys返回一个所有元素为字符串的数组,其元素来自于从给定的object上面可直接枚举的属性。这些属性的顺序与手动遍历该对象属性时的一致。语法:...原创 2019-08-15 16:56:42 · 934 阅读 · 0 评论 -
前端javascript总结笔记(一)--js的三座大山
前言:第一章为变量类型和计算。第二章到第四章分别是原型与原型链,作用域及闭包,异步和单线程,这三个就是我们说的三座大山。一、变量类型和计算1:JS中使用typeof能得到哪些类型?字符串(String)、数值(Number)、布尔值(Boolean)、Undefined、[Null对象,数组(Array),函数(Function) ](Object)共5种2:何时使用=...原创 2019-09-12 17:29:03 · 1072 阅读 · 0 评论 -
前端javascript总结笔记(二)--其他知识点(日期、Math、数组、对象)
前言本笔记是:日期、Math、数组、对象、几个高度。题目:1.获取2019-09-19格式的日期 function formatDate(dt){ if(!dt){ dt = new Date() } var year = dt.getFullYear() var month = dt....原创 2019-09-20 00:16:52 · 120 阅读 · 0 评论