JavaScript
文章平均质量分 87
叨唠
弘德、博学、敏行、敢先
展开
-
JS中的数字表示的几种方式
JS中关于进制的基础知识,以及Number数字使用时要注意的地方,其他表示数字的方式原创 2022-02-20 17:47:20 · 1646 阅读 · 0 评论 -
==和===以及ES6中的Object.is()
JS中判断数值是否相等的三种方法,他们的用法和区别,以及使用时需要注意的地方原创 2022-02-20 15:52:46 · 962 阅读 · 0 评论 -
web前端乱码问题
解决乱码问题:(1)encodeURLCompoenent():将中文,符号等进行编码(2)decodeURLComponent():将编码后的值进行解码注意:这两个方法直接调用,不是某个对象的方法...原创 2018-09-18 22:09:42 · 6380 阅读 · 0 评论 -
正则表达式的相关方法
一、正则对象的方法讨论是否是全局匹配,因为全局匹配,会修改该正则对象的lastIndex的值,其他正则实例对象的lastIndex值不被修改,使得下一次用正则方法匹配的时候,从lastIndex的位置开始。lastIndex是正则表达式的一个可读可写的整数型属性,用来指定下一次匹配的起始索引。RegExp.lastIndex属性的属性特性: writable true enumerable false configurable false 只有正则表达式使...原创 2020-08-12 16:21:49 · 298 阅读 · 1 评论 -
正则表达式面试题
1、给一个连字符串例如:get-element-by-id转化成驼峰形式。var str = "get-element-by-id";var reg = /-(\w)/g;console.log(str.replace(reg, function(match, p1){ return p1.toString().toUpperCase();})); //getElementById字符串的转为大写:toUpperCase();转为小写:toLowerCase()2、匹配一..原创 2020-08-17 20:05:11 · 3111 阅读 · 2 评论 -
js正则表达式——限制数字长度
1. 比如:限制字数长度为4var reg = /^\d{4}$/解释:以四个数字开头并且也是以这四个数字结尾,所以就限制了数字长度,只能为四。注意:也是以这四个数如果是:以四个数字开头,且以四个数字结尾的写法又是什么呢?那么字数长度就没有受到限制了,当然了,至少是四个。不会写!...原创 2019-04-03 19:32:44 · 31349 阅读 · 1 评论 -
JavaScript递归例子
1. 递归的特点:找规律、找出口(1)求一个数的阶乘: function factorial(n){ if(n == 0 || n == 1){ return 1; } return n * factorial(n-1); }(2)求斐波拉数列第n项的...原创 2018-10-03 11:45:20 · 514 阅读 · 0 评论 -
DOM classList 属性
方法 描述 add(class1, class2, ...) 在元素中添加一个或多个类名。 如果指定的类名已存在,则不会添加 contains(class) 返回布尔值,判断指定的类名是否存在。 可能值: true - 元素包已经包含了该类名 false - 元素中不存在该类名 item(index) 返回类名在元素中的索引值...原创 2018-10-07 09:33:29 · 242 阅读 · 0 评论 -
你不知道的copy、cut、paste事件——实现页面内容禁止复制,实现复制内容添加额外字段,比如复制请注明出处
聊聊copy复制、cut剪切、paste粘贴事件。首先这三个事件都属于ClipboardEvent事件(剪切板事件)。复制、剪切、粘贴事件是浏览器对事件的监听,可以监听处理。但是默认情况下浏览器操作系统是可以复制、剪切、粘贴页面上的内容,将数据处理到操作系统的剪切板上。比如:window系统的 Win+V快捷键可以展示剪切板。。。浏览器页面内容的复制、剪切、粘贴,正是浏览器操作系统的低层实现。我们也可以通过监听浏览器的copy、cut、paste事件,从而阻止默认的复制内容行为。比如有的网站,不原创 2020-11-30 19:58:05 · 3551 阅读 · 0 评论 -
Array数组ES6方法Array.isArray、Array.of、Array.from;find、findIndex方法
Array构造函数上的三个方法Array.isArrayArray.isArray()用于确定传递的值是否是一个数组。如果是数组,则返回true,否则为false。// 鲜为人知的事实:其实 Array.prototype 也是一个数组。Array.isArray(Array.prototype);为什么数组原型是一个数组,还可以有属性方法呢? 通过Object.defineProperty实现在数组上添加方法和属性。就像数组的length属性一样。 var ar.原创 2021-04-27 10:30:48 · 1296 阅读 · 2 评论 -
数组reduce和reduceRight方法
Array.prototype.reduce()reduce()方法对数组中的每个元素执行一个由您提供的reducer函数(升序执行),将其结果汇总为单个返回值。reducer函数接收4个参数:Accumulator (acc) (累计器) Current Value (cur) (当前值) Current Index (idx) (当前索引) Source Array (src) (源数组)您的reducer函数的返回值分配给累计器,该返回值在数组的每个迭代中被记住,并最后成为...原创 2021-04-26 19:14:32 · 419 阅读 · 0 评论 -
数组forEach方法详解,拓展map、filter、some、every,以及ES6的find和findIndex方法
Array.prototype.forEach()forEach()方法对数组的每个元素执行一次给定的函数。函数返回值为undefined语法:arr.forEach(callback(currentValue [, index [, array]]) [, thisArg])(1)forEach() 方法有效值按升序为数组中含有效值的每一项执行一次 callback 函数,那些已删除或者未初始化的项将被跳过(例如在稀疏数组上,new Array(7) 得到 [empty ×..原创 2021-04-26 14:50:31 · 573 阅读 · 0 评论 -
深入理解js自定义事件以及事件的监听触发移除等操作
EventTargetEventTarget是一个由对象实现的DOM接口,这些对象可以接收事件,并可能有针对事件的监听器。Element、Document、Window是最常见的事件目标,但是其他对象也可以是事件目标。例如XMLHttpRequest、AudioNode、AudioContext等许多事件目标(包括Element、Document和Window)也支持通过onevent属性和属性设置事件处理程序。EventTarget.addEventListener()兼容性:兼.原创 2021-02-03 16:47:06 · 2309 阅读 · 0 评论 -
JSON、JSON.stringify()、JSON.parse()
JSONJSON 是一种语法(JavaScript Object Notation),用来序列化对象、数组、数值、字符串、布尔值和null。JSON = null or true or false or JSONNumber or JSONString or JSONObject or JSONArray它基于 JavaScript 语法,但与之不同:JavaScript不是JSON,JSON也不是JavaScript。一、JSON传值分类:1、nullNaN 、In原创 2021-01-05 11:09:10 · 419 阅读 · 0 评论 -
数组forEach方法对闭包的思考
经典闭包:let arr = ['a','b','c'];for(var i = 0; i < arr.length; i ++){ setTimeout(() => { console.log(i); //闭包!i == 3 }, 2000);}forEach没有形成闭包:let arr = ['a','b','c'];// 没有形成闭包arr.forEach((item, index) => { setTimeout(()原创 2020-12-25 18:42:09 · 1443 阅读 · 0 评论 -
URLSearchParams和url-search-params-polyfill
URLSearchParams对象URLSearchParams接口定义了与URL的查询字符串一起使用的实用程序方法。处理url的查询字符串的。兼容性:Edge17,Chrome49,Firefox29,Safari10.1构造函数:URLSearchParams() 返回一个URLSearchParams对象实例。使用:URLSearchParams构造函数接收一个url的查询字符串部分,返回一个URLSearchParams对象。可以通过URLSearchParams对象上的方法,对查.原创 2020-12-05 15:05:13 · 2209 阅读 · 0 评论 -
Fetch的理解和使用
Abstract摘要:1、Fetch的官方规范文档:https://fetch.spec.whatwg.org/2、Fetch API提供了一个 JavaScript 接口,优化了http请求和响应的操作方式。这种功能以前是使用XMLHttpRequest(ajax)实现的。它还提供了一个全局fetch()方法,该方法提供了一种简单,合理的方式来跨网络异步获取资源。3、fetch最大的特点是与Promise对象的结合,Fetch API大多都返回一个Promise对象,使我们的编程风格...原创 2020-12-03 16:15:11 · 5407 阅读 · 0 评论 -
深入理解Ajax
一、了解Ajax1、背景:在 2005 年,Google 通过其 Google Suggest 使 AJAX 变得流行起来。Google Suggest 使用 AJAX 创造出动态性极强的 web 界面:当您在谷歌的搜索框输入关键字时,JavaScript 会把这些字符发送到服务器,然后服务器会返回一个搜索建议的列表。2、介绍:AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。AJAX = Asynchronous JavaScript and XML(异步的原创 2020-11-19 16:10:37 · 1151 阅读 · 0 评论 -
严格模式use strict
1. 严格模式(strict mode),只有在代码首部加入字符串 "use strict"。必须在全局首部或函数首部即首部指其前面没有任何有效js代码除注释,否则无效。2.Object.preventExtensions(obj),ES5新语法,IE9+,使对象obj不可拓展,即添加新的属性或方法不成功,但是不会报错严格模式下,添加新的属性或方法会报错。3.caller和cal...原创 2019-07-24 16:33:32 · 388 阅读 · 0 评论 -
深入理解call、apply、bind
Function原型上有四个方法,其中一个是toString方法,其他三个分别是call、apply和bind1、我们知道toString方法是对象的方法,但是每个类型的数据,都重写了该方法。函数类型也重写了该方法。Function.prototype.toString() 可以得到函数的字符串形式。2、先从call聊起:Function.prototype.call 改变this指向func.call(thisArg,arg1,arg2,...)call方法让this指向th...原创 2020-11-13 17:38:44 · 238 阅读 · 0 评论 -
离开页面时触发的事件
beforeunload事件当浏览器窗口关闭或者刷新时,会触发beforeunload事件。当前页面不会直接关闭,可以点击确定按钮关闭或刷新,也可以取消关闭或刷新。HTML规范指出作者应该使用Event.preventDefault()而非Event.returnValue,然而,不是所有浏览器都支持这么做。 window.onbeforeunload = function (e) { e = e || window.event; ...原创 2020-10-23 17:27:47 · 3556 阅读 · 0 评论 -
页面加载的事件
Document.readyState属性描述了document的加载状态。语法:var string = document.readyState;一个文档的readyState可以是以下之一:loading(正在加载):document仍在加载。interactive(可交互):文档已被解析,"正在加载"状态结束,但是诸如图像,样式表和框架之类的子资源仍在加载。complete(完成):文档和所有子资源已完成加载。表示load状态的事件即将被触发。ready...原创 2020-10-23 16:28:05 · 1396 阅读 · 0 评论 -
遍历对象:一文搞懂for in、for of、Object.keys()、Object.getOwnPropertyNames()、Object.getOwnPropertySymbols()的区别
一、对象属性理解比如:数组中的length属性,描述符对象enumerable值为false,隐式属性。看下正常的数组和对象的属性: var arr = ["a", true, 3] var obj = { name: "zhu", age: 24 } console.log(arr) console.log(obj)二、关于遍历1、for...in循环原创 2020-10-21 17:03:33 · 737 阅读 · 0 评论 -
gulp:流处理——stream-combiner2
这是流s3的流组合器的续篇。将管道转换为单个流,Combine返回一个流,该流 向第一个流进行写入,并从最后一个流进行读取。监听“error”将从管道内的所有流接收错误。使用:var combine = require('stream-combiner2')gulp.task("revCSS", () => { let combined = combiner.obj([ gulp.src(config.css.SRC), gulpif( .原创 2020-09-01 19:26:54 · 231 阅读 · 0 评论 -
运算符优先级
下面的表将所有运算符按照优先级的不同从高(20)到低(1)排列。优先级 运算类型 关联性 运算符 20 圆括号 n/a(不相关) ( … ) 19 成员访问 从左到右 … . … 需计算的成员访问 从左到右 … [ … ] new(带参数列表) n/a new … ( … ) 函数调用 从左到右 … (…) 可选链(Optional chaining) 从左到右 ?. ...转载 2020-09-01 16:53:04 · 408 阅读 · 0 评论 -
JSON对象
1、JSON这个对象除了parse()和stringify()方法,本身并没有其他作用,也不能被调用或者作为构造函数调用。JSON是一种语法,用来序列化对象、数组、数值、字符串、布尔值和null。JavaScript不是JSON,JSON也不是JavaScript。兼容IE82、JSON.parse()方法用来解析JSON字符串,构造由字符串描述的JavaScript值或对象。提供可选的reviver函数用以在返回之前对所得到的对象执行变换(操作)。如果指定了reviver...原创 2020-08-25 15:35:55 · 353 阅读 · 0 评论 -
Number类型
Number数字类型1、Number对象由Number()构造器创建。JavaScript的Number类型为双精度IEEE 754 64位浮点类型。最近出了stage3BigInt任意精度数字类型,已经进入stage3规范。2、关于number对象和number字面量的区别:new Number(value); var a = new Number('123'); // a === 123 is falsevar b = Number('123'); // b === 123 i...原创 2020-08-25 11:27:21 · 351 阅读 · 0 评论 -
内置日期对象Date
unix时间戳是从1970年1月1日(UTC/GMT的午夜)开始所经过的秒数,不考虑闰秒。在大多数的UNIX系统中UNIX时间戳存储为32位,这样会引发2038年问题或Y2038。UTC协调世界时协调世界时,又称世界统一时间、世界标准时间、国际协调时间。由于英文(CUT)和法文(TUC)的缩写不同,作为妥协,简称UTC。原子时:IAT(international atomic time),以物质的原子内部发射的电磁振荡频率为基准的时间计量系统。世界时UT[1]即格林尼治[1]...原创 2020-08-24 17:18:14 · 276 阅读 · 0 评论 -
String字符串方法
字符串的方法都不会改变原字符串1、charAt()方法从一个字符串中返回指定的字符。str.charAt(index)字符串中的字符从左向右索引,第一个字符的索引值为 0,最后一个字符(假设该字符位于字符串 stringName 中)的索引值为stringName.length - 1。如果指定的 index 值超出了该范围,则返回一个空字符串。...原创 2020-08-19 15:09:16 · 393 阅读 · 0 评论 -
JavaScript的位操作符
按位与( AND) a & b 对于每一个比特位,只有两个操作数相应的比特位都是1时,结果才为1,否则为0。 按位或(OR) a | b 对于每一个比特位,当两个操作数相应的比特位至少有一个1时,结果为1,否则为0。 按位异或(XOR) a ^ b 对于每一个比特位,当两个操作数相应的比特位有且只有一个1时,结果为1,否则为0。 按位非(NOT) ~ a 反转操作数的比特位,即0变成1,1变成0。 左移(Left shift) a原创 2020-08-03 22:25:56 · 94 阅读 · 0 评论 -
内置对象Math
Math内置对象Math是一个内置对象,它拥有一些数学常数属性和数学函数方法。Math不是一个函数对象。Math用于Number类型。它不支持BigInt。注意很多Math函数都有一个精度,而且这个精度在不同实现中也是不相同的。这意味着不同的浏览器会给出不同的结果,甚至,在不同的系统或架构下,相同的 JS 引擎也会给出不同的结果!常用方法Math.abs(x)返回一个数的绝对值。Math.ceil(x)返回大于一个数的最小整数,即一个数向上取整后的值...原创 2020-07-27 14:29:32 · 317 阅读 · 0 评论 -
事件循环和任务队列
终于理解了事件循环和事件队列,怎么说呢,有了ES5的Promise后,需要我重新思考事件的执行顺序以及机制。 console.log(1); const p = new Promise((resolve, reject) => { // 执行器函数 同步回调 console.log(Promise.resolve().then(function () { console.log(5); })); $.get("https://.原创 2020-07-16 20:22:52 · 290 阅读 · 0 评论 -
布尔值Boolean
1、Boolean()方法和!!的结果是一样的,都可以来判断某个值是truth或2、== 比较的时候,会调用值的toString方法,根据值的类型调用该值原型上的toString方法,进行比较。toSting不会修改原值。原创 2020-06-28 17:13:07 · 307 阅读 · 0 评论 -
数组练习题
1、不使用for循环,实现一个方法,传入m n两个参数,返回一个长度为m,每项为n的数组(1)递归,使用递归也特别注意return的使用。 function func(m, n) { if(typeof m !== "number" && m <= 0){ return arr; }else { arr[arr.length] = n;原创 2020-06-24 15:15:38 · 592 阅读 · 0 评论 -
instanceof
instanceof运算符用于检测构造函数的prototype属性(构造函数原型)是否出现在某个实例对象的原型链上。instanceof运算符用来检测constructor.prototype是否存在于参数object的原型链上。// 定义构造函数function C(){} function D(){} var o = new C();o instanceof C; // true,因为 Object.getPrototypeOf(o) === C.prototyp...原创 2020-06-24 13:45:08 · 253 阅读 · 0 评论 -
包装类对象
字符串、布尔值、数字都是可以调用方法的,尤其是字符串,有很多的方法可以调用,那么他们的原理是什么呢?1、字符串的原型上的方法var str = new String(); 空字符串实例该实例的原型上的方法有:2、布尔值的原型上的方法var flag = new Boolean(); 值为false的布尔类型我们知道布尔类型也重写了toString方法 var flag = true; console.log(flag.toString(.原创 2020-06-23 15:55:55 · 310 阅读 · 0 评论 -
new操作符;构造函数的继承;构造函数的this指向;函数执行时的this指向
1、new操作符之前的修改原型申明一个函数的时候 ,该函数的prototype属性指向原型,且原型中默认是constructor属性,指向该函数。注意修改函数的prototype,是修改引用指向,还是修改了对象本身。修改引用指向,就是修改了原型,指向一个新的对象: function Foo(){ this.name = "foo"; this.age = 24 } console.log(Foo.原创 2020-06-22 16:44:21 · 751 阅读 · 0 评论 -
继承与原型链
在 ES2015/ES6 中引入了class关键字,但那只是语法糖,JavaScript 仍然是基于原型的,它是动态的。继承:每个实例对象( object )都有一个私有属性(称之为 __proto__ 兼容性:IE11,不是标准)指向它的构造函数的原型对象(prototype)。该原型对象也有一个自己的原型对象( __proto__ ) ,层层向上直到一个对象的原型对象为null。根据定义,null没有原型,并作为这个原型链中的最后一个环节。几乎所有 JavaScript 中的对象都...转载 2020-06-22 15:03:58 · 142 阅读 · 0 评论 -
Object对象原型
4、对象原型的操作(1)Object.setPrototypeOf() ES6 IE11设置对象的原型(即内部 [[Prototype]] 属性)Object.setPrototypeOf()方法设置一个指定的对象的原型 ( 即, 内部[[Prototype]]属性)到另一个对象或 null。当调用该方法 的时候,如果对象的[[Prototype]]是不可扩展(通过Object.isExtensible()查看),就会抛出TypeError异常。如果prototype参数不是一个对...原创 2020-06-20 14:53:26 · 1176 阅读 · 0 评论 -
Object.freeze() 方法冻结对象、Object.seal()方法封闭对象、Object.preventExtensions()方法象不可扩展
3、对象的设置(1)Object.isExtensible()和Object.preventExtensions() ES5Object.isExtensible()方法判断一个对象是否是可扩展的(是否可以在它上面添加新的属性)。返回一个Boolean值。默认情况下,对象是可扩展的:即可以为他们添加新的属性。以及它们的__proto__属性可以被更改。Object.preventExtensions,Object.seal或Object.freeze方法都可以标记一个对象为不可扩展(...原创 2020-06-20 14:23:05 · 361 阅读 · 0 评论