javascript学习笔记
文章平均质量分 77
javascript学习笔记
JohnKeatinghhh
埋まる、埋まる
展开
-
JS踩坑笔记
JS踩坑笔记1. for...in 遍历数组的“下标”2. for...in今天做题的时候遇到两个坑,虽然很简答,但是mark一下 :1. for…in 遍历数组的“下标”for…in 语句遍历的是一个对象的key,在遍历数组的时候尤其具有迷惑性:const arr = [1,2,3]for(let i in arr) { console.log(typeof i) // string}对,没看错,这遍历出来的不是0,1,2 这样的number类型的下标,而是string,为什么呢?原创 2021-02-17 22:23:20 · 159 阅读 · 0 评论 -
JS中Map和Object频繁增删性能测试
JS中Map和Object频繁增删性能测试测试测试JS中的Map和Object都可以实现映射关系,它们的频繁增删性能如何呢?下面写了3个测试函数来测试: // 测试Object function testObject(maxTimes){ const obj = new Object() for(let i=0;i<maxTimes;i++){ obj[i+'a'] = i } for(let i=0;i<maxTi原创 2021-02-15 20:47:53 · 702 阅读 · 2 评论 -
JS中字面量创建基本类型和构造函数创建基本类型的区别
JS中的基本包装类型Tips1 弄清楚转型函数和构造函数的区别Tips2 尽量避免显式创建基本包装类型Tips3 自己实现instanceof时避免踩坑我们先看下面的一个例子:let a = ''console.log(a instanceof String) // falselet b = new String()console.log(b instanceof String) // true这很好理解,因为a是基本数据类型中的String,而b是String构造函数创建的一个的一个实例。但原创 2021-02-09 22:52:18 · 513 阅读 · 0 评论 -
【前端面试】JS中通过原型链和class语法分别实现类的继承
【前端面试】JS中通过原型链和class语法分别实现类的继承原型链实现继承一个细节ES6 class 语法实现继承JS中的类本质上是一个function类型的对象,这是JS的独特之处。原型链实现继承在ES6的class语法推出之前,要实现类的继承要通过修改原型链来实现:首先定义一个父类,本质上是定义父类的构造函数,其对应的Person.prototype会自动被创建function Person(name, age) { this.name = name this.age = age}原创 2021-02-09 18:31:36 · 507 阅读 · 0 评论 -
节流和防抖的理解
节流和防抖的理解防抖应用示例理解节流应用示例节流和防抖都是为了提升网页性能的技术。监听用户触发的事件往往被触发的频次较高或者需要消耗较高的性能(例如发送ajax请求查询数据库中的内容),因此需要降低事件被触发的频次。参考:节流和防抖的区别,以及如何实现防抖防抖的含义是:触发高频事件后n秒内函数只会执行一次,如果n秒内高频事件再次被触发,则重新计算时间。实现方式: 每次触发事件时设置一个延迟调用方法,并且取消之前的延时调用方法缺点: 如果事件在规定的时间间隔内被不断的触发,则调用方法会被不断的延迟原创 2021-01-21 17:52:59 · 484 阅读 · 0 评论 -
手动实现拥有两个单向关联的checkbox的树形组件
手动实现拥有两个单向关联的checkbox的树形组件数据基础架构最近在做项目的时候,遇到了一个需求:如图所示,这是一个树形组件(n叉树),父节点嵌套子节点。每个节点都有查看和编辑两个权限,分别对应两个checkbox。业务逻辑如下:如果后代节点中有一个被选中,那么祖先节点一定会被选中;而选中分为全选和半选,例如:2. 页面顶部有两个checkbox,用来控制全部的节点:3. 如果查看权限被关闭,那么编辑权限也会被置为空选且禁用。第一点都可以通过antv的树形组件几行代码轻松实现:原创 2021-01-11 16:15:54 · 871 阅读 · 0 评论 -
【移动端适配】动态调整rem
【移动端适配】动态调整rem今天看项目的时候看到src/utils/adapative.js里对于移动端的rem是这样定义的:// 设计宽度const designWidth = 375// 设计字体大小const designFontSize = 16//向外输出一个获取rem具体数值的接口,以备不时之需export function getFontSize () { const { clientWidth } = document.documentElement const fo原创 2020-11-27 15:01:39 · 218 阅读 · 0 评论 -
【前端面试】手写Ajax、JQuery.ajax以及axios
【前端面试】手写Ajax、JQuery.ajax以及axios原生JS手写Ajax丐版(精简版)设置超时版promise版浏览器需要与服务器进行通信,这个过程是用ajax实现的。借用一下W3School的描述:原生JS手写Ajax丐版(精简版) //将query对象变成可以用在url里的字符串 function obj2Query(queryObj){ let temp = [] for(key in queryObj){原创 2020-11-09 15:22:20 · 340 阅读 · 1 评论 -
encodeURI 与 encodeURIComponent
encodeURI 与 encodeURIComponentencodeURI(注意是URI不是URL)encodeURIComponent(注意是URI不是URL)encodeURI 与 encodeURIComponent都是浏览器自带的方法,作用都是对URL编码,以保持URL正常被解析。参考知乎的说法:encodeURI(注意是URI不是URL)encodeURI 是解析整个 URL 的,举个例子:在百度搜索“卢本伟牛逼”我们发出的GET请求的URL本该是:https://www.b原创 2020-11-07 22:56:45 · 332 阅读 · 0 评论 -
【前端面试】javascript 基于事件冒泡的事件代理
【前端面试】javascript 基于事件冒泡的事件代理给单一元素绑定事件循环方式绑定事件事件代理解决问题事件捕获和事件冒泡是JS Web-API 中的一个重要内容,不清楚的童鞋可以百度一下。或者可以参考这篇博客:终于弄懂了事件冒泡和事件捕获!这里编写一个bindEvent函数,实现对事件的普通绑定和代理绑定。一个很简单的案例:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"原创 2020-11-07 16:48:46 · 168 阅读 · 0 评论 -
【前端面试】javascript中手写call,apply,bind函数
javascript中手写call,apply,bind函数callapplybindcallFunction.prototype.myCall = function (context, ...args) { // if(typeof this !== 'function'){ //不需要判断类型,因为myCall定义在Function.prototype上 // throw new TypeError(`${this} is not a function!`) // }原创 2020-11-04 21:14:58 · 441 阅读 · 0 评论 -
【前端面试】javascript中类型判断和实现深拷贝的两种方式
javascript中类型判断和实现深拷贝的两种方式类型判断【值类型】【引用类型】深拷贝用JSON实现深拷贝通过递归实现深拷贝类型判断JS中的变量分为值类型和引用类型【值类型】包括: undefined,string,Number,Boolean,Symbol这里需要注意:string在C++中属于STL容器,在python中也属于需要deepcopy的那种,但在js里它是直接以value的形式直接存在栈空间的。#include<string>string* a = new原创 2020-11-04 16:04:02 · 293 阅读 · 0 评论 -
webpack实现css样式对不同浏览器的兼容
webpack实现css样式对不同浏览器的兼容1.安装指定版本的 postcss-loader 和 postcss-preset-env2.配置webpack.config.js3.在项目文件的package.json中配置browserslist4. 选择process.env.NODE_ENV5.测试兼容后的代码众所周知,css在不同浏览器中的兼容性问题是一个十分令人头痛的问题,而用webpack工具中的postcss 就可以将打包好的css文件写成兼容一些老浏览器的css环境: "devDep原创 2020-10-26 22:05:15 · 1325 阅读 · 0 评论 -
阿美利加大统领得小感冒引发的思考: ajax+node+promise+nginx 实现一次简单的本地联调
特朗普新冠引发的思考: ajax+node+nginx 实现一次简单的本地联调最近在练习前后端联调的时候,做了一个练习:通过前端页面localhost:8001的ajax 向后端服务器localhost:8000发送一个路由为api/getNews的请求,服务器返回 特朗普得新冠的新闻,并在返回对象中带了一个commentsURL路由对象.前端页面解析返回的response,解析出commentURL路由,并根据这个路由拿到关于 特朗普得新冠 这个新闻的评论.为了突出联调过程本身,对服务器逻辑做了原创 2020-10-22 09:31:00 · 438 阅读 · 2 评论 -
ES6标准中用let代替闭包实现给按钮绑定事件监听
ES6标准中用let代替闭包实现给按钮绑定事件监听let const var 是一个老生常谈的话题了,ES6中let/const与之前的var的区别在于:只在块级作用域有效,避免了不同作用域互相污染;不能重复声明;不会预处理声明,不存在奇怪的变量提升。具体内容可以参考:阮一峰大佬的ES6 入门教程这里mark一个十分浅显的例子,记录一下。我要给三个不同的<button>绑定不同的监听函数,每个函数都alert一下i,如果我写成:<body> <but原创 2020-10-16 20:57:28 · 547 阅读 · 0 评论 -
ES5标准中的Object.create() 和 Object.defineProperties()
ES5标准中的Object.create和Object.definePropertiesObject.create(prototye,[description])Object.defineProperties(object,descriptors)Object.create(prototye,[description])【作用】:以指定对象为原型,创建新的对象【参数】:prototype: 就是要作为原型的那个对象;description 为新的对象指定新的属性,并对属性进行描述,可用的关键字:原创 2020-10-15 21:40:21 · 2482 阅读 · 2 评论 -
nodejs里关于content-type首字母大小写的问题
nodejs里关于content-type首字母大小写的问题区分大小写的场合下面这段代码是服务器处理post请求时,解析上传的文件的代码,我需要判断传入的请求头req.headers的content-type属性是否是application/json。但是,但我确实post了一个application/json请求时,却出发了这个if条件。const getPostData = (req) => { const promise = new Promise((resolve, reje原创 2020-10-07 21:21:26 · 2099 阅读 · 3 评论 -
小白视角理解ES6中的promise
小白视角理解ES6中的promisePromise的概念问题1:如何改变promise的状态?问题2:一个promise指定多个成功/失败回调函数, 都会调用吗?问题3:改变promise状态 和 指定回调函数谁先谁后?问题4:promise.then()返回的新promise的结果状态由什么决定?问题5:promise如何串连多个操作任务?问题6:如何理解promise异常传透?问题6:如何中断promise链?内容参考:https://www.bilibili.com/video/BV1MJ41197原创 2020-10-06 21:42:44 · 139 阅读 · 0 评论 -
JavaScript异步编程中用promise读取相互关联的json文件
JavaScript异步编程中,解决回调地狱的两种方式众所周知,在ES6推出之前,要想执行一串有前后依赖关系的异步操作需要通过纯回调函数的方式,即把外层的函数所得到的结果作为参数传入到下一层函数, 试着看这样一个例子:根目录下有一个index.js脚本(也就是我们要编写读取文件的脚本),要读取 /files 文件夹里的三个json文件,分别为:a.json{ "next" : "b.json", "msg": "this is a"}b.json{ "next" : "b.json",原创 2020-10-06 16:36:03 · 1234 阅读 · 2 评论 -
JavaScript在浏览器环境中的异步
JavaScript在浏览器环境中的异步单线程与多线程浏览器的多线程浏览器的异步逻辑js引擎与GUI引擎是互斥的setTimeout(0): 手动异步参考:https://blog.csdn.net/qq_26222859/article/details/77622222https://www.cnblogs.com/aaron—blog/p/10903118.html单线程与多线程JavaScript 默认情况下是单线程运行的(除了用H5 Web Workers),但运行js脚本的环境可以原创 2020-10-04 21:56:10 · 1758 阅读 · 0 评论 -
javascript和cpp中的自增运算符
1. javascript的++与 cpp 的++今天学习javascript的时候,遇到了一个很有趣的现象,和c++相同的代码,得到的却是截然不同的结果:cpp里int main{ int a = 0; a = a++ cout<< a <<endl; return 0;}结果为1javascript里<script> var a =0; a = a++; console.log(a);</script>结果为0原创 2020-08-28 20:15:24 · 197 阅读 · 0 评论