JavaScript
文章平均质量分 66
RayShyy
阿巴..阿巴阿巴阿巴...
展开
-
js中空值合并运算符??和可选链运算符?.
ES6中空值合并运算符??和可选链运算符?.详解和用法。原创 2022-10-06 13:01:10 · 712 阅读 · 0 评论 -
20个提升效率的JS技巧
1. 同时声明多个变量let a = 1, b = 2, c = 3;2. 三元运算符代替if elselet num1 = 10;let num2 = 20;let result = num1 > num2 ? true : false;3. 使用&&简化if语句function fn() { return true;}let flag = true;// 如果flag 为 true 则执行fnflag && fn();4. 使用模板字原创 2022-04-19 21:07:06 · 651 阅读 · 0 评论 -
js之节流函数
节流原理节流就是在一定时间间隔内触发一次事件,意思是可以在触发事件的时候马上执行任务,然后设定时间间隔限制,在这段时间内不管用户如何操作都忽略,在时间到了之后,如果监测到用户有触发事件行为,再次执行任务,并且设置时间间隔。其实节流跟王者荣耀的英雄技能是一个道理,当你释放技能的时候,该技能就会进行冷却倒计时,等倒计时结束之后,就可以再次释放技能了(这样是不是很好的理解了节流呢)。实际应用场景比如通过监听用户滚动屏幕来做出相应的网页反应,如果用户不断的进行滚动,则会不断的发生请求,响应也会不断增加原创 2022-04-12 10:12:45 · 1553 阅读 · 0 评论 -
js之防抖函数
防抖原理事件响应函数在一段时间后才执行,如果这段时间内再次调用,则重新计算执行时间。意思是如果在规定的时间内无论你怎么触发事件都不会执行,只有在最后一次触发事件后并且在规定的时间内无触发事件操作才会执行。防抖原理举例(这里以点击按钮为例):设置防抖的时间为2秒;点击一次按钮,则开始倒计时;如果在2秒内再次点击按钮,则重新从2秒开始倒计时;如果2秒过后没有再点击按钮,则执行点击按钮对应的事件,否则就再次从2秒开始倒计时。代码实现(这里以点击按钮为例)实现过程讲解(使用定时器实现):原创 2022-04-10 14:10:31 · 6887 阅读 · 0 评论 -
js中this指向问题
函数中this指向对于一些开发者来说一直是一个比较头疼的问题,this在js中比较灵活,不同的情况指向不同,小shy总结出了函数调用的this指向的一些情况,供大家参考。1. 默认绑定function fn() { console.log(this);}fn();结果:this指向window对象函数在被调用的时候,this会默认指向全局对象window对象。2. 隐式绑定const obj = { name: "小明", fn: function() { console..原创 2022-04-09 10:57:11 · 357 阅读 · 0 评论 -
js打乱数组内元素顺序(Fisher–Yates shuffle洗牌算法)
如何将数组内元素顺序打乱呢?这里小shy向大家介绍一种算法。Fisher–Yates shuffle:洗牌算法。通俗理解:先将数组最后一位元素作为参考点,将这个参考点和数组其他位置的元素(使用随机数获得)交换位置(当然也有不改变其位置的情况);然后将数组倒数第二位元素作为参考点,将这个参考点和数组其他位置的元素(使用随机数获得)交换位置(当然也有不改变其位置的情况);然后将数组倒数第三位元素作为参考点,将这个参考点和数组其他位置的元素(使用随机数获得)交换位置(当然也有不改变其位置的情况);.原创 2022-04-06 18:07:57 · 893 阅读 · 0 评论 -
js两个变量值互换的多种方法
两个变量的值互换在面试中也会经常出现,如果可以说出多种方法,也会让面试官眼前一亮,今天小shy就给大家介绍几种方法,看看哪种更适合你。1. 临时变量法let a = 3, b = 5, c = b; // c: 5b = a; // b: 3a = c; // a: 52. 加减法let a = 3, b = 5;a = a + b; // a: 8b = a - b; // 8 - 5 = 3a = a - b; // 8 - 3 = 53. 数组法let a = 3, b .原创 2022-04-06 16:36:19 · 2861 阅读 · 1 评论 -
js中JSON详解
理解 JSON 最关键的一点是要把它当成一种数据格式,而不是编程语言。JSON不属于JavaScript,它们只是拥有相同的语法而已。JSON 也不是只能在 JavaScript 中使用,它是一种通用数据格式。很多语言都有解析和序列化JSON的内置能力。1. 语法JSON语法支持表示3种类型的值:简单值:字符串、数值、布尔值和null可以在JSON种出现,特殊值undefined不可以;对象:第一种复杂数据类型,对象表示有序键/值对。每个值可以是简单值,也可以是复杂类型;数组:第二种复杂数据.原创 2022-04-03 11:01:02 · 22494 阅读 · 3 评论 -
js对象hasOwnProperty和in的区别
hasOwnProperty:用于判断当前对象实例(不是原型)上是否存在给定的属性,如果有则返回true,会忽略通过原型链继承的属性。in运算符:用于判断当前对象实例上是否存在给定的属性,如果当前对象自身没有该属性,会判断原型链是否继承该属性,如果有,则返回true。下面是代码示例:// 在Object原型上定义一个num属性,此时所有的对象实例都会通过原型链继承该属性。Object.prototype.num = 1;const obj = { a: 0};console.log(.原创 2022-03-30 11:50:11 · 579 阅读 · 0 评论 -
js 事件详解(二)
1. 事件流事件流描述的是从页面中接收事件的顺序;事件发生时会在元素节点之间按照特定的顺序传播,这个传播过程即为DOM事件流。比如我们给一个div注册了点击事件:DOM事件流分为三个阶段:捕获阶段当前目标阶段冒泡阶段如下图:捕获阶段:在元素触发事件的时候会经历如下:首先会从页面的最顶级Document开始判断document是否也注册了该事件,如果有就触发该事件;然后判断最外层html元素是否也注册了该事件,如果有就触发;再然后判断body元素是否也注册了该事件,如果原创 2022-03-25 01:03:07 · 716 阅读 · 0 评论 -
js 事件详解(一)
1. 什么是事件?事件: 指用户在某事务上由于某种行为所执行的操作;拿例子通俗的来说:比如点击一个按钮,让它在点击后实现某些效果;点击之后触发实现效果,即就是给这个按钮添加了点击事件。2. 事件三要素事件源:添加事件的对象;事件类型:添加那种类型的事件;事件处理函数:触发事件执行的函数。3. 常用的事件鼠标事件:事件事件名称触发条件onclick点击事件单击鼠标左键触发ondblclick双击事件双击鼠标左键触发onmouseover移动到原创 2022-03-24 22:00:19 · 990 阅读 · 0 评论 -
js DOM节点操作之创建、添加、删除和克隆节点
1. 创建节点document.createElement(“tagName”):tagName为HTML标签名,创建一个标签名为tagName的元素节点。<body> <ul> <li>熊大</li> <li>熊二</li> <li>光头强</li> </ul></body><script>原创 2022-03-21 18:17:33 · 4349 阅读 · 1 评论 -
js DOM节点操作之获取节点元素
本文主要讲解如何获取父节点元素,子节点元素和兄弟节点元素。1. 什么是节点?节点:Node,是构成HTML文档最基本的单元。常用节点分为四类:文档节点:整个HTML文档,document;元素节点:HTML文档中的HTML标签元素;属性节点:标签中的属性;文本节点:HTML标签中的文本内容。节点之间的关系一般可以分为 父子兄 三种关系。2. 获取父节点通过子节点获取父节点: node.parentNode注意:node.parentNode只返回距离该node元素最近一.原创 2022-03-21 13:01:39 · 1713 阅读 · 0 评论 -
js DOM操作自定义属性
自定义属性:在日常开发中,html的内置属性已经无法满足程序员的日常开发,所以需要我们自己定义属性,H5给我们新增了自定义属性,为了防止自定义属性和内置属性引起歧义,所以H5规定自定义属性以data-开头定义。1. 获取元素的属性值element.属性名element.getAttribute(“属性名”)element.属性名 和 element.getAttribute(“属性名”) 的区别:element.属性名:获取的是内置属性(元素本身自带的属性),不能获取自定义属性;elem.原创 2022-03-19 20:44:22 · 4225 阅读 · 0 评论 -
js DOM操作元素样式
element.style 行内样式操作element.className 类名样式操作1. element.style上下文是获取到的元素;通过element.style.某个css样式 设置某个css样式的值;js里采用驼峰命名法,比如设置字体大小,element.style.fontSize = “10px”;采用element.style是给元素加了行内样式,css权重比较高;一般是用在修改样式较少的情况下使用。<body> <div c.原创 2022-03-19 15:21:27 · 3240 阅读 · 0 评论 -
js 操作符详解
1. 一元操作符只操作一个值的操作符叫一元操作符。1.1 递增/递减操作符有两个版本:前缀版和后缀版。顾名思义,前缀版就是位于要操作的变量前头,后缀版就是位于要操作的变量后头。前缀版:前缀递增操作符会给数值加 1,把两个加号(++)放到变量前头即可:let num = 29;++num; // => num = num + 1; 得 num: 30前缀递减操作符也类似,只不过是从一个数值减 1。使用前缀递减操作符,只要把两个减号(–)放到变量前头即可:let num = 29原创 2022-03-18 22:34:56 · 1525 阅读 · 0 评论 -
js获取HTML DOM元素的方法
js 获取DOM元素的方法getElementById: 通过Id名获取;getElementsByTagName: 通过标签名获取;getElementsByClassName: 通过类名获取;querySelector: 通过选择器获取该选择器的第一个元素对象;querySelectorAll: 通过选择器获取该选择器所有的元素对象;document.body: 专门获取body元素;document.documentElement: 专门获取html元素。1. getElement原创 2022-03-17 09:20:36 · 1151 阅读 · 0 评论 -
js中location对象详解
location 是最有用的 BOM 对象之一,提供了当前窗口中加载文档的信息,以及通常的导航功能。主要是对浏览器url地址相关数据的获取和定义。1. location常用属性location.href: 返回当前页面的完整的URL地址;location.search: 返回URL后面的参数(类似于"?name=lc&age=20");location.protocol: 返回页面使用的协议(通常是"http:“或"https:”);location.host: 返回页面的域名及端口.原创 2022-03-16 17:06:27 · 9159 阅读 · 1 评论 -
js中offset系列、client系列、scroll系列和screen系列详解
1. offset系列element.offsetTop: 返回元素距离带有定位的父元素的顶部的距离,如果所有父级元素没有则默认为浏览器的body区域;element.offsetLeft: 返回元素距离带有定位的父元素的左侧的距离,如果所有父级元素没有则默认为浏览器的body区域;element.offsetWidth: 返回元素大小,元素内容宽度 + padding值 + border值;element.offsetHeight: 返回元素大小,元素内容高度 + padding值 + bord原创 2022-03-15 12:18:47 · 887 阅读 · 0 评论 -
js数组常用方法详解(二)
接着之前数组常用方法详解(一)第二部分介绍数组剩下的一些常用方法2.12 *** concat()concat()方法可以在现有数组全部元素基础上创建一个新数组,它首先会创建一个当前数组的副本,然后再把它的参数添加到副本末尾,最后返回这个新构建的数组。如果传入一个或多个数组,则 concat()会把这些数组的每一项都添加到结果数组。如果参数不是数组,则直接把它们添加到结果数组末尾:不改变原始数组。let arr = [1, 2, 3];let arr1 = arr.concat(4, [5,.原创 2022-03-13 18:55:27 · 414 阅读 · 1 评论 -
js获取数组最后一位元素的几种方法
各位前端的小伙伴还在用array[array.length - 1]来获取数组最后一位元素的值吗?小shy在这里介绍几种比较好用的方法,推荐给大家。1. length-1(入门)const arr = [1, 2, 3, 4];console.log(arr[arr.length - 1]); // 42. slice(-1)[0]截取数组最后一位(返回的是个数组)const arr = [1, 2, 3, 4];console.log(arr.slice(-1)[0]);3. .原创 2022-03-13 11:26:28 · 20300 阅读 · 3 评论 -
js 同步异步,宏任务和微任务
JavaScript语言是一门“单线程”的语言,是逐行往下执行代码的,就像一条流水线,仅仅是一条流水线而已,要么加工,要么包装,不能同时进行多个任务和流程。1. 同步任务同步任务指的是,在主线程上排队执行的任务,只有前一个任务执行完毕,才能执行后一个任务;const num1 = 1;const num2 = 2;const num3 = 3;console.log(num1); // 1console.log(num2); // 2console.log(num3); // 3.原创 2022-03-10 17:35:13 · 1242 阅读 · 1 评论 -
js 闭包是什么?
1. 什么是闭包?闭包(closure): 可以访问其他函数内部定义的变量的函数。在js中,只有函数内部的子函数才能访问到局部变量,所以,闭包可以理解为"定义在一个函数内部的函数"。在本质上,闭包是将函数内部和函数外部连接起来的桥梁。2. 变量作用域理解闭包,首先必须理解变量作用域。JavaScript 有两种作用域:全局作用域和函数作用域。定义在最外层作用域的变量是全局变量,定义在函数内部的变量称为局部变量,由于 JavaScript 的特性,外层的函数无法访问内部函数的变量;而内部函数可以访原创 2022-03-10 16:36:34 · 2642 阅读 · 0 评论 -
js 箭头函数详解
1. 认识箭头函数es6 新增了使用胖箭头(=>)语法定义函数表达式的能力,很大程度上,箭头函数实例化的函数对象与正式的函数表达式创建的函数对象行为是相同的。任何可以使用函数表达式的地方,都可以使用箭头函数:// 普通函数let sum = function(a, b) { return a + b;}// 箭头函数let sum1 = (a, b) => { return a + b;}箭头函数简洁的语法对开发者来说是十分友好的,从上面的例子可以得知箭头函数的简单用法:原创 2022-03-08 18:22:48 · 31865 阅读 · 14 评论 -
js call()、apply()、bind()用法和区别
1. call()语法:fun.call(thisArg,arg1,arg2,…)fun: 表示一个函数thisArg: this要指向的对象,如果是null 和 undefined,则指向window全局对象;从arg1开始,都是要给fun传递的参数。特性:fun.call(thisArg,arg1,arg2,…)会立即调用fun函数;call 方法将一个函数的对象上下文从初始的上下文改变为由 thisArg 指定的新对象,如果没有提供 thisArg 参数,那么 Window对象原创 2022-03-07 17:21:04 · 205 阅读 · 0 评论 -
js typeof和instanceof 区别
typeoftypeof一般是用来判断简单数据类型的,对一个值使用 typeof 操作符会返回下列字符串之一:“undefined”: 表示值未定义“boolean”: 表示值为布尔值“number”: 表示值为数值“string”: 表示值为字符串“object”:表示值为对象或null“symbol”: 表示值为符号“function”: 表示值为函数const variable1 = undefined;console.log(typeof variable1); /原创 2022-03-07 14:13:36 · 232 阅读 · 0 评论 -
js Object.defineProperty()详解
要修改属性的默认特性,就必须使用 Object.defineProperty()方法 ;在了解Object.defineProperty()之前,需要先明白对象属性的一些特性,明白了这些特性之后,对Object.defineProperty()的学习就会顺利很多了。1. 属性的类型ECMA-262 使用一些内部特性来描述属性的特征。这些特性是由为JavaScript 实现引擎的规范定义的。因此,开发者不能在 JavaScript 中直接访问这些特性。属性分两种:数据属性和访问器属性。1.1 数据属性原创 2022-03-03 15:20:30 · 3567 阅读 · 0 评论 -
js WeakSet的基本使用
介绍ECMAScript 6 新增的“弱集合”(WeakSet)是一种新的集合类型,为这门语言带来了集合数据结构。WeakSet 是 Set 的“兄弟”类型,其 API 也是 Set 的子集。WeakSet 中的“weak”(弱),描述的是 JavaScript 垃圾回收程序对待“弱集合”中值的方式。基本API1. 创建WeakSet实例可以使用 new 关键字实例化一个空的 WeakSet:const ws = new WeakSet();弱集合中的值只能是 Object 或者继承自 Obj原创 2022-03-02 16:27:10 · 869 阅读 · 0 评论 -
js中Set基本使用
介绍ECMAScript 6 新增的 Set 是一种新集合类型,为这门语言带来集合数据结构。Set 在很多方面都像是加强的 Map,这是因为它们的大多数 API 和行为都是共有的。基本API1. 创建Set实例使用 new 关键字和 Set 构造函数可以创建一个空集合:const s = new Set();如果想在创建的同时初始化实例,则可以给 Set 构造函数传入一个可迭代对象,其中需要包含插入到新集合实例中的元素(Set 可以包含任何 JavaScript 数据类型作为值):const原创 2022-03-02 16:02:33 · 44260 阅读 · 5 评论 -
js WeakMap用法
介绍ECMAScript 6 新增的“弱映射”(WeakMap)是一种新的集合类型,为这门语言带来了增强的键/值对存储机制。WeakMap 是 Map 的“兄弟”类型,其 API 也是 Map 的子集。WeakMap 中的“weak”(弱),描述的是 JavaScript 垃圾回收程序对待“弱映射”中键的方式。基本API1. 创建可以使用 new 关键字实例化一个空的 WeakMap:const wm = new WeakMap();注意:弱映射中的键只能是 Object 或者继承自 Obje原创 2022-03-02 12:23:20 · 1742 阅读 · 0 评论 -
js Map用法
介绍ECMAScript 6 以前,在 JavaScript 中实现“键/值”式存储可以使用 Object 来方便高效地完成,也就是使用对象属性作为键,再使用属性来引用值。但这种实现并非没有问题,为此 TC39 委员会专门为“键/值”存储定义了一个规范。作为 ECMAScript 6 的新增特性,Map 是一种新的集合类型,为这门语言带来了真正的键/值存储机制。Map 的大多数特性都可以通过 Object 类型实现,但二者之间还是存在一些细微的差异。具体实践中使用哪一个,还是值得细细甄别。基本API原创 2022-03-01 17:55:10 · 9076 阅读 · 2 评论 -
推荐一个快速获取时间的插件 Moment.js
推荐一个快速获取时间的插件 Moment.js原创 2022-03-01 15:38:55 · 505 阅读 · 0 评论 -
js数组(Array)常用方法详解(一)
1. 创建数组的几种方式1.1 使用 Array 构造函数let arr = new Array()1.2 创建一个有初始length的数组let arr = new Array(10);1.3 创建一个有元素的数组let arr = new Array("red", "green"); // arr: ["red", "green"]1.4 最常用: 使用数组字面量let arr = [];let arr1 = [1, "red", true];2. 数组常用方法2.1 *原创 2022-03-01 13:17:54 · 941 阅读 · 1 评论 -
js string字符串常用方法
length属性每个 String 对象都有一个 length 属性,表示字符串中字符的数量:let str = "hello";str.length; // 5charAt()charAt()方法返回给定索引位置的字符,由传给方法的整数参数指定:let str = "hello";str.charAt(0); // "h"str.charAt(1); // "e"charCodeAt()使用 charCodeAt()方法可以查看指定码元的字符编码,索引以整数指定:le.原创 2022-02-28 13:07:34 · 251 阅读 · 1 评论 -
为什么2个空数组相加会得到一个空字符串?
1 + [] = "1" 想知道是为什么吗?原创 2022-02-27 22:29:26 · 475 阅读 · 1 评论 -
JS前端Date(日期)
JavaScript 中 比较重要的Date日期的一些用法和重要知识的详细讲解。原创 2022-02-27 10:58:11 · 3688 阅读 · 0 评论 -
JS数据类型详解
这里详细介绍了Boolean,String,Number,Undefined,Null最常见的基本数据类型。原创 2022-02-26 11:35:36 · 431 阅读 · 0 评论 -
JS位操作符详解
JS位操作符详解。原创 2022-02-25 17:08:32 · 2099 阅读 · 2 评论