JavaScript面试题
文章平均质量分 59
尤雨东
了解真相,你才能获得真正的自由!
展开
-
闭包“陷阱” 私有对象真的没办法修改属性吗?
今天在网上看见一道非常妙的题,以至于我不得不感慨一下,自己脑子都转不过来。原创 2022-10-31 22:24:16 · 631 阅读 · 0 评论 -
JavaScript面试题 更新中......
JavaScript共有⼋种数据类型,分别是 Undefined、Null、Boolean、Number、String、 Object、Symbol、BigInt。其中 Symbol 和 BigInt 是ES6 中新增的数据类型:这些数据可以分为原始数据类型和引⽤数据类型:两种类型的区别在于存储位置的不同:堆和栈的概念存在于数据结构和操作系统内存中,在数据结构中:在操作系统中,内存被分为栈区和堆区:4. null和undefined区别首先 Undefined 和 Null 都是基本数据类型,这两个基本原创 2022-06-15 16:26:00 · 268 阅读 · 2 评论 -
初识前端函数式编程
文章目录函数式编程First-class Function 头等函数函数可以赋值给一个变量函数可以作为参数闭包纯函数纯函数的缓存缓存函数的实现柯里化组合pointfree容器pointed 容器函子maybeEither函子Ap函子Monad函子IO函子与副作用Task函子函数式编程function add(a,b){return a + b;}console.log(add(1,2));函数,其实是数学上的一种概念: y = f(x)函数式编程,本质上就是一直映射关系。参数是输入,返回值原创 2022-04-27 20:56:04 · 611 阅读 · 0 评论 -
vue面试题及其结合源码分析之请说一下 vue响应式数据的理解
Vue面试题结合源码请说一下 vue响应式数据的理解Vue中如何检测数组变化?Vue中如何进行依赖收集?如何理解Vue中的模板编译原理Vue生命周期钩子是如何实现的Vue的生命周期方法有哪些?一般在哪一步发送请求及其原因Vue.mixin的使用场景和原理Vue组件data为什么必须是个函数?nextTick在哪里使用?使用原理?computed和watch的区别Vue.set方法是如何实现的Vue为什么需要虚拟domVue中diff算法原理既然Vue通过数据劫持可以精准探测数原创 2022-04-19 23:48:39 · 582 阅读 · 0 评论 -
实现mini-vue之 computed,watch ,数组响应式的实现
computed续上文—:有关vue源码的简单实现 实现一个属于自己的min-vue本文实现:computedwatcharray的响应式劫持计算属性:计算属性:依赖的值发生改变 才会重新执行用户的方法 计算属性需要维护一个dirty属性。而且在默认情况下,计算属性不会立刻执行,而是在用户取值的时候才会执行。计算属性使用的两种方式:computed: { /** * 计算属性:依赖的值发生改变 才会重新执行用户的方法 计算属性需要维护一个dirty属性原创 2022-04-16 20:39:53 · 926 阅读 · 0 评论 -
JavaScript的数据类型检测的四种方式详解 typeof instanceof constructor toString原理
JavaScript数据类型检测对于确定一个js变量的类型,我们大概都知道几种方式。对于弱语言来说,检测其正确的类型是一件不是特别容易的事情。那么我们有几种方式来检查一个js变量的类型?**从大的方向来说,js的数据类型分为基本数据类型和引用数据类型。**对于js的基本类型和引用类型是那些,这里就不在赘述。此外,在ES6新增的 symbol基本类型,ES7新增bigint大数类型,也是基本类型。一般获取一个js类型的方式,大概应该是四种(我目前只知道这四种)typeof **instanceo原创 2022-04-07 18:57:20 · 814 阅读 · 0 评论 -
使用ts写一个严格类型推断的防抖函数--支持延迟执行,立即执行,成功失败回调和promise返回值
TS版的防抖函数(严格的类型推断)export function isFunction(obj: any): obj is Function { return typeof obj === "function";}type fnType<T> = (...args: T[]) => any;type successCallbackType<T = any> = (...args: T[]) => any;type failCallbackType<T原创 2022-04-04 22:14:07 · 2947 阅读 · 1 评论 -
webpack5.x性能优化之 代码分包 配置文件分离 多入口 SplitChunks cacheGroups runtimeChunk dynamic import(动态导入) 懒加载 魔法注释
webpack优化文章目录webpack优化代码分离认识代码分离多入口起点Entry Dependencies(入口依赖)SplitChunkschunks其他的splitChunks属性(很少手动配置)minSize和maxSizeminChunkscacheGroups默认缓存组缓存组优先级maxAsyncRequestsnamechunkIdsoptimization. runtimeChunk动态导入(dynamic import)动态导入的文件命名代码懒加载魔法注释魔法注释:prefetch预获原创 2022-03-31 14:29:00 · 6500 阅读 · 1 评论 -
webpack5.x 各种开发常见配置大汇总 loader plugin devServer proxy babel 懒加载
webpack学习之旅文章目录webpack学习之旅webpack基础打包认识webpack脚手架依赖webpackwebpack是什么Vue项目加载的文件有哪些webpack使用前提webpack的安装webpack的打包方式1. 默认打包2. 创建局部的webpack3. Webpack配置文件4. 指定配置文件5. Webpack的依赖图webpack打包其他文件1. css-loader的使用css-loader的使用方案内联方式CLI方式loader配置方式(重点)2. style-loader原创 2022-03-29 22:29:42 · 1616 阅读 · 0 评论 -
原生js事件 mousedown,mouseup,mousemove结合实现元素拖拽
拖拽要注意解决鼠标焦点丢失问题鼠标移动过快,会导致鼠标移出盒子,出现盒子和鼠标不同步,且在盒子外鼠标抬起,发现鼠标再次划入盒子,不点击鼠标盒子也仍然还会拖拽。IE/火狐 把盒子和鼠标绑在一起 调用元素的 setCapture()方法绑定 releaseCapture() 解绑谷歌 鼠标不管移动多快 都跑不出浏览器 所以 mousemove/mouseup 绑定给 window核心代码<!DOCTYPE html><html lang="en"><head&原创 2022-03-25 09:50:53 · 1550 阅读 · 0 评论 -
fetch API 简单封装
文章目录简单封装一下fetchfetch发起请求的方式是否是普通对象 方法初始化请求配置参数根据环境变量设置baseurl封装fetch使用封装的request方法简单封装一下fetchfetch发起请求的方式fetch("./01-data.json") // 这里的 res拿到的结果是一个流 需要转为 我们需要的格式 json,text,formData等 // 这几个转换格式的方法 返回值都是 promise实例 .then(res => res.json()) .then原创 2022-03-09 18:53:54 · 823 阅读 · 0 评论 -
AJAX专题核心知识 倒计时抢购案例
AJAX核心知识所有的思路都在代码中AJAX:核心 基于 XMLHttpRequest创建HTTP请求创建 XHR实例打开一个URL地址 【发送前的配置信息等】method请求方式 GET/DELETE/head/options… , POST (post/put/patch…)GET 和 POST 在官方定义中 没有明确区别的但是浏览器或者开发的时候,都有一套约定俗成的规范:GET请求 传递给服务器的数据 除请求头以外 要求基于URL问号传参POST请求 数据一般是通过请求体传递s原创 2022-03-08 21:55:02 · 897 阅读 · 0 评论 -
正则表达式专题 常见的正则方法及元字符等
文章目录正则表达式专题邂逅正则表达式正则表达式基础元字符解析常用正则表达式两种创建方式的区别正则表达式 捕获的懒惰性分组捕获 和分组引用取消贪婪性其他正则捕获的方法正则练习出现最多的字符时间字符串格式化queryURLParams解析正则表达式之千分符正则表达式专题邂逅正则表达式正则表达式基础/* * @Author: 毛毛 * @Date: 2022-03-06 12:18:14 * @Last Modified by: 毛毛 * @Last Modified time: 2022-03-原创 2022-03-07 12:38:13 · 234 阅读 · 0 评论 -
手撕call-apply-bind内置函数的实现原理
有关这三个函数,在实际工作上,应该是用的比较多的,改变this指向的三种方式。call和apply类似,唯一的区别就是参数的传递方式有所不同而已,而bind函数是对需要执行的函数进行this绑定后返回一个新函数,且新函数的this不可再次改变。call: call() 方法使用一个指定的 this 值和单独给出的一个或多个参数来调用一个函数。该方法的语法和作用与 apply() 方法类似,只有一个区别,就是 call() 方法接受的是一个参数列表,而 apply() 方法接受的是一个包含多个参数的数组。原创 2022-02-25 10:44:43 · 486 阅读 · 0 评论 -
JavaScript数据类型检测篇之 typeof底层机制
JavaScript数据类型检测对于确定一个js变量的类型,我们大概都知道几种方式。对于弱语言来说,检测其正确的类型是一件不是特别容易的事情。那么我们有几种方式来检查一个js变量的类型?**从大的方向来说,js的数据类型分为基本数据类型和引用数据类型。**对于js的基本类型和引用类型是那些,这里就不在赘述。此外,在ES6新增的 symbol基本类型,ES7新增bigint大数类型,也是基本类型。一般获取一个js类型的方式,大概应该是四种(我目前只知道这四种)typeof **instanceo原创 2022-02-16 20:59:42 · 1107 阅读 · 1 评论 -
使用ts二次封装storage(sessionStorage/localStorage)
结合ts封装storeage在项目中,如果使用原生未封装的localStorage会略显的麻烦。emm,对会话以及本地存储方案进行了二次封装。便于项目的使用。存取对象时都会更加方便,且可以在取对象的时候,拿到对象的类型。export class LocalCache { setCache<T = any>(key: string, value: T): boolean; setCache<T = any>( key: string, value: T,原创 2022-02-13 23:07:25 · 1607 阅读 · 1 评论 -
手写深拷贝函数--解决循环引用问题
深拷贝手写深拷贝函数:满足了基本类型的拷贝,函数,set,map,symbol等的拷贝。// 深拷贝 基本类型变量 symbol,方法 都可以拷贝function isObject(val) { const valType = typeof val; return val && (valType === "object" || valType === "function");}function deepCopy(originValue) { // 创建一个map 主要是原创 2022-01-24 10:17:20 · 662 阅读 · 0 评论 -
前端性能优化之--手写节流函数
防抖和节流函数节流函数手写节流函数完成节流函数的全部实现原创 2022-01-23 21:05:25 · 530 阅读 · 0 评论 -
JavaScript的性能优化之--手写防抖函数
手写promise手写防抖函数原创 2022-01-19 22:00:23 · 648 阅读 · 0 评论 -
2022年了--你还不会手写promise? 完成promise的所有实现
手写promise,将静态方法和实例方法都进行了一遍实现。也可以实现链式调用。/* * @Author: 毛毛 * @Date: 2022-01-03 10:17:47 * @Last Modified by: 毛毛 * @Last Modified time: 2022-01-03 10:17:47 *//** * * 手写promise * @class MaoPromise */class MaoPromise { /** * 正在执行的状态 *原创 2022-01-03 10:20:20 · 2981 阅读 · 5 评论 -
2022年了--你还不会手写promise? -_- promise的实现 第二版 完成所有实例方法
手写promise,还是要懂得promise的使用,然后第二版在第一版上进行了部分优化,以及实现了catch和finally方法。/** * * 手写promise * @class MaoPromise */class MaoPromise { /** * 正在执行的状态 * * @static * @memberof MaoPromise */ static _PROMISE_STATUS_PENDING = "pending"; /** *原创 2022-01-02 20:18:55 · 101 阅读 · 0 评论 -
JavaScript之令人费解的this
文章目录你不知道的thisthis的那些绑定规则默认绑定全局调用全局函数函数内调用全局函数隐式绑定显示绑定全局函数显示绑定this对象的方法(函数)显示绑定thisnew 绑定特殊的this绑定规则忽略显示绑定间接函数引用ES6的箭头函数 arrow function你不知道的this学会使用JavaScript只需要三天,但是想学好JavaScript需要三年。在js中,最让人头疼的存在莫过于,闭包,作用域,this指向问题,以及异步等等。可以说:前端人员很多人才开始都没有真的弄懂this。th原创 2021-11-15 09:32:49 · 2296 阅读 · 7 评论 -
js实现数学的排列组合
js实现数学的排列组合/** * 实现 组合 * @param arr 待选数组 * @param size 从数组里面要抽几个元素进行组合 */function combination(arr, size) { // ["1-45","3-9","4-14"] 1 const r = []; /** * * @param target 生成的组合 * @param sourceArr 源数组 * @param n 求的组合中剩余的抽取的数量 * @pri原创 2021-10-05 22:09:53 · 978 阅读 · 0 评论 -
ES5和ES6定义常量的方式
ES5之前如何定义常量Object.defineProperty() 方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性,并返回此对象。Object.defineProperty(obj, prop, descriptor)参数解析obj要定义属性的对象。prop要定义或修改的属性的名称或 Symbol 。descriptor要定义或修改的属性描述符。返回值被传递给函数的对象。在ES6中,由于 Symbol类型的特殊性,用Symbol类型的值来做对象的key与常规的定原创 2021-08-21 23:12:50 · 446 阅读 · 0 评论 -
使用js实现一个简单的发布订阅模式
发布订阅模式订阅: 由多个对象(用户)发起发布: 在js中,可以这样做: 有一个对象,使用使用数组,把所有的对应函数,都先装起来 当需要的时候,把所有的函数都调用<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <met原创 2021-08-10 09:40:36 · 887 阅读 · 0 评论 -
js高级之面试题--比较常见的面试问题--递归,排序,闭包,this指向,作用域,设计模式,异步编程,宏任务微任务
js高级之面试题精讲一、面试题难点之递归递归是一种解决复杂的未知次数循环的问题的解决方案。其实表现是在一个函数内部自己调用自己。如:求n的阶乘 – 求n的阶乘可以不使用递归实现,只是用来演示递归的使用function factorial(n){ return n == 1 ? 1 : n * factorial(n-1)}我们明显看出在factorial函数内部调用了自己。这就是函数递归。此时如果我们调用这个函数,求5的阶乘,其调用过程如果===> factorial(5)==原创 2021-07-17 13:06:51 · 607 阅读 · 1 评论