![](https://img-blog.csdnimg.cn/20201014180756918.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
JavaScript
文章平均质量分 69
Javascript
Chx.zhang
这个作者很懒,什么都没留下…
展开
-
【JavaScript】过了一年,懒癌患者终于整理了一下『手写Promise 语法糖』
除了 then 方法以外还有◾ 以及目前 Promise 规范的下面来实现一下。将给定的一个值转为Promise对象。"then"resolve()测试通过!!!方法返回一个带有拒绝原因的Promise对象。测试通过!!!catch()方法返回一个Promise,并且处理拒绝的情况。它的行为与调用相同。事实上, calling内部calls。(这句话的意思是,我们显式使用,内部实际调用的是)方法是或的别名,用于指定发生错误时的回调函数。就一行代码,我的天,居然这么简单!!!!!!...原创 2022-08-08 15:52:20 · 991 阅读 · 0 评论 -
【JavaScript】过了一年,懒癌患者终于整理了一下『手写Promise A+』
如果是异步回调,那么保存的成功失败的回调,需要用不同的值保存,因为都互不相同。红框的细节,我们都没有处理,这里要求判断 x 是否为 object 或者 function,满足则接着判断 x.then 是否存在,这里可以理解为判断 x 是否为 promise,这里都功能实际与我们手写版本中。主线程代码立即执行,setTimeout 是异步代码,then 会马上执行,这个时候判断 Promise 状态,状态是 Pending,然而之前并没有判断等待这个状态。我们先简单实现一下 Promise 的基础功能。...原创 2022-08-08 15:48:55 · 1045 阅读 · 0 评论 -
【JavaScript】try-catch-finally 执行逻辑,及是否包含 return的影响
- `catch` 异常会覆盖 `try` 的异常和 `return`- `catch` 的 `return` 覆盖 `try` 的异常和 `return`- `finally` 的异常覆盖 `try/catch` 的异常和 `return`- `finally` 的 `return` 覆盖 `try/catch` 的异常和 `return`- `try/catch/finally` 块中异常或 `return` 之后的代码不会被执行...原创 2022-06-16 13:50:22 · 1322 阅读 · 0 评论 -
【JavaScript】Set、Map、WeakSet、WeakMap
Set是一种叫做集合的数据结构,Map是一种叫做字典的数据结构那什么是集合?什么又是字典呢?集合集合,是由一堆无序的、相关联的,且不重复的内存结构【数学中称为元素】组成的组合字典字典(dictionary)是一些元素的集合。每个元素有一个称作key 的域,不同元素的key 各不相同那么集合和字典又有什么区别呢?共同点:集合、字典都可以存储不重复的值不同点:集合是以[值,值]的形式存储元素,字典是以[键,值]的形式存储Set、Map、WeakSet、WeakMap对比原创 2022-02-08 16:08:21 · 99 阅读 · 0 评论 -
【JavaScript】识别终端为PC或移动Web
function getMobileOrPC() { let browser = { versions: (function () { var u = navigator.userAgent, app = navigator.appVersion return { //移动终端浏览器版本信息 trident: u.indexOf('Trident') > -1,原创 2022-01-13 11:08:35 · 96 阅读 · 0 评论 -
【JavaScript】六种if语句优化方法
1. 三元运算符简单替换if-else优化前:function saveCustomer(customer) { if (isCustomerValid(customer)) { database.save(customer) } else { alert('customer is invalid') }}重构后代码:function saveCustomer(customer) { return isCustomerValid(customer) ?原创 2022-01-10 13:54:08 · 1758 阅读 · 0 评论 -
【JavaScript】String字符串一览汇总
概述定义字符串就是零个或多个排在一起的字符,放在单引号或双引号之中。StringString 全局对象是一个用于字符串或一个字符序列的构造函数。语法字符串字面量采取以下形式:'string text'```js从 ECMAScript 2015 开始,字符串字面量也可以称为模板字面量:hello world hello! world! hello ${who} escape <a>${who}</a>https://developer.mozilla.org原创 2021-12-21 18:18:00 · 812 阅读 · 0 评论 -
【Day.js】一个轻量2KB的处理时间和日期的JavaScript 库,常用API记录与分享
关于时间的操作,一直在使用momentjs这个库。方便灵巧,功能强大。唯一的缺点:包大小为200K。精简的方案:如dayjs和miment。dayjs本身就是对标momentjs进行开发的:Day.js is a minimalist JavaScript library that parses, validates, manipulates, and displays dates and times for modern browsers with a largely Moment.js-compa原创 2021-12-13 12:05:16 · 1347 阅读 · 0 评论 -
【ES2021】ES12新增特性-逻辑赋值运算符、数字分隔符、Promise.any、String.prototype.replaceAl、WeakRefsl
主要有5个新特性:逻辑赋值运算符 ??= &&= 和 ||=数字分隔符 _Promise.any & AggregateErrorString.prototype.replaceAllWeakRefs & FinalizationRegistry对象1. 逻辑赋值运算符??= &&= 和 ||=??= &&= 和 ||=a||=b; // a=a||b; 等价于:a = a ? a : ba&&=b.原创 2021-11-22 14:43:43 · 696 阅读 · 1 评论 -
【ES2019】ES10新增特性-字符串前|后空格去除、数组展开、Symbol属性描述
1. 字符串实例新增方法对字符串实例新增了String.trimStart() 和 String.trimEnd() 这两个方法,是对 ES5中String.trim() 方法的细分:String.trimStart() 消除字符串头部的空格,String.trimEnd() 消除尾部的空格。它们返回的都是新字符串,不会修改原始字符串。const s = ' abc ';s.trim() // "abc"s.trimStart() // "abc "s.trimEnd() // " ab原创 2021-11-18 16:53:57 · 316 阅读 · 0 评论 -
【ES2018】ES9新增特性-对象扩展运算符
对象的扩展运算符ES2018 将ES6中数组扩展运算符(…)扩展运算符引入了对象,实现对象键值对的展开。这一方法的引入可以有以下几点应用:1 对象克隆var obj = { name: 'aaaa', age: 100, say() { console.log('age'+this.age); }, getInfo: function(){}};// 克隆对象 objlet obj2 = {...obj};注意: 同 Object.assign() 相同,用扩展运原创 2021-11-18 11:57:17 · 989 阅读 · 0 评论 -
【ES2017】ES8新增特性- 字符串补全、对象方法
1. async、await异步解决方案提出场景有两个:JS是单线程、优化回调地狱的写法。this.$http.jsonp('/login', (res) => { this.$http.jsonp('/getInfo', (info) => { // do something })})在ES6中为了解决回调的书写方式,引入了Promise的then函数,业务逻辑很多的时候,需要链式多个then函数,语义会变得很不清楚。new Promise((resolve, re原创 2021-11-18 11:33:23 · 511 阅读 · 0 评论 -
【ES2016】ES7特性-幂运算符、数组includes()方法
ES7在ES6的基础上添加三项内容:求幂运算符(**)Array.prototype.includes()方法函数作用域中严格模式的变更。求幂运算符(**)Math.pow(3, 2) === 3 ** 2 // 9Array.prototype.includes(item, [startIndex])数组原型的方法:查找一个数值是否在数组中。注意:只能判断简单类型的数据,无法判断负责类型的数据。该方法接受两个参数:查询的数据、初始的查询索引值。[1, 2, 3].indexO原创 2021-11-17 14:48:47 · 312 阅读 · 0 评论 -
【JavaScript】提高JavaScript代码质量的7个最佳实践
注:转载于 微信公众号的『前端新世界』原创翻译:→ 被第3、4、5条 实践惊艳到了:推荐!!!本文翻译自:https://dev.to/i5han3/git-commit-message-convention-that-you-can-follow-1709自2015年以来,随着ES6的发布,每年都会发布ECMAScript规范的新版本。每次迭代都为该语言添加了新的功能、新的语法和高质量的改进。接着大多数浏览器和Node.js中的JavaScript引擎也会很快追赶上来,所以我们的代码也应该与时翻译 2021-07-27 10:49:20 · 347 阅读 · 0 评论 -
【JavaScript】循环获取数组中固定个数元素
最近在做循环列表的过程中,由于无法简单使用ElementUI现成的Siwper实现一次4个元素的循环显示。于是,自己动手,丰衣足食:直接使用for循环根据点击实现循环显示想要的4个元素;根据click时间,决定获取获取元素。然后犯懒,去百度了一把看有没有现场的函数可以用,无奈没有好用的。分享一下自己的,并留作备用吧。效果验证: let textAllData = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] let index = 0下面是打印值:[ 1, 2,原创 2021-05-21 14:47:09 · 1719 阅读 · 0 评论 -
【JavaScript】几个常用正则表达式
常用正则JS 常用正则验证1 用户名正则 4到16位(字母,数字,下划线,减号)2 密码强度正则3 整数正则4 数字正则5 Email正则6 手机号码正则7 身份证号正则8 URL正则9 IPv4地址正则10 十六进制颜色正则11 日期正则12 QQ号码正则13 微信号正则14 车牌号正则15 包含中文正则JS 常用正则验证1 用户名正则 4到16位(字母,数字,下划线,减号)let checkPwd = (rule, value, callback) => {原创 2021-04-01 16:27:22 · 790 阅读 · 0 评论 -
【JavaScript】JS执行上下文Context
文章目录js的执行上下文在js中,执行上下文保存着函数执行所需的重要信息,其中包括了三个属性:变量对象作用域链this指针https://www.jianshu.com/p/635a5986ec73原创 2021-03-24 17:11:24 · 906 阅读 · 0 评论 -
【JavaScript】JS执行机制及Event Loop
文章目录1. JS的单线程概念2. 任务队列2.1 同步任务&异步任务2.2 宏任务 & 微任务3. EventLoop 事件循环4. 定时器5 示例1. JS的单线程概念JavaScript语言特点就是单线程,其主要用途是与用户互动和DOM操作。因此它只能是单线程,否则会带来复杂的同步问题。为了利用多核CPU的计算能力,HTML5提出Web Worker标准,允许JavaScript脚本创建多个线程,但这并不是真正意义上的多线程,其子线程由主线程完全控制,且子线程不能对DOM原创 2021-03-22 18:14:25 · 224 阅读 · 0 评论 -
【JavaScript】ES2017:Async/Await执行机制及面试例题
前言面试过程中,被问到一个题,因为忽略了await出现后先执行async外面的同步代码而出错,特此记录。题目详情:async function async1(){ console.log('1'); await async2(); console.log('2');}async function async2(){ console.log('3');}console.log('4')setTimeout(function(){ console.log('原创 2021-03-22 17:47:14 · 487 阅读 · 0 评论 -
【JavaScript数据结构与算法】八、排序算法
文章目录1 冒泡排序(Bubble Sort)原理冒泡排序实现2 选择排序(Selection Sort)原理选择排序实现3 插入排序(Insertion Sort)原理插入排序实现4 希尔排序(Shell Sort)原理希尔排序实现5 归并排序(Merge Sort)原理归并排序实现6 快速排序(Quick Sort)原理快速排序实现7 堆排序(Heap Sort)原理堆排序实现8 计数排序(Counting Sort)原理计数排序实现9 桶排序(Bucket Sort)原理桶排序实现10 基数排序(Ra原创 2021-03-11 16:20:07 · 622 阅读 · 0 评论 -
【JavaScript】二叉查找树(BST)
文章目录原理实现验证原理二叉查找树,又称二叉排序树,二叉搜索树。二叉排序树或者是一棵空树,或者是具有下列性质的二叉树:若左子树不空,则左子树上所有节点的值均小于它的根节点的值;若右子树不空,则右子树上所有节点的值均大于它的根节点的值;左、右子树也分别为二叉排序树;没有键值相等的节点。遍历方式:中序:按照节点键值,以升序的方式遍历树所有节点先序:先访问根节点,然后在以同样的方式访问左子树和右子树后序:先访问子节点,从左子树到右子树,最后访问根节点查找方式:查找给定值查找最小原创 2021-03-11 14:25:53 · 117 阅读 · 0 评论 -
【JavaScript】CommonJS\AMD\CMD\ES6 一览表
模块化规范核心思想模块定义与引用优点缺点无模块化script标签引入js文件,顺序加载,相互罗列,但是被依赖的放在前面,否则使用就会报错。–污染全局作用域维护成本高依赖关系不明显CommonJS规范和node.js同步加载模块定义:exports 或module.exports 模块加载:require('module')解决了依赖、全局变量污染的问题(1)不能并行加载模块,会阻塞浏览器加载;(2)代码无法直接运行在浏览器环境下,必须通过工具转换成标准的 ES...原创 2021-03-11 10:56:25 · 84 阅读 · 0 评论 -
【JavaScript】Array数组对象方法总结
js中本身就有数组对象,数组中的每一项都可以保存任何类型的数据.且ECMAScript 数组的大小是可以动态调整的,即可以随着数据的添加自动增长以容纳新增数据。接下来创建的列表、队列、链表等对象都是基于数组的。数组的声明方式:构造函数、对象字面量var array=[] 推荐方式 ,也可赋初值var array=[1,2,3,4,5]var array = new Array(args)args:单个数字-创建length为args的数组;其它-则创建[args]形式的数组。数原创 2021-03-10 23:49:57 · 383 阅读 · 0 评论 -
【JavaScript】<script>标签的异步加载
异步加载script的好处:加快首屏响应速度异步加载script的方式1.异步加载JS getMap.onclick = function(){ //获得需要插入的位置 var oDiv = document.getElementById('div'); //异步创建script var script = document.createElement('script'); script.src = 'https://原创 2021-03-10 16:45:13 · 2263 阅读 · 0 评论 -
【JavaScript】数据结构:列表/栈/队列/链表
文章目录列表栈队列链表对象列表函数内部函数定义属性:listSize 描述列表的长度pos 列表当前的位置length() 返回列表的元素的个数方法:clearList() 清空列表toString() 返回列表的字符串find() 查找列表中的数据insert() 在现有元素后面插入元素append() 在列表末尾添加元素remove() 从列表中删除元素front() 将列表的当前位置移动到一个位置end() 将列表的当前位置移动到最后位置prev() 将当前位置原创 2021-03-10 15:59:13 · 211 阅读 · 1 评论 -
【JavaScript】面向对象
类的声明和实例化声明类有两种方法:// es5构造函数里面的方法和属性function Animal(name){ this.name = name;}// es6 类的构造函数,实例化的时候执行,new的时候执行class Animal2 { constructor(name){ this.name = name; }}类的实例化只有一种方式var a1 = new Animal('shape');var a2 = new Animal2('cat');面向对象原创 2021-03-04 19:20:35 · 141 阅读 · 0 评论 -
【JavaScript】JS原型链
前言protytype在 JavaScript 中,原型也是一个对象,通过原型可以实现对象的属性继承。JavaScript 的对象中(null除外)都包含了一个"prototype"内部属性,这个属性所对应的就是该对象的原型。"prototype"作为对象的内部属性,是不能被直接访问的。function Person() { }// prototype是函数才会有的属性Person.prototype.name = 'Kevin';let person1 = new Person();let原创 2021-03-01 17:10:04 · 157 阅读 · 1 评论 -
小题目
#01 期function sayHi() { console.log(name) console.log(age) var name = 'Lydia' let age = 21}sayHi()A: Lydia 和 undefinedB: Lydia 和 ReferenceErrorC: ReferenceError 和 21D: undefined 和 ReferenceError答案: D在函数内部,我们首先通过 var 关键字声明了 name 变量。这意味着原创 2021-02-22 09:17:37 · 271 阅读 · 0 评论 -
【JavaScript】源码实现(待更新)
文章目录Newcall方法applybindNewnew方法效果:function People(name,age) { this.name = name this.age = age}let peo = new People('Bob',22)console.log(peo.name) // Bobconsole.log(peo.age) // 22实现思路:直接通过原型创建新对象 ;将this(也就是上一句中的新对象)和调用参数传给构造器,执行;如果构造器原创 2020-12-22 20:25:39 · 129 阅读 · 0 评论 -
【Javascript】事件冒泡和事件委托
事件处理机制行内事件处理器——不推荐<button onclick="bgChange()">Press me</button><script> function bgChange() { const rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')'; document.body.style.backgroundColor = rndCol;}&原创 2020-08-30 20:03:43 · 597 阅读 · 0 评论 -
【JavaScript】let(const)与var 关键字
let和const是ES6新增特性,都可生成块级作用域(是指声明在花括号内的变量只在该区域内有效)。let用来声明变量,const用来声明常量(不可修改变量值,数组和对象除外);两者处了在用途有区分外,其他特性一致,如无变量提升、TDZ等。let(const)的出现可以解决的问题:解决ES5中var变量出现的变量提升;降低闭包使用出错的概率;解决使用计数的for循环变量可能会导致的数据泄露;ES5只有全局作用域和函数作用域(对应var声明的全局变量和局部变量时),没有块级作用域(ES6中{}中的原创 2020-05-11 17:08:10 · 157 阅读 · 0 评论 -
【JavaScript】闭包函数总结
【JavaScript学习与理解】闭包函数什么是闭包?闭包出现的原因:js允许函数嵌套。由于在Javascript 语言中,只有函数内部的子函数才能读取局部变量,因此可以把闭包简单理解成定义在一个函数内部的函数。正常函数嵌套:function f(){ var i = 0; function s(){ console.log(i++); //0 } s()...原创 2020-04-11 16:44:49 · 403 阅读 · 0 评论