JavaScript专题
关注
分享
扫一扫
文章平均质量分 89
麦乐乐
这个作者很懒，什么都没留下…
展开
-
可以提高开发效率的vscode插件
我们在新建一个文件后，常常需要在文件头部加入默认注释，vscode中提供了一个的插件，可以帮助我们实现。在vscode extensions中搜索并按照koroFileHeader 插件 installl完成后，重启vscode打开vscode的设置(左下角管理-》设置)，搜索FileHeader搜索到内容后，点击三个中的任意一个“在setting.json中编辑”，编辑setting.json文件，加入以下内容：1.3，重启vscode这样在你创建类后会自动加上注解头。你也可以使用快捷方式加入。原创 2022-12-12 15:25:28 · 3242 阅读 · 0 评论 -
开发过程中常用的git操作
。原创 2022-11-11 14:58:55 · 854 阅读 · 0 评论 -
优化进度条的N种方式
需求实现一个进度条，带有暂停和播放功能，效果图大致如下：功能不是很复杂，感觉也没有什么技术难度，我首先想到的是用一个定时器来实现这个功能，按钮可以控制定时器的开始和暂停，下面使用vue来实现第一版。定时器实现代码如下：<script>let timer， totalTime = 3000;export default { name: "Progress", data() { return { isPlay: false, progres..原创 2022-03-25 09:32:19 · 282 阅读 · 0 评论 -
webpack的Tree Shaking原来要这么使用才有效
先来了解一下commonJS和ES6模块导入导出使用方法。commonJSutils/index.jsexports.bar = 2module.exports = {foo: 9}exports.foo = 1;index.js中引入：const a = require('./utils/index')console.log(a) // {foo: 9}utils/index.jsexports.bar = 2exports.foo = 1;index.js原创 2022-02-16 11:07:23 · 2964 阅读 · 0 评论 -
为什么CommonJS和ES6可以混合使用?
1 node环境下运行新建一个文件夹testImport，创建webpack.config.js文件，创建src/index.js 内容为空。执行npm init安装第三方工具 npm install airspeed目录结构如下：index.js写入测试内容：import isEmptyObject from 'airspeed/isEmptyObject';// const isEmptyObject = require('airspeed/isEmptyObject原创 2022-02-16 11:06:28 · 2901 阅读 · 0 评论 -
一步一步理解Generator函数的原理
Generator函数基本用法function* helloWorldGenerator() { yield 'hello'; yield 'world'; return 'ending';} var hw = helloWorldGenerator();Generator函数调用后生成的就是一个迭代器对象，可以通过调用迭代器的next方法，控制函数内部代码的执行。hw.next()// { value: 'hello', done: false } hw.next(原创 2022-01-10 12:06:31 · 865 阅读 · 0 评论 -
开发过程中踩过的坑
1 toFixedtoFixed() 方法可把 Number 四舍五入为指定小数位数的数字。先来看几个例子： const a2 = 0.0455; const a3 = 0.0453; const a4 = 0.044; console.log(a2.toFixed(2)); // 0.05 console.log(a3.toFixed(2)); // 0.05 console.log(a4.toFixed(2)); // 0.04方法返回正常结果，保留两位小数并且四舍五入原创 2022-01-07 12:10:32 · 3361 阅读 · 0 评论 -
几道烧脑又不得不掌握的JS面试题
第1题function a (b = c, c = 1) { console.log(b, c)}a()复制代码undefined 1解法上面的代码相当于下面的写法：function a (b = c, c = 1) { var b = c; var c = 1; console.log(b, c)}a()复制代码函数的参数实际上就是默认在函数内部声明了变量，默认值会在声明的时候被赋值。又因为存在变量提升，所以不会报错，b是undefined，原创 2022-01-05 12:08:19 · 762 阅读 · 0 评论 -
【前端性能优化】长列表优化
一、什么是长列表？前端的业务开发中会遇到一些数据量较大且无法使用分页方式来加载的列表，我们一般把这种列表叫做长列表。完整渲染的长列表基本上很难达到业务上的要求的，非完整渲染的长列表一般有两种方式：懒渲染：这个就是常见的无线滚动的，每次只渲染一部分（比如10条），等剩余部分滚到可见区域，就再渲染一部分。 可视区域渲染：只渲染可见部分，不可见部分不渲染。虚拟列表就是采用的可视区渲染方式优化二、虚拟列表实现原理虚拟列表（Virtual List），是一种长列表优化方案，是可视区渲染列表。其两个重要原创 2021-05-12 15:34:00 · 8914 阅读 · 1 评论 -
面试题总结-虚拟列表和tcp
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>lo...原创 2021-02-23 10:19:59 · 494 阅读 · 0 评论 -
async/await函数的使用和实现原理
实现一个简单的async/await如上，我们掌握了Generator函数的使用方法。async/await语法糖就是使用Generator函数+自动执行器来运作的。 我们可以参考以下例子// 定义了一个promise，用来模拟异步请求，作用是传入参数++function getNum(num){ return new Promise((resolve, reject) => { setTimeout(() => { resolve(n原创 2020-11-14 14:11:18 · 553 阅读 · 0 评论 -
Generator函数的使用和原理
function * demo() { console.log('Hello' + (yield)); // OK console.log('Hello' + (yield 123)); // OK}var d = demo()console.log(d.next())console.log(d.next())console.log(d.next())function *flat(arr) { for(var i = 0; i < arr.length; i ++).原创 2020-11-13 18:57:49 · 897 阅读 · 0 评论 -
面试题总结 - 函数 深拷贝 驼峰转换
1 JSON key 驼峰转换实现一个转换函数covert，将JSON对象的下划线keys（{a_jh_dhs: 99}）转化为驼峰形式 {aIhDhs: 99}function getCase(obj) { const reg = /_(.)/g function keyToCase(str) { if(typeof str !== 'string') return '' return str.replace(reg, (match, $) => { .原创 2021-01-29 18:53:46 · 522 阅读 · 0 评论 -
深入代码，理解cookie, seesion, token
cookie服务端生成的，给浏览器保存，服务端不保存。直接上代码，目录如下：这个项目是mkdir cookie创建 - cd cookie - npm init - npm install express新建app.js文件设置一个cookie，名字和过期时间。var express = require('express')var app = express();...原创 2020-04-26 11:20:28 · 219 阅读 · 0 评论 -
类数组的理解和使用
一 什么是类数组？1 定义： JavaScript类型化数组是一种类似数组的对象，并提供了一种用于访问原始二进制数据的机制。2 具体表现形式： var arr = ['你好', 'json', 'array'] var obj = { 0: '你好', 1: 'json', 2: 'array', ...原创 2019-07-27 16:27:21 · 4280 阅读 · 0 评论 -
闭包会造成内存泄漏吗？
内存泄漏：长期的持有一块内存的引用，让它得不到释放。不一定会报错。是一个绑定了执行环境的函数。与普通函数的区别就是他携带了执行环境。执行环境：作用域，this, 标识符列表（函数内用到但未声明的变量）。执行环境是调用时确定的。 var obj = { // this obj fn: function() { return funct...原创 2019-08-04 18:59:07 · 892 阅读 · 0 评论 -
原型，原型链
看图理解原型，原型链上图总结如下Person是一个构造函数，可以通过new Person()创建实例，实例会有一个__ptoto__属性，跟Person的prototype属性相等。 Person的prototype实质上是一个对象，它是Object的实例，所以它的__proto__属性跟Object 的prototype是相等的。 Object的prototype实质上也是一...原创 2019-08-04 19:44:06 · 126 阅读 · 0 评论 -
V8引擎底层存储规则&垃圾回收机制
内存问题下图中分了几个块，栈内存，堆内存，池，函数缓存区，函数加载区。栈是用在存放变量的，它的值都是内存地址。堆是存放对象的池是存放常量的，也就是string number boolean的值函数加载是存放函数的函数缓存区是在函数调用的过程中开启的空间。由下图可以看出，a是一个对象，指向的是堆中内存地址，b是一个字符串指向的是池中的内存地址。c , d同理，都是指向池...原创 2019-08-04 17:49:58 · 571 阅读 · 0 评论 -
数组方法总结
JavaScript中创建数组有两种方式（一）使用 Array 构造函数：var arr1 = new Array(); //创建一个空数组var arr2 = new Array(20); // 创建一个包含20项的数组var arr3 = new Array("lily","lucy","Tom"); // 创建一个包含3个字符串的数组（二）使用数组字面量表示法：...转载 2019-05-16 13:55:25 · 150 阅读 · 0 评论 -
new Promise() ---- 真面目
对于promise相信很多人并不陌生，开发的过程中或多或少的都用到过，今天我们先不谈源码，看下promise的真面目到底是什么？随便拉一个控制台打印一下，你会看到下面一长串的东西，这就是promise这是一个构造函数，函数上有all, race, reject, resolve方法。原型上面有catch，then,方法。如果你熟悉构造函数，你就能看的明白，函数上面的方法是这样来调...原创 2019-12-23 16:12:11 · 2983 阅读 · 2 评论 -
compose函数&pipe函数&柯里化函数&节流函数&防抖函数
compose函数 也就是复合函数const add = (x) => x + 10;const multple = (y) => y * 10;console.log(multple(add(10))); // 200function compose() { const args = [].slice.call(arguments); return...原创 2020-04-15 17:45:07 · 532 阅读 · 0 评论 -
构造函数--继承
构造函数的理解构造函数在通过new关键字调用的过程中会创建一个对象，并作为参数传递给构造函数。如果构造函数返回值是 一般的数据类型， 构造函数就会忽略这个值，实例不会改变如果构造函数的返回值是引用数据类型，构造函数就会忽略this，实例就会变成构造函数返回的对象var button = { clicked: false, click: () => { co...原创 2019-09-17 15:36:12 · 1777 阅读 · 2 评论 -
underScore专题-源码分析迭代器
跟underScore学习undefined的处理在javaScript中我们判断一个变量是否是undefined通常会这样写var a;if (a === undefined) { console.log(1) // 1}但是在javaScript中undefined并不可靠，因为undefined可以作为变量名使用：var a;var undefined = 2console.log(undefined) // 2if (a === undefined) {原创 2020-05-14 10:57:54 · 276 阅读 · 0 评论