JavaScript
文章平均质量分 82
iuukai
种一棵树最好的时间是十年前,其次是现在。
展开
-
【JavaScript】《整体代码script》为何是一个宏任务
JavaScript是一门单线程的语言,因此,JavaScript在同一个时间只能做一件事,单线程意味着,如果在同个时间有多个任务的话,这些任务就需要进行排队,前一个任务执行完,才会执行下一个任务。有很多小伙伴不明白【整体代码script】为何是一个宏任务,为了让大家更好理解这里举个栗子…例子①<!-- 脚本 1 --><script> // 同步 console.log('start1') // 异步宏 setTimeout(() => console.l.原创 2021-07-14 23:26:41 · 2918 阅读 · 5 评论 -
【JavaScript】fetch的模拟封装(基于promise封装的ajax方法)
近期使用worker线程,发现worker内部无法调用fetch方法,但是可以使用原生的XMLHttpRequest对象、Headers对象、Request对象、Response对象、URLSearchParams对象,所以就模拟封装了一个可以在worker线程调用的函数。目录一、源码二、使用方法1. 在主线程中使用2. 在 Worker 线程中使用三、Some Tips四、获取 XML 数据XML 部分1. 主线程读取 XML 数据2. Worker 线程读取 XML 数据一、源码/** * [基原创 2021-01-09 03:38:42 · 636 阅读 · 0 评论 -
【HTML5 + JavaScript】点击或拖拽上传图片,显示缩略图
传送门: 1. JavaScript 教程 / 浏览器模型 / ArrayBuffer 对象,Blob 对象 2. HTML5 - 通过拖拽读取图片文件(将电脑中图片拖入浏览器并显示) 3. js实现file上传图片在div中显示与点击div触发file表单<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title..原创 2020-12-06 03:24:23 · 1764 阅读 · 0 评论 -
【JavaScript】fetch()函数、URLSearchParams对象
传送门: 1. JavaScript 教程 / 浏览器模型 / Location 对象,URL 对象,URLSearchParams 对象 2. MDN - 使用 Fetch 2. Fetch - 数据交互方式 3. 详解fetch的使用方法及如何接收JS传值文章目录一、原生ajax - 数据交互二、fetch - 数据交互三、使用 URLSearchParams 对象四、其它接口对象的使用server.php<?php echo $_POST['foo'] + $_POST..原创 2020-12-06 01:00:14 · 701 阅读 · 0 评论 -
【JavaScript】加载外部脚本使用的协议
来源:JavaScript 教程 / 浏览器模型 / 浏览器模型概述 / 2.5 加载使用的协议1. 默认 http 协议<script src="javascript.js"></script>2. 默认 https 协议<script src="https://javascript.js"></script>3. 继承页面协议<script src="//javascript.js"></script>...原创 2020-10-30 17:59:39 · 320 阅读 · 0 评论 -
【JavaScript】事件代理
1. 非事件代理【影响性能】<!DOCTYPE html><html><head> <meta charset="utf-8" /> <title></title></head><body> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</原创 2020-10-30 16:01:30 · 92 阅读 · 0 评论 -
【JavaScript】setTimeout() 为何会连续打印多个“5”?(执行机制)
引文:JavaScript 教程 / 异步操作 / 定时器【你会学到更多此类知识,更深入理解 setTimeout()】for (var i = 0; i < 5; i++) { setTimeout(function() { console.log(i); }, 1000);}你以为:// 每秒打印// 0// 1// 2// 3// 4实际:// 首先执行for (var i = 0; i < 5; i++) {} // for 比 setTiemout(原创 2020-10-26 19:16:31 · 622 阅读 · 0 评论 -
【JavaScript】setTimeout 与 setInterval 的细节区别(存在的误差区别)
来源:JavaScript 教程 / 异步操作 / 定时器 / 2. setInterval()1. setTimeout() 指定某个函数或某段代码,在多少毫秒之后执行;2. setInterval() 指定的是“开始执行”之间的间隔,并不考虑每次任务执行本身所消耗的时间;示例对比setTimeout():【发现执行时间比较长,主要是因为它执行完当前代码后,才开始延迟时间去执行下一个循环】var timer = setTimeout(function f() { if (i ===原创 2020-10-26 02:51:13 · 239 阅读 · 0 评论 -
【JavaScript】对象的拷贝
来源:JavaScript 教程 / 面向对象编程 / Object 相关的方法 / 10. 对象的拷贝 如果要拷贝一个对象,需要做到下面两件事情: 1. 确保拷贝后的对象,与原对象具有同样的原型; 2 确保拷贝后的对象,与原对象具有同样的实例属性;function copyObject(orig) { var copy = Object.create(Object.getPrototypeOf(orig)); copyOwnPropertiesFrom(copy, orig); r转载 2020-10-23 00:57:20 · 123 阅读 · 0 评论 -
【JavaScript】获取对象属性
来源:JavaScript 教程 / 面向对象编程 / Object 对象的相关方法 / 9. in 运算符和 for…in 循环获取自身的可枚举属性【Object.keys()】var obj = {a:1};var arr = [0,1,2];Object.keys(obj); // ["a"]Object.keys(arr); // ["0", "1", "2"]获取自身或继承的可枚举属性【Object.getOwnPropertyNames()】var obj = {a:1转载 2020-10-23 00:47:55 · 182 阅读 · 0 评论 -
【JavaScript】模拟 Object.create()
来源:JavaScript 教程 / 面向对象编程 / Object 相关的方法 / 3. Object.create()function createObj(o) { // 创建子引用类型(临时) var F = function() {}; // 将 o 的实例成员赋值给 F() 的原型对象 F.prototype = o; // 返回子类的一个实例 return new o;}相关:寄生式继承...原创 2020-10-22 23:17:14 · 927 阅读 · 0 评论 -
【JavaScript】模拟 new 命令
JavaScript教程 / 面向对象编程 / 实例对象与 new 命令 / new 命令的原理1. 示范// new 命令简化的内部流程,可以用下面的代码表示function _new(/* 构造函数 */ constructor, /* 构造函数参数 */ params) { // 将 arguments 对象转为数组 var args = [].slice.call(arguments); // 取出构造函数 var constructor = args.shift(); // 创原创 2020-10-22 10:02:45 · 79 阅读 · 0 评论 -
【JavaScript】判断数组是否存在某元素
1. 选择何种方法看具体需求2. 【JavaScript】调用函数时,避免无参传入被识别成 undefined文章目录一、百度的大多数方法1. 全等运算符2. indexOf()二、利用正则(数据对应的字符串值也会进行检测)一、百度的大多数方法 注意: 1. 无法检测 NaN 2. 无法检测该值对应的字符串值1. 全等运算符勿使用相等运算符:undefined == null; // trueArray.prototype.contains = function(val) { /原创 2020-10-16 13:56:52 · 1179 阅读 · 1 评论 -
【JavaScript】调用函数时,避免无参传入被识别成 undefined
关于低版本兼容:JSON.stringify() 的模拟未处理:function fn(val) { if (val === undefined) return false; return true;}fn(); // false处理后:function fn(val) { var check = []; for (var i = 0; i<arguments.length;i++) { check.push(arguments[i]); } if (JS原创 2020-10-16 13:10:49 · 976 阅读 · 0 评论 -
【JavaScript】避免this指向window的解决方法
1. 【多层this】this赋值给一个变量未处理:var o = { f1: function () { console.log(this); // Object var f2 = function () { console.log(this); // Window }(); }}o.f1();处理后:var o = { f1: function () { console.log(this); // Object原创 2020-10-16 12:21:59 · 406 阅读 · 1 评论 -
【JavaScript】避免未使用new命令调用构造函数的三种方法
传送门:JavaScript 教程 / 面向对象编程 / 实例对象与 new 命令 / new 命令的原理1. 严格模式function Person(name, age) { 'use strict'; this._name = name; this._age = age;}2. 内部判断function Person(name, age) { if (!(this instanceof Person)) { return new Person(name, age); //原创 2020-10-16 08:30:26 · 1238 阅读 · 0 评论 -
【JavaScript】JSON.stringify() 第二参数防坑(通过数组匹配筛选对象属性)
JavaScript 教程 / 标准库 / JSON 对象 / JSON.stringify() / 第二个参数1. 通过数组元素筛选对象属性Object.prototype.screen = function(arr) { var result = JSON.stringify(this, arr); return JSON.parse(result);}简单的数据还是可以处理的:...原创 2020-10-15 20:15:17 · 553 阅读 · 0 评论 -
【JavaScript】获取多项数组的交集
注意: 1. 不支持引用类型数据(存在引用类型数据的数组应该不需要求交集吧); 2. 不同数据类型但同值的数据,会识别为相同的元素,类似相等运算符; 3. 区分了 null 与 0,即:A数组的 null 与 B数组的 0 不能成为交集元素; 4. NaN 与 'NaN' 或者它本身,都进行了处理,使它们能够“相等”; 5. 关于返回的交集数组的元素数据类型:除非只能为字符串,否则都不会以字符串类型返回关于NaN的处理:一、forEach() 方法/** * [interse...原创 2020-10-14 05:37:06 · 777 阅读 · 0 评论 -
【JavaScript】删除数组元素
一、不影响原数组长度1. deletevar arr = [0, 1, 2, 3, 4];delete arr[arr.length-1];arr; // [0, 1, 2, 3, 空]2. slice()var arr = [0, 1, 2, 3, 4];var newArr = arr.slice(0, 4);newArr; // [0, 1, 2, 3]arr; // [0, 1, 2, 3, 4]3. map()var arr = [0, 1, 2, 3, 4];va原创 2020-10-10 19:25:32 · 342 阅读 · 0 评论 -
【JavaScript】小细节防坑积累(持续更新)
文章目录1. 使用"逻辑或"设置默认值1. 使用"逻辑或"设置默认值此方法不会识别数值 0:function fn(val) { val = val || '默认值'; return val;}fn(0); // '默认值'应改为三元表达式:function fn(val) { val = (val === val ? val : '默认值'); return val;}fn(0); // 0...原创 2020-10-03 05:47:56 · 160 阅读 · 0 评论 -
【JavaScript】插入数组元素、数组的拼接
1. 直接赋值var arr = [];for (var i = 0; i < 5; i++) { arr[i] = i;}arr; // [0, 1, 2, 3, 4]2. push()var arr = [];for (var i = 0; i < 5; i++) { arr.push(i);}arr; // [0, 1, 2, 3, 4]3. unshift()var arr = [];for (var i = 0; i < 5; i++) {原创 2020-10-01 19:13:33 · 281 阅读 · 0 评论 -
【JavaScript】通过递归,计算斐波那契数列
JavaScript 教程 / 数据类型 / 函数 / 1.3 圆括号运算符,return 语句和递归function fib(num) { if (num === 0 || num === 1) return num; return fib(num-2) + fib(num-1);}fib(6); // 8原创 2020-09-23 15:41:49 · 574 阅读 · 0 评论 -
【JavaScript】防抖、节流、分时
1. js防抖和节流2. 函数防抖和节流3. JS的防抖与节流4. JavaScript专题之跟着underscore学防抖5. JS函数节流和分时函数文章目录一、防抖1-1. 【非立即执行】1-2. 【非立即执行】2. 【立即执行】3. 【二合一】二、节流1. 【时间戳】2. 【定时器】3-1. 【二合一】3-2. 【二合一】三、分时一、防抖1-1. 【非立即执行】<!DOCTYPE html><html><head> <meta cha原创 2020-09-23 11:35:46 · 140 阅读 · 0 评论 -
【inline、inline-block间的空隙】
文章目录一、正确认识 “空隙”(空白符)1. 你在使用 inline、inline-block 元素时,是否经常遇到过这个问题?2. 为何会产生"空隙"?3. 如何消除这些"空隙"?4. 题外补充二、通过 DOM 节点来认识"空隙"(空白节点)1. DOM节点相关知识2. 文本节点的获取3. 遍历删除空白节点的操作,会连同其他非空白文本也一并删除掉一、正确认识 “空隙”(空白符)1. 你在使用 inline、inline-block 元素时,是否经常遇到过这个问题?明明没有设置 margin、bo原创 2020-09-20 11:11:03 · 545 阅读 · 0 评论 -
【JavaScript】数值精度与数值范围
文章目录一、整数与浮点数二、精度丢失1. 组成2. 二进制表示3. 如何解决三、整数精度四、数值范围1. 正向溢出与负向溢出2. 利用 Number 对象返回具体最大值和最小值一、整数与浮点数JavaScript 内的数字没有 int(整数型) 与 float(浮点型) 之分,即 1 与 1.0 相同,为同一个数。JavaScript 内所有数字都是浮点数,若遇到需要整数才能运算的情况,JavaScript 会自行将64位浮点数转成32位整数,再进行运算,而这个转换过程,便导致了精度丢失。0.1 +原创 2020-09-10 02:26:46 · 3685 阅读 · 0 评论 -
【HTML5】Web SQL Database【已废弃】(可能是最全详解,含各种参数介绍,以及一些SQL语句)
在阅读本篇文章之前,请先注意以下几点声明: 1. 原文: Beware. This specification is no longer in active maintenance and the Web Applications Working Group does not intend to maintain it further. 译文: 注意。此规范不再处于主动维护中,Web应用程序工作组不打算进一步维护它。 2. 原文: This document was on th原创 2020-07-16 03:35:42 · 2808 阅读 · 0 评论 -
【HTML5 + API】 地理定位(Geolocation)之【Google 地图 API 用不了?不如换国内地图 API !!】
文章目录前提百度地图 API (简单教程)1. 获取经纬度2. 处理错误和拒绝3. 在地图中显示结果注意!!!!!前提 这几天在菜鸟学习 HTML5 教程,学到地理定位,发现一个很严重的问题,Google 地理位置服务早已不提供给我国,然,各大教程的代码和方法,都是由 Google 服务支持的,那不就不可用了么? 菜鸟教程:HTML5 Geolocation(地理定位) 我的学习方法是必须照着敲一遍,然后再各大浏览器运行测试一遍,若都可兼容运行那我才会去消化掉这些知识。所以,我把代码放去 E原创 2020-07-11 10:00:01 · 1877 阅读 · 0 评论 -
【JavaScript】localStorage 相关知识
localStorage 与 sessionStorage localStorage 与 sessionStorage 的唯一区别就是 localStorage 属于永久性存储,而 sessionStorage 属于当会话结束的时候,sessionStorage 中的键值对会被清空。文章目录localStorage 的优势localStorage 的局限localStorage 的优势localStorage 拓展了 Cookie 的 4k 限制;localStorage 可以将第一次请求转载 2020-07-07 01:08:09 · 1155 阅读 · 0 评论 -
为何 navigator.appName 的值都是 netscape?
来源:https://developer.mozilla.org/zh-CN/docs/Web/API/NavigatorID/appName英文: The NavigatorID.appName property returns the name of the browser. The HTML5 specification also allows any browser to return "Netscape" here, for compatibility reasons. Note: Do.转载 2020-07-07 00:15:05 · 1238 阅读 · 0 评论 -
【JavaScript String对象方法】字符串片段提取:slice()、substring()、substr()
当参数相同时,返回结果是否相同 slice() substring() substr() 单正参 ✅ ✅ ✅ 单负参 ✅ ❌(负参转换为 0,返回全字符串) ✅ 双正参 ✅ ✅ ❌ 双负参 ✅ null(负参转换为 0,返回空字符串) null(第二参不能为负参,转换为 0,返回空字符串) 左正右负 ✅ ❌(负参转换为 0) null(第二参不能为负参,转换为 0..原创 2020-07-04 02:43:03 · 615 阅读 · 0 评论 -
【JavaScript 面向对象编程——《原型继承》】计数器例子
相关文章导航 【JavaScript 面向对象编程——《深浅拷贝》】计数器例子 【JavaScript 面向对象编程——《设计模式》】计数器例子 ????【JavaScript 面向对象编程——《原型继承》】计数器例子????文章目录...原创 2020-07-01 22:45:38 · 215 阅读 · 0 评论 -
【JavaScript 面向对象编程——《设计模式》】计数器例子
相关文章导航 【JavaScript 面向对象编程——《深浅拷贝》】计数器例子 ????【JavaScript 面向对象编程——《设计模式》】计数器例子???? 【JavaScript 面向对象编程——《原型继承》】计数器例子文章目录一、模块模式优缺点二、工厂模式优缺点三、构造函数模式优缺点四、原型模式优缺点五、混合模式(构造函数模式 + 原型模式)优缺点一、模块模式&原创 2020-07-01 22:36:54 · 240 阅读 · 1 评论 -
【JavaScript 面向对象编程——《深浅拷贝》】计数器例子
相关文章导航 ????【JavaScript 面向对象编程——《深浅拷贝》】计数器例子???? 【JavaScript 面向对象编程——《设计模式》】计数器例子 【JavaScript 面向对象编程——《原型继承》】计数器例子关于深浅拷贝:【JavaScript 浅拷贝】Object.create()、Object.assign()、扩展运算符【JavaScript 深拷原创 2020-07-01 22:16:19 · 159 阅读 · 0 评论 -
【JavaScript 深拷贝】$.extend() 方法、自封装函数(进来拿代码套用啦!)
搜集来源:(代码中的同类变量已被我修改优化为同名变量)【JS】深拷贝与浅拷贝的区别,实现深拷贝的几种方法(递归一)js实现深拷贝(递归二、树广度一)JS实现深拷贝(递归一、树深度一)深度优先遍历,广度优先遍历实现对象的深拷贝(树深度二、树广度二)关于赋值、浅拷贝、深拷贝的区别文章目录【jQuery】extend()方法递归函数(一)递归函数(二)【DFS】树深度优先遍历(一)【DFS】树深度优先遍历(二)【BFS】树广度优先遍历(一)【BFS】树广度优先遍历(二)【jQuery】e原创 2020-07-01 21:01:04 · 604 阅读 · 0 评论 -
【JavaScript 浅拷贝】Object.create()、Object.assign()、扩展运算符
文章目录【ES5】Object.create() 方法【ES6】Object.assign() 方法【ES6】对象展开运算符 "..."【ES5】Object.create() 方法第一层嵌套层原对象未被修改,而第二层开始,原对象被影响(计数器例子只有一层)【ES6】Object.assign() 方法第一层嵌套层原对象未被修改,而第二层开始,原对象被影响【ES6】对象展开运算符 “…”第一层嵌套层原对象未被修改,而第二层开始,原对象被影响...原创 2020-07-01 19:39:54 · 643 阅读 · 0 评论 -
【JavaScript 例题】函数作用域、参数传递、this指向
例1:function fn(a, b) { console.log(b);}fn(11); // undefined例1中,函数传入的值,对应定义的参数位置,所以 ‘11’ 是 a 的参数值,b 则没有值传入。打印 ‘undefined’ 是因为函数隐式声明了 a, b 变量,而找不到 b 值。即:fn(a, b) ==> function fn(a, b) { var a,b; }【局部变量】例2:function fn(a, b) { console.log(b);原创 2020-06-20 19:22:00 · 795 阅读 · 0 评论 -
【闭包与直接 return 的区别】
直接 returnvar a = 0;function fn() { var a = 12; return a;}var i = fn;console.log(i());console.log(a);// 12// 0闭包var a = 0;function fn() { var a = 12; return function() { return a; }}var i = fn();console.log(i());console.log(a);//原创 2020-06-20 01:37:47 · 1416 阅读 · 0 评论 -
【函数相关写法整合(非理论)】普通函数、匿名函数、自执行函数、封闭空间、闭包、闭包内存释放、闭包试题
文章目录普通函数匿名函数【IIFE】立即执行函数/封闭函数(特点:匿名/自执行/一次性)【歧义】自执行函数【歧义】封闭空间闭包(函数嵌套函数)闭包试题普通函数函数声明function fnA() { var a = 'a'; console.log(a);}//需要时调用fnA(); // 'a'fnA(); // 'a'函数表达式var fnB = function() { var b = 'b'; console.log(b);}//需要时调用fnB(); /原创 2020-06-18 20:28:05 · 307 阅读 · 0 评论 -
setTimeout() 与 setInterval() 的区别及使用
Test1<!DOCTYPE html><html><head> <meta charset="utf-8" /> <title></title> <script type="text/javascript"> //变量初始化 var num1 = 0; var num2 = 0; var clock1; var clock2; //定义启动器 function work(ele)原创 2020-06-14 01:41:01 · 5133 阅读 · 1 评论 -
原生js+ajax实现获取html文件指定内容部分
request.html<!--request.html--><!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> p{text-align: center;background: saddlebrown;color: white;} </style> </head&原创 2020-06-07 14:11:10 · 1016 阅读 · 0 评论