Javascript/jQuery/ES6
关于Javascript/jQuery/ES6
这个东西不好和你解释,因为我是菜狗
这个作者很懒,什么都没留下…
展开
-
将多维数组转为一维数组
1. reduceconst flatten = arr => { return arr.reduce((pre, cur) => { return pre.concat(Array.isArray(cur) ? flatten(cur) : cur) }, [])}2. 函数递归const res = [];const flatten = arr => { for (let i = 0; i < arr.length; i++)原创 2021-08-04 10:13:52 · 135 阅读 · 0 评论 -
onload和DocumentContentLoaded的区别?原生js如何实现事件的绑定和解绑?
1、参考:简述domready和onload事件的区别主要区别:DocumentContentLoaded在DOM树加载完之后立刻触发,DOM树加载完成之后,继续加载图片等外部文件,加载完成之后,onload事件触发。2、参考:原生js–事件绑定、事件监听器及事件解绑(1)事件绑定方式内联模式(不符合结构、行为、样式相分离的原则)外联模式(同一事件只能给同一元素绑定一次)事件监听器(2)事件监听器addEventListener():btn.addEventListener原创 2020-10-12 12:41:13 · 1728 阅读 · 0 评论 -
正则表达式以及贪婪匹配
1、正则表达式正则表达式是构成搜索模式的字符序列。常用方法:search() :使用表达式来搜索匹配,然后返回匹配的位置replace() :返回模式被替换处修改后的字符串修饰符i : 执行对大小写不敏感的匹配g:执行全局匹配(查找所有匹配而非在找到第一个匹配后停止)m:执行多行匹配表达式模式[abc]:查找方括号之间的任何字符[0-9]:查找任何从 0 至 9 的数字(x|y):查找由 | 分隔的任何选项元字符\d:查找数字\s:查找空白字符\b:匹原创 2020-09-18 13:35:58 · 266 阅读 · 0 评论 -
js合并数组的方法
参考:js数组合并的几种方法1、concat: 产生一个新数组,不会改变原有数组 var arr1 = [1, 2, 3]; var arr2 = ['a', 'b', 'c']; var newArr = arr1.concat(arr2); console.log(newArr);// [1, 2, 3, "a", "b", "c"] console.log(arr1 );// [1, 2, 3] 2、循环遍历 var arr1 = [1, 2, 3] var arr2 =原创 2020-09-17 09:40:54 · 333 阅读 · 0 评论 -
ajax和axios fetch的区别
参考:ajax和axios、fetch的区别1、 Ajax传统的Ajax指的是 XMLHttpRequest(XHR),一种发送后端请求技术。通过在后台与服务器进行少量数据交换,Ajax可以使网页实现异步更新,这意味着可以在不重新加载整个网页得情况下,对网页某部分进行更新。缺点:本身是针对MVC的编程,不符合现在MVVM模式JQuery整个项目太大,单纯使用ajax却要引入整个JQuery非常不合理不符合关注分离原则。参考:理论篇:关注点分离(Separation of concerns, S原创 2020-09-16 10:37:00 · 196 阅读 · 0 评论 -
实现深浅拷贝的方法有哪些?
参考:js浅拷贝及深拷贝的几种方法1、浅拷贝(1) Object.assign()参考:Object.assign()用法讲解var obj1 = {a: 1, b: 2};var obj2 = Object.assign({}, obj1);(2) 解构赋值var obj1 = {a: 1, b: 2};var obj2 = {...obj1};浅拷贝实现原理:function shallowCopy(obj) { var target = {}; for (let i i原创 2020-09-15 23:21:59 · 3239 阅读 · 1 评论 -
js中常见的设计模式有哪些?
参考:JavaScript 中常见设计模式整理详解 Javascript十大常用设计模式1、常用的设计模式单例模式一个类只能构造出一个实例。即如果有实例化,只能实例化一次实现:使用一个变量来标识该类是否被实例化例如我们实现弹窗,点击的时候创建一个div元素,如果频繁点击就会不断的创建和删除,此时使用单例模式则只会实例化一次策略模式定义一系列的算法,把它们一个个封装起来,并且使它们可以相互替换根据不同的参数可以命中不同的策略,例如动画库里的算法函数代理模式代理对象和本体对原创 2020-09-07 16:49:46 · 959 阅读 · 0 评论 -
JS有哪些判断是否是数组的方法?
参考:JS判断是否是数组的四种做法1、instanceoflet a = [];a instanceof Array; //trueinstanceof运算符检测Array.prototype属性是否存在于变量a的原型链上.。存在问题:prototype属性是可以修改的,所以并不是最初判断为true就一定永远为真当我们的脚本拥有多个全局环境,例如html中拥有多个iframe对象,不同的全局环境会拥有自己的Array.prototype属性,Array.prototype !== win原创 2020-09-02 07:30:43 · 260 阅读 · 0 评论 -
JS中的事件委托是什么?
JavaScript事件代理和事件委托1、定义事件委托就是利用事件冒泡机制,只指定一个事件处理程序,就可以管理某一类的所有事件2、为什么要用事件委托?给DOM添加事件处理程序后,需要不断的与DOM节点进行交互,访问DOM的次数越多,引起浏览器重排和重绘的次数也越多。如果用事件委托,就可以将所有的操作放入到js程序里面,与DOM的操作就只需要交互一次,这样可以大大的减少与DOM的交互次数,提高性能3、DOM2级事件事件捕获:当某个元素触发某个事件(如onclick),顶层对象document就会原创 2020-08-31 17:21:06 · 467 阅读 · 0 评论 -
说一下script标签中defer和async的区别?
参考:浅谈script标签中的async和defer1、前提原创 2020-08-31 10:03:52 · 256 阅读 · 0 评论 -
跨域的实现方式有哪些?
跨域的实现方式有很多种,比较典型的两种方式jsonp和CORS可以参考我之前的博客:添加链接描述参考:前端常见跨域解决方案(全)跨域解决方案通过jsonp跨域document.domain + iframe跨域location.hash + iframe跨域window.name + iframe跨域postMessage跨域跨资源共享(CORS)nginx代理跨域nodejs中间件代理 跨域WebSocket协议跨域1、jsonp简单归纳:因为<script>原创 2020-08-31 08:28:14 · 290 阅读 · 0 评论 -
如何计算DOM树的深度?
1、什么是DOM( Document Object Model(文档对象模型))W3C DOM 标准被分为 3 个不同的部分:核心 DOM - 针对任何结构化文档的标准模型XML DOM - 针对 XML 文档的标准模型HTML DOM - 针对 HTML 文档的标准模型什么是HTML DOM?HTML 的标准对象模型HTML 的标准编程接口W3C 标准HTML DOM 定义了所有 HTML 元素的对象和属性,以及访问它们的方法。2、什么是DOM节点**根据 W3C 的 HTM原创 2020-08-30 16:30:04 · 798 阅读 · 0 评论 -
async/awiat和promise之间的区别
今天看到了一段代码async function async1() { console.log('async1 start'); await async2(); console.log('async1 end');}async function async2() { console.log('async2');}console.log('script start');setTimeout(function() { console.log('setTimeout');}, 0)原创 2020-08-30 00:33:02 · 536 阅读 · 0 评论 -
promise.all promise.race promise.allSettled的区别?用promise.all实现promise.allSettled
参考:promisePromise 中的三兄弟 .all(), .race(), .allSettled()简单概括:1、promise.all()Promise.all()方法接受一个数组作为参数,p1、p2、p3都是 Promise 实例只有p1、p2、p3的状态都变成fulfilled,p的状态才会变成fulfilled,此时p1、p2、p3的返回值组成一个数组,传递给p的回调函数只要p1、p2、p3之中有一个被rejected,p的状态就变成rejected,此时第一个被reject的原创 2020-08-28 09:38:13 · 721 阅读 · 0 评论 -
ES2015 ES2016 ES2017 Javascript的关系是什么?
参考:ECMAScript6简介1、概括ECMAScript和JavaScript的关系是,前者是后者的规格,后者是前者的一种实现。(ECMAScript 方言还有 JScript 和 ActionScript)ES5指ECMAScript 5.1版,ES6指的是javascript语言的下一个版本ECMAScript 2015是ES6的第一个版本,简称ES2015,在2015年正式发布现在ES6主要是泛指“下一代Javascript语言”,涵盖了ES2015,ES2016,ES2017等等,而原创 2020-08-27 15:48:05 · 965 阅读 · 0 评论 -
说一下js中函数的一个执行过程?函数有哪些属性?什么时隐式原型什么是显示原型?以及js如何优化内存管理?
概括创建函数的执行环境复制函数的[[ scopes]]属性中的对象构建起执行环境中的作用域链创建函数的活动对象并推入执行环境中作用域链的前端执行代码销毁执行环境和活动对象(闭包情况下活动对象仍然被引用没被销毁)1、什么是执行环境?ans:执行环境定义了变量或函数有权访问的其他数据,每个执行环境都有一个与之关联的变量对象,环境中所有定义的变量和函数都保存在这个对象中。2、什么是作用域链ans:当代码在环境中执行的时候,会创建变量对象的一个作用域链。作用域链的作用就是保证执行环境有权访问的原创 2020-08-27 14:48:25 · 184 阅读 · 0 评论 -
js中有哪些数组去重方法?
参考:JS实现数组去重方法整理1、ES6的new Set()let arr = [1, 1, 1, 3, 3, 2, 5, 5, 5];let set = new Set(arr);console.log(set); // Set { 1, 3, 2, 5 }console.log([...set]); // [ 1, 3, 2, 5 ]console.log(Array.from(set)); // [ 1, 3, 2, 5 ]在这里要补充三个知识点:参考:数组的扩展Set 和原创 2020-08-24 16:52:38 · 198 阅读 · 0 评论 -
null和undefined的区别是什么?
参考:undefined与null的区别1、undefined表示“无”的原始值或者说表示“缺少值”,就是此处应该有一个值但是还没有定义转为数值为NaN例如变量被声明了但没有赋值,就等于undefined;函数没有返回值默认返回undefined;对象没有赋值的属性,该属性的值为undefinedvar i;i // undefinedfunction f(x){console.log(x)}f() // undefinedvar o = new Object();o.p //原创 2020-08-22 06:41:16 · 2477 阅读 · 0 评论 -
es6中对数组进行遍历的方法有哪些?区别是什么?
1、for … of :改变原数组ES6引入了for...of循环,作为遍历所有数据结构的统一方法,包括:数组,Set和Map结构,某些类似数组的对象(比如arguments\DOM NodeList对象)、Generator对象,字符串let arr = ['red', 'green', 'blue'];for (let i of arr) { console.log(i); // red green blue}// 遍历数组的键值for (let i of arr.values())原创 2020-08-21 07:54:45 · 1149 阅读 · 2 评论 -
js中的深拷贝,浅拷贝原理是什么?
javascript中的原始类型和引用类型,以及函数按值传参原创 2020-08-20 06:39:05 · 1145 阅读 · 0 评论 -
Promise.all的原理是什么?
参考:ES6 Promise用法小结Promise.all()方法用于将多个 Promise 实例,包装成一个新的 Promise 实例。该方法提供了并行执行异步操作的能力,并且在所有异步操作执行完并且执行结果都是成功的时候才执行回调。const p = Promise.all([p1, p2, p3]); Promise.all()方法接受一个数组作为参数,p1、p2、p3都是 Promise 实例,如果不是,就会先调用Promise.resolve方法将参数转为 Promise 实例再进一步处原创 2020-08-19 13:02:19 · 662 阅读 · 0 评论 -
JS异步编程的实现方式有哪些?
参考:什么叫异步JS异步编程 (2) - Promise、Generator、async/await原创 2020-08-19 12:39:34 · 870 阅读 · 0 评论 -
普通函数和箭头函数的区别是什么?
参考:普通函数和箭头函数的区别1、 箭头函数是匿名函数,不能作为构造函数,不能使用new2、箭头函数不绑定arguments,取而代之用rest参数“…”解决let B = (b)=>{ console.log(arguments);}B(2,92,32,32); // Uncaught ReferenceError: arguments is not definedlet C = (...c) => { console.log(c);}C(3,82,32,113原创 2020-08-19 07:59:18 · 562 阅读 · 0 评论 -
ES6解构赋值怎么修改名字?
通过模式匹配:因为对象的解构赋值的内部机制,是先找到同名属性,然后再赋给对应的变量。真正被赋值的是后者,而不是前者。let { foo: foo, bar: bar } = { foo: 'aaa', bar: 'bbb' };console.log(foo); // 'aaa'let { foo: baz } = { foo: 'aaa', bar: 'bbb' }; // 此时foo是匹配的模式,baz才是变量。真正被赋值的是变量baz,而不是模式foobaz // ’aaa’foo原创 2020-08-19 07:16:50 · 5147 阅读 · 1 评论 -
什么是闭包?
1.定义闭包就是有权访问另一个函数变量的函数。被访问的局部变量所在的函数即为闭包。创建闭包的最常见的方式就是在一个函数内创建另一个函数,通过另一个函数访问这个函数的局部变量,利用闭包可以突破作用链域function fn() { var num = 10; return function() { console.log(num); }}var f = fn();f();2. 好处与缺点闭包的主要作用,一个是可以读取函数内部的变量,延伸变量的作用范围;原创 2020-07-20 07:00:51 · 95 阅读 · 0 评论 -
ES6声明变量的6种方式,var function let const import class
在ES5中,顶层对象的属性与全局变量是等价的。window.a = 1;a // 1a = 2;window.a // 2所以在ES6中,一方面规定,为了保持兼容性,var命令和function命令声明的全局变量,依旧是顶层对象的属性;另一方面规定,let命令、const命令、class命令声明的全局变量,不属于顶层对象的属性。var a = 1;window.a // 1let b = 1;window.b // undefined1. let的特点let声明的变量只在它所原创 2020-07-19 23:41:56 · 331 阅读 · 0 评论 -
谈谈对this对象的理解?
箭头函数不绑定this,箭头函数没有自己的this关键字如果在箭头函数中使用this,this关键字将指向箭头函数定义位置的thisfunction fn() { console.log(this);}const obj = {name: 'zhangsan'};fn.call(obj); // fn内部的this指向obj对象//{ name: 'zhangsan' }例子:var obj = { age: 20, say: () => {原创 2020-07-19 23:14:43 · 3014 阅读 · 0 评论 -
进程和线程的区别是什么?什么是Even Loop?异步任务是如何被执行的?
进程和线程的区别是什么?ans:我们知道javascript是单线程的语言,在讨论为什么是单线程之前,先弄清楚进程和线程的区别是什么。若将CPU比作一个工厂,进程就是这个工厂的车间。单个CPU一次只能运行一个任务,其他进程处于非运行状态,所以我们可以假设这个工厂的电力每次只能供一个车间工作。车间里面有很多工人,他们协同完成一个任务,线程就好比车间里面的工人,一个进程可以包括多个线程。车间的空间是工人共享的,即进程的内存空间可以被线程共享。但车间里的房间有大有小,有的只能容纳一个人,如厕所,有的可以容纳.原创 2020-07-19 12:46:38 · 222 阅读 · 0 评论 -
事件:什么是事件流?什么是事件模型?什么是事件代理?什么是事件对象?
什么是事件流?ans:事件流:描述从页面中接收事件的顺序(1) 事件冒泡:事件开始时由最具体的元素接收,然后逐级向上传播到较为不具体的节点(2) 事件捕获:不太具体的节点先接收事件,而具体的节点最后接收到事件(3) “DOM2级事件”:规定事件流包括三个阶段:事件捕获阶段、处于目标阶段、事件冒泡阶段事件“捕获”和“冒泡”执行次数和事件的执行顺序ans:按照DOM2级事件(1) 事件执行次数:元素绑定多少个事件,就执行多少次。前提是:事件确实被触发事件绑定几次就算几个事件,就算..原创 2020-07-19 08:39:39 · 350 阅读 · 0 评论 -
JS原型以及继承机制
对象如何创建?ans:通过构造函数模式与原型模式相结合。利用构造函数模式定义实例属性,利用原型模式定义方法和共享属性。如下代码所示:function Person() { this.friends = ["Haier", "John"];}Person.prototype.species = "人类";Person.prototype.habbit = function() { alert("打篮球");}var person1 = new Person();var.原创 2020-07-18 21:01:06 · 158 阅读 · 0 评论 -
说说对作用域链的理解?
作用域链的用途?ans:保证对执行环境有权访问的所有变量和函数的有序访问。作用域链的前端:当前执行代码所在环境的变量对象作用域链的末端:全局执行环境的变量对象访问规则?ans:内部环境可以通过作用域链访问所有的外部环境,但外部环境不能访问内部环境中的任何变量和函数如何延长作用域链?ans:(1)try-catch语句的catch模块:(2)with语句这两个语句都会在作用域链的前端添加一个变量对象。with会将指定对象添加到作用域链中,catch会创建一个新的变量对象,其中包含被抛出的错.原创 2020-07-18 14:47:58 · 268 阅读 · 0 评论