js问题锦囊
文章平均质量分 79
muzidigbig
凡事第一反应,找方法,而不是找借口;发现问题,反思,而不是急着辩解。
展开
-
URLSearchParams:JavaScript中的URL查询参数处理工具
我们可以看到URLSearchParams的强大之处,它简化了URL参数的获取、解析、构建和更新过程。无论是从URL中获取参数值,还是构建具有特定参数的URL,URLSearchParams都是一个非常有用的工具。在上述示例中,通过window.location.search获取当前URL的查询参数部分,并使用URLSearchParams对象解析该参数。除了获取和解析URL参数,URLSearchParams还提供了方便的方法来构建和更新URL参数。url-search-params-polyfill原创 2024-07-29 09:32:10 · 1181 阅读 · 0 评论 -
x-www-form-urlencoded、application/json到底是什么
在http协议中规定了GET、HEAD、POST、PUT、DELETE、CONNECT 等请求方式,其中比较常用的就是post和get,其中post用来向服务器提交数据,post只规定了提交的数据必须放在请求的中,但是并没有规定传输数据的编码方式。比较主流的有如下的几种编码方式1.application/x-www-form-urlencoded (HTTP中默认的提交数据的方式)2.multipart/form-data3.application/json4.text/xml原创 2023-08-13 09:43:58 · 5964 阅读 · 0 评论 -
js跨域的解决方案
指的是浏览器不能执行其他网站的脚本,简单来说是浏览器同源政策的限制,浏览器针对于的限制。两个页面拥有相同的协议,端口,域名就是同源,如果有一个不相同就是不同源。保护用户,防止一些网站盗取用户信息。1、通过jsonp跨域2、跨域资源共享(CORS)3、document.domain + iframe跨域4、location.hash + iframe5、window.name + iframe跨域6、postMessage跨域7、nginx代理跨域8、nodejs中间件代理跨域(非vue、v原创 2023-05-15 17:34:42 · 11554 阅读 · 0 评论 -
js高级----回顾new做了什么、prototype、__proto__、constructor、原型链、继承
用new调用一个函数,这个函数就被称为构造函数,任何函数都可以是构造函数,只需要用new调用它顾名思义,构造函数用来构造新对象,它内部的语句将为新对象添加若干属性和方法,完成对象的初始化构造函数必须使用new关键字调用,否则不能正常工作,因此,开发者约定构造函数命名时首字母要大写如果不用new调用构造函数构造函数中的this不是函数本身尝试为对象添加方法为什么需要构造函数?原创 2019-04-10 12:20:34 · 565 阅读 · 1 评论 -
刨析 JS 中的forEach、for in、for of三类循环原理和性能
一、for 循环和 while 循环的性能对比优点:程序简洁,结构清晰,循环初始化,循环变量化,循环体和循环条件位置突出 循环是可以中断循环(利用break语句或return语句)。缺点:结构比while循环复杂,容易出编码错误let arr = new Array(999999).fill(1)console.time('forTime')for(let i = 0; i< arr.length; i++){}console.timeEnd('forTi...原创 2022-04-01 16:14:57 · 9261 阅读 · 4 评论 -
JS中String、string和““的区别
1、new String()var str = new String("csdn"); //类型为object表示类型引用,构造函数新建对象,在运行时创建2、String()var str = String("csdn"); //类型为string表示类型转换,类比的还有Number、Boolean、Object ..String()与 .toString()都是可以转换为字符串类型,但是String()与 .toString()的还是有区别:.toString()可以将所有原创 2022-01-07 13:32:06 · 2329 阅读 · 0 评论 -
面试题---Set和Map的区别;Map和Object 的区别
一、Set和Map的区别简述:Set 和 Map 主要的应用场景在于 数据重组 和 数据储存。 Set 是一种叫做集合的数据结构,Map 是一种叫做字典的数据结构。集合 与 字典 的区别:共同点:集合、字典 可以储存不重复的值 不同点:集合 是以 [value, value]的形式储存元素,字典 是以 [key, value] 的形式储存集合(Set):ES6 新增的一种新的数据结构,类似于数组,成员唯一(内部元素没有重复的值)。且使用键对数据排序即顺序存储。Set 本身是一种构原创 2021-12-17 15:26:18 · 7352 阅读 · 2 评论 -
ajax、axios、alova的区别
axios 是目前流行的基于 Promise 的 HTTP 请求库,它可以在浏览器和 Node.js 中工作。axios 支持各种请求类型、拦截请求和响应等等。axios 通过 Proalova 是一个基于Vue.js 和 async/await的 HTTP 请求库。它也类似于 axios,提供了请求拦截、响应拦截、取消请求等功能,并且根据 Vue 的特点,可以非常方便地和 Vue.js 集成。和 axios 不同的是,alova 使用 async/await 进行异步操作,让代码更加简洁易懂。。})})原创 2021-12-15 22:36:48 · 1227 阅读 · 0 评论 -
js---浅拷贝与深拷贝
一、数据类型数据分为基本数据类型(String, Number, Boolean, Null, Undefined,Symbol)和引用数据类型。1、基本数据类型的特点:直接存储在栈(stack)中的数据2、引用数据类型的特点:存储的是该对象在栈中引用,真实的数据存放在堆内存里引用数据类型在栈中存储了指针,该指针指向堆中该实体的起始地址。当解释器寻找引用值时,会首先检索其在栈中的地址,取得地址后从堆中获得实体。二、浅拷贝与深拷贝深拷贝和浅拷贝是只针对Object和Array这样的原创 2021-12-09 16:07:26 · 518 阅读 · 0 评论 -
js---类的创建、new做了什么 和 继承
js---类的创建、new做了什么 和 继承原创 2021-11-03 19:37:05 · 1398 阅读 · 0 评论 -
js原生实现防抖节流
共同点:都用到了setTimeout定时器,都是在指定时间间隔后执行函数,都是为了解决数据时时变化而时时请求导致性能差的问题区别:防抖在指定时间间隔里再次调用函数,会清除定时器,重新计时,直到在最新的计时时间间隔里没有调用函数,才会执行定时器里的函数。而节流会在指定时间间隔后会执行一次函数,不会清除定时器而重新计时防抖缺点:当用户在指定时间间隔里一直操作,那么setTimeout会一直重新计时函数永远不会执行所谓防抖,就是指触发事件后在 n 秒内函数只能执行一次,如果在 n 秒内又触发了事件,则会重原创 2021-11-03 11:10:53 · 769 阅读 · 1 评论 -
clipboard.js实现复制粘贴
clipboard.js 用于实现点击复制,根据官方文档,我如下写了一个例子,结构:原创 2021-06-15 10:02:41 · 895 阅读 · 0 评论 -
js 同时实现单击事件和双击事件
js单击和双击事件同时存在,但是各个事件执行不同的功能。var time = null;//单击事件function click(){ //取消上次延时未执行的方法 clearTimeout(time); //设置延时300ms time = setTimeout(function(){ //在此写单击事件要执行的代码 ... },300);} //双击事件function dblclick(){ //取消上次原创 2021-04-23 18:28:07 · 827 阅读 · 0 评论 -
setTimeout()/setInterval()参数问题setTimeout(fun,0)
setTimeout/setInterval的常见用法是让某个方法延迟执行。setTimeout/setInterval方法是挂在window对象下的。1.注意setTimeout引用的是全部变量还是局部变量?,当直接调用外部函数方法时,实际上函数内部的变量已经变成全局。2.提醒我防止出错的,用匿名函数不容易出错。3.setTimeout最快执行时间是4毫秒。4.使用setTimeout的函数会比...原创 2018-06-20 17:39:11 · 3104 阅读 · 1 评论 -
js--sort()
js---数组中的sort()排序方法说明如果调用该方法时没有使用参数,将按字母顺序对数组中的元素进行排序,说得更精确点,是按照字符编码的顺序进行排序。要实现这一点,首先应把数组的元素都转换成字符串(如有必要),以便进行比较。array.sort()方法默认是升序排序,如果想按照其他标准进行排序,就需要提供比较函数,该函数要比较两个值,然后返回一个用于说明这两个值的相对顺序的数字。比较...原创 2018-11-05 13:02:47 · 229 阅读 · 0 评论 -
js中的 || 与 && 运算符详解(取值)
js中逻辑运算符在开发中可以算是比较常见的运算符了,主要有三种:逻辑与&&、逻辑或||和逻辑非!。当&&和|| 连接语句时,两边的语句会转化为布尔类型(Boolean),然后再进行运算,具体的运算规则如下:1.&&1.1两边条件都为true时,结果才为true;1.2如果有一个为false,结果就为false;1.3当第一个条件为false时,就不再判断后面的条件注意:当数值参与逻辑与运算时,结果为true,那么会返回的会是第二个为真的原创 2020-12-31 14:39:51 · 2385 阅读 · 0 评论 -
YouTube---获取iframe的时间
YouTube教程https://developers.google.com/youtube/iframe_api_reference?csw=1后台上传YouTube视频链接,获取这个视屏的时长。主要代码:1.获取videoId // 获取YouTube视频的videoId function matchYoutubeUrl(url) { var p = /^(?:https?:\/\/)?(?:www\.)?(?:youtu\..原创 2020-12-28 12:32:02 · 1331 阅读 · 0 评论 -
video视频属性、获取视频时间
<button id="btn" onclick="getInfo()">提交</button> <div> <!-- 属性: autoplay="autoplay" 如果出现该属性,则视频在就绪后马上播放 controls="controls" 如果出现该属性,则向用户显示控件,比如播放按钮 loop="l...原创 2020-12-17 18:25:28 · 2183 阅读 · 0 评论 -
js--纯函数
定义简单来说,一个函数的返回结果只依赖于它的参数,并且在执行过程里面没有副作用,我们就把这个函数叫做纯函数。这么说肯定比较抽象,我们把它掰开来看:函数的返回结果只依赖于它的参数。 函数执行过程里面没有副作用。 不能调用Date.now()或Math.random()等不纯的方法,因为每次会得到不一样的结果。let a = 1const foo = (b) => a + bfoo(2) // => 3foo 函数不是一个纯函数,因为它返回的结果依赖于外部变量 a,我们在不知转载 2020-11-26 18:19:28 · 242 阅读 · 0 评论 -
js---跨域
js同源策略:含义:浏览器安全的基石是“同源政策”(same-origin policy)“,同源政策由 Netscape 公司引入浏览器。目前,所有浏览器都实行这个政策。最初,它的含义是指,A 网页设置的 Cookie,B 网页不能打开,除非这两个网页“同源”。所谓“同源”指的是”三个相同“。同源条件(三个相同):协议相同 域名相同 端口相同举例:http://www.example.com/dir/page.html 这个网址,协议是http://,域名是www.example.c转载 2020-10-23 15:18:40 · 220 阅读 · 0 评论 -
$().click()和$().on(“click“, “要选择的元素“, function(){})的区别
前言jQuery的出现,大大简化了对dom的操作,但是如果不是仔细阅读api和进行操作,就不知道其中最大的优点和使用方式。就拿$().click()和$().click()和(document).on(‘click’,‘要选择的元素’,function(){})来说,都是点击事件的操作,但是也有不同的地方。$(选择器).click(function(){}):页面中已经存在的DOM(只针对与页面已存在的选择器)。$(ducument).on(‘click’,‘要选择的元素’,function(原创 2020-07-17 11:01:10 · 1088 阅读 · 0 评论 -
js中事件捕获和事件冒泡(事件流)
其实不仅在js中,在面向对象的编程语言中或多或少涉及到这个问题。js编程的事件全解,你可以到我的主页,这里给你重点讲一下js中的事件捕获和事件冒泡。事件捕获和冒泡的定义上图为网页事件的捕获和冒泡过程。 冒泡型事件:子元素事件会向父元素传递,触发父元素的同类事件。事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。 捕获型事件:事件从最外层...转载 2018-10-22 22:30:38 · 589 阅读 · 0 评论 -
js高级03--事件对象、事件委托
Ie9以下浏览器中的事件对象是放在全局中的window.event;解决兼容性:event = event || window.event事件委托(就是将事件绑定到父级/爷爷级对象上,通过事件对象的target属性来控制子级对象的改变):event.target(点击的目标对象)<!DOCTYPE html><html lang="en"><head> &...原创 2018-07-08 20:50:32 · 327 阅读 · 1 评论 -
window.open()
window.open()方法可以导航到一个特定的URL,也可以打开一个心的浏览器窗口,一般可以接受三个参数:1.要加载的URL2.窗口名称或窗口的目标3.一个特殊的字符串(控制窗口的属性,属性之间用逗号分开)【注】不命名会每次打开新窗口;命名的第一次打开新窗口,之后崽这个窗口中加载 <button type="button" id="btn1">点击打开新窗口</button> window.onload = function() { docu原创 2020-07-03 15:13:00 · 324 阅读 · 0 评论 -
Unexpected token o in JSON at position 1 报错原因
写在前面的话这个问题在之前做项目时碰到过一次,当时按照网上的做法,去掉JSON.parse()这一层转换后就没有这个报错了,数据也能正常使用,就没多想,也没深究是什么原因。可是这次又碰到了,所以这次必须要弄明白原因。JSON更多知识:https://blog.csdn.net/muzidigbig/article/details/83305325报错的原因因为你要转换...原创 2019-11-22 12:13:59 · 24255 阅读 · 3 评论 -
Object.is(obj1,obj2)与比较操作符===、==
在说明Object.is()与===、==的区别之前,我们先分别介绍Object.is()与比较操作符。一、严格相等===全等操作符比较两个值是否相等,两个被比较的值在比较前都不进行隐式转换。如果两个被比较的值具有不同的类型,这两个值是不全等的,否则,如果两个被比较的值类型相同,值也相同,并且都不是number类型时,两个值全等。最后两个值都是number类型,当两个都不是NaN,并且数值...原创 2019-10-04 16:21:54 · 1218 阅读 · 0 评论 -
为什么0.1+0.2 !== 0.3?toFixed()
一、描述简言之,这与JavaScript在二进制中存储浮点数的准确程度有关。在Google Chrome控制台中输入一下公式将得到:0.1+0.2; //0.300000000000000040.1+0.2-0.1; //0.200000000000000040.1+0.7; //0.79999999999999990.1+0.9; //1如果是简单的等式,对准确度没有要求,这...原创 2019-10-09 23:22:54 · 956 阅读 · 0 评论 -
js中getBoundingClientRect()方法详解
https://www.cnblogs.com/Songyc/p/4458570.htmlhttps://blog.csdn.net/gao_xu_520/article/details/80365799转载 2019-10-02 23:00:39 · 740 阅读 · 0 评论 -
js---new Image()宿主对象
javascript 生成img标签的3种方式(对象、方法、html)<div id="d1"></div><script> //HTML 方式一 function a() { document.getElementById("d1").innerHTML = "<img src='http://baike.bai...原创 2019-10-01 23:16:59 · 9763 阅读 · 1 评论 -
js---获取url、得到url?号后面的参数、replace()去除字符串的首尾空格
首先,我们这里有一个 url,是 http://www.a.com/list/2.html?page=2&color=4&size=3#pic.我们访问访问这个地址,打开控制台,输入window.location,会得到如下图的结果一、获取路径/设置或获取对象指定的文件名或路径。alert(window.location.pathname);//设置或获取整个...原创 2018-12-06 12:03:33 · 3752 阅读 · 0 评论 -
js---随机产生n个不重复的Number类型的数/英文字母
一、随机产生n个不重复Number类型的数<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scal原创 2018-12-05 17:26:29 · 1950 阅读 · 0 评论 -
js--计算数组中重复出现元素的个数
一、有时候的根据需求计算数组中某个元素重复出现的个数var arr = ["apple","orange","apple","orange","pear","orange"];计算出来重复出现的元素个数:{apple: 2, orange: 3, pear: 1}二、代码实现 //统计一个数组中有多少个不重复的单词: // 不用reduce时: var arr = ["apple","orange","apple","orange","pear","orange"]原创 2018-11-17 11:30:28 · 22412 阅读 · 7 评论 -
事件冒泡 以及onmouseenter 、 onmouseover(冒泡) 、onmousemove(冒泡)的区别
一. onmouseenter、onmouseoveronmouseenter 事件在鼠标指针进入到绑定事件的那个元素上时触发。该事件通常与 onmouseleave(在鼠标指针离开绑定事件的那个元素上时触发) 事件一同使用。onmouseenter 事件类似于 onmouseover 事件。 唯一的区别是 onmouseenter 事件不支持冒泡 。二. 实例演示onmousemov...原创 2018-11-23 16:34:31 · 7760 阅读 · 0 评论 -
JavaScript--查看代码运行效率console.time()与console.timeEnd()用法
程序运行时间计算:注意:测试代码运行时间的话console.time()与console.timeEnd()要一起使用,这是一个组合;这两个之间的代码就是要运行测试程序的时间<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title&原创 2018-11-19 11:02:11 · 714 阅读 · 0 评论 -
即学即用:网页常用的防复制代码
最牛的防复制代码1.将此代码粘贴到body中可以有效防选中防复制和防鼠标右键<script type="text/javascript"> document.body.oncontextmenu = document.body.ondragstart = document.body.onselectstart = document.bod...转载 2018-11-19 09:44:53 · 4040 阅读 · 0 评论 -
jq获取file表单选择文件的路径、名字、大小、类型
一、问题在使用file表单时想知道选择的文件的路径、名字、大小、类型?二、知识点1.input表单会触发change事件2.获取路径 触发这个事件的对象调用val()函数3.文件名 触发事件后会有一个事件对象e.currentTarget.files[0].name4.文件大小 e.currentTarget.files[0].size 字节5.文件类...原创 2018-11-14 10:18:44 · 17632 阅读 · 8 评论 -
js--嵌套的数组扁平化(多维数组变成一维数组)、push()与concat()区别
数组的扁平化:将多维数组变成一维数组对于一个像这样的嵌套数组:a=[1,[2,[3,4]],5,6]我们想要把它变成一个一维数组,有下面几种方法:方法一 :递归一function parseArr(arr,res){ var i=0; for(i=0;i<arr.length;i++){ if(arr[i] instanceof Array){ ...原创 2018-11-06 07:38:41 · 9708 阅读 · 0 评论 -
js延迟加载的几种方法(性能优化defer、async)
这是一个面试经常问到的问题:js的延迟加载方法 (js的延迟加载有助于提高页面的加载速度)主要考察对程序的性能方面是否有研究,程序的性能是一个项目不断地追求的,通常也是项目完成后需要长期做的一件事情,像腾讯QQ依然对程序的性能不断地做优化,让用户的体验更好,性能优化的核心思想就是快,可以预先准备数据(如缓存的使用),可以按需获取,可以分段获取等都是常见的优化手段。解题思路 :1.def...原创 2018-11-06 07:30:16 · 8371 阅读 · 1 评论 -
javascriptvoid(0)含义以及与 ‘#’ 的区别
javascript:void(0) 中最关键的是 void 关键字, void 是 JavaScript 中非常重要的关键字,该操作符指定要计算一个表达式但是无返回值。说明: 1.javascript:void(0)这种伪协议,少写的好,如果你看过一些web标准的书就知道为什么了。(不懂,原话摘的,暂做记录)2.链接(href)直接使用javascript:void(0)在IE中可能会...原创 2018-11-05 23:01:53 · 1251 阅读 · 0 评论 -
js--数组去重
一、普通的方法去重1、简单的去重方法 // 最简单数组去重法/** 新建一新数组,遍历传入数组,值不在新数组就push进该新数组中* IE8以下不支持数组的indexOf方法* */function uniq(array){ var temp = []; //一个新的临时数组 for(var i = 0; i < array.length; i++){ if(temp.indexOf(array[i]) == -1){原创 2018-11-14 13:01:08 · 425 阅读 · 0 评论