![](https://img-blog.csdnimg.cn/20190927151043371.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
JavaScript
文章平均质量分 58
JavaScript基础知识
青颜的天空
做自己的保护神!
展开
-
JavaScript Reference Type 解读
Reference Type 是语言内部的一个类型。读取一个属性,例如在 `obj.method()` 中,`.` 返回的准确来说不是属性的值,而是一个特殊的 “Reference Type” 值,其中储存着属性的值和它的来源对象。这是为了随后的方法调用 `()` 获取来源对象,然后将 `this` 设为它。对于所有其它操作,Reference Type 会自动变成属性的值(在我们这个情况下是一个函数)。这整个机制对我们是不可见的。它仅在一些微妙的情况下才重要。原创 2022-11-03 22:30:00 · 520 阅读 · 0 评论 -
JavaScript 中 数组(Array)的 pop/push, shift/unshift 方法以及性能比较
JavaScript 中 数组(Array)的 pop/push, shift/unshift 方法以及性能比较原创 2022-08-03 23:00:00 · 1716 阅读 · 0 评论 -
JavaScript 使用 “at” 获取数组(Array)最后一个元素
新的数组方法array.at(index)允许我们以常规访问器的方式通过索引访问数组元素。而且,array.at(index)接受负索引,在这种情况下,该方法从末尾取元素原创 2022-08-02 22:15:00 · 1393 阅读 · 0 评论 -
正确按照字典顺序比较字符串之 localeCompare
现代浏览器(IE10- 需要额外的库 Intl.JS) 都支持国际化标准 ECMA-402。它提供了一种特殊的方法来比较不同语言的字符串,遵循它们的规则。调用 str.localeCompare(str2) 会根据语言规则返回一个整数,这个整数能指示字符串 str 在排序顺序中排在字符串 str2 前面、后面、还是相同:、如果 str 排在 str2 前面,则返回负数。如果 str 排在 str2 后面,则返回正数。如果它们在相同位置,则返回 0。...原创 2022-08-02 23:15:00 · 1409 阅读 · 0 评论 -
从 min 到 max 的随机数
从 min 到 max 的随机数,从 min 到 max 的随机整数原创 2022-08-02 22:30:00 · 677 阅读 · 0 评论 -
JS 获取鼠标选中的文字并处于选中状态
JS 获取鼠标选中的文字并处于选中状态,并进行样式美化原创 2022-07-21 23:00:00 · 1452 阅读 · 0 评论 -
Vue中 v-html 指令警告( warning ‘v-html‘ directive can lead to XSS attack vueno-v-html)
Vue中 v-html 指令警告: warning 'v-html' directive can lead to XSS attack vueno-v-html,可以修复或者忽略此警告原创 2022-07-16 22:00:00 · 8536 阅读 · 1 评论 -
JavaScript 中 List转Tree,Tree转List
JavaScript中List转Tree,Tree转List原创 2022-07-14 22:45:00 · 299 阅读 · 0 评论 -
Javascript如何实现继承?各种继承方法的优缺点是什么?
一、继承是什么?继承(inheritance)是面向对象软件技术当中的一个概念。如果一个类别B“继承自”另一个类别A,就把这个B称为“A的子类”,而把A称为“B的父类别”也可以称“A是B的超类”继承的优点继承可以使得子类具有父类别的各种属性和方法,而不需要再次编写相同的代码在子类别继承父类别的同时,可以重新定义某些属性,并重写某些方法,即覆盖父类别的原有属性和方法,使其获得与父类别不同的功能虽然JavaScript并不是真正的面向对象语言,但它天生的灵活性,使应用场景更加丰富关于继承,我们原创 2022-03-23 11:08:08 · 284 阅读 · 0 评论 -
用JS(Javascript)非框架实现模态框
实现简单弹出框/遮罩层的效果。 并且点击mask黑灰色背景可以关闭模态框<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>弹出框</title> <style> * { padding: 0; margin: 0; } body {转载 2022-03-22 23:55:56 · 578 阅读 · 0 评论 -
父组件和子组件之间的生命周期执行顺序
初次渲染就会触发的生命周期beforeCreate() , created()beforeMount() , mounted()组件的调用顺序都是先父后子,渲染完成的顺序是先子后父。 组件的销毁操作是先父后子,销毁完成的顺序是先子后父。加载渲染过程 子组件在父组件的beforeMount和Mounted之间渲染- 父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount-原创 2022-03-11 23:19:17 · 842 阅读 · 0 评论 -
深拷贝和浅拷贝的理解和应用场景
首先,浅拷贝和深拷贝都是只针对于像Object,Array这样的复杂对象。区别:浅拷贝只复制对象的第一层属性、深拷贝可以对对象的属性进行递归复制一:理解1、浅拷贝:简单的说,浅拷贝就是增加了一个指针指向已存在的内存(JavaScript并没有指针的概念,这里只是用于辅助说明),浅拷贝只是拷贝了内存地址,子类的属性指向的是父类属性的内存地址,当子类的属性修改后,父类的属性也随之被修改。const a = { name: 'Jerry', age: 20 }const b = aconsole..原创 2022-03-11 20:54:19 · 7074 阅读 · 3 评论 -
前端人员都懂的浏览器的同源策略,以及如何进行不同源间的相互访问
引言作为前端开发人员,你要是连同源策略都不知道是什么,那就太说不过去了。本篇文章将讲述同源策略的定义, 以及当我们需要克服同源策略,如何进行跨域访问数据的方法。一、同源策略的定义同源策略: 浏览器自带的一种安全策略,他是指协议、域名、 端口 三个都相同的才能互相访问,即若协议、域名、端口有一个不相同时,浏览器禁止页面加载或执行与自身不同域的脚本。那既然有同源的概念,那必定有不同源的概念,接下来我们来看一个组例子, 理解一下什么是同源,什么是不同源。url是否同源(以及原因).转载 2022-03-11 19:24:28 · 1337 阅读 · 0 评论 -
简述 JavaScript 中的高阶函数和函数柯里化
1.什么是高阶函数在数学和计算机科学中,高阶函数是至少满足下列一个条件的函数:接受一个或多个函数作为输入输出一个函数利用高阶函数可以解决什么问题扩展方法如:function say (args) { // 我们需要对say方法进行扩展,但是不能修改源码 console.log('say', args)}Function.prototype.before = function (cb) { return (...args) => { // newSay原创 2022-03-04 13:25:23 · 416 阅读 · 0 评论 -
js for、forEach, 跳出多层循环
1.for跳出循环var a = [1, 2, 3, 4, 5, 6, 7, 8]; // 8个数var b = [11, 12, 13, 14, 15, 3, 16, 17]; //8个数testFor();console.log('555')function testFor () { for (var k = 0; k < a.length; k++) { console.log('444'); for (var i = 0; i < a.length; i原创 2022-02-09 16:55:04 · 2396 阅读 · 0 评论 -
JavaScript 新数据类型BigInt 是什么?
BigIntBigInt 是一种内置对象,它提供了一种方法来表示大于 253 - 1 的整数。这原本是 Javascript中可以用 Number 表示的最大数字。BigInt 可以表示任意大的整数。在对大整数进行数学运算时,以任意精度表示整数的能力尤为重要。有了BigInt,整数溢出将不再是一个问题。此外,你可以安全地使用高精度时间戳、大整数 ID 等,而不必使用任何变通方法。BigInt目前处于 stage 3 提案阶段。一旦加入到规范中,它将成为JavaScript中的第二种数字数据类型,这将使支转载 2022-02-08 09:47:25 · 2777 阅读 · 0 评论 -
js中如何判断一个变量是不是NaN?
NaN(不是一个数字,但数据类型为number)是执行数学运算没有成功,返回失败的结果。另外,NaN 不等于 NaN 。判断方法1.利用 NaN 是唯一一个不等于自身的特点function _isNaN(val) { if (val !== val) { return true; } return false;}2.利用 ES6 中提供的 Object.is() 方法var a = "string";var b = 2;var c = a/b;.原创 2022-01-27 11:16:48 · 2591 阅读 · 0 评论 -
Angular2 - 获取对组件中使用的指令(Directive)的引用
我有一个组件,其模板如下所示:<div [my-custom-directive]>Some content here</div>需要访问 MyCustomDirective这里使用的类实例。当我想访问子组件时,我使用 ViewChild查询。是否有等效的功能来访问子指令?答案当然是可以的:方法1:可以使用 exportAs @Directive 的属性(property)注释。它导出要在父 View 中使用的指令。从父 View ,您可以将其绑定(bind)到 View原创 2021-12-19 23:35:26 · 562 阅读 · 0 评论 -
rgb与16进制颜色是如何相互转换的?
在css中定义颜色可以使用rgb颜色值,例:rgb(182, 0, 35);也可以使用16进制颜色值,例:#B60023。不管是rgb(182, 0, 35),还是#B60023都表示了同一种颜色,其实无论是用哪一种表示方法都行,但由于web页面的千变万化,遇到的情况也有可能千奇百怪,有时我们就需要把rgb与16进制颜色进行转换了。我们来看看一个rgb与16进制颜色如何转换的例子。对于十六进制颜色值,可以将它们两个划分为一组,从左到右分别代表RGB。两个十六进制数的第一个和十六相乘,结果加上第二个数.原创 2021-11-28 16:54:21 · 15969 阅读 · 0 评论 -
如何通过RGB值判断颜色深浅
随机生成的背景颜色,要在此颜色上显示文字,希望能通过编程的方法来判断生成的颜色是深还是浅,深就用白色显示文字,浅就用黑色,找了很久,下面的两个方案可选。把 RGB 的值求和,然后取一个值,当和大于等于此值就为浅色:if ($R + $G + $B >= 450) { // add shadow // 浅色模式}这个算法很傻很简单,但效果不理想,特别是在 B 较大的时候,估计是眼睛对 RGB 各种颜色的敏感度都不一样。后来我们通过把 RGB 模式转换成 YUV 模式,而 Y 是原创 2021-11-28 16:31:44 · 8456 阅读 · 0 评论 -
Node 错误:Error: Multipart: Boundary not found
前端使用Angular库中的HttpClient上传文件,设置了headers: { ‘Content-Type’: ‘multipart/form-data’ }后端使用 Featurejs 接收的时候,报错Error: Multipart: Boundary not found错误原因: Multipart没有找到Boundary上传文件 是POST请求 multipart/form-data格式的 form表单Content-Type: multipart/form-data 后面没有原创 2021-09-13 12:56:23 · 992 阅读 · 0 评论 -
js修改上传文件(File)的文件名
之前文章我们已经讲述了如何将网络图片转化为本地图片,传送门:https://blog.csdn.net/a1056244734/article/details/120261134转好之后还需要有上传的操作,上述转换之后,File的图片名为gift文件,上传的时候遇到错误,懵逼…后来使用上传工具选择本地图片上传测试之后才发现,参数一模一样,除了File文件的name有扩展名,也就是file.jpg,解析网络图片时不知道图片最终的格式,就没有手动加扩展名,导致错误。但是解析后的File文件有type原创 2021-09-13 12:42:54 · 8216 阅读 · 1 评论 -
网络图片转换为文件类型(File)
以下的图片转文件如果涉及跨域的问题,需要服务端支持图片跨域(常见的就是用了OSS存储图片的,需要在控制台开启允许跨域请求)如果oss控制台已经开了允许跨域依然是偶尔出现报错的话,可以在图片后面带一个随机数/时间戳即可解决,譬如:'http://xxxx.jpg?t'=+new Date().getTime()一、普通图片连接转化为文件实现这边用一张 gif 图来实现1、图片链接转base64利用canvas转换限制:只能转化为普通的jpg/png图片。无法转化gif图const imgT原创 2021-09-13 09:57:24 · 2966 阅读 · 0 评论 -
ESLint Unary operator ‘++‘ used
报错:没有++操作for (let i = 0; i < 3; i ++) { // ...}因为ESLint认为一元操作符,是不安全的,所以禁止使用。官方文档:https://eslint.org/docs/rules/no-plusplus另外,可以通过修改配置文件,允许在for循环中使用++和–的操作。所以在ESLint中,不修改配置的情况下,应该按照如下方式编写代码:var foo = 0;foo += 1;var bar = 42;bar -= 1;for (原创 2021-06-28 18:01:31 · 3335 阅读 · 0 评论 -
如何用原生 JS 生成随机数/随机字符串?
问题描述如何原生实现生成随机字符串?解决方法方法一Math.random().toString(36).slice(-8)Math.random() // 生成随机数字, eg: 0.123456 .toString(36) // 转化成36进制 : "0.4fzyo82mvyr" .slice(-8);// 截取最后八位 : "yo82mvyr"3原创 2021-06-28 11:21:32 · 1944 阅读 · 0 评论 -
详解如何制作自己的第一个js(包)库并上传到NPM
1.注册账号去npm官方文档注册账号,并验证邮箱,官网地址:https://www.npmjs.com/2.创建包库新建一个文件夹,并命名(名字随意)在文件夹内执行初始化指令(npm init)并设置包的参数,接着就依次填写, 不想填写的话也可以一路Entername: 模块名,发布之后就可以让用户npm install xxxx来引用你的开源模块version:版本号,语义版本号分为X.Y.Z三位,分别代表主版本号、次版本号和补丁版本号。当代码变更时,版本号按以下原则更新。如果只是修原创 2021-06-28 11:07:24 · 845 阅读 · 0 评论 -
JavaScript 中正则表达式验证 URL 网址合法性,亲测有效
项目中经常会用到表单验证中对url的校验,js中可以直接用new URL(xxx)校验,function url(control: FormControl) { const input = control.value, e = {invalidUrl: true} try { // tslint:disable-next-line: no-unused-expression new URL(input) } catch (err) { return e }}但原创 2021-05-08 10:40:59 · 19145 阅读 · 2 评论 -
JS数组中(Array)随机选出一项或者几项
js 数组我们经常在开发中使用,那么,我们如何快速的随机选择其中一项呢?原创 2021-05-07 13:49:23 · 6884 阅读 · 0 评论 -
vue-router中meta的作用
meta的定义:简单来说就是路由元信息,也就是每个路由身上携带的信息。meta的作用:vue-router路由元信息说白了就是通过meta对象中的一些属性来判断当前路由是否需要进一步处理,如果需要处理,按照自己想要的效果进行处理即可定义路由的时候可以配置 meta 字段:const router = new VueRouter({ routes: [ { path: '/foo', component: Foo, children: [ .原创 2021-04-29 16:53:47 · 32160 阅读 · 0 评论 -
Javascript 隐藏手机号中间四位
const phone="13214087752" const str = phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2');原创 2021-04-06 23:34:47 · 376 阅读 · 0 评论 -
js 格式化时间为 几天前
function diaplayTime(data) { var str = data; //将字符串转换成时间格式 var timePublish = new Date(str); var timeNow = new Date(); var minute = 1000 * 60; var hour = minute * 60; var day = hour * 24; var month = day * 30; var year = month * 12; var转载 2021-04-06 23:31:50 · 394 阅读 · 0 评论 -
EventTarget.addEventListener 和 EventTarget.removeEventListener 用法详解
1. EventTarget.addEventListenerEventTarget.addEventListener() 方法将指定的监听器注册到 EventTarget 上,当该对象触发指定的事件时,指定的回调函数就会被执行。 事件目标可以是一个文档上的元素 Element,Document和Window或者任何其他支持事件的对象 (比如 XMLHttpRequest)。addEventListener()的工作原理是将实现EventListener的函数或对象添加到调用它的EventTarget上原创 2021-03-10 13:53:17 · 729 阅读 · 0 评论 -
IE不支持 Promise 解决办法
1、在Nuxtjs项目中使用到了ES6的Promise对象,代码在谷歌浏览器和Edge浏览器中正常运行,而在IE浏览器和360浏览器下的兼容模式下,IE内核是不支持Promise的。2、通过can i use网站(https://caniuse.com/)查到的ES6 promise的支持情况,可以看到IE不支持Promise。3、要使IE浏览器兼容ES6(Promise 等语法),解决方法有两个IE中,比如 Iterator、Generator、Set、Maps、Proxy、Reflect、S原创 2021-03-10 13:13:49 · 4976 阅读 · 0 评论 -
终极 Shell——ZSH-让你的终端动起来
Shell是Linux/Unix的一个外壳,你理解成衣服也行。它负责外界与Linux内核的交互,接收用户或其他应用程序的命令,然后把这些命令转化成内核能理解的语言,传给内核,内核是真正干活的,干完之后再把结果返回用户或应用程序。Linux/Unix提供了很多种Shell,为毛要这么多Shell?难道用来炒着吃么?那我问你,你同类型的衣服怎么有那么多件?花色,质地还不一样。写程序比买衣服复杂多了,而且程序员往往负责把复杂的事情搞简单,简单的事情搞复杂。牛程序员看到不爽的Shell,就会自己重新写一套,慢慢形转载 2021-03-10 12:48:16 · 1470 阅读 · 0 评论 -
H5 和 JS 分别判断当前浏览器是否为IE浏览器
JavaScript中可以通过获取`window.navigator.userAgent`的值来判断浏览器类型,使用此方法就可以判断是否是IE浏览器。Navigator对象中包含有关浏览器的信息,而userAgent属性是一个只读的字符串,声明了浏览器用于 HTTP 请求的用户代理头的值。跟踪这个信息,发现在开发环境,识别为IE10,但访问服务器则识别为IE11,但IE11的userAgent里是没有MSIE标志的,所以下面的第一个方法对IE11不起作用。原创 2021-03-10 12:42:24 · 961 阅读 · 0 评论 -
Nuxt中使用 Swiper的autoplay属性不起作用?
使用Nuxt.js框架制作一个官网,需要自动循环播放的banner,参照官方示例代码设置了autoplay属性但是不起作用,不能自动循环原创 2021-02-23 17:43:18 · 804 阅读 · 0 评论 -
输入一个数字,自适应转换到KB、MB、GB
1.bytes自适应转换到KB,MB,GB/** * <summary> * 格式化文件大小的JS方法 * </summary> * <param name="filesize">文件的大小,传入的是一个bytes为单位的参数</param> * <returns>格式化后的值</returns> */function renderSize(filesize) { if (null == filesize || f原创 2021-01-19 23:59:45 · 1084 阅读 · 0 评论 -
模拟浏览器同时发3个任务
描述:模拟浏览器同时发3个任务,每个请求完成之后自动开始下一个请求;思路:递归const tasks = [ { id: "1", name: "残值", type: "accrual", createdAt: "2020-09-22T08:50:45.561+08:00", }, { id: "2", name: "会员资料", type: "custom", createdAt: "2020-09-22T08:58:23.6原创 2020-11-25 22:46:37 · 110 阅读 · 0 评论 -
npm 和 Yarn 的区别,Yarn 的使用方法
1.Yarn是什么?Yarn 是由Facebook、Google、Exponent 和 Tilde 联合推出了一个新的 JS 包管理工具 ,正如官方文档中写的,Yarn 是为了弥补 npm 的一些缺陷而出现的。npm的缺点npm install的时候巨慢。特别是新的项目拉下来要等半天,删除 node_modules,重新 npm install 的时候依旧如此。同一个项目,安装的时候无法保持一致性。由于 package.json 文件中版本号的特点,下面三个版本号在安装的时候代表不同的含义。常常会原创 2020-11-06 09:25:52 · 1252 阅读 · 0 评论 -
Mac 下 NVM 的安装与使用
1.nvm,node,npm,yarn之间的区别。nvm:nodejs 版本管理工具。也就是说:一个 nvm 可以管理很多 node 版本和 npm 版本。nodejs:Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。 Node.js使用了一个事件驱动、非阻塞式I/O的模型( Node.js的特性),使其轻量级又高效。npm:Node Package Manager,nodejs 包管理工具。在安装的 nodejs 的时候,npm 也会跟着一起安装,它是原创 2020-11-06 09:25:15 · 1720 阅读 · 0 评论