![](https://img-blog.csdnimg.cn/20201014180756930.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
javascript
低调奋进
这个作者很懒,什么都没留下…
展开
-
js快速排序几种实现和区别
1.最简单版,需要申请数组空间function quickSort(arr) { if (arr.length <= 1) { return arr } let pivotIndex = Math.floor(arr.length / 2) let pivot = arr.splice(pivotIndex, 1)[0] let left = [] let right = [] for (let i = 0; i < arr.length; i++) {原创 2021-03-30 23:40:28 · 90 阅读 · 0 评论 -
计算字符串长度(包含中文)
function getStringLength(s){ var realLength = 0; var len = s.length; var charCode = -1; for(var i = 0; i < len; i++){ charCode = s.charCodeAt(i); if (charCode >= 0 && charCode <= 128) { realLength += 1; }else{ .原创 2021-03-16 10:22:52 · 470 阅读 · 0 评论 -
简单实现实现JSON.parse
var json = '{"name":"cxk", "age":25}';var dataObj=eval("("+json+")");//转换为json对象为什么要 eval这里要添加 “("("+data+")");//”呢?原因在于:eval本身的问题。 由于json是以”{}”的方式来开始以及结束的,在JS中,它会被当成一个语句块来处理,所以必须强制性的将它转换成一种表达式。加上圆括号的目的是迫使eval函数在处理JavaScript代码的时候强制将括号内的表达式(expre.原创 2021-03-10 15:04:43 · 323 阅读 · 0 评论 -
js中的事件委托或是事件代理详解
起因:1、这是前端面试的经典题型,要去找工作的小伙伴看看还是有帮助的;2、其实我一直都没弄明白,写这个一是为了备忘,二是给其他的知其然不知其所以然的小伙伴们以参考;概述:那什么叫事件委托呢?它还有一个名字叫事件代理,JavaScript高级程序设计上讲:事件委托就是利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件。那这是什么意思呢?网上的各位大牛们讲事件委托基本上都用了同一个例子,就是取快递来解释这个现象,我仔细揣摩了一下,这个例子还真是恰当,我就不去想别的例子来解释了,借转载 2021-03-08 11:06:01 · 117 阅读 · 0 评论 -
isNaN用于判断一个变量是否能够转换为数字类型
对象obj,内有可选属性a,判断a是否为数字类型或者数字字符串问题版本:if(obj.a && !isNaN(obj.a)){ //obj.a判断null或undefined有问题,如果obj.a=0,'0','',都无法排除//要求a存在且为数字类型或者数字字符串,才进if分支}正确版本:if(isNaN(parseInt(obj.a))){ //undefined,null,' ',{},[],经parseInt转换都为NaN//}...原创 2021-02-01 14:44:33 · 296 阅读 · 0 评论 -
JSON.stringify(obj)处理循环引用的报错
JSON.parse(JSON.stringify(obj))对一般对象可以进行深拷贝,但有其局限性,其中,处理循环引用对象就会出问题。解释方案:circular-json (现在只维护,vue-devtools内部也使用它) flatted (上面库的继承者) json-stringify-safe cycle.js...原创 2021-01-27 10:52:06 · 700 阅读 · 0 评论 -
javaScript中数组对象的concat方法
concat方法用于多个数组的合并。它将新数组的成员,添加到原数组的尾部,然后返回一个新数组,原数组不变。 1 2 3 console.log([].concat([1],[2],[3])); // [1, 2, 3] console.log([].concat([[1],[2],[3]])); // [[1], [2], [3]] console.log([].concat(4,[[5,6],[7]])); // [4, [5, 6], [7原创 2020-12-25 15:18:46 · 2860 阅读 · 0 评论 -
为啥进行html标签编码可以防止XSS?
众所周知,html字符编码可以防止大部分的XSS攻击。一直以来有一个疑问,为什么对编码解码为<script></script>后,不会进行对此标签继续进行解析呢?一定有一些底层的原理来解释这个问题。解释如下:HTML解析器以状态机的方式运行,它从文档输入流中消耗字符并根据其转换规则转换到不同的状态。示例:<html><body>Hello world</body></html>1、 初始状翻译 2020-12-10 11:37:30 · 2445 阅读 · 0 评论 -
一次对浏览器解析和XSS的深度探究
原文:https://mp.weixin.qq.com/s/liODgY4NjYqdWg3JgPXMdA一、需要了解的一些基本知识为什么要进行编码?主要是因为某些数据不适合传输。原因多种多样,如 Size 过大,包含隐私数据,另外重要的一点就是有些字符会引起歧义。对于 URL: &用于分割多个参数,倘若有某个参数键值为 name=v&lue,就会因为 name 参数的值 v&lue 中携带了&而造成歧义。因此需要对&进行 URL 编码。url编码后,服转载 2020-12-10 11:26:37 · 387 阅读 · 0 评论 -
对象
a = 1;b =2;console.log({a,b}) ;//{a:1,b:2}console.log([a,b]) ;//[1,2]原创 2020-12-02 15:07:05 · 84 阅读 · 0 评论 -
forEach中使用return的问题
之前只知道foreach无法像正常for循环一样进行中断,但没有深究,今天无意写了这样一个方法。 function test() { [1, 2].forEach((ele) => { if (ele === 1) { return ele } } ); }可恶,test()方法竟然没有任何返回值。随机才想起foreach无法中断,其实,在foreach里面return(不管true f.原创 2020-11-23 11:33:31 · 1706 阅读 · 0 评论 -
angular 防抖和节流踩坑
如果在angualr项目中实现防抖节流,可以使用封装好的模块,比如rxjs。但今天说的是使用原始的防抖节流方法遇到的问题:以节流为例,先贴一段常见的原始节流代码:function throttle(fn) { let canRun = true; // 通过闭包保存一个标记 return function () { if (!canRun) return; // 在函数开头判断标记是否为true,不为true则return canRun原创 2020-08-10 13:01:10 · 1995 阅读 · 0 评论 -
84版本chrome,visibilitychange事件监听失效bug解决
对应window.open()打开的tab页,visibilitychange事件监听失效。解决方法:可以使用对变量监听的方式,进行数据的监听var a = { watchValue:0 };var lastTimeValue=a.watchValue;Object.defineProperty(a, 'watchValue', { get: function() { console.log('get:' + watchValue); return watchValue;...原创 2020-08-05 15:19:15 · 1381 阅读 · 0 评论 -
JS 如何监听一个变量的变化
基于get 和 setvar a = { watchValue:0 };var lastTimeValue=a.watchValue;Object.defineProperty(a, 'watchValue', { get: function() { console.log('get:' + watchValue); return watchValue; }, set: function(value) { watchValue = value; if转载 2020-07-22 16:54:55 · 1808 阅读 · 0 评论 -
window.open新开tab页问题
window.open(url, [name], [configuration])url, 新开页面的url name,新开窗口的名字,可以通过此名字获取该窗口对象 configuration,新开窗口的配置项,如菜单栏、滚动条、长高等需求1:需要每一次点击都需要新开tab页方法1:window.open('http://www.baidu.com','_blank');主要是第二个参数的控制需求2:每次点击时如果url不变,则需要跳到同一个tab页,防止tab页过多方法2:windo原创 2020-05-20 11:53:55 · 2296 阅读 · 0 评论 -
获取最顶层的window对象(多层iframe)
1.如果2层iframe,内层直接使用window的方法,是基于内层iframe为顶层的。但很多时候想以最外层iframe为顶层。window.top就可以解决了,获取的就是最顶层的window对象。原创 2020-05-18 19:26:48 · 4456 阅读 · 1 评论 -
深究 JavaScript 数组 —— 演进&性能
作者:Paul Shan原文:Diving deep into JavaScript array - evolution & performance写文章前我要说一下,这篇文章不是讲 JavaScript 数组基础的,也不会教相关的语法和用法。文章更多的是讲数组在内存中的存储方式、优化、不同语法导致的行为差异、性能和最近的改进。我接触 JavaScript 的时候,已经对 C/C...转载 2020-05-04 15:59:48 · 344 阅读 · 0 评论 -
AST抽象语法树——最基础的javascript重点知识,99%的人根本不了解
抽象语法树(AST),是一个非常基础而重要的知识点,但国内的文档却几乎一片空白。本文将带大家从底层了解AST,并且通过发布一个小型前端工具,来带大家了解AST的强大功能Javascript就像一台精妙运作的机器,我们可以用它来完成一切天马行空的构思。我们对javascript生态了如指掌,却常忽视javascript本身。这台机器,究竟是哪些零部件在支持着它运行?AST在日常业务中...转载 2020-04-29 17:07:08 · 307 阅读 · 0 评论 -
['1', '2', '3'].map(parseInt) what & why ?
这是今天在Advanced-Frontend组织看到一个比较有意思的题目。主要是讲JS的映射与解析早在 2013年, 加里·伯恩哈德就在微博上发布了以下代码段:['10','10','10','10','10'].map(parseInt);// [10, NaN, 2, 3, 4]parseIntparseInt()函数解析一个字符串参数,并返回一个指定基数的整数 (数...转载 2020-04-28 11:20:33 · 186 阅读 · 0 评论 -
从一道题浅说 JavaScript 的事件循环
从一道题浅说 JavaScript 的事件循环注:本篇文章运行环境为当前最新版本的谷歌浏览器(72.0.3626.109)最近看到这样一道有关事件循环的前端面试题://请写出输出内容async function async1() { console.log('async1 start'); await async2()...转载 2020-04-22 17:20:03 · 201 阅读 · 0 评论 -
理解 JavaScript 的 async/await
随着Nodev7 的发布,越来越多的人开始研究据说是异步编程终级解决方案的 async/await。我第一次看到这组关键字并不是在 JavaScript 语言里,而是在 C# 5.0 的语法中。C# 的 async/await 需要在 .NET Framework 4.5 以上的版本中使用,因此我还很悲伤了一阵——为了要兼容 XP 系统,我们开发的软件不能使用高于 4.0 版本的 .NET F...转载 2020-04-14 11:28:36 · 124 阅读 · 0 评论 -
浅谈jQuery中的删除方法empty()、remove()和detach()
转: https://blog.csdn.net/zhouziyu2011/article/details/70738119jQuery提供了三种删除节点的方法:remove()、detach()和empty()。1.empty():不是删除节点,而是清空节点,清空匹配的元素集合中所有的子节点,但元素自身和事件都未被删除。2.remove():不会把匹配的元素从jQuery对象中删除,可...转载 2019-06-13 11:15:27 · 1639 阅读 · 0 评论 -
jquery
为什么我们没有在 <script> 标签中使用 type="text/javascript" ?在 HTML5 中,不必那样做了。JavaScript 是 HTML5 以及所有现代浏览器中的默认脚本语言!使用 Staticfile CDN、百度、又拍云、新浪、谷歌或微软的 jQuery,有一个很大的优势:许多用户在访问其他站点时,已经从百度、又拍云、新浪、谷歌或微软加载过 jQ...原创 2019-06-16 19:08:00 · 118 阅读 · 0 评论 -
Ts函数作为参数传递以及作用域问题总结
箭头函数作用域 项目中调用方法时经常用到this,而this的指向也是极易改变的,所以对于一些复杂的函数,一般会先定义const self = this;防止this发生改变。那么先说明一下比较常见的情况:export class Service { func1() { } func2() { let arr = [1, 2, 3];...原创 2019-07-05 16:29:50 · 14585 阅读 · 0 评论 -
js使用replace时的小问题
js replace的时候,遇到两个$总会变成一个,经查文档:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/replace替换字符串可以插入下面的特殊变量名:变量名 代表的值 $$ 插入一个 "$"。 $& 插入匹配的子串。...翻译 2019-05-23 10:42:05 · 309 阅读 · 0 评论 -
forEach究竟能不能改变数组的值
初学者每次提到Array对象的时候有些烦人,有些方法是改变原数组的,有些则不改变原数组。 有趣的存在~forEach这个方法,或者说数组存储的数据本身 看两个例子: 例子一: let obj = {'1':1} let oldArr = ['1',1,obj,true] oldArr.forEach((el)=>{ el = 1 }) c...转载 2018-11-12 10:01:01 · 732 阅读 · 0 评论 -
什么是Referer?Referer的作用?空Referer是怎么回事?
什么是Referer?Referer是HTTP请求header的一部分,当浏览器(或者模拟浏览器行为)向web服务器发送请求的时候,头信息里有包含Referer。比如我在www.sojson.com里有一个www.baidu.com链接,那么点击这个www.baidu.com,它的header信息里就有:Referer=https://www.soj...转载 2019-05-28 11:21:28 · 7941 阅读 · 0 评论 -
跨站点请求伪造(CSRF)
一、前言 跨站点请求伪造(Cross-SiteRequest Forgeries, CSRF),是指攻击者通过设置好的陷阱,强制对已完成认证的用户进行非预期的个人信息或设定信息等某些状态更新,属于被动攻击;有如下危害: 1、利用已通过认证的用户权限更新设定信息; 2、利用已通过认证的用户权限购买商品,虚拟货币转账; 3、利用已通过认证的用户权限在留言板发表言论;二、攻击...转载 2019-05-28 11:09:00 · 2427 阅读 · 0 评论 -
破解前端面试(80% 应聘者不及格系列):从 闭包说起
不起眼的开始招聘前端工程师,尤其是中高级前端工程师,扎实的 JS 基础绝对是必要条件,基础不扎实的工程师在面对前端开发中的各种问题时大概率会束手无策。在考察候选人 JS 基础的时候,我经常会提供下面这段代码,然后让候选人分析它实际运行的结果:for (var i = 0; i < 5; i++) { setTimeout(function() { conso...转载 2019-04-20 17:29:50 · 127 阅读 · 0 评论 -
解决跨域问题,聊聊JSONP
概述:跨域这个问题在工作偶尔能够碰到,但是一旦跨域传送数据就成了问题,所以就用到了JSONP,今天我们来聊聊JSONP。什么是JSONP:JSONP是一种为了解决跨域的数据交换问题,从而衍生出来的数据交换协议。为什么会产生JSONP:因为浏览器的“同源策略“,也就是浏览器限制脚本程序只能和同协议、同域名、同端口的脚本进行交互,但是在数据交换的过程中,经常会产生跨域的数据交换...转载 2019-04-20 17:01:40 · 145 阅读 · 0 评论 -
ES6 Promise 用法讲解
Promise是一个构造函数,自己身上有all、reject、resolve这几个眼熟的方法,原型上有then、catch等同样很眼熟的方法。那就new一个var p = new Promise(function(resolve, reject){ //做一些异步操作 setTimeout(function(){ console.log('执行完成')...转载 2019-04-20 16:57:23 · 107 阅读 · 0 评论 -
理解javascript中的立即执行函数(function(){})()
之前看了好多代码,都有用到这种函数的写法,但是都没认真的去想为什么会这样写,今天开始想学习下jquery的源码,发现jquery也是使用这种方式,用(function(window, undefined){})(window)包裹内部代码,于是进一步的去学习了下。要理解立即执行函数(function(){})(),先了解些函数的基本概念(函数声明、函数表达式、匿名函数)。函数声明:使用fu...转载 2019-01-24 15:53:11 · 119 阅读 · 0 评论 -
Javascript Array forEach()中无法使用return跳出
代码如下(每次都返回-1,很郁闷):public searchMatch(arr: Array<any>, str: string) {arr.forEach((element, index) => {if (element.displayName && element.displayName === str) {return index;}...原创 2019-01-07 16:48:51 · 865 阅读 · 0 评论 -
赋值语句中||与&&的理解与妙用
一、声明变量aa = 1 || 100;a = 0 || 100;1、上述代码在JavaScript(弱类型的解释型语言)中,结果如下:a = 1 || 100; //1a = 0 || 100; //1002、上述代码在C、Java等(强类型编译型语言)中,结果如下:a = 1 || 100; //1a = 0 || 100; //0以 a = b || c为例...转载 2018-11-07 11:49:09 · 577 阅读 · 0 评论 -
JavaScript如何比较两个数组的内容是否相同
今天意外地发现JavaScript是不能用==或===操作符直接比较两个数组是否相等的。alert([]==[]); // falsealert([]===[]); // false以上两句代码都会弹出false。因为JavaScript里面Array是对象,==或===操作符只能比较两个对象是否是同一个实例,也就是是否是同一个对象引用。目前JavaScript没有内置的...转载 2018-09-29 11:04:15 · 3003 阅读 · 0 评论 -
js学习笔记
ECMAScript是一种语言标准,而JavaScript是网景公司对ECMAScript标准的一种实现。 过多的嵌套会大大增加代码的复杂度。通常把部分代码抽出来,作为函数来调用,这样可以减少代码的复杂度。 JavaScript不区分整数和浮点数,统一用Number表示。 由于JavaScript这个设计缺陷,尽量不要使用==比较,最好使用===比较。 唯一能判断NaN的方法是通过isNa...原创 2018-09-29 11:32:19 · 254 阅读 · 0 评论 -
js中数组的合并和对象的合并
1 数组合并1.1 concat 方法1234var a=[1,2,3],b=[4,5,6];var c=a.concat(b);console.log(c);// 1,2,3,4,5,6console.log(a);// 1,2,3 不改变本身 1.2 循环遍历12345678var arr1=['a','b'];var arr2=['c','d','e']; for(var i=0;i<...转载 2018-02-26 16:19:55 · 2739 阅读 · 0 评论 -
图解JavaScript 中 map、foreach、reduce 区别
转载 2018-02-26 16:16:59 · 271 阅读 · 0 评论 -
深拷贝与浅拷贝的区别,实现深拷贝的几种方法
原文:https://www.cnblogs.com/echolun/p/7889848.html如何区分深拷贝与浅拷贝,简单点来说,就是假设B复制了A,当修改A时,看B是否会发生变化,如果B也跟着变了,说明这是浅拷贝,拿人手短,如果B没变,那就是深拷贝,自食其力。此篇文章中也会简单阐述到栈堆,基本数据类型与引用数据类型,因为这些概念能更好的让你理解深拷贝与浅拷贝。我们来举个浅拷贝例子...转载 2019-04-18 19:58:35 · 115 阅读 · 0 评论 -
让你分分钟理解 JavaScript 闭包
原文:https://www.cnblogs.com/onepixel/p/5062456.html闭包,是 Javascript 比较重要的一个概念,对于初学者来讲,闭包是一个特别抽象的概念,特别是 ECMAScript 规范给的定义,如果没有实战经验,很难从定义去理解它。因此,本文不会对闭包的概念进行大篇幅描述,直接上干货,让你分分钟理解闭包!闭包,一睹为快在接触一个新技术的时候,...转载 2019-04-18 20:17:13 · 102 阅读 · 0 评论