![](https://img-blog.csdnimg.cn/20190927151124774.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
ECMAScript 6(持续更新中...)
文章平均质量分 92
持续更新中...
chtazy
这个作者很懒,什么都没留下…
展开
-
ES6——26、编程风格
本章探讨如何将 ES6 的新语法,运用到编码实践之中,与传统的 JavaScript 语法结合在一起,写出合理的、易于阅读和维护的代码。多家公司和组织已经公开了它们的风格规范,下面的内容主要参考了公司的 JavaScript 风格规范。原创 2024-04-07 09:31:11 · 926 阅读 · 0 评论 -
ES6——25、Module 的加载实现
JavaScript 现在有两种模块。一种是 ES6 模块,简称 ESM;另一种是 CommonJS 模块,简称 CJS。CommonJS 模块是 Node.js 专用的,与 ES6 模块不兼容。语法上面,两者最明显的差异是,CommonJS 模块使用require()和,ES6 模块使用import和export。它们采用不同的加载方案。从 Node.js v13.2 版本开始,Node.js 已经默认打开了 ES6 模块支持。Node.js 要求 ES6 模块采用.mjs后缀文件名。原创 2024-04-07 09:21:42 · 513 阅读 · 0 评论 -
ES6——24、Module 的语法
历史上,JavaScript 一直没有模块(module)体系,无法将一个大程序拆分成互相依赖的小文件,再用简单的方法拼装起来。其他语言都有这项功能,比如 Ruby 的require、Python 的import,甚至就连 CSS 都有@import,但是 JavaScript 任何这方面的支持都没有,这对开发大型的、复杂的项目形成了巨大障碍。在 ES6 之前,社区制定了一些模块加载方案,最主要的有 CommonJS 和 AMD 两种。前者用于服务器,后者用于浏览器。原创 2024-04-06 15:35:36 · 872 阅读 · 0 评论 -
ES6——23、Class 的继承
Class 可以通过extends关键字实现继承,让子类继承父类的属性和方法。extends 的写法比 ES5 的原型链继承,要清晰和方便很多。上面示例中,Point是父类,ColorPoint是子类,它通过extends关键字,继承了Point类的所有属性和方法。但是由于没有部署任何代码,所以这两个类完全一样,等于复制了一个Point类。下面,我们在ColorPoint内部加上代码。上面示例中,方法和toString()方法内部,都出现了super关键字。super。原创 2024-04-06 15:18:25 · 908 阅读 · 0 评论 -
ES6——22、Class 的基本语法
类的属性和方法,除非显式定义在其本身(即定义在this对象上),否则都是定义在原型上(即定义在class上)。this.x = x;this.y = y;上面代码中,x和y都是实例对象point自身的属性(因为定义在this对象上),所以方法返回true,而toString()是原型对象的属性(因为定义在Point类上),所以方法返回false。这些都与 ES5 的行为保持一致。原创 2024-04-01 15:54:05 · 652 阅读 · 0 评论 -
ES6——21、async 函数
ES2017 标准引入了 async 函数,使得异步操作变得更加方便。async 函数是什么?一句话,它就是 Generator 函数的语法糖。前文有一个 Generator 函数,依次读取两个文件。上面代码的函数gen可以写成async函数,就是下面这样。一比较就会发现,async函数就是将 Generator 函数的星号()替换成async,将yield替换成await,仅此而已。原创 2024-04-01 14:42:33 · 939 阅读 · 0 评论 -
ES6——20. Generator 函数的异步应用
异步编程对 JavaScript 语言太重要。JavaScript 语言的执行环境是“单线程”的,如果没有异步编程,根本没法用,非卡死不可。本章主要介绍 Generator 函数如何完成异步操作。原创 2024-04-01 14:09:58 · 869 阅读 · 0 评论 -
ES6——19. Generator 函数的语法
1、简介基本概念Generator 函数是 ES6 提供的一种异步编程解决方案Generator 函数有多种理解角度。语法上,首先可以把它理解成,Generator 函数是一个状态机,封装了多个内部状态。执行 Generator 函数会返回一个遍历器对象,也就是说,Generator 函数除了状态机,还是一个遍历器对象生成函数。返回的遍历器对象,可以依次遍历 Generator 函数内部的每一个状态。形式上,Generator 函数是一个普通函数,但是有两个特征。一是,function关键字与函数原创 2024-03-29 13:33:14 · 1050 阅读 · 0 评论 -
ES6——18. Iterator 和 for...of 循环
本质上,遍历器是一种线性处理,对于任何非线性的数据结构,部署遍历器接口,就等于部署一种线性转换。不过,严格地说,对象部署遍历器接口并不是很必要,因为这时对象实际上被当作 Map 结构使用,ES5 没有 Map 结构,而 ES6 原生提供了。其次,Set 结构遍历时,返回的是一个值,而 Map 结构遍历时,返回的是一个数组,该数组的两个成员分别为当前 Map 成员的键名和键值。上面代码中,我们将它的遍历接口改成数组的。由于数组的遍历会调用遍历器接口,所以任何接受数组作为参数的场合,其实都调用了遍历器接口。原创 2024-03-28 15:34:49 · 881 阅读 · 0 评论 -
ES6——17. Promise对象
到了那个时候,Promise 的运行已经结束了,所以这个错误是在 Promise 函数体外抛出的,会冒泡到最外层,成了未捕获的错误。方法接受一个数组作为参数,数组的每个成员都是一个 Promise 对象,并返回一个新的 Promise 对象。这就是说,Promise 内部的错误不会影响到 Promise 外部的代码,通俗的说法就是“Promise 会吃掉错误”。事件的监听函数有两个参数,第一个是错误对象,第二个是报错的 Promise 实例,它可以用来了解发生错误的环境信息。方法,依次指定了两个回调函数。原创 2024-03-28 14:49:23 · 1343 阅读 · 0 评论 -
ES6——16.Reflect
Reflect对象与Proxy对象一样,也是 ES6 为了操作对象而提供的新 API。Reflect对象的设计目的有这样几个。将Object对象的一些明显属于语言内部的方法(比如),放到Reflect对象上。现阶段,某些方法同时在Object和Reflect对象上部署,未来的新方法将只部署在Reflect对象上。也就是说,从Reflect对象上可以拿到语言内部的方法。修改某些Object方法的返回结果,让其变得更合理。比如,在无法定义属性时,会抛出一个错误,而则会返回false。// 老写法。原创 2024-03-28 10:41:29 · 1045 阅读 · 0 评论 -
ES6——15. Proxy
Proxy 用于修改某些操作的默认行为,等同于在语言层面做出修改,所以属于一种“元编程”(meta programming),即对编程语言进行编程。Proxy 可以理解成,在目标对象之前架设一层“拦截”,外界对该对象的访问,都必须先通过这层拦截,因此提供了一种机制,可以对外界的访问进行过滤和改写。Proxy 这个词的原意是代理,用在这里表示由它来“代理”某些操作,可以译为“代理器”。${} , {`);`);} });!`);`);} });!`);原创 2024-03-28 08:56:22 · 1058 阅读 · 0 评论 -
ES6——14. Set 和 Map 数据结构
另外,由于 WeakSet 内部有多少个成员,取决于垃圾回收机制有没有运行,运行前后很可能成员个数是不一样的,而垃圾回收机制何时运行是不可预测的,因此 ES6 规定 WeakSet 不可遍历。这就解决了同名属性碰撞(clash)的问题,我们扩展别人的库的时候,如果使用对象作为键名,就不用担心自己的属性与原作者的属性同名。也就是说,上面的 DOM 节点对象除了 WeakMap 的弱引用外,其他位置对该对象的引用一旦消除,该对象占用的内存就会被垃圾回收机制释放。WeakMap 保存的这个键值对,也会自动消失。原创 2024-03-27 11:20:50 · 1005 阅读 · 0 评论 -
ES6——12.运算符的扩展
不再被看成是一个完整的运算符,而会按照三元运算符进行处理,也就是说,那个小数点会归属于后面的十进制数字,形成一个小数。这个运算符的一个特点是右结合,而不是常见的左结合。如果属性链有圆括号,链判断运算符对圆括号外部没有影响,只对圆括号内部有影响。现在的规则是,如果多个逻辑运算符一起使用,必须用括号表明优先级,否则会报错。也就是说,链判断运算符一旦为真,右侧的表达式就不再求值。运算符相当于一种短路机制,只要不满足条件,就不再往下执行。上面代码中,首先计算的是第二个指数运算符,而不是第一个。原创 2024-03-27 11:00:39 · 601 阅读 · 0 评论 -
ES6——11.对象的新增方法
ES5 比较两个值是否相等,只有两个运算符:相等运算符(==)和严格相等运算符(===它们都有缺点,前者会自动转换数据类型,后者的NaN不等于自身,以及+0等于-0。JavaScript 缺乏一种运算,在所有环境中,只要两个值是一样的,它们就应该相等。ES6 提出“Same-value equality”(同值相等)算法,用来解决这个问题。Object.is就是部署这个算法的新方法。它用来比较两个值是否严格相等,与严格比较运算符(===)的行为基本一致。不同之处只有两个:一是+0不等于-0,二是NaN。原创 2024-03-27 10:19:02 · 550 阅读 · 0 评论 -
ES6——10.对象的扩展
ES6 允许在大括号里面,直接写入变量和函数,作为对象的属性和方法。这样的书写更加简洁。除了属性简写,方法也可以简写。CommonJS 模块输出一组变量,就非常合适使用简洁写法。注意,简写的对象方法不能用作构造函数,会报错。原创 2024-03-27 10:18:10 · 863 阅读 · 0 评论 -
ES6——9.数组的扩展
含义扩展运算符(spread)是三个点(...它好比 rest 参数的逆运算,将一个数组转为用逗号分隔的参数序列。扩展运算符与正常的函数参数可以结合使用,非常灵活。扩展运算符后面还可以放置表达式。如果扩展运算符后面是一个空数组,则不产生任何效果。注意,只有函数调用时,扩展运算符才可以放在圆括号中,否则会报错。上面三种情况,扩展运算符都放在圆括号里面,但是前两种情况会报错,因为扩展运算符所在的括号不是函数调用。替代函数的 apply 方法由于扩展运算符可以展开数组,所以不再需要apply。原创 2024-03-27 10:17:26 · 862 阅读 · 0 评论 -
ES6——8.函数的扩展
ES6 允许为函数的参数设置默认值,即直接写在参数定义的后面。参数变量是默认声明的,所以不能用let或const再次声明。使用参数默认值时,函数不能有同名参数。另外,一个容易忽略的地方是,参数默认值不是传值的,而是每次都重新计算默认值表达式的值。也就是说,参数默认值是惰性求值的。上面代码中,参数p的默认值是x + 1。这时,每次调用函数foo,都会重新计算x + 1,而不是默认p等于 100。原创 2024-03-27 10:15:20 · 1028 阅读 · 0 评论 -
ES6——7.数值的扩展
ES6 提供了二进制和八进制数值的新的写法,分别用前缀0b(或0B)和0o(或0O)表示。从 ES5 开始,在严格模式之中,八进制就不再允许使用前缀0表示,ES6 进一步明确,要使用前缀0o表示。如果要将0b和0o前缀的字符串数值转为十进制,要使用Number方法。原创 2024-03-27 10:14:17 · 668 阅读 · 0 评论 -
ES6——7.1.math的扩展
Math.trunc对于非数值,Math.trunc内部使用Number方法将其先转为数值。对于空值和无法截取整数的值,返回NaN。对于没有部署这个方法的环境,可以用下面的代码模拟。原创 2024-03-27 10:12:51 · 288 阅读 · 0 评论 -
ES6——5.字符串的新增方法
0xFFFF上面代码中,如果方法有多个参数,则它们会被合并成一个字符串返回。String。原创 2024-03-27 10:09:36 · 509 阅读 · 0 评论 -
ES6——4.字符串的扩展
ES6 加强了对 Unicode 的支持,允许采用\uxxxx形式表示一个字符,其中xxxx表示字符的 Unicode 码点。原创 2024-03-27 10:07:37 · 356 阅读 · 0 评论 -
ES6——3.变量的解构赋值
对象的解构与数组有一个重要的不同。数组的元素是按次序排列的,变量的取值由它的位置决定;而对象的属性没有次序,变量必须与属性同名,才能取到正确的值。对象的解构赋值,可以很方便地将现有对象的方法,赋值到某个变量。// 例一// 例二如果变量名与属性名不一致,必须写成下面这样。这实际上说明,对象的解构赋值是下面形式的简写(参见《对象的扩展》一章)。也就是说,对象的解构赋值的内部机制,是先找到同名属性,然后再赋给对应的变量。真正被赋值的是后者,而不是前者。原创 2024-03-27 10:06:44 · 727 阅读 · 0 评论 -
ES6——2.let&const
for循环的计数器,就很合适使用let命令。不存在变量提升暂时性死区在代码块内,使用let命令声明变量之前,该变量都是不可用的。这在语法上,称为“暂时性死区”(temporal dead zone,简称 TDZ)。不允许重复声明不允许在内,重复声明同一个变量。原创 2024-03-27 10:04:22 · 507 阅读 · 0 评论