![](https://img-blog.csdnimg.cn/20190918140053667.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
JavaScript
文章平均质量分 66
js
可达鸭头上站青蛙
至妙之要,先存后忘。
展开
-
循环异步调取接口使用数组promiseList保存,Promise.all(promiseList)获取不到数组内容,then()返回空数组
技术栈的项目中,因为上传文件的接口是单文件上传,当使用批量上传时,只能循环调取接口;但是发现打印出的 result 总是空数组。debugger 代码的执行顺序,应该是异步的原因导致的。为自定义字段,上传服务器成功后返回的,其他字段为。我使用 for 循环调取接口,然后定义了。下面上传了一张图片文件格式;上面代码的执行顺序是,先执行。对象添加一次,然后使用。其实是一个空数组,所以。最终返回的是一个空数组。组件所支持的自有字段。循环,然后直接执行了。都是同步代码,所以在。原创 2024-01-17 18:18:39 · 1071 阅读 · 0 评论 -
前端路由hash模式以及history模式详解
在前后端分离的项目中,前端一般使用 SPA 单页面应用模式来开发项目。那么,什么是 SPA 呢?单页Web应用(single page web application,SPA),就是只有一张Web页面的应用,是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序。单页面应用就是改变页面的url地址,不会向后台发送请求,而是通过前端路由,动态渲染页面组件,url地址的改变与后台无关。hash 模式history 模式对比hash 模式history 模式url 显示。原创 2023-04-27 13:22:10 · 8142 阅读 · 3 评论 -
async和await的用法以及原理分析
大家好,这篇文章让我们来了解一下 async/await 语法糖的用法以及实现原理。async/await 语法糖其实就是为了简化 promise.then 繁琐的链式调用而产生的,为了让代码更简洁,书写更方便。原创 2023-03-15 19:22:13 · 1019 阅读 · 0 评论 -
throw语句以及throw “error“ 和 throw new Error(“error“)的区别
throw 语句用来抛出一个用户自定义的异常。当前函数的执行将被停止(throw 之后的语句将不会执行),并且控制将被传递到调用堆栈中的第一个 catch 块。如果调用者函数中没有 catch 块,程序将会终止。语法:throw 一个表达式 || 对象// 抛出了一个值为字符串的异常 throw 42;// 抛出了一个值为整数 42 的异常 throw true;// 抛出了一个值为 true 的异常 console . log("aaa");throw语句抛出的异常可以被语句捕获。原创 2023-03-07 10:32:09 · 2117 阅读 · 0 评论 -
js中强制类型转换Number、parseInt、parseFloat、Boolean、String、toString的使用
最近在巩固 js 的基础知识,今天复习到了 js 中的数据类型转换知识点,然后整理一下。原创 2023-02-23 14:56:03 · 1831 阅读 · 0 评论 -
JS中如何将一个普通对象转换为可迭代对象,并且可使用for...of迭代对象,内含手写一个简单的迭代器
如何对 colorObj 对象进行for...of迭代获取其中的值呢?如果直接使用for...of。原创 2023-02-22 16:43:49 · 1440 阅读 · 0 评论 -
ES6中Promise、async、await面试题
学习过程中遇到的一些基础的Promise、async、await面试题整理。原创 2023-02-20 18:38:32 · 923 阅读 · 0 评论 -
js中的隐式类型转换有哪些
在前端js这门语言中,不仅存在着显示类型转换,还存在许多隐式类型转换,让人头大。为了减少小伙伴们的踩坑,今天总结了一些常见的隐式类型转换规则,让我们来看看有哪些。原创 2023-02-20 15:32:16 · 1311 阅读 · 0 评论 -
JS立即执行函数IIFE
当想进行函数调用时,我们需要使用能够求值得到函数的表达式,其后跟着一对函数调用括号,括号内包含参数。不过用于被括号调用的表达式不必只是一个简单的标识符,它可以是任何能够求值得到函数的表达式。例如,指定一个求值得到函数的表达式的最简单方式是使用函数表达式。去掉括号,解析器便会认为这是一个函数声明,而不是表达式,因为函数声明必须有一个名称,而此处没有,所以解析到function关键字之后便会报错;为了避免错误,才添加小括号,为JavaScript解析器指明这是函数表达式,而不是函数声明。原创 2023-02-01 18:28:29 · 124 阅读 · 0 评论 -
JS中函数声明与函数表达式的区别
JavaScript中的函数是第一类对象,除此以外也就意味着它们可以通过字面量创建,可以赋值给变量和属性,可以作为传递给其他函数的参数或函数的返回值。阅读下面的代码片段,根据函数类型进行分类(函数声明、函数表达式和箭头函数)。这两种技术非常相似,有时甚至难以区分,它们之间还是存在着微妙的差别。JavaScript 中定义函数最常用的方式是。JavaScript 定义函数的最基本方式是。原创 2023-02-01 16:49:30 · 866 阅读 · 1 评论 -
ES6箭头函数
由于JavaScript中会使用大量函数,增加简化创建函数方式十分有意义。箭头函数是函数表达式的简化版。执行了如下的代码片段后,变量 tom 和 jerry的值分别是什么?原创 2023-02-01 15:59:47 · 83 阅读 · 1 评论 -
防抖(debounce)与节流(throttle)函数的应用
防抖函数的作用是当短期内有大量的事件触发时,只会执行。原创 2022-11-15 17:12:49 · 511 阅读 · 0 评论 -
计算机存储单位字节(Byte)以及单位之间的转换
字节(Byte)是计算机信息技术用于计量存储容量的一种计量单位,也表示一些计算机编程语言中的数据类型或语言字符。bit意为“位”或“比特”,是计算机运算的基础,属于二进制的范畴;Byte意为“字节”,是计算机文件大小的基本计算单位;这两者应用的场合不同。通常用bit来作数据传输的单位,因为物理层,数据链路层的传输对于用户是透明的,而这种通信传输是基于二进制的传输。在应用层通常是用 Byte 来作单位,表示文件的大小,在用户看来就是可见的数据大小。比如一个字符就是1Byte,如果是汉字,则是2Byte。原创 2022-10-25 17:05:15 · 5960 阅读 · 2 评论 -
vue3项目启动后访问http://localhost:3000/,发现页面不是vue3项目首页,都是serviceWorker惹的祸
新建vue3项目,启动后访问http://localhost:3000/,发现页面不是vue3项目首页原创 2022-10-08 09:40:46 · 1879 阅读 · 1 评论 -
字符编码中ASCII、Unicode和UTF-8的区别
字符编码ASCII、Unicode、UTF-8编码的区别原创 2020-07-11 16:11:41 · 1462 阅读 · 0 评论 -
原生js写一个简易版进度条,带百分比数值显示
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>progressB.原创 2021-07-29 15:04:35 · 1649 阅读 · 0 评论 -
import导入类时报错:Uncaught SyntaxError: Unexpected identifier
Promise.jsexport default class Promise{}index.jsimport Promise from './Promise.js' // Uncaught SyntaxError: Unexpected identifierindex.html<script src="./index.js"></script>查找到解决方案为:在index.html文件中,script标签中添加 type="module" 属性。<sc原创 2021-01-12 15:27:59 · 2553 阅读 · 0 评论 -
js面试题-对象添加length属性伪装成数组进行操作
以下代码执行后打印的结果是什么?var obj = { '2': 3, '3': 4, 'length': 2, 'splice': Array.prototype.splice, 'push': Array.prototype.push,}obj.push(1);obj.push(2);console.log(obj)先看一下未进行任何操作的obj:操作后打印结果如下:解析:...原创 2021-01-12 15:05:22 · 836 阅读 · 0 评论 -
js中使用闭包封装一个安全数据类型检测方法[object Type]
在javascript使用typeof操作符并不能完全正确检测对象类型,比如:typeof null; // 'object'typeof []; // 'object'typeof new Date(); // 'object'typeof new RegExp(); // 'object'但是,使用Object.prototype.toString方法会返回当前对象的一个字符串类型说明,格式为[object Type],Type为对象类型。例如数组:[object Array],日期:[ob原创 2020-12-16 11:07:23 · 222 阅读 · 2 评论 -
js编程中常用术语-中英对照
语法或词法分析标识符(identifier)[ aɪ'dentɪfaɪər ]标签(label)[ 'leɪbl ]关键字,保留字(keyword,reserved words)[ rɪ'zɜːrvd ]符号(symbol)[ 'sɪmbl ]标记,记号(token)[ 'toʊkən ]数据类型(types,data types)无类型的(untype-)变量(variable)[ 'verɪəbl ]声明(declare)[ dɪ'kler ]赋值(assignment)[ ə's原创 2020-12-06 16:18:10 · 1124 阅读 · 0 评论 -
ES6中使用Set数据结构将对象数组去重
有以下对象数组:const list =[ { name: "张三", age: 18, address: "北京" }, { name: "李四", age: 20, address: "天津" }, { name: "王五", age: 22, address: "河北" }, { name: "张三", age: 18, address: "北京" }, { name: "李四", age: 20, address: "天津" },]其中张三和李四为重复对象;使用Set数据结构去除原创 2020-10-29 09:59:02 · 4901 阅读 · 0 评论 -
关于js中sort排序的用法
关于Array.prototype.sort()方法的使用一直很模糊,今天深入理解一下。一、Sort()默认排序根据《JavaScript高级程序设计》中的介绍:在默认情况下,sort()方法按升序排列数组——即最小的值位于最前面,最大的值排在最后面。为了实现排序,sort()方法会调用每个数组项的toString()转型方法,然后比较得到的字符串,以确定如何排序。即使数组中的每一项都是数值,sort()方法比较的也是字符串,如下所示。var values = [0,1,5,10,15];va原创 2020-10-27 11:31:40 · 3436 阅读 · 0 评论 -
自增自减运算符++与--
自增自减运算符自增(++)自减(–)运算符是一种特殊的算术运算符,在算术运算符中需要两个操作数来进行运算,而自增自减运算符是一个操作数。let a = 10;let b = ++a; // b=11;a=11;let b = ++a; 拆分运算过程为:①a=a+1=11; ②b=a=11, 最后结果为b=11,a=11;let a = 10;let b = a++; // b=10;a=11;let b = a++; 拆分运算过程为:①b=a=10; ②a=a+1=11, 最后结果为b原创 2020-10-21 10:39:29 · 432 阅读 · 0 评论 -
js中使用es6的set数据结构去除数组对象中的重复对象
对象数组去重的思路是将对象序列化为字符串,然后使用set结构去重,最后再反序列化为对象。const arr = [ { name: 'haha', age: 12 }, { name: 'haha', age: 12 }, { name: 'haha', age: 12 } ]; // 序列化去重 const noRepeat = [...new Set(arr.map(item => JSON.s原创 2020-07-23 13:18:10 · 3434 阅读 · 0 评论 -
统一社会信用代码的编码格式以及js正则校验
统一社会信用代码统一社会信用代码正则:/[0-9A-HJ-NPQRTUWXY]{2}\d{6}[0-9A-HJ-NPQRTUWXY]{10}/// 返回值为true或falsefunction isSocialCode(socialCode) { const reg = /[0-9A-HJ-NPQRTUWXY]{2}\d{6}[0-9A-HJ-NPQRTUWXY]{10}/; return reg.test(socialCode);}编码规则统一社会信用代码由国家标准委发布。国家标准原创 2020-06-30 16:19:48 · 19414 阅读 · 15 评论 -
uncaught at _callee TypeError: Invalid attempt to spread non-iterable instance
报错内容如下:错误信息的意思是:未在_callee类型错误捕获:传播非迭代实例的尝试无效出现当前问题的原因:数据格式解析错误,可能在应该使用 {} 的时候使用了 [] ,在应该使用 [] 的时候使用了 {}。index.js:1 uncaught at _callee TypeError: Invalid attempt to spread non-iterable instance ...原创 2020-05-08 10:55:29 · 4575 阅读 · 0 评论 -
js中浅拷贝与深拷贝
浅拷贝是指源对象与拷贝对象的指针指向的内存空间是同一块空间,其中任何一个对象的改动都会对另一个对象造成影响。深拷贝是指源对象与拷贝对象指针指向的内存空间不是同一块空间,相互独立,其中任何一个对象的改动都不会对另外一个对象造成影响。在进入正题之前,不知大家对内存空间了解多少,若是无法区分与。原创 2020-05-05 13:34:03 · 629 阅读 · 1 评论 -
js基础(三):正则方法和支持正则表达式的String对象方法
RegExp对象匹配正则表达式方法:1、exec()方法,检索字符串中指定的值。返回找到的值,并确定其位置。2、test()方法,检索字符串中指定的值。返回 true 或 false。3、toString()方法,返回正则表达式的字符串。String对象匹配正则表达式方法:1、search()方法,检索与正则表达式相匹配的值。2、match()方法,找到一个或多个正则表达式的匹配。3...原创 2019-12-13 22:25:48 · 605 阅读 · 0 评论 -
js中console对象的用法
Console 对象用于 JavaScript 调试。JavaScript 原生中默认是没有 Console 对象,这是宿主对象(也就是浏览器)提供的内置对象, 用于访问调试控制台,在不同的浏览器里效果可能不同。打开Chrome,在控制台输入console,便能查看完整的console对象,总共23个用法。如下:下面列举一些常用的方法:方法描述实例assert()...原创 2019-12-08 13:57:53 · 553 阅读 · 0 评论 -
js函数式编程中的纯函数与副作用
一、纯函数纯函数是这样一种函数,即相同的输入,永远会得到相同的输出,而且没有任何可观察的副作用。举例1:数组的两个方法:slice与splice。这两个函数的作用并无二致——但是注意,它们各自的方式却大不相同,但不管怎么说作用还是一样的。我们说 slice 符合纯函数的定义是因为对相同的输入它保证能返回相同的输出。而 splice 却会嚼烂调用它的那个数组,然后再吐出来;这就会产生可观察...原创 2019-12-05 17:33:21 · 960 阅读 · 0 评论 -
js经典面试题:setTimeout+for循环组合,使用闭包循环输出1,2,3,4,5
这段时间重新温习了一下js中的基础知识:内存空间,执行上下文,变量对象,作用域,闭包,函数调用栈,队列等等。当看到下面这道熟悉的经典for循环题目时,发现还有很多知识点理解的不到位,于是花时间利用以上知识,重新进行了对这道题目的深入剖析。如下,利用闭包,让循环输出的结果为1、2、3、4、5for(var i=1; i<=5; i++){ setTimeout(function(){ ...原创 2019-11-20 20:04:19 · 2831 阅读 · 8 评论 -
js递归函数解析:阶乘示例
递归程序调用自身的编程技巧称为递归( recursion)。递归做为一种算法在程序设计语言中广泛应用。 一个过程或函数在其定义或说明中有直接或间接调用自身的一种方法,它通常把一个大型复杂的问题层层转化为一个与原问题相似的规模较小的问题来求解,递归策略只需少量的程序就可描述出解题过程所需要的多次重复计算,大大地减少了程序的代码量。递归的能力在于用有限的语句来定义对象的无限集合。一般来说,递归需...原创 2019-11-13 13:41:46 · 2068 阅读 · 0 评论 -
跨浏览器的事件对象-EventUtil对象的使用
为了解决跨浏览器的事件处理程序,需要编写一个方法,习惯上,这个方法属于一个名为EventUtil的对象,编写并使用该对象后,可保证处理事件的代码能在大多数浏览器下一致的运行。var EventUtil = { // 添加事件,保证对浏览器的兼容性。 addHandler: function(element, type, handler) { if (element.addEventLis...原创 2019-11-12 14:50:00 · 208 阅读 · 0 评论 -
js基础(二):事件(事件冒泡、事件捕获、事件对象、事件委托)
事件javascript与HTML之间的交互是通过事件实现的。事件,就是文档或浏览器窗口中发生的一些特定的交互瞬间。事件流事件流描述的是从页面中接收事件的顺序。IE的事件流是事件冒泡流,而Netscape Communicator的事件流是事件捕获流。事件冒泡IE的事件流叫做事件冒泡(event bubbling),即事件开始由最具体的元素(文档中嵌套层次最深的那个节点)接收,...原创 2019-11-11 21:37:49 · 2793 阅读 · 0 评论 -
前端基础进阶系列
从简书看过的一个前端系列,对底层基础知识的一个深入解析,转载过来分享一下!前端基础进阶(一):内存空间详细图解前端基础进阶(二):执行上下文详细图解前端基础进阶(三):变量对象详解前端基础进阶(四):详细图解作用域链与闭包前端基础进阶(五):全方位解读this前端基础进阶(六):在chrome开发者工具中观察函数调用栈、作用域链与闭包前端基础进阶(七):函数与函数式编程前端基础进阶...转载 2019-10-12 14:20:09 · 196 阅读 · 0 评论 -
JS基础(一):String、Number、Boolean数据类型转换
前言ECMAScript 标准定义了 7 种数据类型: Number,String,Boolean,Null,Undefined,Object,Symbol(ES6新增) 。其中,Number,String,Boolean,Null,Undefined,Symbol为原始数据类型,Object为对象数据类型。普通的JavaScript对象是“命名值”的无序集合,JavaScript同样定义了...原创 2019-09-22 23:09:04 · 981 阅读 · 0 评论 -
oninput,onchange,onpropertychange事件的区别
废话不多说,直接上代码在非IE浏览器下,使用oninput来进行监听input框中值的实时改变。// oninput用法<input id='myInput' type='text' />$("#myInput").on('input',function(e){ console.log('这就是change事件。');}) ...原创 2019-06-24 23:24:48 · 919 阅读 · 0 评论