ES6系列
懂懂kkw
持续精进
展开
-
ECMAScript 6(26)Module
1.概述module (模块)简单说就是一些公共js(方法或者对象等),在分别要在多个地方需要使用,但是呢,我们又不想全局引入这些文件(会污染全局变量),于是就有了模块这个概念,模块就是保存了这一系列这些方法,我们需要哪一个取哪一个CommonJS,AMD,CMDes6模块化es6模块有以下特点静态化,加载哪些,可以在编译的时候就确定,而不是只有当运行的时候才确定;模块内部的作用域是独立的,不同模块即使有同名变量,只要该变量不影响外部,那么也是互不干扰的;内部自动严格模式原创 2020-08-04 22:32:04 · 165 阅读 · 0 评论 -
ECMAScript 6(25)class继承
1. class 继承1.1 什么是继承就是定义两个类,一个类中包含了另一个类中大多数的方法和属性,那么定义两个方法和属性重复度高的类就有点浪费.于是通过继承 把 A 类的方法继承给 B,那么 B 就可以使用 A 类的方法和属性,这就是继承.B 继承 A,A 就叫父类,B 子类.es5 是如何实现继承的, 定义两个构造函数, 通过在子类中使用 apply 调用父类,重新定义父类 this 指向实现属性的继承,然后子类的 prototype = 父类的 prototype 实现方法的继承,但是这样就原创 2020-07-26 23:43:41 · 197 阅读 · 0 评论 -
ECMAScript 6(24)class基本语法
1. class简介1.1 classES6 的class可以看作只是一个语法糖,它的实现,依然是通过构造函数和原型链来实现的.传统构造函数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);class 基本语原创 2020-07-25 23:32:19 · 263 阅读 · 0 评论 -
ECMAScript 6(23)async函数
1. async 简介1.1 async 是什么?是Generator函数的语法糖,比Generator函数更强大一些。主要用于解决依次异步调用异步函数的问题。即当第一个异步调用结束后,再调用第二个异步函数;等第二个调用完成后再调用第三个的这种情况。以往实现需要进行回调函数多层嵌套才能实现,但这种写法会导致多层回调函数嵌套,形成可怕的回调地狱,既不方便维护,也不方便理解。而新的写法可以解决以上这些问题,让原本的回调地狱,变成类似同步函数一样的写法。极大的减轻了代码的复杂度。在async函数出来之前原创 2020-07-24 23:18:45 · 289 阅读 · 0 评论 -
ECMAScript 6(22)Thunk函数
1. 异步异步编程的几种方法回调函数事件监听发布/订阅Promise 对象Generator 函数比如,有一个任务是读取文件进行处理,任务的第一段是向操作系统发出请求,要求读取文件。然后,程序执行其他任务,等到操作系统返回文件,再接着执行任务的第二段(处理文件)。这种不连续的执行,就叫做异步。 连续的执行就叫做同步。一个有趣的问题是,为什么 Node 约定,回调函数的第一个参数,必须是错误对象err(如果没有错误,该参数就是null)?原因是执行分成两段,第一段执行完以后,任原创 2020-07-22 23:57:37 · 259 阅读 · 0 评论 -
ECMAScript 6(21)Generator 函数的语法
1. 是什么调用 Generator 函数后,该函数并不执行调用后不反回结果, 返回一个对象, 遍历器对象(Iterator Object)。对象调用next()方法,进入下一步. 简单说, Generator 函数是分段执行的,yield表达式是暂停执行的标记,而next方法可以恢复执行。如果没有return语句,就执行到函数结束done属性是一个布尔值,表示是否遍历结束。done属性的值true,表示遍历已经结束。yield表达式后面的表达式,只有当调用next方法、内部指针指向该语句时才原创 2020-07-19 23:35:05 · 328 阅读 · 0 评论 -
ECMAScript 6(20)Iterator 和 for...of 循环
1.Iterator(遍历器)的概念简单说就是一个接口,用于访问有其接口的数据类型;Iterator 的作用有三个:一是为各种数据结构,提供一个统一的、简便的访问接口;二是使得数据结构的成员能够按某种次序排列;三是 ES6 创造了一种新的遍历命令 for…of 循环,Iterator 接口主要供 for…of 消费。举个栗子// 内部实现大概就是这个样子function Array(arr) { function Iterator() { let index = 0原创 2020-07-19 00:45:53 · 195 阅读 · 0 评论 -
ECMAScript 6(20)Promise
1. 什么是PromisePromise 是解决异步编程的一种解决方案.简单的来说, Promise就是一个容器里面保存着某个未来才会结束的时间的结果有进行中(pending)、成功(resolved)、失败(rejected)三种状态对象的状态不受外界影响,只会根据预先设定的情况执行代码,方便从pending状态切换到resolved或者rejectedPromise对象在创建后会立即执行,但他的then是异步的(即使状态立刻改变,也要等其他代码执行完毕后才会去执行)Promise对象的状态原创 2020-07-17 22:02:23 · 150 阅读 · 0 评论 -
ECMAScript 6(19)Reflect
Reflect1. 是什么?一种操作对象的新的API 原Object所有属性方法,新API都有(原来那一套存在缺陷) 返回值更加合理(失败返回false而不是抛错); 函数式调用(而非属性式) 在使用Proxy时,使用本方法效果比直接通过对象属性调用效果更好2. 怎么用?2.1 读取Reflect.get(target, propertyKey[, receiver])...原创 2020-02-26 00:04:09 · 216 阅读 · 0 评论 -
ECMAScript 6(18)Proxy代理 (对象的代理)
简述 :用于修改对某个对象的属性的操作的默认行为; 返回值和原对象有一层代理的差异; 返回值还是基于原对象的一系列操作, 最终还是修改的原对象的值; 拦截对象的属性, 可以对其进行读取, 修改, 遍历等操作; 继承的属性, 拦截也有效果;1.Proxy代理简单说就是对对象, 加了一层中间的操作 , 你访问属性和设置属性会经过一层中间加工.1.1 语法var pro...原创 2019-06-03 14:52:33 · 287 阅读 · 0 评论 -
ECMAScript 6(15)Symbol
目录1. Symbol 是什么特点 :1.1 唯一性1.2 不能运算(不能隐式转换)1.3 显示转换为字符串1.4 转换布尔值1.5不能使用new这种方式来创建1.6可以像字符串一样作为变量名2. Symbol作为属性名3. 遍历4. 消除魔术字符串5. 创建带标识符的 Symbol 类型变量5.1 Symbol.fo...原创 2019-05-29 14:09:52 · 203 阅读 · 0 评论 -
ECMAScript 6(17)Map 和 WeakMap
目录1. Map1.1 简述1.2 创建1.3 基本方法常用方法1.4 遍历1.5 类型转换1.5.1 Map转数组1.5.2 数组转Map1.5.3 Map转对象1.5.4 对象转Map1.5.5 Map 转 JSON1.5.5 JSON 转 Map2. WeakMap2.1、是什么?2.2 方法...原创 2019-05-31 17:42:26 · 284 阅读 · 0 评论 -
ECMAScript 6(14)对象的新增方法
目录1. 判断两个变量是否相等 Object.is()2.合并对象属性 Object.assign()2.1 解释2.2 属性覆盖2.3 可枚举2.4参数一必须是对象或者可以转为对象2.5其他参数会隐式转换为对象,并且将可枚举属性添加进去2.6 这种拷贝方法是浅拷贝2.7对setter和getter不会正确生效3.Obj...原创 2019-05-28 18:59:28 · 328 阅读 · 0 评论 -
ECMAScript 6(16)Set 和 WeakSet
目录1. Set1.1 什么是 Set1.2 创建1.3 Set 实例的属性和方法方法使用一览1.4 遍历2. WeakSet2.1 简述2.2 使用2.3 方法简述 :Set类型一种新的数据结构 类似于数组 , 但是成员的值都是唯一的, 没有重复 (根据这个特性,可实现快速的数组去重, NaN也可以去重) Set 中两个...原创 2019-05-31 14:43:49 · 206 阅读 · 0 评论 -
ECMAScript 6(13)对象的扩展
目录1. 简要概括2. 简洁写法2.1 属性名缩写, 与函数缩写2.2 setter和getter的简洁写法3. 属性名表达式3.1 表达式作为属性名3.2 不能使用3.3 不要用对象作属性的key4. name 属性5. 属性的可枚举性5.1 设置可枚举5.2查看是否可枚举6. 属性的遍历7. supe...原创 2019-05-28 11:54:03 · 205 阅读 · 0 评论 -
ECMAScript 6(11)函数的扩展(2) 箭头函数
1. 箭头函数就是 => 这个符号定义函数var f = v => v;// 等同于var f = function (v) { return v;};简单来说,箭头函数分为三部分:参数部分; 箭头符号(固定的=>) 函数体部分1.1 参数没有参数的情况 : 可以用()或者_(左下划线) , 或者任意非关键字且不影响使用的变量名 ;...原创 2019-05-24 16:50:21 · 191 阅读 · 0 评论 -
ECMAScript 6(1)Babel
目录1. Babel2. 使用步骤1. Babel1. 简单来说,就是可以把ES6的代码转换成ES5的代码,这样你就可以在ES5的环境中运行ES6而不必担心兼容性了;2. ES7的转换也可以靠这个来完成;3. 其是放置在node_modules文件夹下的插件,就像使用其他通过npm install安装的插件一样使用;4. 默认只转换语法,不转换API。比如Ite...原创 2019-05-21 16:06:14 · 297 阅读 · 0 评论 -
ECMAScript 6(2)let 和 const
目录letconst顶层对象获取顶层对象let用来声明变量。它的用法类似于var,但是所声明的变量,只在let命令所在的代码块内有效(大括号里面if也算)。特点 :let和var相比,不存在变量提升 (即先使用后声明会报错); 使用let声明的变量,当前作用域里,该变量唯一 (就是只在大括号里面有效,外面认不到)。 同一级作用域里面,只允许对一个变量...原创 2019-05-21 17:03:02 · 100 阅读 · 0 评论 -
ECMAScript 6(3)变量的解构赋值
目录变量的解构赋值数组的解构赋值1. 常规赋值2.嵌套数组3. 右边不是数组 (报错)4. set 解构5.具有 Iterator 接口带默认值的数组解构赋值1. 常规情况2. 哪种情况下默认值生效对象的解构赋值1. 常规情况2.变量名就是key3. 解构失败4.解构赋值时,赋值形式并非深度复...原创 2019-05-21 18:06:57 · 553 阅读 · 0 评论 -
ECMAScript 6(4)字符串与Unicode
目录字符串的扩展字符串的Unicode 表示法String.fromCodePoint()codePointAt() 字符串的扩展字符串的Unicode 表示法1. 首先,任意一个字符(比如数字、英文字符、汉字、符号等)都可以用Unicode的表示方法来表示。2. 在js里为用“\u”加上四个十六进制字符来表示任意一个字符。3. 在之前版本的js里...原创 2019-05-22 13:53:45 · 186 阅读 · 0 评论 -
ECMAScript 6(5)模板字符串
模板字符串1. 简单来说,就是一个字符串,但是这个字符串里,可以省略掉拼接字符串的“+"符号,还会保留换行符、空白符等;2. 变量的嵌入靠 ${变量} ,括号是花括号,花括号里可以是变量,也可以是函数(函数的话会计算出返回值后再插入);3. 用反引号将字符串括起来(而不是单引号或者双引号),反引号是大键盘数字1键左边,tab键上面,和波浪线~同一个键位的符号;常规用法/...原创 2019-05-22 14:23:35 · 264 阅读 · 0 评论 -
ECMAScript 6(6)字符串新增方法 (includes(),startsWith()...)
字符串的新增方法includes(), startsWith(), endsWith()语法:str.includes(searchString[, position])str.startsWith(searchString[, position])str.endsWith(searchString[, position])说明 :includes():返回布尔值...原创 2019-05-22 14:46:37 · 234 阅读 · 0 评论 -
ECMAScript 6(7)正则的扩展
目录正则的扩展1. 变更修饰符1.1 修饰符1.2 查看修饰符1.3 变更修饰符2. 新修饰符2.1、修饰符u2.2点字符2.3 修饰符y3. 正则表达式属性3.1 sticky属性3.2 flags属性4. 正则表达式方法 (ES5)字符串方法 search()、replace()、match()、spl...原创 2019-05-23 11:27:54 · 172 阅读 · 0 评论 -
ECMAScript 6(12)数组的扩展
目录1. Array扩展方法1.1 扩展运算符 ...1.2 转换数组 Array.from()1.3 生成数组 Array.of()2. 数组实例的扩展方法2.1数组内复制copyWithin()2.2 查找元素和元素索引find(), findIndex()2.3 填充数组 fill()2.4entries(),keys()...原创 2019-05-27 17:14:23 · 189 阅读 · 0 评论 -
ECMAScript 6(8)数值的扩展 (1) Number对象扩展
目录数值的扩展1. 二进制和八进制2. 数字类型判断Number.isFinite(),Number.isNaN()Number.isFinite()Number.isNaN()3. Number.isInteger() (判断是否整数)4.Number.parseInt(), Number.parseFloat()5. 新增常量...原创 2019-05-23 17:31:55 · 201 阅读 · 0 评论 -
ECMAScript 6(9)数值的扩展 (9) Math对象扩展
目录Math对象的扩展1.Math.trunc()去除小数部分,返回整数2.Math.sign()判断正数、负数、零3. Math.cart() 计算数值的立方根4. Math.clz32()5. Math.imul()6. Math.fround()7. Math.hypot()8. 对数方法9. 双曲函数方法10...原创 2019-05-23 17:46:42 · 215 阅读 · 0 评论 -
ECMAScript 6(10)函数的扩展(1) 函数参数的默认值和 rest 参数
目录函数参数1. 函数参数的默认值2. 传undefined时,取默认值3. 变量是默认声明的,所以不能用let或const再次声明。4. 使用参数默认值时,函数不能有同名参数。5. 使用变量时,每次求值使用实时的值6. 默认值与解构赋值7. 函数的 length 属性8. 函数的作用域9. 函数参数默认值的使用要点r...原创 2019-05-24 15:52:59 · 230 阅读 · 0 评论