JavaScript
JavaScript文章专栏
小草莓蹦蹦跳
一枚努力奋斗的程序莓,喜欢记录和学习。本博客主要涵盖前端技术积累和工作积累。just do it,家人们加油加油油
展开
-
字符串转换为字节数组、16进制转换为base64、base64转换为字符串数组、base64转换为16进制(微信小程序)
【代码】字符串转换为字节数组、16进制转换为base64、base64转换为字符串数组、base64转换为16进制(微信小程序)原创 2024-05-30 17:42:33 · 635 阅读 · 0 评论 -
对 FileReader 的理解
通常与 input 元素的 type 属性设置为 "file" 的文件输入框结合使用,用户选择文件后,通过 FileReader 对象读取文件内容并进行相应处理。readAsArrayBuffer 读取文件后,会在内存中创建一个 ArrayBuffer 对象(二进制缓冲区),将二进制数据存放在其中。以 Data URL 形式读取文件内容,返回一个包含文件内容的 Base64 字符串。主要用于将文件内容读入内存,通过一系列异步接口,可以在主线程中访问本地文件。异步按字符读取文件内容,结果用字符串形式表示。原创 2024-04-11 17:48:43 · 708 阅读 · 0 评论 -
对 File 对象的理解
或者说是一种特殊的 Blob 对象。所有可以使用 Blob 对象的场合都可以使用它。,用户选中文件以后,浏览器就会生成一个数组,里面是每一个用户选中的文件,表单的文件上传控件(<input type="file">),它包含了文件的相关信息,如文件名、文件大小、文件类型等。通常与用户通过文件输入框选择的文件相关联。,是表示计算机文件的一种数据类型。File 对象指代一个文件对象。它们都是 File 实例对象。它继承了 Blob 对象。原创 2024-04-11 17:48:18 · 439 阅读 · 0 评论 -
对 Blob 的理解、如何创建 Blob及 Blob 的应用场景
Blob 通常指的是Binary Large Object(二进制大对象),是一种用于存储大量二进制数据的数据类型。Blob 对象可以看做是存放二进制数据的容器还可以通过 Blob 设置二进制数据的 MIME 类型,一个 Blob 对象就是一个包含有只读原始数据的类文件对象。File 接口基于 Blob,继承了 Blob 的功能,并且扩展支持了用户计算机上的本地文件Blob 对象作为一个装填二进制数据的基本对象,其作用也仅仅是一个容器。原创 2024-03-31 22:26:37 · 703 阅读 · 0 评论 -
实现简易的 axios
如果有 params,就 new URLSearchParams() 对象,并把传进来的 params 传到对象里;再用 toString 方法转成 URL 编码字符串,最后再拼接 url 来覆盖 url 默认值。如果有 data,就 xhr.setRequestHeader 设置请求头的请求数据类型;比如 JSON 字符串,就还需要用 JSON.stringify 转成 JSON 字符串。new XMLHttpRequest 并设置默认请求方式、请求根路径;添加请求+响应事件;原创 2024-03-28 22:09:52 · 630 阅读 · 1 评论 -
URLSearchParams
URLSearchParams是 Web API 中的一种对象,用于处理 URL 查询字符串的操作。它提供了一种简单的方式来访问和操作 URL 查询参数。通过使用 URLSearchParams 对象,你可以方便地解析和操作 URL 查询参数,而不需要手动解析 URL 字符串。这使得在 JavaScript 中处理 URL 查询参数变得更加方便和高效。原创 2024-03-28 17:55:44 · 542 阅读 · 0 评论 -
URL是什么?(概念+应用场景+优缺点)
总的来说,URL 作为统一资源定位符在互联网中起着至关重要的作用,能够准确地定位和访问资源,但也存在一些长度限制和可读性方面的缺点。原创 2024-03-27 22:10:27 · 2772 阅读 · 0 评论 -
token是什么?(概念+应用场景+优缺点)
总的来说,Token 作为一种身份验证和授权机制,具有便捷、安全等优点,但也需要注意安全性和管理问题。原创 2024-03-27 21:36:26 · 3219 阅读 · 0 评论 -
二、如何保证架构的质量、架构前期准备、技术填补与崩溃预防、系统重构
① 架构师分类:系统架构师、应用架构师、业务架构师。原创 2023-12-11 11:02:27 · 643 阅读 · 0 评论 -
一、微前端目标、前端架构的前生今世、微前端架构优势和劣势、软件设计原则与分层
过于灵活的实现也导致了前端应用拆分过多,维护困难;往往一个功能或需求会跨两三个项目进行开发。原创 2023-12-11 11:01:37 · 669 阅读 · 0 评论 -
JavaScript 中 eval() 的作用
此外,由于 JavaScript 已经提供了更安全的替代方案,如使用函数表达式或箭头函数来动态执行代码,建议尽可能避免使用 eval()由于 eval() 可以执行任意的代码,如果传入的字符串来自不可信的来源,存在被恶意代码利用的风险。需要注意的是,尽管 eval() 提供了强大的功能,但它也存在一些潜在的安全风险。使用 eval() 函数执行了不同类型的 JavaScript 代码。eval() 函数的基本语法如下:eval(string)在使用 eval() 时应谨慎,并确保只执行可信的代码。原创 2023-11-17 14:42:35 · 847 阅读 · 0 评论 -
ES6——数组、对象和字符串的解构赋值--02
ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为① 简单的数组解构以前,为变量赋值,我们只能直接指定值。而现在我们可以用数组解构的方式来进行赋值。上面的代码表示,可以。② 数组模式和赋值模式统一可以简单的理解为等号左边和等号右边的形式要统一,如果不统一解构将失败。如果等号两边形式不一样,很可能获得 undefined 或者直接报错。③ 解构的默认值解构赋值是允许你使用默认值的,先看一个最简单的默认的例子。原创 2020-07-21 22:24:07 · 696 阅读 · 1 评论 -
ES6 -- 对象和函数的函数解构、in 运算符、常见的数组的遍历方法(forEach、filter、some、map、every、join)09
我们在前后端分离时,后端经常返回来JSON格式的数据,前端的美好愿望是直接把这个JSON格式数据当作参数,传递到函数内部进行处理。通过提供一个操作函数,我们可以轻松地对数组的每个元素进行计算或转换,并获得一个新的数组,其中包含了这些操作的结果。总之,数组的函数解构是一种方便的语法,可以快速地从数组中提取元素并创建变量。总之,对象的函数解构是一种方便的语法,可以快速地从对象中提取属性并创建变量,但需要注意对方法的处理方式。该方法接受一个回调函数作为参数,该回调函数会被依次应用于数组中的每个元素。原创 2020-05-07 10:23:48 · 263 阅读 · 1 评论 -
如何判断一个对象是不是空对象
获取对象的属性列表,然后判断列表长度是否为0。循环遍历对象,如果有属性存在则不是空对象。原创 2023-11-15 11:02:29 · 323 阅读 · 0 评论 -
JavaScript 作用域链(Scope Chain)是什么?有什么作用?
在JavaScript中,函数存在一个隐式属性 [[ scopes ]],这个属性用来保存当前函数在执行时的环境(上下文),由于在数据结构上是链式的,也称为作用域链。我们可以把它理解为一个数组。console.dir(fn) // 打印内部结构作用域链的形成是由函数创建时确定的,它由函数创建时所处的执行上下文(Execution Context)和它的词法环境(Lexical Environment)组成。作用域链的作用包括:变量查找。原创 2023-11-08 21:43:17 · 570 阅读 · 0 评论 -
Content-Type 值有哪些?
消息主体里按照字段个数又分为多个结构类似的部分,每部分都是以 --boundary 开始,紧接着内容描述信息,然后是回车,最后是字段具体内容(文本或二进制)。由于 JSON 规范的流行,除了低版本 IE 之外的各大浏览器都原生支持 JSON.stringify,服务端语言也都有处理 JSON 的函数,使用 JSON 不会遇上什么麻烦。但是随着越来越多的 Web 站点,尤其是 Web/App,全部使用 Ajax 进行数据交互之后,我们完全可以定义新的数据提交方式,给开发带来更多便利。原创 2023-11-02 21:02:59 · 300 阅读 · 0 评论 -
实现寄生组合继承
③ 将子类的原型指向一个父类的实例,实现方法的继承并避免父类构造函数被调用多次。④ 在子类的原型上添加子类自己的方法。,实现了高效而且正确的继承方式。寄生组合继承是一种继承方式,原创 2023-10-27 18:47:09 · 164 阅读 · 0 评论 -
原型、原型对象、原型链
JavaScript 的所有对象中都有一个私有属性,我们一般称之为隐式原型(__proto__),它指向的是构建出这个实例的类的显式原型也就是构造函数的 prototype。2、什么是原型对象?作用?定义:在构造函数创建出来的时候,系统会默认创建一个(普通)对象与这个构造函数相关联,这个对象就是这个构造函数的原型对象(prototype)。为构造函数的实例,共享属性和方法。所有实例中引用的原型都是同一个对象;原创 2023-10-26 22:29:20 · 118 阅读 · 0 评论 -
Object.getPrototypeOf()
1、作用获取指定对象的原型(内部[[Prototype]]属性的值),如果没有继承属性,则返回 null function Animal() {} var ani = new Animal(); console.log(ani); console.log(Object.getPrototypeOf(ani));2、注意在 ES5 中,如果传递给方法的参数不是对象,则会抛出TypeError异常;在ES6中,原创 2023-10-23 20:29:58 · 636 阅读 · 0 评论 -
开发中如何防盗链?
同时,还应注意防范钓鱼网站、XSS攻击等安全问题,确保系统的稳定性和安全性。将时间戳作为一个参数加到 URL 中,每次请求时都需重新生成时间戳,在响应时对 Referer 进行验证,判断请求是否来自合法的来源。比如,可以在 UR L或 cookie 中加入一个token,只提供特定的域名访问 CDN 中缓存的资源,来实现防盗链。Referer是 http 协议请求头中的一个字段,可以。通过记录访问者的IP地址,对接口或文件请求来源进行限制。需要说明的是,防盗链并不能完全杜绝盗链,但可以。原创 2023-10-23 20:29:39 · 245 阅读 · 0 评论 -
COS 音视频实践
COS(Cloud Object Storage)是腾讯云提供的一种高可用、高扩展性的对象存储服务。在前端实践中,可以通过以下几个步骤来使用COS对象存储:创建存储桶:首先,在腾讯云控制台上创建一个COS存储桶,用于存放对象(文件)。配置访问权限:为确保安全性,需要配置存储桶的访问权限。可以设置公有读私有写、私有读写等权限策略,根据具体需求进行配置。生成API密钥:在腾讯云控制台上生成API密钥,用于在前端应用中进行身份验证。原创 2023-10-23 20:29:16 · 621 阅读 · 0 评论 -
什么是内存泄漏?JavaScript 垃圾回收机制原理及方式有哪些?哪些操作会造成内存泄漏?
内存泄漏是前端开发中的一个常见问题,可能导致项目变得缓慢、不稳定甚至崩溃。内存泄漏是指不再用到的内存,没有及时释放,从而造成内存上的浪费。原创 2023-10-17 23:36:45 · 361 阅读 · 1 评论 -
substring 和 substr 的区别
如果为负值,则被看作 a.length + start,其中 a.length 为字符串的长度(例如,如果 start 为 -3,则被看作 a.length + (-3))。substring() 的第二个参数表示索引结束的位置,提取的结果不包括该索引的值。substr() 的第二个参数表示要提取的字符数量,不选默认表示提取到结束的位置;length:可选,提取的字符数量,不选就是全部,也就是到结束的位置。start:必填,非负整数,需要截取的第一个字符的索引。该索引位置的字符作为返回的字符串的首字母。原创 2023-10-13 15:23:01 · 3421 阅读 · 0 评论 -
利用闭包的特点来实现一个简单的缓存
这样 adder 运行的时候如果传递的参数之前传递过,那么就返回缓存好的计算结果,不用再计算了,如果传递的参数没计算过,则计算并缓存 fn.apply(fn, args),再返回计算的结果。备忘函数中用 JSON.stringify 把传给 adder 函数的参数序列化成字符串,把它当做 cache 的索引,将 add 函数运行的结果当做索引的值传递给 cache。当多次执行 add() 时,每次得到的结果都是重新计算得到的,如果是开销很大的计算操作的话就比较消耗性能了。备忘模式就是应用闭包的特点的一个。原创 2023-10-10 16:04:04 · 478 阅读 · 0 评论 -
解决 for 循环中使用 var 定义函数的问题(解决for循环中异步问题)
let 可以定义块级作用域,因为在异步的时候不存在变量覆盖的问题。ES6 中新增的 let 定义变量的方式,使得 ES6 之后 JS 发生革命性的变化,让 JS 有了块级作用域,代码的作用域以块级为单位进行执行。可以看到,通过 let 定义变量的方式,重新定义 i 变量,则可以用最少的改动成本,解决该问题。i <= 5;i++) {原创 2023-10-09 18:27:32 · 347 阅读 · 0 评论 -
typeof null 为什么是object
这是 JavaScript 语言的一个历史遗留问题。因为 null 的类型标签是 000,与 object 的类型标签一样。所以 typeof null 被判定为 "object"原创 2023-09-23 23:27:22 · 1386 阅读 · 0 评论 -
合并对象的常见方法
如果合并的对象中有同名属性,则后面的属性值会覆盖前面的属性值。原创 2022-07-06 13:40:05 · 185 阅读 · 0 评论 -
cookies,sessionStorage 和 localStorage 的区别
① 存储大小不同localStorage:具有更大的存储空间,通常是5M或者更多;cookie:大小不能超过4K;原创 2022-07-05 16:22:21 · 729 阅读 · 0 评论 -
删除数组最后一个元素、第一个元素、某个指定下标的元素、某个指定元素的方法、 获取两个数组之前的交集和并集
① pop:默认删除数组最后一个元素【会改变原数组,返回被删除的元素arr.pop() // pop删除return arr② slice:从原有数组中提取要保留的元素【不会改变原数组,返回新数组,是浅拷贝newArr = arr.slice(0, arr.length - 1) // 方法一// newArr = arr.slice(0, -1) // 方法二slice不会修改原数组,只会返回一个浅复制了原数组中的元素的一个新数组。arr.push('原数组arr新加的值')原创 2023-08-16 18:28:50 · 3300 阅读 · 0 评论 -
JavaScript 中的强类型转换和隐式类型转换
凡是通过逻辑运算符( && ||!引用数据类型:调用自身 valueOf 方法进行转换,如果转换后不是原始值,则会调用 toString 方法进行转换,如果转换后不是数字,则会调用 Number() 进行转换,如果转换后不是数字则会返回NaN。Symbol.toPrimitive:如果对象为 Date 对象,转换为基本类型先调动 toString(),后调用 valueOf(),其他都为先调用 valueof(),后调用 toString()否则,它将值转换为字符串。a,如果a为布尔值,则直接取反;原创 2023-08-04 17:41:57 · 600 阅读 · 0 评论 -
ES6常用——箭头函数
箭头函数简化了函数的定义var f = v => v;变量名 = 参数 =>函数体;以前函数的定义:一、函数表达式f();var f = function(){ return 888; }f();简化之后:var f = () => 888;var f= funciton(n1,n2){ list(n1,n2) }简化之后:v...原创 2020-07-20 12:26:09 · 122 阅读 · 0 评论 -
封装一个方法:判断一个变量未定义和已定义
return val!== null;原创 2023-07-24 18:46:35 · 259 阅读 · 0 评论 -
封装一个方法:通过对象的原型方法判断数据类型
【代码】封装一个通过对象的原型方法判断数据类型的方法。原创 2023-07-24 18:00:07 · 91 阅读 · 0 评论 -
instanceof 运算符的作用和核心原理、 手写实现 instanceof
【代码】instanceof 的核心原理、 手写实现 instanceof。原创 2023-07-24 17:32:56 · 613 阅读 · 0 评论 -
判断一个对象是否为数组的方法有哪些?
/ 方法一:通过对象的原型方法判断// 方法二:判断是否属于数组实例// 方法三:获取它的constructor构造函数// 方法四:数组自身的判断方法。原创 2023-07-24 16:33:47 · 824 阅读 · 0 评论 -
特殊运算符(左结合、右结合、分组和短路运算符、空值合并 ??运算符、可选链?.运算符、空值赋值??=运算符)
a存在且具有name属性的时候,才会把值赋给b,否则就会将undefined赋值给b。这是因为赋值运算符的返回结果就是赋值运算符右边的那个值。然而,这并不意味着总是优先对分组符号。当一个值存在,或者值等于0的时候,当做这个条件是存在的。重要的是,不管a是否存在,这么做都不会报错。内的表达式进行求值,尤其是涉及短路时。短路是条件求值的术语。在圆括号中,也不会被求值。,b都会等于a,否则等于c。条件(三元)运算符?的返回值,也就是 5。原创 2023-07-21 12:23:06 · 179 阅读 · 0 评论 -
关于 let/var/const 的常见面试题
报错 Missing initializer in const declaration ==》报错 s is not defined ==》原创 2023-07-19 15:50:44 · 423 阅读 · 0 评论 -
浏览器有哪几种缓存,各种缓存的优先级是什么样的?
如果服务器返回 304 Not Modified 响应,则表示客户端本地缓存仍然有效,可直接使用缓存的资源。如果强制缓存未命中,但协商缓存可用,则会向服务器发送条件请求,询问资源是否更新。Service Worker 是一种特殊的 JS 脚本,可以拦截网络请求并返回缓存的响应,以实现离线访问和更快的加载速度等功能。由于其可以完全控制网络请求,因此具有最高的优先级,即使是强制缓存也可以被它所覆盖。如果存在强制缓存,并且缓存没有过期,则直接使用缓存,不需要向服务器发送请求。④ Web Storage 缓存。原创 2023-07-13 14:51:03 · 2114 阅读 · 0 评论 -
如何实现浏览器内多个标签页之间的通信?
1、使用 LocalStorage特点:同域共享存储空间;持久化将数据存储在浏览器;提供事件监听storage变化实现逻辑:A页面将数据存储在本地。B页面监听storage的变化,同步storage的最新数据;好处:操作简单、易于理解;限制:必须是在同域下才能共享;2、使用 WebSocket特点:保持连接状态;全双工通信;没有同源共享策略实现逻辑:可以理解把websocket理解为一个简单的聊天工具,2个页面都在聊天工具上聊天,页原创 2023-07-12 22:44:54 · 1257 阅读 · 0 评论 -
算法题 _ 判断字符串是否有效
【代码】算法题 _ 判断字符串是否有效。原创 2023-07-08 13:37:40 · 297 阅读 · 0 评论