JavaScript知识
零零历险记
一点一点
展开
-
一文搞清 js 中 if ( in ) 用法
let names = ['Lily', 'Barry', 'Dendi', 'Boogie', 'Lily'];let nameNum = names.reduce((pre, cur) => { if (cur in pre) { //pre 中是否有 cur 属性 pre[cur]++; } else { pre[cur] = 1; //为 pre 这个对象添加 cur 属性,并且赋值为 1 } return pre;}, {原创 2021-08-05 16:48:58 · 2581 阅读 · 1 评论 -
reduce的用法小结
reduce()方法可以搞定的东西,for循环,或者forEach方法有时候也可以搞定,那为啥要用reduce()?这个问题,之前我也想过,要说原因还真找不到,唯一能找到的是:通往成功的道路有很多,但是总有一条路是最捷径的,亦或许reduce()逼格更高…1、语法arr.reduce(callback,[initialValue])reduce 为数组中的每一个元素依次执行回调函数,不包括数组中被删除或从未被赋值的元素,接受四个参数:初始值(或者上一次回调函数的返回值),当前元素值,当前索引,调用 r原创 2021-08-05 16:42:05 · 345 阅读 · 0 评论 -
js 字符串转换成数字的三种方法
方法主要有三种转换函数、强制类型转换、利用js变量弱类型转换。转换函数:js提供了parseInt()和parseFloat()两个转换函数。前者把值转换成整数,后者把值转换成浮点数。只有对String类型调用这些方法,这两个函数才能正确运行;对其他类型返回的都是NaN(Not a Number)。一些示例如下:复制代码 代码如下:parseInt(“1234blue”); //returns 1234parseInt(“0xA”); //returns 10parseInt(“22.5原创 2021-08-03 18:01:40 · 1306 阅读 · 0 评论 -
JS判断字符串中是否包含某个字符串
String对象的方法一、indexOf()var str = "123";console.log(str.indexOf("3") != -1 ); // trueindexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。如果要检索的字符串值没有出现,则该方法返回 -1。二、search()var str = "123";console.log(str.search("3") != -1 ); // truesearch() 方法用于检索字符串中指定的子字符串,或检原创 2021-08-03 14:24:39 · 156 阅读 · 0 评论 -
什么是事件流? 什么是事件冒泡? 什么是事件捕获?
好好学习,天天向上。ready?go!!!事件流?当一个HTML元素产生一个事件时,该事件会在元素节点与根节点之间的路径传播,路径所经过的节点都会收到该事件,这个传播的过程叫作DOM事件流元素触发事件时,事件的传播过程称为事件流,过程分为捕获和冒泡两种冒泡事件?微软提出的 事件由子元素传递到父元素的过程,叫做冒泡捕获事件?网景提出的 事件由父元素到子元素传递的过程,叫做事件捕获...原创 2021-03-18 14:37:31 · 577 阅读 · 1 评论 -
什么是事件冒泡,它是如何工作的?如何阻止事件冒泡?
1、什么是事件冒泡,他是如何工作的在一个对象上触发某类事件(比如单击 onclick 事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这个事件会向这个对象的父级对象传播,从里到外,直至它被处理(父级对象所有同类事件都将被激活),或者它到达了对象层次的最顶层,即 document 对象(有些浏览器是 window)2、阻止事件冒泡的几种方法2.1)第一种:event.stopPropagation();2.2)第二种:ret原创 2021-03-04 17:05:39 · 4780 阅读 · 1 评论 -
高性能JavaScript
1.字符串合并的时候使用简单的’+‘和’+='操作符。let str+='abc'+'efg'; //2个以上的字符串拼接,会产生临时字符串let str=str+'abc'+'efg'; //推荐,提速10%2.避免双重求值:避免使用eval()和function()构造器来避免双重求值带来的性能消耗,同样的,给setTimeout()和setInterval()传递函数而不是字符串作为参数。//双重求值:就是在js代码中执行另一段js代码,不建议使用下面这些方式eval('代码')func转载 2021-01-19 09:39:19 · 103 阅读 · 0 评论 -
关于常用的Math方法
方法 描述 abs(x) 返回数的绝对值。 acos(x) 返回数的反余弦值。 asin(x) 返回数的反正弦值。 atan(x) 以介于 -PI/2 与 PI/2 弧度之间的数值来返回 x 的反正切值。 atan2(y,x) 返回从 x 轴到点 (x,y) 的角度(介于 -PI/2 与 PI/2 弧度之间)。 ceil...原创 2020-11-12 15:14:28 · 101 阅读 · 0 评论 -
JS中的函数柯里化
1、概念curring 又称为部分求值。”函数柯里化”是指将多变量函数拆解为单变量的多个函数的依次调用, 可以从高元函数动态地生成批量的低元的函数。简单讲:就是利用函数执行,可以形成一个不销毁的私有作用域,把预先处理的内容都存在这个不销毁的作用域里面, 并且返回一个函数,以后要执行的就是这个函数。举个栗子:// 常规的add函数function add(x, y) { return x + y}// Currying后function curryingAdd转载 2020-09-12 21:57:16 · 688 阅读 · 0 评论 -
js数据类型
最近有很多人说数据类型是 6种。我怎么记得JS的数据类型有8种。最近发现好多人对JS的基础不太了解。很多数据类型都没有搞清楚。不BB,我就按我的理解写一波笔记,每次看一波书我就感觉一次比一次多懂一点。来补下知识点。。。。JS数据类型:基础概念 请注意:JS的数据类型有8种。在ES5的时候,我们认知的数据类型确实是 6种:Number、String、Boolean、undefined、object、Nul...转载 2020-08-12 23:18:21 · 130 阅读 · 0 评论 -
for in与for of的区别
for in 和 for of 经常用,却没有个小结,那么先看下面的一个例子:例1 const obj = { a: 1, b: 2, c: 3 } for (let i in obj) { console.log(i) // a // b // c } for (let i of obj) { console.log(i) /原创 2020-08-12 19:53:01 · 457 阅读 · 0 评论 -
数组与类数组的区别
类数组定义1)拥有length属性,其它属性(索引)为非负整数(对象中的索引会被当做字符串来处理);2)不具有数组所具有的方法;javascript中常见的类数组有 arguments对象和 DOM方法的返回结果。比如 document.getElementsByTagName()。判断是否是类数组function isLikeArray(o) { if (typeof o === 'object' && isFinite(o.length) && o.l原创 2020-08-12 17:14:24 · 893 阅读 · 1 评论 -
vue 打包生成配置文件,方便外部修改公共路径,不用每次都进行打包部署
Vue打包后,如果想修改统一链接路径的方案。第一步:┌── build ├── config ├── node_modules ├── src ├── static │ ├── config.js // 配置文件│ ├── index.html: 这里说明下,赋值给window,在vue里面获取不到window对象。所以不要赋值给window,直接定义个常量就好。第二步:const $gloableC原创 2020-07-29 20:06:39 · 1169 阅读 · 1 评论 -
call,apply和bind的用法及区别
看过太多如此的文章,终究还是没能深深留在脑海。JavaScript有两个隐藏的变量:argument、this改变this指向的方法:一、 call()和apply()区别是传参//call 的传参和apply的传参function say(arg1,arg2){ console.log(this.name,arg1,arg2);};var obj = { name : 'tom', say : function(){ console.log(this.name);原创 2020-07-28 23:11:24 · 1334 阅读 · 0 评论 -
关于类数组与转换
类数组定义1)拥有length属性,其它属性(索引)为非负整数(对象中的索引会被当做字符串来处理);2)不具有数组所具有的方法;类数组是一个普通对象,而真实的数组是Array类型。常见的类数组有: 函数的参数 arguments, DOM 对象列表(比如通过 document.querySelectorAll 得到的列表), jQuery 对象 (比如 $(“div”)).类数组可以转换为数组://第一种方法Array.prototype.slice.call(arrayLike, start原创 2020-07-04 18:36:06 · 152 阅读 · 0 评论 -
ES6数组新增常用方法总结
项目中经常用到数组,没有系统小结下,现在小结如下:创建数组:ES5的方式`new Array()new Array(size)new Array(el0, el1,..., eln)用数组字面量语法,例如:var arr1 = [1,2,3]当用构造函数设置一个数组型的值,数组长度length属性会被设为该值,而数组的元素都是undefined;如果传入了一个非数值型的值,则该值会被设为数组中的唯一项;如果传入了多个值,则被设为数组元素ES6的方式Array.of(),可以原创 2020-07-04 18:33:12 · 252 阅读 · 0 评论 -
JSON.stringfy和JSON.parse多参数情况
JSON.parse('{"p": 5}', function(k, v) { if (k === '') { return v; } return v * 2; }); JSON.parse('{"1": 1, "2": 2, "3": {"4": 4, "5": {"6": 6}}}', function(k, v) { document.write( k );// 输出当前属性,最后一个为 "" docum原创 2020-06-14 11:31:25 · 302 阅读 · 0 评论 -
js中event的target和currentTarget的区别
首先本质区别是:target:返回触发事件的元素。currentTarget:返回事件绑定的元素。关键点:两者在没有冒泡的情况下,但在用了事件委托的情况下,就不一样了,例如:<ul id="ulT"><li class="item1">item1</li><li class="item2">item2</li><li class="item3">item3</li><li class="item4"&原创 2020-06-12 15:15:45 · 405 阅读 · 0 评论 -
前端的模糊匹配
字符串方法indexOfvar len = list.length;var arr = [];for(var i=0;i<len;i++){ //如果字符串中不包含目标字符会返回-1 if(list[i].indexO...转载 2020-05-14 15:06:49 · 556 阅读 · 0 评论 -
Unable to preventDefault inside passive event listener
Unable to preventDefault inside passive event listener 最近做项目经常在 chrome 的控制台看到如下提示:Unable to preventDefault inside passive event listene...转载 2020-02-20 15:52:49 · 241 阅读 · 0 评论 -
vue封装公共方法处理js计算科学记数法精度问题
声明:本文核心是很早之前参考其他大牛的文章或博客,文章出处也找不到了,如有看到请留言,会补上出处。自己稍作改动,一直保留在用。废话不多说,下面直接上在vue中自己如何使用的代码:1.新建公共方法的js文件,我为这个单独建了一个文件:calculation.js 代码:var countDecimal...转载 2020-01-17 14:59:21 · 351 阅读 · 0 评论 -
你真的理解devDependencies和dependencies区别吗?
网上统一的观念是devDependencies用于本地环境开发时候。dependencies用户发布环境其实看名字我也知道是这个意思,我觉得没解释情况。devDependencies是只会在开发环境下依赖的模块,生产环境不会被打入包内。通过NODE_ENV=developement或NODE_ENV=production指定开发还是生产环境。而dependencies依赖的包不仅开发环境...转载 2019-01-04 16:34:51 · 193 阅读 · 0 评论 -
web worker的用法及应用场景
首先简单介绍一下什么是web worker。我们都知道在浏览器中javascript的执行是单线程的,页面上的javascript在执行时会阻塞浏览器的响应,这非常影响用户体验,所以ajax应运而生了。ajax的出现使得页面在等待服务器响应的这段时间内不再发生阻塞,但是这仍然没有改变代码单线程执行的本质,这也意味着我们依旧不能把耗费时间的复杂运算放在...转载 2019-01-17 14:21:58 · 856 阅读 · 1 评论 -
WebAssembly——从入门到入门
WebAssembly官网上,提出一种观点:传统的网络架构可以分为两层,一层是运行web app的虚拟机,一层是web API。可以理解为虚拟机层用于计算,实现交互功能,而web API层负责实现展示JS性能瓶颈一直以来,虚拟机层只需要加载js就够了。因为js的功能足够强大,而且随着这20多年的发展历史,js自身也得到了很充分的扩展,形成了完善的生态系统。但是,功能提升的同时,js也慢慢变得...转载 2019-01-17 14:24:47 · 1767 阅读 · 0 评论 -
Vue 服务端渲染 & 预渲染
文章目录简介那么什么是服务端渲染为什么使用服务端渲染服务端渲染 or 预渲染区别如何使用预渲染如何搭建一个预渲染开发环境Tip写在最后简介关于 Vue 的 SPA 说的已经太多太多了,它为我们带来了极速的开发体验,极强的开发效率。可能唯一有些许不足的就是,当我们...转载 2019-06-03 17:39:09 · 157 阅读 · 0 评论 -
js判断对象是否为空对象的几种方法
1.将json对象转化为json字符串,再判断该字符串是否为"{}"var data = {};var b = (JSON.stringify(data) == “{}”);alert(b);//true2.for in 循环判断var obj = {};var b = function() {for(var key in obj) {return false;}return tru...转载 2019-06-24 10:59:52 · 140 阅读 · 0 评论 -
JS 大坑 之 0.1+0.2 计算精度的问题
JavaScript的number类型按照ECMA的JavaScript标准,它的Number类型就是IEEE 754的双精度数值,相当于java的double类型。IEEE 754标准《二进制浮点数算法》(www.ieee.org)就是一个对实数进行计算机编码的标准。因此精度问题不止JS这门语言独有。无论是用纸张记录数值,还是用计算机记录数值,都必须用某种编码方案来表达数值。必须理解的是,...转载 2019-08-10 14:28:54 · 1553 阅读 · 0 评论 -
JS之prototype用法(给Number添加通用属性/方法)
下午室友发给我一道前端面试题,因为当时忙着赶项目,目光扫了一眼,立马就回答道 “写一个add方...转载 2019-08-10 14:43:37 · 607 阅读 · 0 评论 -
slice()和splice()区别
1.slice(start,end):方法可从已有数组中返回选定的元素,返回一个新数组,包含从start到end(不包含该元素)的数组元素。注意:该方法不会改变原数组,而是返回一个子数组,如果想删除数组中的一段元素,应该使用Array.splice()方法。start参数:必须,规定从何处开始选取,如果为负数...转载 2018-11-24 10:34:05 · 502 阅读 · 0 评论