![](https://img-blog.csdnimg.cn/20201014180756780.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
ES6学习笔记
文章平均质量分 82
ES6文档学习笔记
Doe
这个作者很懒,什么都没留下…
展开
-
es6中Map对象的使用
1、语法let mymap=new Map();2、属性Prototype — 原型: 为映射返回对原型的引用。size: 返回映射中的元素数。 eg: mymap.size //返回mymap的长度3、方法set: 添加一个新建元素到映射。clear: 从映射中移除所有元素。 let mymap = new Map(); mymap.set('a', 'aaaaa'); mymap.set('b', 'bbbbb'); mymap.set('c', 'c..原创 2022-03-11 10:35:54 · 713 阅读 · 0 评论 -
Object的遍历和es6切割数组字符串的方法
ES6的Object的遍历1、获取对象的keyObject.keys方法,返回一个数组。成员是参数对象自身的(不含继承的)所有可遍历(enumerable)属性的键名2、获取对象的valueObject.values()方法返回一个数组,成员是参数对象自身的(不含继承的)所有可遍历属性的键值。Object.values()会过滤属性名为Symbol值的属性。会发现 顺序不同!因为顺序遵循属性的遍历的规则如果Object.values()方法的参数是一个.原创 2022-03-10 23:04:56 · 2594 阅读 · 0 评论 -
拿到form数据并阻止默认提交
1、拿到form数据:document.表单名字.name名字2、event.preventDefault()组织默认提交<script> function getFrom(e) { e.preventDefault(); console.log(document.myform.username.value) console.log(document.myform.password.value) }</script><body&g原创 2022-02-26 10:34:16 · 165 阅读 · 0 评论 -
鼠标点击dom获取的e的坐标
一、clientX、clientY点击位置距离当前body可视区域的x,y坐标二、pageX、pageY对于整个页面来说,包括了被卷去的body部分的长度三、screenX、screenY点击位置距离当前电脑屏幕的x,y坐标四、offsetX、offsetY相对于带有定位的父盒子的x,y坐标五、x、y和screenX、screenY一样六、面试题:实现页面上拖拽div container的效果<head> <meta charset=.原创 2022-02-26 08:54:23 · 367 阅读 · 0 评论 -
原生JS获取元素的位置与尺寸
1、上边偏移量,左边的偏移量、外高度,外宽度element.offsetLeft //左边的偏移量,相对于父元素element.offsetTop //上边偏移量,相对于父元素 let test = document.getElementById("test"); console.log("offsetLeft:" + test.offsetLeft) console.log("offsetTop:" + test.offsetTop) ...原创 2022-02-25 22:10:28 · 806 阅读 · 0 评论 -
js创建对象的方式
1、new 操作符 + Object 创建对象var person = new Object(); person.name = "lisi"; person.age = 21; person.family = ["lida","lier","wangwu"]; person.say = function(){ alert(this.name); }2、字面式创建对象var person ={ name: "lisi转载 2021-11-08 22:31:07 · 54 阅读 · 0 评论 -
防抖和节流
原文链接:https://segmentfault.com/a/11900000184281701、为什么会出现防抖和节流防抖和节流严格算起来应该属于性能优化的知识,但实际上遇到的频率相当高,处理不当或者放任不管就容易引起浏览器卡死。所以还是很有必要早点掌握的。从滚动条监听的例子说起先说一个常见的功能,很多网站会提供这么一个按钮:用于返回顶部。这个按钮只会在滚动到距离顶部一定位置之后才出现,那么我们现在抽象出这个功能需求--监听浏览器滚动事件,返回当前滚条与顶部的距离这个需求很简.转载 2021-10-08 09:44:39 · 93 阅读 · 0 评论 -
ES6新增语法
(一)let和const1.letlet 定义变量,变量不可以再次定义,但可以改变其值代码举栗:let name = 'zhangsan';name = 'lisi';console.log(name); // lisilet name = 'wangwu'; // 再次定义,报错:Identifier 'name' has already been declared具有块级作用域。(即大括号)代码举栗:{ let age = 18; console.l转载 2021-09-23 10:26:00 · 137 阅读 · 0 评论 -
一张图看懂JavaScript中数组的迭代方法:forEach、map、filter、reduce、every、some
原文:https://www.cnblogs.com/shuiyi/p/5058524.html总结:map 会返回新的数组foreach 便利数组中每一项reduce 适合做累计运算原创 2021-05-27 08:39:28 · 105 阅读 · 0 评论 -
原型和原型链和instanceof
一、prototype在JavaScript中,每个函数都有一个prototype属性,这个属性指向函数的原型对象。function Person(age) { this.age = age }Person.prototype.name = 'kavin'var person1 = new Person()var person2 = new Person()console.log(person1.name) //kavinconsole.log(person2.转载 2021-05-16 16:24:02 · 463 阅读 · 0 评论 -
JS基本数据类型和引用数据类型的区别及深浅拷贝
1、栈(stack)和堆(heap)stack为自动分配的内存空间,它由系统自动释放 而heap则是动态分配的内存,大小也不一定会自动释放2、数据类型基本数据类型:Number、String、Boolean、Null、undefined、symbol 引用数据类型:Object(在JS中除了基本数据类型以外的都是对象,数据是对象,函数是对象,正则表达式是对象)3、基本数据类型(存放在栈中)基本数据类型是指存放在栈中的简单数据段,数据大小确定,内存空间大小可以分配,它们是直接按转载 2021-05-14 10:04:29 · 145 阅读 · 0 评论 -
事件委托、事件冒泡与事件捕获
事件委托:1、原理那什么叫事件委托呢?它还有一个名字叫事件代理,JavaScript高级程序设计上讲:事件委托就是利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件。有三个同事预计会在周一收到快递。为签收快递,有两种办法:一是三个人在公司门口等快递;二是委托给前台MM代为签收。现实当中,我们大都采用委托的方案(公司也不会容忍那么多员工站在门口就为了等快递)。前台MM收到快递后,她会判断收件人是谁,然后按照收件人的要求签收,甚至代为付款。这种方案还有一个优势,那就是即使公司里来了原创 2021-05-09 20:31:41 · 5368 阅读 · 1 评论 -
跨域解决方法
一、为什么会出现跨域问题出于浏览器的同源策略限制。同源策略(Sameoriginpolicy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的,浏览器只是针对同源策略的一种实现。同源策略会阻止一个域的javascript脚本和另外一个域的内容进行交互。所谓同源(即指在同一个域)就是两个页面具有相同的协议(protocol),主机(host)和端口号(port)二、什么是跨域当一个请求url的协议、域名、转载 2021-05-09 15:52:49 · 169 阅读 · 0 评论 -
DOM的基础
什么是DOM引用《JavaScript高级程序设计(第3版)》的陈述:DOM(文档对象模型)是针对 HTML 和 XML 文档的一个 API(应用程序编程接口)。 DOM 描绘了一个层次化的节点树,允许开发人员添加、移除和修改页面的某一部分。所以,在浏览器请求到页面文件后,解析文档,生成一颗DOM树,之后再读取各层节点进行排布,形成文档流,读取CSS样式进行页面布局,最后再绘制出页面。HTML 与 XML 文档的DOM结构有少许区别。接下来,以HTML文档为示例进行理解。节点层次原创 2021-05-08 20:20:37 · 430 阅读 · 2 评论 -
闭包
1、什么是闭包闭包函数:声明在一个函数中的函数,叫做闭包函数。闭包:内部函数总是可以访问其所在的外部函数中声明的参数和变量,即使在其外部函数被返回(寿命终结)了之后。严格来说,闭包需要满足三个条件:【1】访问所在作用域;【2】函数嵌套;【3】在所在作用域外被调用【1】访问所在作用域 闭包是指可以访问其所在作用域的函数 那这样说来,需要通过作用域链查找变量的函数就是闭包//按照定义一的说法,需要通过作用域链在全局环境中查找变量n的函数foo()就是闭包var n = 0;原创 2021-04-29 20:44:55 · 229 阅读 · 0 评论 -
js中的Data()对象
在JS中使用Date对象来表示一个时间,其中Date()为一个构造函数如果直接使用构造函数创建一个Date对象,则会封装为当前代码执行时间var d = new Date();如果想要显示一个指定的时间,则应该在构造函数中传入一个表示时间的字符串var d2 = new Date("1/3/2019"); // 月/日/年 时间都为北京时间对象名.getDate() //获取当前时间对象是几号对象名.getDay()//获取当前时间对象时周几 ,0表示周日对象名...转载 2021-04-07 09:33:29 · 1346 阅读 · 0 评论 -
详解JS函数柯里化
目录1、首先看看柯里化到底是什么?2、来列一列Currying有哪些好处呢?1. 参数复用2. 提前确认3. 延迟运行3、有没有什么通用的封装方法?4、好处说完了,通用方法也有了,让我们来关注下curry的性能5、最后再扩展一道经典面试题第一次看到柯里化这个词的时候,还是在看一篇算法相关的博客提到把函数柯里化,那时一看这个词就感觉很高端,实际上当你了解了后才发现其实就是高阶函数的一个特殊用法。果然是不管作用怎么样都要有个高端的名字才有用。1、首先看看柯里化到底是什转载 2021-03-22 20:14:38 · 135 阅读 · 0 评论 -
如何实现图片懒加载
1、什么是懒加载?为什么要实现图片懒加载?所谓“懒加载”,就是延迟加载的意思,比如我们加载一个页面,这个页面很长很长,长到我们的浏览器可视区域装不下,那么懒加载就是优先加载可视区域的内容,其他部分等进入了可视区域在加载。懒加载是一种网页性能优化的方式,它能极大的提升用户体验。就比如说图片,图片一直是影响网页性能的主要元凶,现在一张图片超过几兆已经是很经常的事了。如果每次进入页面就请求所有的图片资源,那么可能等图片加载出来用户也早就走了。所以,我们需要懒加载,进入页面的时候,只请求可视区域的图片资源。原创 2021-03-19 15:12:55 · 189 阅读 · 0 评论 -
Event Loop
前言我在学习浏览器和NodeJS的Event Loop时看了大量的文章,那些文章都写的很好,但是往往是每篇文章有那么几个关键的点,很多篇文章凑在一起综合来看,才可以对这些概念有较为深入的理解。于是,我在看了大量文章之后,想要写这么一篇博客,不采用官方的描述,结合自己的理解以及示例代码,用最通俗的语言表达出来。希望大家可以通过这篇文章,了解到Event Loop到底是一种什么机制,浏览器和NodeJS的Event Loop又有什么区别。如果在文中出现书写错误的地方,欢迎大家留言一起探讨。(PS:说转载 2021-03-21 16:00:00 · 129 阅读 · 0 评论 -
JavaScript的绑定与this指向
this 是在函数被调用时确定的,它的指向完全取决于函数调用的地方,而不是它被声明的地方(除箭头函数外)。当一个函数被调用时,会创建一个执行上下文,它包含函数在哪里被调用(调用栈)、函数的调用方式、传入的参数等信息,this 就是这个记录的一个属性,它会在函数执行的过程中被用到。this 在函数的指向有以下几种场景:作为构造函数被 new 调用 作为对象的方法使用 作为函数直接调用 被 call、apply、bind 调用 箭头函数中的 this1、默认绑定 函数独立调用,直接...原创 2021-03-22 20:00:18 · 129 阅读 · 0 评论 -
18、Module 的语法
1、概述CommonJS 模块就是对象,输入时必须查找对象属性。// CommonJS模块let { stat, exists, readfile } = require('fs');// 等同于let _fs = require('fs');let stat = _fs.stat;let exists = _fs.exists;let readfile = _fs.readfile;上面代码的实质是整体加载fs模块(即加载fs的所有方法),生成一个对象(_fs),然后再从这个原创 2021-03-09 19:56:36 · 167 阅读 · 0 评论 -
17、Class 的继承
1、简介Class 可以通过extends关键字实现继承,这比 ES5 的通过修改原型链实现继承,要清晰和方便很多。class Point {}class ColorPoint extends Point {}上面代码定义了一个ColorPoint类,该类通过extends关键字,继承了Point类的所有属性和方法。但是由于没有部署任何代码,所以这两个类完全一样,等于复制了一个Point类。下面,我们在ColorPoint内部加上代码。class ColorPoint ext.原创 2021-03-09 16:47:21 · 88 阅读 · 0 评论 -
16、Class的基本语法
1、简介1、类JavaScript 语言中,生成实例对象的传统方法是通过构造函数。下面是一个例子。function Point(x, y) { this.x = x; this.y = y;}Point.prototype.toString = function () { return '(' + this.x + ', ' + this.y + ')';};var p = new Point(1, 2);上面这种写法跟传统的面向对象语言(比如 C++ 和 Jav原创 2021-03-09 14:39:45 · 197 阅读 · 0 评论 -
15、async函数
目录1、基本用法2、语法1、返回 Promise 对象2、Promise 对象的状态变化3、await 命令4、错误处理5、使用注意点1、基本用法async函数返回一个 Promise 对象,可以使用then方法添加回调函数。当函数执行的时候,一旦遇到await就会先返回,等到异步操作完成,再接着执行函数体内后面的语句。async function getStockPriceByName(name) { const symbol = await get.原创 2021-03-05 17:14:13 · 1478 阅读 · 0 评论 -
14、Promise的对象
目录1、Promise 的含义2、基本用法3、Promise.prototype.then()4、Promise.prototype.catch()5、Promise.prototype.finally()6、Promise.all()7、Promise.race()8、Promise.resolve()(1)参数是一个 Promise 实例(2)参数是一个thenable对象(3)参数不是具有then()方法的对象,或根本就不是对象(4)不带有任何参数.原创 2021-03-05 12:01:41 · 251 阅读 · 2 评论 -
13、Proxy
目录1、概念2、get()3、set()1、概念Proxy 用于修改某些操作的默认行为,等同于在语言层面做出修改,所以属于一种“元编程”(meta programming),即对编程语言进行编程。Proxy 可以理解成,在目标对象之前架设一层“拦截”,外界对该对象的访问,都必须先通过这层拦截,因此提供了一种机制,可以对外界的访问进行过滤和改写。Proxy 这个词的原意是代理,用在这里表示由它来“代理”某些操作,可以译为“代理器”。var obj =..原创 2021-03-04 22:14:00 · 400 阅读 · 1 评论 -
12、Set 和 Map 数据结构
目录1、Set1、基本用法2、Set 实例的属性和方法3、遍历操作(1)keys(),values(),entries()(2)forEach()(3)遍历的应用2、WeakSet1、含义2、语法3、Map1、含义和基本用法2、实例的属性和操作方法(1)si#ze 属性(2)Map.prototype.set(key, value)(3)Map.prototype.get(key)(4)Map.prototype.has(key).原创 2021-03-04 11:53:59 · 104 阅读 · 1 评论 -
11、Symbol
1、概述ES6 引入了一种新的原始数据类型Symbol,表示独一无二的值。它是 JavaScript 语言的第七种数据类型,前六种是:undefined、null、布尔值(Boolean)、字符串(String)、数值(Number)、对象(Object)。Symbol 值通过Symbol函数生成。这就是说,对象的属性名现在可以有两种类型,一种是原来就有的字符串,另一种就是新增的 Symbol 类型。凡是属性名属于 Symbol 类型,就都是独一无二的,可以保证不会与其他属性名产生冲突。l原创 2021-03-04 10:40:38 · 110 阅读 · 1 评论 -
10、对象的新增方法
1、Object.is()ES6 提出“Same-value equality”(同值相等)算法,用来解决这个问题。Object.is就是部署这个算法的新方法。它用来比较两个值是否严格相等,与严格比较运算符(===)的行为基本一致。Object.is('foo', 'foo')// trueObject.is({}, {})// false不同之处只有两个:一是+0不等于-0,二是NaN等于自身。+0 === -0 //trueNaN === NaN // false.原创 2021-03-03 21:32:57 · 675 阅读 · 1 评论 -
9、对象的扩展
1、简单表示属性ES6 允许在大括号里面,直接写入变量和函数,作为对象的属性和方法。这样的书写更加简洁。const foo = 'bar';const baz = {foo};baz // {foo: "bar"}// 等同于const baz = {foo: foo};const baz = {foo: foo}; 变量foo直接写在大括号里面。这时,属性名就是变量名, 属性值就是变量值。function f(x, y) { return {x, y};}..原创 2021-03-03 19:24:35 · 136 阅读 · 0 评论 -
8、数组的扩展
目录1、扩展运算符A、含义B、替代函数的apply方法2、扩展运算符的应用(1)复制数组(2)合并数组(3)与解构赋值结合(4)字符串(5)实现了 Iterator 接口的对象(6)Map 和 Set 结构,Generator 函数3、Array.from()4、Array.of()5、数组实例的 copyWithin()6、数组实例的 find() 和 findIndex()7、数组实例的 entries(),keys() 和 values.原创 2021-03-03 12:06:55 · 101 阅读 · 0 评论 -
7、函数的扩展
1、函数参数的默认值原创 2021-03-02 13:18:11 · 236 阅读 · 0 评论 -
6、数值的扩展
目录1、二进制和八进制表示法2、Number.isFinite()、 Number.isNaN()3、Number.parseInt() Number.parseFloat()4、Number.isInteger()5、Math对象的扩展1、Math.trunc()2、Math.sign()3、Math.cbrt()6、指数运算符1、二进制和八进制表示法ES6 提供了二进制和八进制数值的新的写法,分别用前缀0b(或0B)和0o(或0O)表示。0b1...原创 2021-03-01 16:26:15 · 172 阅读 · 1 评论 -
5、正则的扩展
1、RegExp构造函数在 ES5 中,RegExp构造函数的参数有两种情况。第一种情况是,参数是字符串,这时第二个参数表示正则表达式的修饰符(flag)。var regex = new RegExp('xyz', 'i');// 等价于var regex = /xyz/i;第二种情况是,参数是一个正则表示式,这时会返回一个原有正则表达式的拷贝。var regex = new RegExp(/xyz/i);// 等价于var regex = /xyz/i;但是,ES5原创 2021-03-01 13:44:51 · 72 阅读 · 0 评论 -
4、字符串的新增方法
目录1String.fromCodePoint()2、String.raw()3 实例方法codePointAt()4 实例方法:normalize()5 实例方法:includes()startsWith()endsWith()6 实例方法:repeat()7 实例方法:padStart(),padEnd()8 实例方法:trimStart()trimEnd()9 实例方法 matchAll()10 实例方法:replaceAll()1Strin...原创 2021-03-01 11:43:18 · 190 阅读 · 0 评论 -
3、字符串的扩展
1 字符的Unicode表示法ES6 加强了对 Unicode 的支持,允许采用\uxxxx形式表示一个字符,其中xxxx表示字符的 Unicode 码点。"\u0061"// "a"但是,这种表示法只限于码点在\u0000~\uFFFF之间的字符。超出这个范围的字符,必须用两个双字节的形式表示。"\uD842\uDFB7"// "????""\u20BB7"// " 7"上面代码表示,如果直接在\u后面跟上超过0xFFFF的数值(比如\u20BB7),JavaScri原创 2021-02-28 21:57:53 · 242 阅读 · 0 评论 -
2、变量的解构赋值
1 数组的解构赋值A、基本用法ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构let [a, b, c] = [1, 2, 3];本质上,这种写法属于“模式匹配”,只要等号两边的模式相同,左边的变量就会被赋予对应的值。下面是一些使用嵌套数组进行解构的例子。let[foo,[[bar],baz]]=[1,[[2],3]];foo//1bar//2baz//3let[,,third]=["foo","bar"...原创 2021-02-27 22:32:24 · 233 阅读 · 0 评论 -
1、let 和 const 命令
1 let 命令ES6 新增了let命令,用来声明变量。它的用法类似于var,但是所声明的变量,只在let命令所在的代码块内有效。上面代码在代码块之中,分别用let和var声明了两个变量。然后在代码块之外调用这两个变量,结果let声明的变量报错,var声明的变量返回了正确的值。这表明,let声明的变量只在它所在的代码块有效。for循环的计数器,就很合适使用let命令。上面代码中,计数器i只在for循环体内有效,在循环体外引用就会报错。但是一旦用了var上面代码中,变量i.原创 2021-02-27 17:14:56 · 193 阅读 · 0 评论