前端-JavaScript
关注
分享
扫一扫
以JavaScript为载体的一系列知识
Kevin11Yao
这个作者很懒，什么都没留下…
展开
-
Set、WeakSet、Map、WeakMap方法汇总
SetSet中的元素中的判定方式是全等。向 Set 加入值的时候，不会发生类型转换，所以5和"5"是两个不同的值。Set 内部判断两个值是否不同，使用的算法叫做“Same-value-zero equality”，它类似于精确相等运算符（===），主要的区别是向 Set 加入值时认为NaN等于自身，而精确相等运算符认为NaN不等于自身。let set = new Set();let a = NaN;let b = NaN;set.add(a);set.add(b);set // Set {N转载 2021-06-15 09:21:52 · 267 阅读 · 0 评论 -
Promise.all的用法及其细节
Promise的all方法提供了并行执行异步操作的能力，并且在所有异步操作执行完后才执行回调。可以将多个 Promise 实例，包装成一个新的 Promise 实例。const p = Promise.all([p1, p2, p3]);上面代码中，Promise.all方法接受一个数组作为参数，p1、p2、p3都是 Promise 实例，如果不是，就会先调用下面讲到的Promise.resolve方法，将参数转为 Promise 实例，再进一步处理。（Promise.all方法的参数可以不是数组，但原创 2021-06-11 15:29:01 · 50141 阅读 · 2 评论 -
手写Promise.race()
function promiseRace(promises){ if(!Array.isArray(promises)){ throw new Error('promises must be an array') } return new Promise(function(resolve,reject){ promises.forEach(p=>原创 2021-04-27 16:38:51 · 178 阅读 · 0 评论 -
JS实现call、bind、apply函数
call函数Function.prototype.myCall = function(context) { // 判断调用对象 if (typeof this !== "function") { console.error("type error"); } // 获取参数 let args = [...arguments].slice(1), result = null; // 判断 context 是否传入，如果未传入则设置为 window context =原创 2021-04-22 18:50:55 · 67 阅读 · 0 评论 -
JS中类数组转为数组的四种常见方法
类数组和数组结构类似，但是不能调用数组的方法，常见的类数组有arguments。一个函数也可以看做是类数组对象，因为他含有length属性，代表可接受的参数。通过数组原型上的slice实现Array.prototype.slice.call(arrayLike);通过数组原型上的splice实现Array.prototype.splice.call(arrayLike,0);通过数组原型上的cancat实现Array.prototype.cancat.call([],array原创 2021-04-21 11:45:32 · 199 阅读 · 0 评论 -
React学习笔记——纯函数和高阶函数
纯函数一类特别的函数: 只要是同样的输入(实参)，必定得到同样的输出(返回)必须遵守以下一些约束1)不得改写参数数据2)不会产生任何副作用，例如网络请求，输入和输出设备3)不能调用Date.now()或者Math.random()等不纯的方法redux的reducer函数必须是一个纯函数高阶函数理解: 一类特别的函数1)情况1: 参数是函数2)情况2: 返回是函数常见的高阶函数:1)定时器设置函数2)数组的forEach()/map()/filter()/reduce()/f原创 2021-04-19 12:28:23 · 170 阅读 · 0 评论 -
JS实现instanceOf()
function myInstanceOf(left, right) { let prototype = right.prototype let proto = Object.getPrototypeOf(left) while(true){ if(!proto) return false if(proto===prototype) return true...原创 2021-04-18 22:42:49 · 85 阅读 · 0 评论 -
字节跳动二面有关于变量提升和this指向的问题
字节跳动二面有关于变量提升和this指向的问题变量提升//变量提升 console.log(a);// fun a{//2} var a = 1; function a() { //1 } a = 2; function a() { //2 } console.log(a); // 2执行结果：执行顺序相当于：function a(原创 2021-03-29 19:58:09 · 163 阅读 · 0 评论 -
字节跳动二面题目总结
// 变量提升console.log(a);var a = 1;function a () { // 1 }a = 2;function a () { // 2 }a();// 事件循环new Promise((resolve) => {log(3)resolve();}).then(() => log(4))async function foo () {console.log(‘5’);await bar();console.log(‘7’);}async f原创 2021-03-29 19:49:10 · 366 阅读 · 0 评论 -
JS面试题：实现a==1&&a==2&&a==3 返回true
JS面试题：实现a1&&a2&&a==3 返回true思路：重写valueOf()方法利用隐式转换时，会调用valueOf()方法，来实现对其值的++操作valueOf的意思是返回最适合该对象类型的原始值，而toString则是将在该对象类型的原始值以字符串形式返回。var colors = ["red", "blue", "green"]; // 创建一个包含3 个字符串的数组 alert(colors.toString()); // red,原创 2021-03-27 14:52:37 · 515 阅读 · 0 评论 -
cvte面试题——关于this指向、闭包及原型链上属性初始化的问题
cvte面试题——关于this指向和闭包的问题一、关于this指向首先，我们通过邹佳乐学长的一个this指向问题来先检测一下自己对于this的掌握程度。let obj2 = { name: 'obj2'}const obj = { name: 'obj', say1() { console.log(this.name) }, obj1: { name: 'obj1', say2() {原创 2021-03-13 21:47:26 · 271 阅读 · 1 评论 -
JS实现防抖与节流（使用按钮触发事件）
JS实现防抖与节流（使用按钮触发事件）引言：什么是JS的防抖与节流？手写JS的防抖与节流<body> <button id="debounce">防抖</button> <button id="throttle">节流</button> <script> //防抖 在一定时间内第二次触发某个事件时，他会清空上一个该事件， //若在某固定时间内没有再次触发该事件，此事件函数原创 2021-03-12 08:42:12 · 3560 阅读 · 0 评论 -
JS数组中的map()、filter()以及reduce()的基本使用
<script> // filter中的回调函数有一个要求：必须返回一个boolean值 // true：当返回true时，函数内部会自动将这次回调的n加入到新的数组中 // false：当返回false时，函数内部会过滤掉这次的n const nums = [10,20,111,222,444,40,50]; // 1. filter函数的使用 let newNums = num原创 2021-03-07 12:51:48 · 137 阅读 · 0 评论 -
用原生JS实现深拷贝
用原生JS实现深拷贝浅拷贝和深拷贝的概念这里不做赘述。思路：当拷贝的元素不是基础类型时，他只会进行浅拷贝。 赋值的时候（如var a =b），若其是基础类型(b是基础类型(ex:Boolean、String、Number))，则会重新用这个基础类型的值对其进行初始化(不会对其源头有影响)。//原理理解var a = 12; var b = a; console.log(a,b);//12,12 b=6; console.log(a,b);//12,6深原创 2020-12-23 15:15:24 · 633 阅读 · 0 评论 -
JavaScript中的NaN
JavaScript中的NaN含义NaN是 JavaScript 的特殊值，表示“非数字”（Not a Number），主要出现在将字符串解析成数字出错的场合。5 - 'x' // NaN上面代码运行时，会自动将字符串x转为数值，但是由于x不是数值，所以最后得到结果为NaN，表示它是“非数字”（NaN）。另外，一些数学函数的运算结果会出现NaN。Math.acos(2) // NaNMath.log(-1) // NaNMath.sqrt(-1) // NaN0除以0也会得到Na原创 2020-12-17 16:31:06 · 754 阅读 · 0 评论 -
JavaScript中的null和undefined的理解区分
为什么null的类型是object？typeof(null)//返回object。null的类型是object，这是由于历史原因造成的。1995年的 JavaScript 语言第一版，只设计了五种数据类型（对象、整数、浮点数、字符串和布尔值），没考虑null，只把它当作object的一种特殊值。后来null独立出来，作为一种单独的数据类型，为了兼容以前的代码，typeof null返回object就没法改变了。null和undefined的关系在if语句中，它们都会被自动转为false，相等运原创 2020-12-17 15:52:58 · 94 阅读 · 0 评论 -
JavaScript基本语法——细节知识点
属性访问报错还是undefined?var obj ={ name:'yzk', age:'20' } console.log(obj.name);//yzk console.log(obj.school);//undefined console.log(window.a);//undefined console.log(a);//报错如果使用var重新声明一个已经存在的变原创 2020-12-16 14:16:25 · 122 阅读 · 0 评论 -
前端模块化：匿名闭包、CommonJS、ES6模块化
ES5时，用匿名函数实现的模块化通过将代码放在闭包当中，使得命名不会冲突，每一个js文件都成为独立的模块。需要复用代码时，将闭包中的结构返回到全局作用域即可，通过模块名.方法/属性的方法使用。// a.js;var moduleA = (function(){ var flag = true function sum(a, b) { return a + b } return { flag, sum }})()CommonJS中的模块化// 导出// 文件a.j原创 2020-12-16 09:58:12 · 207 阅读 · 0 评论 -
函数的节流与防抖
函数的节流与防抖防抖防抖是指在一定的时间内再次触发此事件,会清空上次的事件重新开始,如果制定的时间内没有再次触发,那么这个事件才会执行。 function showLog() { console.log('show'); } /* * 防抖 思路： * 先开启一个定时任务执行，定时任务完成后则清空；当再调用时，如果定时任务仍存在则清空原来任务，创建新的定时任务 * */ function debounce(fn, space) {原创 2020-12-15 11:32:36 · 256 阅读 · 0 评论 -
浅层次理解Promise思想及其简单应用
在学习王世元老师的vue教程过程中，穿插着复习了一下Promise的内容。引言①什么是Promise？一个ES6中非常重要和好用的特性②Promise的用途？Promise是异步编程的一种解决方案③什么时候会处理异步事件？但是网络请求非常复杂时，就会出现回调地狱网络请求的回调地狱看似只是几层回调函数的嵌套，但是在实际数据请求的时候我，可能并不是这么简单。ex：每次调用前实际都会进行很多其他的操作若在每个回调函数中除了回调另外一个函数，还有如以上例子一样的其他操作，就会使得代码变原创 2020-12-08 11:46:03 · 236 阅读 · 0 评论 -
JS中的三种继承模式(原型链继承、借用构造函数继承、组合继承及ES6中class的实现原理)
JS中的三种继承模式写在前面：如果此篇博客中有任何错误的地方，欢迎大家的指正！让我们共同进步！如果觉得这篇博客有用就点赞+收藏+关注三连吧！JS中的继承模式大体分为三种：①原型链继承②借用构造函数继承③组合继承接下来让我们逐个的对其进行剖析。方式一、继承模式-原型链继承为了更好的理解为什么要这样做，我们来看一看这样做的图示：代码核心思路：通过将子类型的原型赋为父类型的一个实例对象，使得在创建子类的实例对象的时候可以逐步通过__proto__属性（隐式原型链）查找到父类的方法原创 2020-10-20 12:33:57 · 491 阅读 · 2 评论 -
JS中的几种对象创建模式
JS中的几种对象创建模式JS中的对象创建模式分为五种：这篇博客将会分别剖析每一种创建模式的优劣。方式一、Object构造函数模式方式二、对象字面量模式方式三、工厂模式前三种方法虽然都是对象的创建方法，但是用typeof方法对其进行判定的时候，都会返回Object类型。为了更好的表现各种类型间的关系，我们引入了接下来的自定义构造函数模式。方式四、自定义构造函数模式这里的setName虽然功能和名字相同，但是每一个Person对象都有一个单独的setName函数，不是同一个原创 2020-10-19 21:42:19 · 122 阅读 · 0 评论 -
关于JS中的内存溢出与内存泄漏
关于JS中的内存溢出与内存泄漏一、内存溢出二、内存泄漏①意外的全局变量②没有及时清理的计时器修改方法如下：将计时器清除③闭包未释放修改方法：将f置为null。原创 2020-10-19 20:59:40 · 271 阅读 · 0 评论 -
关于JS中闭包剖析（包含闭包的理解、作用、生命周期、应用、缺点及其解决、常见的闭包）
答：这是由于闭包的一个特点就是函数内部引用外部的变量（如这里的变量a）会一直存在于内存 中，不会被立即释放。 而在第一个f()执行完了以后，这个闭包依然存在，第二个f()执行完了以后，也依然存在，直到关闭浏览器。原创 2020-10-19 20:47:54 · 423 阅读 · 1 评论 -
关于JS中的作用域链及其面试题
作用域链作用域链的理解图示如下：执行结果如下：注意区分查找变量和查找属性时，不存在时的反馈结果：①查找变量若找不到，会报错;②查找对象属性如果找不到，会返回undefiend;JS中的作用域链面试题举例结果为：10。大家是不是对此感到疑惑？疑惑就对了，因为这里有一个坑，我们来看看作用域的视图：分析：虽然进入了show()函数，但是后面执行 f（）是重新跳转到全局中的 fn（）函数中重新执行，因此这时对于变量 x 的查找是在全局之中查找了。执行结果如下：原创 2020-10-19 11:15:16 · 523 阅读 · 0 评论 -
关于JS中作用域与执行上下文的区别
关于JS中作用域与执行上下文的区别JS中作用域的理解作用域和执行上下文的区别分别从产生时间和产生过程两个方面来区分。作用域和执行上下文的联系为了更好的理解作用域和执行上下文的联系，我们来看一个例子...原创 2020-10-19 10:57:48 · 175 阅读 · 0 评论 -
关于JS中的执行上下文和执行上下文栈
关于JS中的执行上下文在变量提升和函数提升的内容中，就让我们产生一个疑惑——“这两个提升是怎么来的？”，这就要用我们的执行上下文来解释了。首先让我们了解一下几个基本概念，代码分类主要按照位置，分为两大类——全局代码及函数（局部）代码。进而使得JS中的执行上下文的分类也有两种——全局执行上下文以及函数执行上下文。注意：①关于执行上下文对象的理解这里的执行上下文对象都是表意上的对象（形似对象那种各种数据的打包的对象思想，但是其实质还是在栈内存中进行分配存储）；②注意区分函数对象和函数执行上下原创 2020-10-19 10:37:45 · 137 阅读 · 0 评论 -
JavaScript中的变量提升和函数提升的浅显理解
变量提升和函数提升原创 2020-10-18 19:32:14 · 73 阅读 · 0 评论 -
关于原型链中的instanceof探索
原型链中的instanceof探索记录一下今天所学JS原型链中关于instanceof判定的探索。本人也在学习中，欢迎各位同学的指正！理解如下：A是一个实例，B是一个构造函数B只能走一步，找到B.prototype而A若有__proto__，则可以一直向下寻找，直到找不到为止。举例如下，判断两个instanceof语句的判定结果。f1 instanceof Foo 图示解析如下f1 instanceof Object 图示解析如下举例2分别判断下面的语句的正确与否。执行结原创 2020-10-18 18:45:52 · 226 阅读 · 1 评论 -
JavaScript中的显式原型（属性）和隐式原型（属性）
JavaScript中的显式原型（属性）和隐式原型（属性）prototype和__proto__的区别与联系实例对象的隐式原型__proto__等于构造函数的显式原型prototypeprototype和__proto__都是引用变量属性，是一个地址值。图解如下：...原创 2020-10-18 17:05:22 · 501 阅读 · 0 评论 -
JavaScript中函数的原型
JavaScript中函数的原型Type类的原型对象和构造函数相互引用图示如下：原创 2020-10-18 17:00:49 · 122 阅读 · 0 评论 -
JavaScript中分号问题的讨论
分号问题知乎上有关于JS分号问题的热议第一种错误写法的原因理解：另外一种错误写法的原因理解原创 2020-10-18 16:47:08 · 86 阅读 · 0 评论 -
关于JavaScript对象、函数的基础知识总结
对象部分什么是对象？属性的添加有两种方式，而什么时候必须用[‘属性名’]的方式？函数部分函数声明的两种方式：区别：前者有函数提升；而且后者只能当做变量，有变量提升。回调函数函数中的thisIIFE匿名函数自调用如果对于这里的分号有疑惑，可以看我博客的另外一篇文章——'JavaScript中分号问题的讨论’。...原创 2020-10-18 16:43:39 · 112 阅读 · 0 评论 -
关于JS中数据、变量、内存的浅层面试题知识总结
JS中数据、变量及内存主要记载有关于JavaScript部分基础的总结。重点记忆黄标部分：null和array用typeof方法返回的判断结果object，因此不能用typeof判断这两者。1、2容易问 第三个了解关于一个标识到底中到底保存的是什么？关于引用变量赋值问题续上这个时候输出的是13。原因：注意区分’=‘和’.’，后者为修改属性，var b = a ，使得b和a保存的内容是同一个地址。是在同一个地址进行操作，而前者则是为obj赋了一个新的对象，这个对象的地址是新创建的，即原创 2020-10-18 16:29:59 · 335 阅读 · 5 评论 -
关于JS原型链的理解
JS原型链记录一下今天所学JS原型链的重点知识。①Object是最开始就在内存中存在的，早已分配内存。②由于这里Fn2函数对象prototype是一个引用，因此会指向一个Object的实例化对象，而这个对象早已存在，因此用0x345中的prototype来初始化Ojbect空对象。特例：Function的隐式原型属性和显式原型属性实质上是指向的同一个对象，即Function = new Function();因此所有函数的__proto__都是一样的（都是通过new Function()原创 2020-10-03 20:36:14 · 165 阅读 · 0 评论