JavaScript
关注
分享
扫一扫
文章平均质量分 51
记录开发中的一些JavaScript知识点
新时代的弩力
搬砖崽一枚
展开
-
eval和new Function构造函数时的区别
对于定义函数来说，如果想用eval动态构造函数，那么有两种方式：1.使用箭头函数表达式构造函数，2.使用。,并且返回最后一个表达式(注意不是声明语句)的值。这里需要注意的是返回的值是表达式的值，比如。共同点：二者构造的函数的作用域都是全局的，可以通过。将函数function声明语句包裹起来,原创 2024-07-09 15:15:25 · 358 阅读 · 0 评论 -
使用正则获取cookie
正则获取cookie原创 2023-03-10 00:21:21 · 229 阅读 · 0 评论 -
JS动态生成正则表达式
动态正则原创 2023-03-10 00:01:53 · 790 阅读 · 0 评论 -
file Input文件选择框,选择图片后展示在占位区
隐藏input,使用div可以自定义点击按钮的样式,在div的click事件中出发文件选择input的click事件选择文件,然后在input的change事件中拿到e.target.files[0],是File对象,其中file.name就是文件名,然后使用FileReader.readAsDataURL(File|Blob),在其onload事件中通过reader.result获取到dataUrl。// 通过file对象(Blob对象)所选择的文件。// 获取到文件对象file。原创 2022-10-20 23:46:59 · 279 阅读 · 0 评论 -
Base64编码
3个字节 转成 4个字节,编码后体积比原来大1/3过程: 3个字节24位,分为4组,一组6位,用0填充高的两位,成为4个字节,那么00xxxxxx就可以表示64个字符,就是base64,由26个小写字母+26个大写字母+10个数字(0-9)以及+和/组成.如果源数据不够3的倍数,则规则,后用等号=填充至是3的倍数在JavaScript中, btoa() 就是base64编码的api,支持Latin-1编码(8位单字节,扩展了ASCII),由于中文utf-8不在Latin-1里面,所以不能直接用bto原创 2022-06-27 09:56:56 · 652 阅读 · 0 评论 -
简易版promise实现
class MyPromise { static PENDING = "pending"; static RESOlVED = "resolved"; static REJECTED = "rejected"; constructor(fn) { // 保存状态 this.state = MyPromise.PENDING; // 保存值 this.value = null; // resolved回调 this.resolvedCallba原创 2022-06-27 09:52:07 · 93 阅读 · 0 评论 -
JavaScript涉及二进制的转换
ArrayBuffer <==> String字符串(utf-8)new TextEncoder().endoce()new TextDecoder().decode()/** * arraybuffer转字符串 * @param {*} buffer ArrayBuffer * @param {*} decodeType 编码格式 * @returns 字符串 */function ab2str(buffer, decodeType = "utf-8") { // 默原创 2022-06-27 09:49:49 · 3860 阅读 · 0 评论 -
js高级程序设计-代理与反射
代理基础代理可以提供拦截目标对象并向基本操作中嵌入额外行为的能力.目标对象可以直接被操作,也可以通过代理来操作1.创建空代理代理是使用 Proxy 构造函数创建的。这个构造函数接收两个参数：目标对象和处理程序对象.const target = { id: "target",};const handler = {};const proxy = new Proxy(target, handler);// 访问id会访问同一个值console.log(target.id); //targe原创 2022-06-27 09:49:14 · 720 阅读 · 0 评论 -
在实现右侧drawer组件时有关的click事件和关闭事件中使用到的dom接口
Element.remove() 方法，把对象从它所属的 DOM 树中删除。Element.closest() 方法用来获取：匹配特定选择器且离当前元素最近的祖先元素（也可以是当前元素本身）。如果匹配不到，则返回 null。原创 2022-06-25 00:24:33 · 348 阅读 · 0 评论 -
classList属性,提供了类名操作的API
Element.classList 是一个只读属性，返回一个元素的类属性的实时 DOMTokenList 集合。相比将 element.className 作为以空格分隔的字符串来使用，classList 是一种更方便的访问元素的类列表的方法。原创 2022-06-24 23:29:23 · 149 阅读 · 0 评论 -
使用patch-package修改第三方包
安装依赖在package.json添加脚本创建补丁然后,执行npm install 或者 yarn install时就会为我们给对应的包打补丁了原创 2022-06-20 21:17:25 · 289 阅读 · 0 评论 -
Vue项目警告:[Violation] Added non-passive event listener to a scroll-blocking ‘wheel‘ event
vue项目警告:翻译default-passive-events给支持passive选项的事件处理器添加passive:true,这是chrome的一个特性,当属性passive的值为true的时候，代表该监听器内部不会调用preventDefault函数来阻止默认滑动行为,提高页面滑动性能部分源码:修改只给scroll,wheel事件添加passive:true...原创 2022-06-09 09:50:24 · 8700 阅读 · 2 评论 -
momentjs求两个日期相差多少天
momentjs求两日期天数差原创 2022-06-07 17:42:21 · 594 阅读 · 0 评论 -
JavaScript-排序算法
排序算法冒泡排序选择排序插入排序希尔排序归并排序快速排序堆排序计数排序桶排序基数排序冒泡排序思路:基于比较,交换的算法,双重循环,当前元素与下一个元素比较,若比小一个元素大,则交换两个元素的位置.function bubbleSort(arr) { for (let i = arr.length - 1; i > 0; i--) {//外层循环从后往前遍历,控制j的边界值 for (let j = 0; j < i; j++) {// 内存循环控制需要比较的次数原创 2022-05-19 23:50:00 · 135 阅读 · 0 评论 -
JavaScript高级程序设计-网络请求与远程资源
JavaScript网络请求和远程资源原创 2022-05-12 11:28:56 · 581 阅读 · 0 评论 -
ES6-ArrayBuffer
文章目录ArrayBufferArrayBuffer 对象创建ArrayBuffer.prototype.byteLengthArrayBuffer.prototype.slice()ArrayBuffer.isView()TypedArray 视图构造函数数组方法字节序BYTE_PER_ELEMENT 属性ArrayBuffer 与字符串的转换溢出**TypedArray.prototype.buffer**ArrayBufferArrayBuffer对象,TypedArray视图,DataView原创 2022-05-11 11:54:38 · 467 阅读 · 0 评论 -
JavaScript高级程序设计-JavaScript API
javascript APIEncoding API用途:实现字符串和定型数组的转换四个执行转换的全局类TextEncoderTextEncoderStreamTextDecoderTextDecoderStream1. 文本编码TextEncoder字符串->定型数组二进制格式:批量编码和流编码,使用 UTF-8批量编码批量:指 JavaScript 引擎会同步编码整个字符串encode// TextEncoder实例上有encode方法,接收字符串,原创 2022-05-09 23:52:45 · 1360 阅读 · 0 评论 -
JavaScript 对 cookie 的基本操作封装
JavaScript 对 cookie 的基本操作封装来自 JavaScript 高级程序设计(第四版)<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="w原创 2022-05-09 16:09:46 · 279 阅读 · 0 评论 -
解构时将源数据转换为对象
解构在内部使用函数ToObject()（不能在运行时环境中直接访问）把源数据结构转换为对象。这 意味着在对象解构的上下文中，原始值会被当成对象。这也意味着（根据ToObject()的定义），null 和undefined 不能被解构，否则会抛出错误。let { length } = 'foobar';console.log(length); // 6let { constructor: c } = 4;console.log(c === Number); // truelet { _ } = nu原创 2022-05-06 12:09:13 · 203 阅读 · 0 评论 -
Object.is
在ECMAScript 6 之前，有些特殊情况即使是===操作符也无能为力：// 这些是===符合预期的情况console.log(true === 1); // falseconsole.log({} === {}); // falseconsole.log("2" === 2); // false// 这些情况在不同JavaScript 引擎中表现不同，但仍被认为相等console.log(+0 === -0); // trueconsole.log(+0 === 0); // tru.原创 2022-05-06 11:32:16 · 83 阅读 · 0 评论 -
解决一次动态配置script标签的src而引起的异步加载js不允许document.write()方法
需求：因为有多个html页面引用了同一个script标签（引入地图用的js），想将html里的script标签的src弄成可配置的，不写死src，可以在config.js里配置，方便上线可更换地图的src。<script type="text/javascript" charset="UTF-8" src="http://129.28.155.253:8080/api/init.js?v=1.0&appSecret=1c27d0b6326d0a708d83e46a09e8原创 2021-04-02 23:57:35 · 3966 阅读 · 2 评论 -
highcharts，echarts图表配置
highchart饼状图Highcharts.chart('total_alarm_contribution', { chart: { backgroundColor: 'rgba(255, 255, 255, 0)', plotBackgroundColor: null, plotBorderWidth: null, plotShadow: false,原创 2021-03-12 15:51:52 · 299 阅读 · 0 评论 -
学习记录实现一个简单的scroll组件
目的：实现一个移动端可以滑动，并且滑动超出边界有回弹效果的组件。思路：监听scroll容器的touch事件，记录触摸点的坐标以及触摸过程中x,y的变化量，利用css3的translate来做滚动，并且禁止滚动条和mousewheel事件，回弹效果通过在touchend事件中判断translate值是否让内部元素滚动出边界，如果是则translate到边界对应的translate值。使用如下：direction:“vertical”||horizontal，水平滚动或者垂直滚动<Scroll原创 2021-01-19 17:29:36 · 326 阅读 · 0 评论 -
touch事件的学习记录
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .div { ..原创 2021-01-18 00:27:11 · 126 阅读 · 0 评论 -
按位非~运算符的作用
作用：会将所有值转换为整数，再用二进制表示，最后执行按位取反。对于null,undefined,对象，字符串（含有非数字）等非数字，~均返回-1，对于数值或者纯数值字符串X,返回-(X+1),去除小数部分。~null;//-1~undefined;//-1~'123abc';//-1~{};//-1~123//-124~'123'//-124//常用于代替String中indexOf方法返回-1的情况if('abcd'.indexOf('e')===-1)//没有匹配到//~来代替上原创 2020-12-30 15:57:09 · 290 阅读 · 0 评论 -
js高程学习之继承
//继承//ESMAscript由于函数没有签名，不支持接口继承，只支持实现继承，通过原型链。//所有函数的原型对象都是Ojbect的实例（故在不继承的情况下，自定义类型的实例的原型是Ojbect.prototype），而Ojbect函数的原型对象的原型是null（原型链末端）*************************************************// 原型链//继承的基本思想：利用原型让一个引用类型继承另一个类型的属性和方法，//具体操作：通过将构造函数的原型对象指原创 2020-12-30 04:04:05 · 143 阅读 · 0 评论 -
JS中delete操作符的作用
总结：删除对象属性或变量，释放内存空间，其值编程undefined；delete object.propertydelete object[property]原创 2020-12-29 15:13:00 · 323 阅读 · 1 评论 -
函数的防抖和节流
防抖和节流的差别:防抖：debounce函数让用户不触发事件后再执行函数节流：throttle函数让用户只能以一定的速率（时间间隔）出触发函数<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <t原创 2020-12-28 22:27:52 · 105 阅读 · 0 评论