js 专栏
JavaScript 基础以及高级知识整理,以及常见问题汇总
代码搬运媛
记录学习过程,开发经验分享。
展开
-
node终端样式库: chalk 颜色库的使用方法
chalk.js可以为 console.log() 的输出信息配置不同的显示颜色和样式。比如 node 在输出端的文字默认是黑白的,为了使输出内容更加个性化更加突出,我们可以使用 chalk.js 添加文字背景、改变文字颜色。原创 2022-12-17 17:25:02 · 1883 阅读 · 0 评论 -
echarts 柱形图使用渐变色的方法
echats 柱形图实现渐变色的方法原创 2022-09-15 17:10:24 · 519 阅读 · 0 评论 -
前端测试:自动化测试知识扫盲
相信有相当一部分前端人对于自动化测试是知识盲区,很少会有前端去写测试用例,比如我(不好意思啦~)。今天这是一篇扫盲文,纯是基础,大神绕过。原创 2022-09-15 09:28:53 · 644 阅读 · 0 评论 -
深入浅出讲解 JS 的微任务与宏任务
最开始接触到 js 的微任务与宏任务是在一次面试中,完全懵逼,下面抛出面试题,大家先睹为快:console.log('script start');setTimeout(function(){ console.log('setTimeout');},0);new Promise(function(resolve){ console.log('promise1'); resolve(); console.log('promise2');}).then(function原创 2022-06-20 08:09:35 · 1668 阅读 · 0 评论 -
前端常用的 JS 方法封装
1、输入一个值,返回其数据类型function type(para) { return Object.prototype.toString.call(para)}2、数组去重function unique1(arr) { return [...new Set(arr)]}function unique2(arr) { var obj = {}; return arr.filter(ele => { if (!obj[ele]) {转载 2022-05-12 13:51:46 · 890 阅读 · 0 评论 -
JS 对象数组排序的方法实现
这个功能还是很常用的,记录下来,供需要的小伙伴使用:从小到大排序(升序)function compareTop(arr, key){ return arr.sort(function(a,b){ var x = a[key] var y = b[key] return ((x<y)?-1:((x>y)?1:0)) }) } var obj = [{a:1}, {a: 5}, {a:8}, {a:3}] console.log(comp原创 2022-04-24 10:15:23 · 431 阅读 · 0 评论 -
前端优化技巧:构造带有记忆功能的函数
简介在计算机领域,记忆是用于优化程序计算效率的技术:它使函数避免重复演算已经被处理过的输入,返回已经缓存的结果。JavaScript缓存可以用对象和数组来实现。实现以递归实现斐波那契数列为例:var fibonacci = function(n){ return n < 2 ? n : fibonacci(n-1) + fibonacci(n-2)}for(var i = 0; i <= 10; i += 1){ document.writeln('//' + i + ':'原创 2022-04-01 10:32:59 · 524 阅读 · 0 评论 -
JS 数组扁平化方法汇总
(1)join 方法 let colors = ['red', ['green', 'lightgreen', ['yellow']], 'blue'] console.log(colors.join().split(',')) //[ "red", "green", "lightgreen", "yellow", "blue" ](2)toString方法 let colors = ['red', ['green', 'lightgreen', ['yellow']], '原创 2022-01-28 10:21:01 · 152 阅读 · 0 评论 -
提升代码健壮性的利器:可选链运算符
当尝试访问对象属性时,如果对象的值为undefined或null,那么属性访问将产生错误。为了提高程序的健壮性,在访问对象属性时通常需要检查对象是否已经初始化,只有当对象不为undefined和null时才去访问对象的属性。可选链运算符旨在帮助开发者省去冗长的undefined值和null值检查代码,增强了代码的表达能力。可选链操作符( ?. )允许读取位于连接对象链深处的属性的值,而不必明确验证链中的每个引用是否有效。const adventurer = { name: 'Alice', ca原创 2021-12-01 15:20:29 · 928 阅读 · 0 评论 -
js运用代理实现数组负索引
熟悉Python、Ruby或Perl的同学,可能习惯了数组的负索引,它使得你可以使用负索引来逆向检索数组元素,代码如下所示:但是我们知道 JS 中并不存在负索引这种用法,今天我们就来模拟一下负索引的实现。function createNegativeArrayProxy(array){ // 如果传入的参数不是数组,则抛出异常 if(!Array.isArray(array)){ throw new TypeError('Expected an array');原创 2021-11-24 17:32:38 · 2033 阅读 · 0 评论 -
深入研究promise
promise对象是一个占位符,暂时替代那些尚未计算出但未来会计算出的值。对于多个异步操作来说,使用promise对象是非常有好处的。创建一个简单的Promise:深入研究promise(1)使用回调函数解决的问题使用异步代码的原因在于不希望在执行长时间任务的时候,应用程序的执行被阻塞(影响用户体验)。当前,通过使用回调函数解决这个问题:对长期执行的任务提供一个函数,当任务结束后会调用该回调函数。当需要处理的逻辑比较复杂的时候,经常会写出N个回调函数,结果就是代码看上去很繁乱而且不好维护,一旦有原创 2021-11-24 11:17:39 · 617 阅读 · 0 评论 -
JS 中实用但是很少人知道的知识:endsWith(), startsWith()
今天在学习的时候偶然发现的两个方法,分享给大家,希望有用。endsWith():检测字符串是否以指定的子字符串结束。startsWith():检测字符串是否以指定的子字符串开始。startsWith定义startsWith() 方法用于检测字符串是否以指定的子字符串开始。如果是以指定的子字符串开头返回 true,否则 false。startsWith() 方法对大小写敏感。ES6的新方法。语法string.startsWith(searchvalue, start)参数:(1)原创 2021-08-20 18:01:35 · 1582 阅读 · 0 评论 -
前端开发科普:PWA是个啥?
概念PWA(Progressive Web Apps,渐进式 Web 应用) 到底是什么?简单说就是无需下载安装即可使用的应用,意在将 Web 网页服务打包提供类似原生安装应用的使用体验。一个 PWA 应用首先是一个网页, 可以通过 Web 技术编写出一个网页应用. 随后添加上 App Manifest 和 Service Worker 来实现 PWA 的安装和离线等功能。优点:可以添加至主屏幕,点击主屏幕图标可以实现启动动画以及隐藏地址栏实现离线缓存功能,即使用户手机没有网络,依然可以使用一原创 2021-07-26 10:40:57 · 1434 阅读 · 0 评论 -
JS开发技巧:惰性加载函数
惰性载入技巧当我们的程序中有很多 if 语句的时候,某些情况下会造成性能的浪费。因此引入了惰性载入的概念,它指函数执行的分支仅会发生一次。比如:因为不同厂商的浏览器相互之间存在一些行为上的差异,很多 js 代码包含了大量的if语句,将执行引导到正确的分支代码中去,比如下面的例子。function createXHR() { if (typeof XMLHttpRequest != 'undefined') { return new XMLHttpRequest(); }原创 2021-07-22 16:16:56 · 319 阅读 · 0 评论 -
js基础夯实:proxy(代理)
概述Proxy 对象用于创建一个对象的代理,从而实现基本操作的拦截和自定义(如属性查找、赋值、枚举、函数调用等)。Proxy 可以理解成,在目标对象之前架设一层“拦截”,外界对该对象的访问,都必须先通过这层拦截,因此提供了一种机制,可以对外界的访问进行过滤和改写。Proxy 这个词的原意是代理,用在这里表示由它来“代理”某些操作,可以译为“代理器”。它常被作为代理的存储后端。语法var proxy = new Proxy(target, handler);Proxy 对象的所有用法,都是上面这原创 2021-07-17 17:28:28 · 561 阅读 · 0 评论 -
前端面试:谈谈对ES6中的Promise的理解,以及使用场景
Promise 介绍Promise 异步编程的解决方案,比传统的解决方案(回调函数)更加合理和更加强大,主要为了解决回调地狱的问题。什么是回调地狱?来看下面的代码:doSomething(function(result) { doSomethingElse(result, function(newResult) { doThirdThing(newResult, function(finalResult) { console.log('得到最终结果: ' + finalResu原创 2021-07-16 17:12:04 · 659 阅读 · 0 评论 -
js基础夯实——基本类型与引用类型
JS 变量包含两种类型的值:基本类型值与引用类型值。基本类型包括:undefined、null、boolean、number、string引用类型:object特点:基本类型值在内存中占据固定大小的空间,因此被保存在占内存中基本类型值的复制会创建这个值的一个副本引用类型的值是对象,保存在堆内存中包含引用类型值的变量实际上包含的并不是对象本省,而是一个指向该对象的指针从一个变量向另一个变量复制引用类型的值,复制的其实是指针,因此两个变量最终都指向同一个对像确定一个值是哪种基本类型可以使用原创 2021-07-05 17:48:15 · 229 阅读 · 1 评论 -
JS基础夯实——垃圾回收机制
JS 具有自动垃圾收集机制,执行环境会负责管理代码执行过程中使用的内存。原理找出那些不再继续使用的变量,然后释放其占用的内存。因此,垃圾收集器会按照固定的时间间隔周期性的执行这一操作。垃圾收集器会跟踪哪个变量有用哪个变量没用,对于不再使用的变量打上标记,以备将来收回其占用的内存。通常有两个标记变量的方式:(1)标记清除这个也是最常用的标记方式。当变量进入环境时(比如声明变量),将这个变量标记为“进入环境”;当变量离开环境时,则将其标记为“离开环境”。垃圾收集器在运行的时候会给存储在内存中的所有原创 2021-07-05 17:37:50 · 188 阅读 · 0 评论 -
JS冷知识:label 语句记录循环语句中断的值
使用 label 语句可以为一行语句添加标签,以便在复杂结构中,设置跳转目标。语法label : statementlabel 为任意合法的标识符,但不能使用保留字。然后使用冒号分隔签名与标签语句。示例start: for (var i = 0; i < 10; i++) { alert(i);}这个例子中定义的 start 标签可以在将来由 break 或 continue 语句引用。加标签后的语句一般嵌套循环语句连用。比如:var num = 0;outermost:原创 2021-07-02 14:00:05 · 220 阅读 · 0 评论 -
javascript defer与async 的差异
JavaScript 高级程序设计中说:只要代码中不存在 defer 和 async 属性,浏览器都会按照 defer 延迟执行使用这个属性,脚本会被延迟到整个页面都接续完毕后再运行,相当于告诉浏览区立即下载,但延迟执行。虽然这个例子中 注意:(1)延迟脚本不一定会按照顺序执行,也不一定在 DOMContentLoaded 事件前执行,所以最好只包含一个延迟脚本;(2)defer 属性只适用于外部脚本文件async 异步脚本这个属性与 defer 类似,也用于改变处理脚本的行为。但不同的是,标记原创 2021-06-28 09:58:33 · 211 阅读 · 0 评论 -
js数组去重小结
简单一维数组去重set 方法 let arr = [1,0,0,2,9,8,3,1]; function unique(arr) { return Array.from(new Set(arr)) } console.log(unique(arr)); // [1,0,2,9,8,3] orconsole.log(...new Set(arr)); // [1,0,2,9,8,3]数组中对象去重let newArr = []; l原创 2021-06-23 13:36:06 · 208 阅读 · 0 评论 -
判断对象中的属性是否都有值
isObject(form){ let flag = true; for(let key in form){ if(!form[key]){ return false } } return flag },原创 2021-04-23 09:29:41 · 1768 阅读 · 0 评论 -
前端面试必知:session 与 cookie那些事
在前端面试中,或者日常开发中经常会遇到 session 与 cookie ,可是好多小伙伴对它们的了解并不是很深入,所以用的也没那么得心应手。今天我们就来聊聊 session 与 cookie 吧。cookie1.什么是cookieCookie是由服务器端生成,发送给User-Agent,浏览器会将Cookie的key/value保存到某个目录下的文本文件内,下次请求同一网站时就发送该Cookie给服务器。由于HTTP协议是无状态的,而服务器端的业务必须是要有状态的。Cookie诞生的最初目的是为了原创 2020-12-10 19:50:12 · 587 阅读 · 0 评论 -
什么是防抖、节流?怎么实现它们?
类似于输入框联想、监听滚动这种会频繁触发的事件,我们实际上是不需要它们每次都触发的,如果每次都触发会给浏览器造成沉重的负担,防抖和节流就是用来限制这些事件的触发频率的。防抖:在事件被触发n秒后再执行回调,如果在这n秒内又被触发,则重新计时。例子:如果有人进电梯,那电梯将在10秒钟后出发,这时如果又有人进电梯了,我们又得等10秒再出发。思路:通过闭包维护一个变量,此变量代表是否已经开始计时,如果已经开始计时则清空之前的计时器,重新开始计时。function debounce(fn, wait) {原创 2020-11-25 12:15:06 · 445 阅读 · 0 评论 -
前端干货|两种方式给数字加上千分位分隔符
1、使用toLocaleString方法let num = 1234567num = num.toLocaleString() console.log(num)// 1,234,5672、使用正则表达式‘1234567’.replace(/(?=(\B\d{3})+$)/g, ‘,’) // 1,234,567我试了一下,确实可以实现数字格式化,但是有没有人能告诉我第一种方法是为什么呢?难道只是因为电脑设置的问题?...原创 2020-10-26 15:11:21 · 4232 阅读 · 1 评论 -
JS中document对象和window对象有什么区别
很多新入门的小伙伴可能分不清 document 与 window 对象到底有什么区别,总是搞不清楚它们的作用与使用情景,现在我们来仔细说说它们两个到底哪里不一样?一、指代不同1、document对象:代表给定浏bai览器窗口中的 HTML 文档。2、window对象:表示浏览器中打开的窗口。二、作用不同1、document对象:使用 document 对象可以对 HTML 文档进行检查、修改或添加内容,并处理该文档内部的事件。2、window对象:浏览器会为 HTML 文档创建一个 window原创 2020-10-16 10:42:03 · 2056 阅读 · 0 评论 -
JS 纯函数及其应用
什么是纯函数(1)如果函数的调用参数相同,则永远返回相同的结果。它不依赖于程序执行期间函数外部任何状态或数据的变化,必须只依赖于其输入参数。(2)该函数不会产生任何可观察的副作用,例如网络请求,输入和输出设备或数据突变(mutation)。这就是纯的函数。 如果一个函数符合上述 2 个要求,它就是纯函数。纯函数在函数式编程中被大量使用。诸如 ReactJS 和 Redux 等优质的库都使用了纯函数。什么是副作用一个可以被观察的副作用是在函数内部与其外部的任意交互。这可能是在函数内修改外部的变量原创 2020-07-21 19:17:59 · 642 阅读 · 0 评论 -
JS中 target和currentTarget的区别
target:触发事件的元bai素。currentTarget:事件绑定的元素。两者在没有冒泡bai的情况下,是一样的值,du但在用了事件委托的情况下,就不一样了;currentTarget始终是监听事件者,而target是事件的真正发出者。...原创 2020-07-16 14:25:50 · 599 阅读 · 0 评论 -
【JS 函数】JS闭包深入了解
定义闭包是指有权访问另一个 函数作用域中的变量的函数。创建方法创建闭包的常见方式,就是在一个函数内部创建另一个函数。function createComparisonFunction(propertyName) { return function(object1, object2){ var value1 = object1[propertyName]; var value2 = object2[propertyName]; if (value1 < valu原创 2020-07-06 16:54:55 · 309 阅读 · 0 评论 -
【JS 函数】递归函数 之 arguments.callee
传统递归阶乘函数:function factorial(num){ if (num <= 1){ return 1; } else { return num * factorial(num-1); }}虽然这个函数表面看来没什么问题,但下面的代码却可能导致它出错。var anotherFactorial = factorial; factorial = null;alert(anotherFactorial(4)); //出错!当把递归函数保存为原创 2020-07-06 15:14:52 · 516 阅读 · 0 评论 -
JS中如何判断一个数字是整数还是小数
如果一个数是整数,那么 parseInt() 函数和 parseFloat() 函数的返回值是相同的,反之返回不同的值说明是小数,根据这个特点来判断一个数是整数还是小数。<script> window.onload = function () { var oText = document.getElementById("text"); var oBtn = document.getElementById("btn"); oBtn.onclick = function ()原创 2020-07-03 14:08:19 · 9232 阅读 · 1 评论 -
js 引用类型 之 数组(Array)及常用方法汇总
简介数组是js中常用的数据类型之一,但它与其他语言中的数组的差别还是很大的。相同点:都是数据的有序集合不同点:JS 的数组中的每一项可以保存任何类型的数据JS 数组的长度可以动态调整,即随着数据的增加自动增长以容纳数据创建方式Array 构造函数//基本方法var colors = new Array();//创建指定长度的数组var colors = new Array(20);//创建一个包含 20 项的数组//创建指定内容的数组var colors = new原创 2020-07-01 10:38:14 · 1041 阅读 · 0 评论 -
slice,splice和split 区别及用法整理总结
以下方法涉及到截取范围的都是 包含头不含尾,如arr.slice(2,5)指截取下标为2、3、4的元素。slice用法:array.slice(start,end)解释:该方法是对数组进行部分截取,并返回一个数组副本;参数start是截取的开始数组索引end参数为截取截止位置(注意不包含该位置的元素)。注意:(1)该方法适用于数组与字符串(2)可使用负值从数组的尾部选取元素。(...原创 2020-04-29 09:26:10 · 1065 阅读 · 0 评论 -
开发微信小程序时,提示不在以下 request 合法域名列表中怎么办
初学小程序开发的,用微信开发者工具做网络请求的时候,调试会出错,提示“不在以下 request 合法域名列表中,请参考文档”,那怎么解决呢?下面就跟着我一起来试试吧。在开发微信小程序的时候,注册的时候都会有一个appid,这时候分两种情况:(1)申请的测试环境,会分配一个测试用的appid(2)有真正的appid测试环境解决方案(1)打开微信开发者工具,点击右上角的的“详情”。(...原创 2020-03-21 21:38:15 · 23261 阅读 · 6 评论 -
JavaScript规范浅析:CommenJS、ES6 Modules、AMD与CMD
CommenJS规范与ES6 ModulesCommenJS规范CommonJS模块规范,仅仅是JavaScript众多规范中的一个。比较出名的有CommonJS/AMD/CMD等, 最后还有正统的ES6 Modules。CommonJS规范的提出,使得javascript具备开发大型应用的基础能力,规范制定者希望用CommonJS API写出的应用可以具备跨宿主环境的能力,能够在任何地方运...原创 2020-01-13 17:14:00 · 353 阅读 · 0 评论 -
shim 和 polyfill浅谈
shim 和 polyfill都用于解决前端开发中的浏览器兼容问题。传统兼容问题解决兼容问题时,通常有两种思路:以旧版本的 IE 不支持标准的 XMLHttpRequest,但支持自家的 ActiveXObject 方法为例说明。使用jQuery实现方法一将两种方法封装为$.ajax函数,使用时,只要熟悉 $.ajax 方法就可以了,不用考虑浏览器的兼容问题。$.ajax = func...原创 2020-01-08 11:15:46 · 383 阅读 · 0 评论 -
MVX模式汇总
MVX模式是什么最早是Java领域的MVC,然后是MVP,及现在成熟的MVVW。MVCMVC是最广泛的软件架构之一,一般MVC分为:Model(模型)、Controller(控制器)、view(视图)。它的主要是分层,将彼此的职责分开。关系view一般是通过controller来和model进行联系;controller是view和model的协调者;view与model不直接联系...原创 2020-01-02 21:17:19 · 626 阅读 · 0 评论 -
JS函数作用域及作用域链理解
JS函数作用域及作用域链理解从事web开发工作,难免会对客户端语言JavaScript一些概念有些似懂非懂的,甚至仅停留在实现功能的层面上,接下来的文章,是记录我对JavaScript的一些概念的理解。变量作用域在JavaScript中全局变量的作用域比较简单,它的作用域是全局的,在代码的任何地方都是有定义的。然而函数的参数和局部变量只在函数体内有定义。另外局部变量的优先级要高于同名的全局变...原创 2019-12-30 10:55:10 · 361 阅读 · 0 评论 -
JavaScript 进阶技能,中高级前端必备
JavaScript 高级作者: 写代码的小鱼儿Email:282505458@qq.comQQ:282505458微信:15311464808说明:本文档用于学习交流,可传播可分享,如有错误,请联系小鱼儿,感谢矫正与探讨创建对象的三种方式对象字面量对象名 = {}var obj = { name : '张三', age : 20, say : funct...原创 2019-12-30 10:44:22 · 372 阅读 · 0 评论 -
浅拷贝与深拷贝 原理简析及实现方法汇总
@T浅拷贝与深拷贝的区别OC浅拷贝与深拷贝的区别数据类型的分类:1、基础类型:像Number、String、Boolean等这种为基本类型2、引用类型:Object和Array区别深复制和浅复制最根本的区别在于是否是真正获取了一个对象的复制实体,而不是引用。深拷贝和浅拷贝是只针对Object和Array这样的引用数据类型的。浅拷贝浅拷贝只是复制了对象的引用地址,两个对象指向同一个...原创 2019-12-26 17:21:31 · 771 阅读 · 0 评论