Javascript/ES系列等等
文章平均质量分 52
js,js新特性,js一些api
卷王出征
应届菜狗
展开
-
对LRU算法的理解和应用场景
lru原创 2022-03-21 20:21:48 · 1791 阅读 · 1 评论 -
webpack配置不打包第三方包
最近看friday源码的时候,看到项目中很多依赖使用了公司cdn服务器获取,cdn的优势我们知道,但是项目在打包的时候不是会把所需的生产环境依赖打包进去嘛?原来webpack有个配置externals(帮助我们防止哪个包打进dist里面)。通常情况下我们不打包第三方包,因为第三方包太大,和bundle打包到一起会造成资源体积过大,所以我们还是通过script标签的方式把第三方资源引入到页面中,只需要通过以下配置即可,这里以jQuery为例。1、下载第三方包npm i jquery2、在页面中引入资原创 2022-02-25 21:31:52 · 1629 阅读 · 1 评论 -
改变词法作用域的eval和with
eval和with是一些源码(比如最近在看的friday)中常用的方法。evaljavascript中的eval函数可以接受一个字符串作为它的参数,并能将该参数作为代码进行执行,也就是说在你写代码的地方可以生成代码并运行,来看如下代码:var str="console.log(1)";eval(str); //1上面代码运行结果是控制台输出打印了1,而str只是一个字符串参数。看着好像是可以动态的生成代码了,我们再来看如下的代码:function foo(str,a){ eval(原创 2022-02-25 09:39:13 · 476 阅读 · 1 评论 -
js代码如何被浏览器引擎编译执行的?
编译型 和 解释型 语言执行阶段Parse阶段: V8引擎将js代码转换为AST (抽象语法树)Ignition阶段: 解释器将AST转换为字节码,解析执行字节码也会 为下一个阶段优化编译 提供重要的信息TurboFan阶段: 编译器利用上个阶段收集的信息,将字节码优化为可执行的 机器码Orinoco阶段: 垃圾回收阶段,将程序中不再使用的内存空间进行回收生成AST词法分析: 这个阶段会将源代码拆分成最小的,不可再分的词法单元,称为token语法分析: 将词法单元转换成一个由元素逐级嵌套所组原创 2021-03-30 20:29:44 · 266 阅读 · 0 评论 -
跟着我实现一个vscode插件
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BWLOfQ46-1625790393515)(%3Cimg%20src=%22C:%5CUsers%5CFUJINT~1%5CAppData%5CLocal%5CTemp%5C%E4%BC%81%E4%B8%9A%E5%BE%AE%E4%BF%A1%E6%88%AA%E5%9B%BE_16257356667760.png%22%20alt=%22img%22%20%3E#pic_center)]...原创 2021-07-09 10:47:30 · 1640 阅读 · 8 评论 -
一些多参数函数的具体作用
经常能碰到一些js函数有多个参数,今天来整理一下,会持续更新的!!!1. addEventListener()我们知道点击或者其他事件触发时,对应的dom元素有三个阶段:捕获——目标——冒泡,第三个参数可以区分开是捕获阶段(由外向内)还是冒泡阶段(由内向外),同样我们改变下面这两个函数的位置,可以先让dom元素冒泡再捕获。addEventListener('onclick',function(){console.log('这是捕获阶段')},true);addEventListener('.原创 2021-06-27 21:21:30 · 121 阅读 · 0 评论 -
async await如何实现并发
还记得去年实习参加秋招,二面面试官龙哥(现在的小组长)问了一个面试题,async await如何实现并发?今晚突然又想起来,赶紧整理一下原创 2021-04-02 23:17:20 · 1820 阅读 · 0 评论 -
处理前端异常
一、需要处理哪些异常?JS 语法错误、代码异常AJAX 请求异常静态资源加载异常Promise 异常Iframe 异常跨域 Script error崩溃和卡顿二、try…catch…同步代码可以捕获到异常,语法错误和异步代码无法捕捉异常。同步错误try { let name = 'jartto'; console.log(nam);} catch(e) { console.log('捕获到异常:',e);}捕获到异常: ReferenceError: nam is原创 2021-03-31 23:06:38 · 504 阅读 · 1 评论 -
ES6知识点补充
Symbolsymbol是数据类型的一种,已有的数据类型基本数据类型:字符串、布尔、数字、null、undefined、symbol、bigInt(大于9007199254740992的数)引用数据类型:对象(对象、数组、函数)等Symbol.for()与Symbol()这两种写法,都会生成新的 Symbollet sy = Symbol('a')let sy1 = Symbol('a')sy === sy1 // falselet s1 = Symbol.for('foo');原创 2021-03-31 17:00:29 · 96 阅读 · 1 评论 -
Object.create()和new Object()和{}的区别
Object.create()Object.create(null) 创建的对象是一个空对象,在该对象上没有继承 Object.prototype 原型链上的属性或者方法,例如:toString(), hasOwnProperty()等方法;Object.create()方法接受两个参数:Object.create(obj,propertiesObject) ;obj:一个对象,应该是新创建的对象的原型。propertiesObject:可选。该参数对象是一组属性与值,该对象的属性名称将是新创建的对原创 2021-01-10 13:33:20 · 234 阅读 · 1 评论 -
ES6新增Map、WeakMap和Set、WeakSet
MapMap是一组键值对的结构,具有极快的查找速度。初始化Map需要一个二维数组。let age = new Map([['emily',20],['snow',30],['jonse',18]]);// Map方法 clear entries delete forEach ...age.get('snow'); //30age.has('snow'); //trueage.set('bob',37); //{"emily" => 20, "snow" => 30, "jonse"原创 2021-01-06 09:54:22 · 314 阅读 · 0 评论 -
Object.defineProperty详解
Object.defineProperty定义Object.defineProperty(obj, prop, descriptor)参数obj:必需,目标对象prop:必需,目标对象 需获取或者修改的属性的名字descriptor:必需,目标对象 属性所拥有的特性实例let person = {}; Object.defineProperty(person, 'name', writable: true || false, configurable: true ||原创 2021-01-05 12:19:57 · 371 阅读 · 0 评论 -
闭包的使用场景
1. setTimeout原生的setTimeout传递的第一个函数不能带参数,通过闭包可以实现传参效果。function f1(a) { function f2() { console.log(a); } return f2;}var fun = f1(1);setTimeout(fun,1000);//一秒之后打印出12. 函数防抖/** fn [function] 需要防抖的函数* delay [number] 毫秒,防抖期限值*/fun原创 2020-12-04 07:56:55 · 359 阅读 · 0 评论 -
箭头函数与bind的问题
箭头函数没有自己的this,所以不能通过bind动态地去修改thisvar a = {say: function() { var fn = (() => { console.log(this) }).bind(window) fn()}}a.say() // {say: f}原创 2020-11-24 16:28:50 · 742 阅读 · 0 评论 -
ES6三种暴露方法详解
多行暴露导出//a.jsexport function aa1(){ console.log('分别导出1');}export function aa2(){ console.log('分别导出2');}导入//index.js//解构赋值import { aa1 , aa2 } from 'a.js'统一暴露导出//b.jsfunction bb1(){ console.log('综合导出1');}function bb2(){ c原创 2020-10-23 21:46:02 · 9724 阅读 · 4 评论 -
Object.create()和new Object()创建对象的区别
var foo = { age:11, logAge:function(){ console.log(this.age) } }; var a = Object.create(foo); var b = new Object(foo); a.name='fujinting' b.name='fujinting' ..原创 2020-10-20 20:24:57 · 409 阅读 · 0 评论 -
js字符串方法大集合
不改变原字符串slice:切割下一段字符串 var str = 'abcdef' var newstr = str.slice(2,4) console.log(newstr); console.log(str); //cd //abcdef //方法与数组的方法一样,从下标为2开始切,切到下标为4,不包含下标为4...原创 2020-10-18 08:50:11 · 213 阅读 · 0 评论 -
js数组方法大集合
不改变原数组的方法:concat():连接两个或更多的数组,并返回结果 var arr =[0,1,2,3,4] var arr1 = [5,6,7,8,9] var arr3 = arr.concat(arr1) console.log(arr3); //[1,2,3,4,5,6,7,8,9]every():检测数组元素的每个元素是否都符合条件。 var arr =[0,1,2,3,4] var arr1 = [5,6,7,8,9] var res = arr.every原创 2020-10-18 08:30:26 · 262 阅读 · 2 评论 -
js中的arguments参数详解
argumentsarguments: 伪数组,打印输出为实参所有的值组成的数组arguments有一个属性叫 callee,callee 指向所对应的 functionfunction fun(){ // console.log(arguments); console.log('arguments.callee === fun的值:',arguments.callee === fun);}fun('tom',[1,2,3],{name:'Janny'});第二个属性lengt原创 2020-10-15 23:41:20 · 473 阅读 · 0 评论 -
vue每个周期主要干什么?
一、初始化阶段new Vue() ————》beforeCreate————》Created初始化这个Vue实例,在这个Vue实例上初始化属性,数据,事件(props、data、methods、computed、watch等)所以,在created周期中,可以获取、操作数据了,也可以在methods中发起xhr后端请求了二、模板编译阶段Created 到 beforeMount 之间是 模板编译阶段这里是vue-loader将 <template>编译为 render函数,如果原创 2020-10-13 23:15:28 · 744 阅读 · 0 评论 -
扁平化数组 Array.prototype.flat()
const animals = ["????", ["????", "????"], ["????", ["????", ["????"]], "????"]];// 不传参数时,默认“拉平”一层animals.flat();// ["????", "????", "????", "????", ["????", ["????"]], "????"]// 传入一个整数参数,整数即“拉平”的层数animals.flat(2);// ["????", "????", "????", "????"转载 2020-10-12 16:57:06 · 805 阅读 · 1 评论 -
使node支持es6语法
下载babel转化npm install --save-dev babel-core babel-register babel-preset-es2015根目录添加.babelrc 文件,内容如下// .babelrc{ "presets" : ['es2015']}在index文件内//index.js require('babel-register');require('./app.js') ...原创 2020-10-08 09:30:41 · 256 阅读 · 0 评论 -
原生html、css、javascript渲染过程
一、构建DOM树通过HTML解析器将HTML解析为DOM二、构建CSSOM通过CSS解析器将CSS解析为CSSOM(CSS对象模型)三、布局将DOM和CSSOM合并为渲染树四、Javascript引擎当javascript操作时,可能会引起重绘、重排document.write('hello')document.getElementById('box').style.width='100px'document.querySelector('.box1').style.backgrou原创 2020-09-22 06:51:14 · 497 阅读 · 0 评论 -
js 3种遍历对象的方法
一、遍历对象方法 1.for...in遍历输出的是对象自身的属性以及原型链上可枚举的属性(不含Symbol属性),原型链上的属性最后输出说明先遍历的是自身的可枚举属性,后遍历原型链上的 eg: var obj = { 'name': "yayaya", 'age': '12', 'sex': 'female' }; Object.prototype.pro1 = function() {};//在原型链上添加属性 Object.defineProperty(obj, 'coun..原创 2020-09-17 15:46:06 · 1661 阅读 · 0 评论 -
js中 5种数组遍历方式
<script> var aa= [3,4,2,4,6,1,8] //for(普通遍历) for(let i=0;i<aa.length;i++){ console.log(aa[i],i); } //for in for(let i in aa){ console.log(aa[i],i);原创 2020-09-17 15:17:13 · 117 阅读 · 0 评论