![](https://img-blog.csdnimg.cn/20201014180756913.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Javascript 基本功
文章平均质量分 65
zoe驿鹿
这个作者很懒,什么都没留下…
展开
-
【React】antd上传文件组件customRequest自定义上传解析
import React, { Component } from 'react'import { Form, Row, Col, Input, Button, Select, Radio, Upload, message } from 'antd'import styles from '../../index.less'import _ from 'lodash';import { LoadingOutlined, PlusOutlined } from '@ant-design/icons';.原创 2021-10-26 18:17:26 · 3090 阅读 · 0 评论 -
【微信公众号】微信扫一扫,条形码/一维码,二维码功能解析
api.jsgetSignatureInfo: (params) => fetch({ url: '/management-system/api/v1/wechat/signature', params, method: 'post', }),wx-tool.jsimport wx from 'weixin-js-sdk';import api from '@/api';class WxTool { constr..原创 2021-09-26 14:23:01 · 2769 阅读 · 0 评论 -
【JS】undefined与null的区别
大多数计算机语言,有且仅有一个表示"无"的值,比如,C语言的NULL,Java语言的null,Python语言的None,Ruby语言的nil。有点奇怪的是,JavaScript语言居然有两个表示"无"的值:undefined和null。这是为什么?一、相似性在JavaScript中,将一个变量赋值为undefined或null,老实说,几乎没区别。var a = undefined;var a = null;上面代码中,a变量分别被赋值为undefined和null,这两种写法几乎等价。u转载 2021-07-29 17:09:25 · 107 阅读 · 0 评论 -
【JS】Axios取消未完成请求解决Tab频繁切换数据问题
一、场景描述Tab切换频率较低、数据返回速度理想的情况下,几乎不用考虑这个问题。切换频率高如果不处理未完成的请求不仅会严重影响页面性能,由于浏览器并发请求限制,也可能会造成后续请求超时。另外一个较为直观的业务影响是,频繁切换也会造成数据渲染错误,如下图:当前已切换到待付款,但是渲染的数据是前面请求的已完成的数据。二、解决方案原理:利用 Javascript XMLHttpRequest 对象上的 abort 方法,终止已发出的请求。MDN上关于此方法的解释:当一个请求被终止,它的 r...原创 2021-06-02 15:33:15 · 3164 阅读 · 0 评论 -
【JS】详解JS精度丢失原理以及业务中价格计算引入数学库 Math.js的使用场景
一、JS为什么会出现精度丢失问题1、JS基本数据类型 Number 在内存中是怎么存储的?JS中的Number类型使用的是双精度浮点型,也就是其他语言中的double类型。在计算机内存中,单精度数是用32个 bit 来存储的浮点数,双精度数是使用64个 bit 来存储的浮点数。其中有1位符号位 (+/-),11位表示指数位(次方数),52位表示数值位(精确度) 内存结构如下:在ES规范中规定e的范围在-1074 ~ 971,而m能表示的最大数是52个1,最小能表示的是1。计算机中存储小数是.原创 2021-03-03 15:57:55 · 2002 阅读 · 0 评论 -
【JS字符串】JS字符串方法整理
方法 描述 参数说明 返回值 charAt(index) 返回指定索引位置的字符 index:必需。表示字符串中某个位置的数字,即字符在字符串中的位置。 返回在指定位置的字符。 charCodeAt(index) 返回指定索引位置字符的 Unicode 值 index:必需。表示字符串中某个位置的数字,即字符在字符串中的下标。 返回在指...原创 2020-01-06 22:53:38 · 248 阅读 · 0 评论 -
【JS数组】JS数组方法整理
ES6数组新增方法与ES5对比 方法 描述 改变原数组 返回值 参数说明 push() 在数组尾部追加元素 是 新的数组长度 pop() 删除(弹出)数组最后一个元素 是 被删除的元素 unshift() 在数组头部添加...原创 2020-01-03 00:31:16 · 392 阅读 · 0 评论 -
【ES10系列】新特性汇总
JSON.stringify() 能力补足0xD800-0xDFFF 这个区间的字符会因为无法编码成 UTF-8 而导致显示错误,ES10对这个错误进行了修正。运用转义字符的方式,让这个区间的字符以非编码的方式存在,保证正常显示。Array.flat() 数组扁平化处理flat() 方法会按照一个可指定的深度递归遍历数组,并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。传入参...原创 2019-11-19 21:45:39 · 189 阅读 · 0 评论 -
【ES9系列】RegExp dotAll模式、命名分组捕获、后行断言
dotAll 模式正则表达式中,(.)可以匹配任意字符,但是4个字节的 utf16 和\n \r 换行、回车终止符不能用(.)匹配console.log(/foo.bar/.test('foo\nbar')); // falseconsole.log(/foo.bar/.test('fooabar')); // true// 使用 dotAll模式匹配console.log(/f...原创 2019-11-19 18:49:26 · 526 阅读 · 0 评论 -
【ES9系列】Object 的 Rest & Spread 方法
Spread /spred/ 伸展,展开const input = { a: 1, b: 2}const test = { d: 6}const output = { ...input, // 把 input 对象的内容打散到output对象里 ...test, c: 3}console.log(input, output) // {a: 1, b: 2}...原创 2019-11-19 15:45:15 · 382 阅读 · 0 评论 -
【ES9系列】Promise.finally()
Promise.prototype.finally()Promise.prototype.finally() 方法返回一个Promise,在promise执行结束时,无论结果是fulfilled或者是rejected,在执行then()和catch()后,都会执行finally指定的回调函数。这为指定执行完promise后,无论结果是fulfilled还是rejected都需要执行的代码提供了...原创 2019-11-19 15:28:33 · 611 阅读 · 0 评论 -
【ES9系列】For await of 异步操作集合遍历
ES9 异步操作集合遍历// 异步任务function Gen(time) { return new Promise((resolve, reject) => { setTimeout(function () { resolve(time) }, time) })}async function test() { let arr = [Ge...原创 2019-11-19 15:19:12 · 841 阅读 · 0 评论 -
【ES8系列】获取 Object 对象属性描述符
什么是描述符(descriptor)?// 业务场景:从接口拿到学生信息数据,某些学生退学,所以展示时需要跳过const data = { PortLand: '78/50', DuLin: '88/52', Lima: '58/40'}// 使指定数据不可枚举Object.defineProperty(data, 'Lima', { enumerable: fal...原创 2019-11-19 13:12:52 · 460 阅读 · 0 评论 -
【ES8系列】String 补白、格式化
// 业务场景小于10补0for (let i = 1; i < 32; i++) { if (i < 10) { console.log(`0${i}`) } else { console.log(i) }}// 01// 02// 03// 04// 05// 06// 07// 08// 09// 10// 11s...原创 2019-11-19 12:38:56 · 174 阅读 · 0 评论 -
【ES8系列】Object 快速遍历
Object.keys()Object.values() 返回一个数组,其元素是在对象上找到的可枚举属性值。属性的顺序与通过手动循环对象的属性值所给出的顺序相同(for…in,但是for…in还会遍历原型上的属性值)。Object 数据遍历:新旧语法对比// 取班级学生姓名,obj的keylet grade = { 'lilei': 96, 'hanmei': 99}...原创 2019-11-19 12:16:00 · 474 阅读 · 0 评论 -
【ES8系列】Async\Await
AsyncES6的 Promise 通过在函数内部实例化(new Promise())一个Promise 对象返回一个 Promise 实例达到异步操作的目的,函数返回值是一个 Promise 对象。也就是说,用这种方法外部函数是一个普通函数,内部函数返回一个Promise 实例。那么ES8的 Async 的作用则是不再需要手动返回一个 Promise,只需要在 声明function 前...原创 2019-11-19 11:27:35 · 197 阅读 · 0 评论 -
【ES7系列】指数计算
//ES7之前:2的3次方(基数,指数)console.log(Math.pow(2, 3)) // 8//ES7:2的5次方console.log(2 ** 5) //原创 2019-11-18 21:40:50 · 147 阅读 · 0 评论 -
【ES7系列】Array.prototype.includes
Array.prototype.includes() 方法用来判断一个数组是否包含一个指定的值,根据情况,如果包含则返回 true,否则返回false。const arr = [1, 2, 3, 4, 5, 6, 7]console.log(arr.includes(6)) // trueconsole.log(arr.includes(66)) // falseconsole.l...原创 2019-11-18 21:37:26 · 200 阅读 · 0 评论 -
【ES6系列】Module 模块化
一、导入导出变量// 导出变量export const name = 'hello' // 导出变量export let addr = 'beijing'export var list = [1, 2, 3]// 导入变量import { name, addr, list} from './js-mod'// 导出变量const name = 'hello'let ad...原创 2019-11-18 21:27:43 · 152 阅读 · 0 评论 -
【ES6系列】Iterator 遍历器
ES6如何让不支持遍历的数据结构“可遍历”?1、简单数据结构的同类数据聚合// 简单数据结构的同类数据聚合// 业务场景:聚合不同图书类型的作者let authors = { allAuthors: { fiction: ['Agla', 'Skks', 'LP'], scienceFiction: ['Neal', 'Mike', 'Ribert'], ...原创 2019-11-18 19:12:10 · 204 阅读 · 0 评论 -
【ES6系列】Generator
通俗的讲 Generators 是可以用来控制迭代器的函数。// ES5循环写法function loop() { for (let i = 0; i < 5; i++) { console.log(i) }}loop()// ES6 generator 写法function * loop() { for (let i = 0; i < 5; i+...原创 2019-11-15 21:42:14 · 149 阅读 · 0 评论 -
【ES6系列】Proxy
Proxy 是 ES6 中新增的功能,它可以用来自定义对象中的操作。Vue3.0 中将会通过 Proxy 来替换原本的 Object.defineProperty 来实现数据响应式。语法let p = new Proxy(target, handler)解释参数 含义 必选 target 用 Proxy 包装的目标对象(可以是任何类型的对象,包括原生数组,...原创 2019-11-15 11:02:32 · 202 阅读 · 0 评论 -
【ES6系列】Reflect
Reflect 反射Java 的反射机制是在编译阶段不知道是哪个类被加载,而是在运行的时候才加载、执行。Reflect 是一个内置的对象,它提供拦截 JavaScript 操作的方法,这些方法与处理器对象的方法相同。Reflect不是一个函数对象,因此它是不可构造的。与大多数全局对象不同,Reflect没有构造函数。你不能将其与一个new运算符一起使用,或者将Reflect对象作为一个函数...原创 2019-11-14 19:58:28 · 205 阅读 · 0 评论 -
【ES6系列】Promise
Promise 基本用法(Promise Syntax):new Promise( function(resolve, reject) {…} );通过创建 Promise 对象开启一个异步操作的过程,一般用几步完成多次异步操作:new Promise(fn) 返回一个Promise 对象 在fn 中指定异步等处理 处理结果正常的话,调用resolve(处理结果值) 处理结果错误的话...原创 2019-11-13 19:53:19 · 175 阅读 · 0 评论 -
【ES6系列】Destructure 解构赋值
ES5 从一个复杂的数据结构中提取数据是如何实现的?ES6 有更优雅便捷的方式吗?ES6之解构赋值。解构赋值重点是在赋值,赋值的元素是要拷贝出来赋值给变量,赋值的元素本身是不会被改变的。// let arr = ['hello', 'world']// let [firstName, surName] = arr// console.log(firstName, surName)...原创 2019-11-13 16:51:45 · 264 阅读 · 0 评论 -
【ES6系列】Template
ES5 中字符串换行、包含变量或表达式、包含逻辑运算怎么处理?ES6有更优雅便捷的方式吗?ES6之前用字符串拼接+逻辑判断的方式进行处理。ES6 新增语法:1、字符串拼接String Literalsconst a = 10const b = 11const c = 'javascript'const str = `my age is ${a+b} i like ${c}...原创 2019-11-13 13:07:27 · 250 阅读 · 0 评论 -
【ES6系列】Object
一、ES5中Object属性可以简写吗?ES6可以吗?// ES6之前 Object 属性必须是 key-value 形式let x = 1;let y = 2;let z = 3;let obj = { x: x, y: y}//在 ES6 之前 Object 的 key 在定义时必须是字符串,如果想增加“动态”的 key,必须是先计算出 key,利用 object[k...原创 2019-11-12 20:56:37 · 140 阅读 · 0 评论 -
【ES6系列】Function
一、ES5中如何处理函数参数的默认值?ES6是如何做的呢?// ES5 参数默认值处理function f(x, y, z) { if (y === undefined) { y = 7 } if (z === undefined) { z = 42 } return x + y + z}console.log(f(1)) //50// ES6...原创 2019-11-12 17:14:32 · 223 阅读 · 0 评论 -
【ES6系列】Class
ES5 中怎么声明一个类?ES6 如何实现?ECMAScript 2015 中引入的 JavaScript 类实质上是 JavaScript 现有的基于原型的继承的语法糖。类语法不会为JavaScript引入新的面向对象的继承模型。// ES5 类的定义和实例化let Animal = function (type) { this.type = type}Animal.prot...原创 2019-11-12 14:53:59 · 116 阅读 · 0 评论 -
【ES6系列】数组 Array
一、ES5 中数组遍历有多少种方法?它们有什么优势和缺点?1、for 循环 - 支持break和continue2、forEach-ES5新增不支持break和continue3、every-ES5新增是否继续遍历取决于函数返回值,默认返回false,returntrue会使循环继续4、forin-ES5新增为object遍历支持......原创 2019-11-09 22:10:37 · 771 阅读 · 0 评论 -
【ES6系列】var & let & const
let 和 var 的区别:1、let 声明的变量有块级作用域。如下,变量 a 是在代码块 { } 中使用 let 定义的,它的作用域是这个代码块内部,外部无法访问{ let a = 1}console.log(a);// undefined2、let 声明的全局变量不是全局对象的属性var a = 1console.log(window.a) // 1let...原创 2019-11-09 21:30:58 · 117 阅读 · 0 评论 -
【JS作用域】作用域基础语法
作用域:变量可以被访问、修改的区域作用域链工作原理:如果一个变量或者其它表达式不在当前的作用域,那么 Javascript机制会汕头作用域链向上查找直到全局作用域(global或浏览器中的window)如果找不到将不可被使用。作用域也可以根据代码层次分层,以便子作用域可以访问父作用域,通常是指沿着链式作用域链查找,而不能从父作用域引用子作用域中的变量和引用。作用域链是什么:任何一个作用域链...原创 2019-11-09 16:49:41 · 191 阅读 · 0 评论 -
【错误监控】前端错误监控
概述:前端错误的分类 错误的捕获方式 上报错误的基本原理前端错误的分类1、即时运行错误:代码错误 即时运行错误的捕获方式 1)、try... catch 2)、window.onerror2、资源加载错误 1)、object.onerror 2)、performance.getEntries()...原创 2019-10-09 17:28:07 · 137 阅读 · 0 评论 -
【DOM事件】DOM事件类知识巩固
基本概念:DOM事件的级别 DOM事件模型 DOM事件流 DOM事件捕获的具体流程 Event 对象的常见应用 自定义事件DOM标准定义事件级别:DOM 0: element.onclick = function (){}DOM 1: 没有制定与事件相关的标准DOM 2:element.addEventListener('click', function (){}, false)...原创 2019-09-24 13:01:32 · 269 阅读 · 0 评论 -
【HTTP协议】HTTP协议全解析
概述:HTTP 协议的主要特点 HTTP 报文的组成部分 HTTP 方法 POST 和 GET 的区别 HTTP 状态码 什么是持久连接 什么是管线化HTTP 协议的主要特点:简单快速:每个资源是固定的,统一资源服务灵活:可以完成不同数据类型的传输无连接:连接不会保持无状态:传输结束后不记录状态HTTP 报文的组成部分:请求行包含 HTTP方法 页面地址...原创 2019-09-24 16:20:55 · 486 阅读 · 0 评论 -
【JS原型链】原型链逐步攻破
概述:创建对象有几种方法 原型、构造函数、实例、原型链 instanceof 的原理 new 运算符创建对象有几种方法:var o1 = { name: 'o1' }//对象字面量var o11 = new Object({ name: 'o11' })var M = function () { this.name = 'o2' }//显示构建函数创建对象va...原创 2019-09-29 10:55:06 · 94 阅读 · 0 评论 -
【面向对象】面向对象知识点
概述:类的声明 生成实例 如何实现继承 继承的几种方式声明类的方式有两种: // 类的声明 function Animal () { this.name = 'name'; } //es6中 类的声明 class Animal2{ constructor (){//构造函数 this.name = name...原创 2019-09-29 13:38:05 · 98 阅读 · 0 评论 -
【通信】前端通信相关知识点
概述:什么是同源策略及限制 前后端如何通信 如何创建Ajax 跨域通信的几种方式什么是同源策略及限制源的概念:协议 域名 端口协议、域名、端口号中只要有一个不同,便属于跨域。访问受限的几个方面:1、cookie、LocalStorage 和 IndexDB(浏览器提供的本地数据库) 无法读取 2、Dom 无法获得 3、Ajax 请求不能发送前后端如何通信Aj...原创 2019-10-08 11:10:40 · 215 阅读 · 0 评论 -
【安全】前端安全
概述:CSRF XSS 基本概念和缩写 攻击原理 防御措施CSRF 通常称为跨站请求伪造,英文名 Cross-site request forgery 缩写 CSRFCSRF 攻击原理: 1、身份认证过程:网站A 的注册用户登录网站后,网站 A 核查用户身份,核查通过之后下发 cookie 2、用户访问网站 B,网站 B 中存在一个引诱点...原创 2019-10-08 11:45:16 · 181 阅读 · 0 评论 -
【机制】浏览器渲染机制&在浏览器中输入一个url发生了哪些事情
概述:渲染机制渲染机制什么是DOCTYPE 及作用 DTD(document type definition,文档类型定义)是一系列的语法规则,用来定义XML或(X)HTML的文件类型。浏览器会使用它来判断文档类型,决定使用何种协议来解析,以及切换浏览器模式。直白地说,DTD告诉浏览器当前的文档类型,浏览器将会用该类型解析、渲染当前文档。 DOCTYPE...原创 2019-10-08 15:17:14 · 147 阅读 · 0 评论