es6 从入门到熟练
文章平均质量分 91
qq20004604
前阿里巴巴,高级前端开发
展开
-
从零开始学_JavaScript_系列(68)——es6模块的使用
1、es6模块用于浏览器中标准写法是:<script type="module"> console.log('module')</script>按照预期效果是会非堵塞加载,然后再执行。事实上是里面的代码根本不会执行。又比如说:<script type="module" src="./bar.js"></script><script src="./foo.js"></script>你以为会原创 2017-09-17 23:05:19 · 1686 阅读 · 0 评论 -
从零开始学_JavaScript_系列(55)——Generator函数(3)yield*表达式
4、yield*表达式4.1、基础简单来说,yield*表达式就是在一个Generator函数内嵌套另外一个Generator函数。于是在遍历的过程中,当在第一个Generator函数内遇见第二个Generator函数后,就会先停止遍历第一个Generator函数,先遍历完第二个Generator函数,然后再恢复。如代码:let g1 = function*() { yield 1;原创 2017-08-23 00:37:56 · 418 阅读 · 0 评论 -
从零开始学_JavaScript_系列(54)——Generator函数(2)简单应用、throw和return
2、基本应用2.1、解构赋值数组是可以通过Iterator接口进行解构赋值的,对象不行是因为对象没有这个接口,那么假如我们给对象补上这个接口,对象自然也可以了。而Generator函数显然是Iterator的完美搭配(因为他能返回一个遍历器),将Generator函数作为对象的[Symbol.iterator]属性即可。如代码:let foo = { a: '1', b: '2',原创 2017-08-21 22:03:34 · 367 阅读 · 0 评论 -
从零开始学_JavaScript_系列(53)——Generator函数(1)基本概念和示例
1、Generator基本概念注:【遍历器】和【迭代器】是一个意思。1.1、表象:函数名有个星号(就是乘号*);函数体内部使用yield表达式(yield翻译成中文:产生);函数调用后返回值是一个遍历器对象,该对象可以调用next方法遍历yield表达式返回的值;函数内部可有返回值,也可以没有(这个影响的是遍历器遍历到第一次done为true时,value的值是什么);函数执行后并不直接执原创 2017-08-21 22:01:04 · 477 阅读 · 0 评论 -
从零开始学_JavaScript_系列(58)——Thunk函数
1、Thunk函数基本定义1.1、缘由与函数的求值策略有关,求值策略分为两种:传名策略:在需要求值的时候才求值;传值策略:在传入函数的时候就求值;(又有说法叫按值传递)如以下的示例代码:function foo(a) { return a * 10 // 1+2在这里计算结果叫做【传名策略】}foo(1 + 2) // 1+2在这里计算结果叫做【传值策略】JavaScript原创 2017-08-25 09:47:28 · 1239 阅读 · 1 评论 -
从零开始学_JavaScript_系列(51)——Promise(4)Promise.resolve和Promise.reject
9、Promise.resolve Promise.resolve(value); Promise.resolve(promise); Promise.resolve(thenable);参数与返回值:参数是promise对象:返回值是参数,不做任何改变;参数是thenable:指是一个有then属性的对象,返回值是一个新建的Promise对象,相当于将then方法作为原创 2017-07-28 10:11:50 · 1191 阅读 · 0 评论 -
从零开始学_JavaScript_系列(50)——Promise(3)全部完成all和看谁最快race
7、全部完成才结束Promise.all场景我们在写ajax的时候,经常会面临这样一个场景:我有三个ajax请求,但是需要等着三个ajax的请求结果都出来后再进行处理。如果常见写法,我们需要在每个都执行完之后,依次判断一下其他的完成了没有,完成了才能继续,没完成就return。但是使用Promise.all的话,问题简单多了。 Promise.all(iterable);参数:一般是一个数组,原创 2017-07-28 10:10:36 · 783 阅读 · 0 评论 -
从零开始学_JavaScript_系列(49)——Promise(2)then、值、catch
4、回调函数返回值与then的返回值4.1、 回调函数返回值回调函数的返回值,指的是Promise实例的then的回调函数resolve和reject的返回值。如代码:let foo = new Promise((resolve, reject) => { resolve("foo");}).then(msg => { console.log(msg); msg += "原创 2017-07-28 10:06:40 · 2619 阅读 · 0 评论 -
从零开始学_JavaScript_系列(48)——Promise(1)基础知识
1、是什么【一个十分适合处理异步操作的对象】【有进行中(pending)、成功(resolved)、失败(rejected)三种状态】【可以轻松处理成功或失败的情况,代码结构更清爽,操作结果可预期】【对象的状态不受外界影响,只会根据预先设定的情况执行代码,方便从pending状态切换到resolved或者rejected】原创 2017-07-28 10:04:41 · 1023 阅读 · 2 评论 -
从零开始学_JavaScript_系列(52)——Iterator接口与for...of
0、一句话总结 Array、Set、arguments等自带Iterator接口 自定义Iterator接口,适合应用在自定义数据类型(比如链表) 任何接受数组作为参数的场合,其实都调用了遍历器接口 for…of可以遍历Iterator接口,无论他是默认的还是我们自定义的 for…of遍历得到的是value,for…in遍历得到的是key1、Iterator原创 2017-08-12 18:07:34 · 785 阅读 · 0 评论 -
从零开始学_JavaScript_系列(56)——Generator函数(4)简写,this与继承
5、简写与this5.1、简写Generator函数的写法有三种(除了第一种名字都自己捏的):声明式;赋值式;属性式;其中,属性式除了常规写法外,还有简写版(就像当函数作为对象属性时的简写一样)。如代码,一目了然:// 声明式function *g1() { yield 'g1'}// 赋值式let g2 = function*() { yield 'g2'}// 属原创 2017-08-23 00:39:02 · 422 阅读 · 0 评论 -
从零开始学_JavaScript_系列(57)——Generator函数(5)状态机与函数的应用
6、状态机这里的状态机通常指有限状态机。所谓的有限状态机,是一个模型,通俗的来说: 这个模型有x个状态(x可确定),在任一时刻只能处于一个状态下,并且可以从一个状态切换到另外一个状态。举个例子:假如有一个ajax请求的提交按钮(比如【登陆】);他有两个状态:①待命中;②提交中;显然,他要么处于【待命】状态,要么处于【提交】状态,不可能又待命又提交;其中待命状态是可点击的,而提交状态是不原创 2017-08-23 00:40:15 · 500 阅读 · 0 评论 -
从零开始学_JavaScript_系列(67)——es6的import和export(chrome61版本后可用)
import和export原创 2017-09-13 09:03:50 · 3392 阅读 · 0 评论 -
三十分钟熟悉es6(es6日常使用功能总结)
1、前注本文是对es6的小结,关于详细说明可以参照我的系列文章es6 从入门到熟练,或者阮一峰的ECMAScript 6 入门。我的系列文章是在阮一峰对应文章的基础上,增加更多适合初中级开发者的内容(包括代码和解释),降低学习难度。本文是在以上基础上,结合我本人实际开发经验,对es6整体的一个小结。缩减了不常用的内容,只着重阐述一些常用的东西,方便初级中级开发者理解。2、开发环境关键字:IE9、Ba原创 2017-09-17 23:32:34 · 2153 阅读 · 0 评论 -
从零开始学_JavaScript_系列(63)——class(4)静态方法和new.target
9、类静态方法9.1、基本概念所谓静态方法,在class指专属于class本身的方法,而且不会被类的实例所继承。如代码:class Foo { static test() { console.log("this is static") }}Foo.test() // this is staticlet p = new Foo()p.test() //原创 2017-09-01 17:19:27 · 374 阅读 · 0 评论 -
从零开始学_JavaScript_系列(62)——class(3)setter和getter、Generator、async函数
6、setter和getter之前说过,常规情况下,类是没办法直接实现变量的。有一种变相的做法,是用es5的setter和getter特性来实现。但这种办法并不是完美的,有两个缺陷:setter和getter,就功能来说更强大,但对于一般需求来说,又过于复杂了;setter和getter本身只是起到一个代理的作用,本身并不能真正存储变量,还是需要通过一个间接的变量来存储他;这个用于存储的间接的原创 2017-09-01 17:18:27 · 644 阅读 · 0 评论 -
从零开始学_JavaScript_系列(61)——class(2)私有方法、this
4、私有4.1、私有方法不得不遗憾的表示,目前来看,类似c++或者java里的那种私有方法和私有变量,在js里面还是实现不了的。因此变通方法有三个:1、伪私有:下划线开头表示私有方法。如代码:class Foo { _testPrivate() { }}这种私有方法是一种约定俗称的私有方法命名方式。用下划线开头,表示告诉使用者,这些是私有方法,你最好不要改,改了有可能出错。但实际中,原创 2017-09-01 17:17:03 · 1050 阅读 · 0 评论 -
从零开始学_JavaScript_系列(60)——class(1)基本概念
1、概念1.1、前注如果对c++之类语言比较熟悉的话,上手class的难度会很低,比上手原型链的难度低不少。目前来看,class的实现,依然是通过构造函数和原型链来实现的(相当于是一个语法糖,至少目前是这样的),而在Babel转码之后,也是通过构造函数和原型链来做到的。这里对于较为简单的内容,不会费太多笔墨,如果某些地方不太明白,可以看阮一峰的博文。1.2、基本形态为了帮助理解,写一个构造函数版,和原创 2017-09-01 17:14:50 · 708 阅读 · 0 评论 -
从零开始学_JavaScript_系列(65)——class的继承(2)super、extends与多重继承
4、super关键字4.1、作为函数时使用当super作为函数时使用,非常简单。只允许在子类的构造函数中调用;并且需要在调用this之前调用;而且必须调用一次(除非你省略掉子类的构造函数);如果不符合以上要求,那么就会报错,以下是标准写法class Foo {}class Bar extends Foo { constructor() { super() }原创 2017-09-08 14:12:14 · 2004 阅读 · 0 评论 -
从零开始学_JavaScript_系列(64)——class的继承(1)基本概念、继承构造函数和class
1、class继承概述1.1、所谓继承继承这个概念还需要解释么?好吧,我解释一下:简单粗暴的解释继承,就是指:我定义一个类A,他自带一些方法;然后我定义一个类B,他有一些方法是独特的,但他还有一些方法是类A已有的,那么如果让类B再重复定义这些类A已有的方法,显然是低效的写法;这种让类B可以使用类A的方法的做法,就是继承;传统解决办法是创建一个类A的实例,然后让类B指向这个创建的实例,从而利用原创 2017-09-08 14:11:08 · 395 阅读 · 0 评论 -
从零开始学_JavaScript_系列(59)——async函数
1、async函数简介1.1、前注在阅读本章节之前,建议先阅读 【Generator函数】章节和【Thunk函数】章节。不然很有可能对本章节内容摸不着头脑,或者理解有所偏差。如果有所了解或者比较熟悉的话,那么对本章绝大部分内容上手是非常轻松的。这里假定你已经对以上知识有所理解,不考虑完全不懂的人能否理解本博文。1.2、兼容性关于asnyc函数的兼容性:Can I use网站的说明简单来说:支持asy原创 2017-08-28 21:17:27 · 1000 阅读 · 0 评论 -
从零开始学_JavaScript_系列(47)——Reflect
Reflect1、是什么? 一种原生对象; 用于调用原属于对象内部的方法(比如定义属性)2、如何使用(几种常见方法示例)2.1、读 Reflect.get(target, propertyKey[, receiver])拦截对target对象的propertyKey属性的读取,返回这个属性的值。参数一是被访问的对象;参数二是属性名;参数三当遇见getter时,将gett原创 2017-07-03 00:12:23 · 546 阅读 · 0 评论 -
从零开始学_JavaScript_系列(38)——对象的扩展(1)属性的简洁写法
一句话总结:1、属性名,以及是属性的函数的简洁写法,写起来简单易阅读2、属性名可以用变量字符串拼接起来(话说以前也有吧?)3、函数都有name属性,但set和get也要加前缀原创 2017-06-04 19:24:30 · 604 阅读 · 0 评论 -
从零开始学_JavaScript_系列(39)——对象的扩展(2)Object对象的扩展方法
一句话总结1、Object.is判断两个变量是否相等 2、Object.assign可以合并对象的非原型链上,且可枚举属性 3、Object.getOwnPropertyDescriptor查看属性是否可枚举、可修改、可赋值4、Object.keys获取对象非原型链上,且可枚举属性的key原创 2017-06-04 19:26:18 · 708 阅读 · 0 评论 -
ECMAScript 6(15)对象的扩展(1)——简写、属性名拼接、name
对象的扩展写在前面的话感觉博客写的有点太细了,导致我学习进度过于缓慢。因此,建议学习者以阮一峰博客为主,以本博客为补充。我这里主要写一些示例和补充,帮助理解的更为全面0、一句话总结属性名,以及是属性的函数的简洁写法,写起来简单易阅读属性名可以用变量字符串拼接起来(话说以前也有吧?)函数都有name属性,但set和get也要加前缀1、简洁写法(缩写)1.1、属性名缩写,与函数的缩写属性名的缩写原创 2017-05-22 23:23:12 · 2006 阅读 · 0 评论 -
ECMAScript 6(10)——数字的扩展(2)Math对象的扩展
数字的扩展(1)Number对象的扩展请参考上一篇文章4、Math对象的扩展4.1、去掉小数部分的Math.trunc() Math.trunc(变量)简单来说,如果不是number类型,或者不能隐式转换成number类型,则返回NaN;如果可以被转化为number类型,则转换为number类型后,省略掉小数部分并返回number类型的值;Math.trunc(1); //1Math原创 2017-04-30 20:51:32 · 960 阅读 · 1 评论 -
ECMAScript 6(9)——数字的扩展(1)Number对象的扩展和探讨
目录请查看上方0、一句话总结1、二进制数字开头0b,八进制数字开头0o2、更靠谱的类型判断有效数字,NaN,以及整数(es6新增);3、增加了一个极小的常量,用于判断浮点数计算,结果的误差小于这个常量则基本可以认为相等;4、增加了安全范围的最大整数和最小整数常量,以及对他们的判断;5、新增方法全部不会进行隐式转换;6、探讨了一下最大数值和最小数值为何出现;1、二进制与八进制1.1、二进制原原创 2017-04-28 05:52:53 · 1512 阅读 · 0 评论 -
ECMAScript 6(7)模板字符串
模板字符串解释:1. 简单来说,就是一个字符串,但是这个字符串里,可以省略掉拼接字符串的“+"符号,还会保留换行符、空白符等;2. 变量的嵌入靠 ${变量} ,括号是花括号,花括号里可以是变量,也可以是函数(函数的话会计算出返回值后再插入);3. 用反引号将字符串括起来(而不是单引号或者双引号),反引号是大键盘数字1键左边,tab键上面,和波浪线~同一个键位的符号;4. 如果用过例如Vue原创 2017-03-27 23:47:56 · 4069 阅读 · 0 评论 -
ECMAScript 6(6)字符串(包含、自我复制、补全)
includes(), startsWith(), endsWith()原型:str.includes(searchString[, position])str.startsWith(searchString[, position])str.endsWith(searchString[, position])解释:1. 简单来说,在默认情况下(只有第一个参数): str.include原创 2017-03-27 23:46:32 · 761 阅读 · 0 评论 -
ECMAScript 6(5)字符串与Unicode编码大于65535的字符
字符串的扩展前注:不关心细节的人,可以看【一句话总结】部分;字符串的Unicode表示法解释:1. 首先,任意一个字符(比如数字、英文字符、汉字、符号等)都可以用Unicode的表示方法来表示。2. 关于Unicode的更多介绍可以自行百度或者谷歌,其大致可以理解,在js里为用“\u”加上四个十六进制字符来表示任意一个字符。3. 在之前版本的js里,若要用Unicode表示一个字符,可以像以下这原创 2017-01-17 09:29:22 · 3296 阅读 · 0 评论 -
ECMAScript 6(1)Babel
Babel参考阮一峰的文章所写。 本文难度中等,照着说明跟着打下来,便能轻松理解,且对ES6无经验人士也能读懂解释:1. 简单来说,就是可以把ES6的代码转换成ES5的代码,这样你就可以在ES5的环境中运行ES6而不必担心兼容性了;2. ES7的转换也可以靠这个来完成;3. 其是放置在node_modules文件夹下的插件,就像使用其他通过npm install安装的插件一样使用;4. 默认原创 2016-12-27 00:37:08 · 1409 阅读 · 2 评论 -
ECMAScript 6(3)const和顶层对象
const解释:1. 简单来说,学过c++的可以理解为c++的const,没学过可以继续往下看;2. 如果指向非按引用传递类型(比如字符串,布尔值等),那么该值声明后无法被修改;3. 如果指向按引用传递,则无法更改其指向的对象,但该对象的值可以被修改;4. 准确的说,是让按引用传递时,保证该const变量指向的地址不变(而非该地址里的数据不变)(理解本条需要有指针相关概念);1、指向非按引用原创 2017-01-06 02:02:47 · 1155 阅读 · 0 评论 -
ECMAScript 6(2)let和块级作用域
前注:参考自阮一峰的博客,根据自己学习过程添加了自己的经验和理解而写let解释:1. 简单来说,就是类似var,但使用该方法声明的变量,只在当前作用域生效;几个特点:1、let和var相比,不存在变量提升(即先使用后声明会报错);{ console.log(a); //Uncaught ReferenceError: a is not defined let a = 1;}原创 2017-01-05 21:47:50 · 738 阅读 · 0 评论 -
ECMAScript 6(11)——数组的扩展
0、一句话总结1、可以将一个有Iterator接口的数据类型(arraylike)转为真正的数组;2、将变量作为数组成员,返回一个新数组;3、把数组内某些位置元素,复制在数组内的某些位置;4、用某个值填充满整个数组;5、遍历数组的key、value和key + value;6、以函数为筛选条件,找到数组中第一个符合条件的元素;7、告诉你数组中有没有某个元素;原创 2017-05-11 23:09:03 · 826 阅读 · 0 评论 -
ECMAScript 6(8)——正则表达式的扩展
正则的扩展0、一句话总结1、构造函数可以通过第二个参数添加正则表达式的修饰符了;2、添加了关于utf16字符、粘性匹配的正则表达式修饰符;3、粘性匹配指:用一个正则表达式连续对一个字符串进行匹配,每次匹配的起始位置是上一次的结束位置;1、变更修饰符1.1、修饰符目前已有的修饰符有: 修饰符 效果 备注原创 2017-04-25 00:27:27 · 1528 阅读 · 0 评论 -
从零开始学_JavaScript_系列(40)——对象的扩展(3)当枚举、原型链遇见对属性的操作
一句话总结:1、当属性在原型链上,或者不可枚举时,会被很多方法忽视(参照6.1);2、__proto__和prototype的关系(参照7.1);3、Object.setPrototypeOf(obj, prototype)设置__proto__属性;4、Object.getPrototypeOf(obj)获取__proto__属性原创 2017-06-04 19:31:16 · 779 阅读 · 0 评论 -
从零开始学_JavaScript_系列(41)——对象的扩展(4)扩展运算符三个点...
一句话总结:es7新增对对象有效的扩展运算符...(三个点)原创 2017-06-04 19:32:51 · 3512 阅读 · 0 评论 -
从零开始学_JavaScript_系列(43)——Symbol简述
一句话总结: 1、一个新的数据类型; 2、当key时,只有指定遍历方法,才能获取该属性名; 3、Symbol.for(key)方法,同样的key可以生成同样的Symbol类型变量; 4、一些内置属性,可以设置某些类型的属性,用于配置某些功能原创 2017-06-05 19:44:28 · 637 阅读 · 0 评论 -
从零开始学_JavaScript_系列(44)——ES6新增数据结构:Set类型和WeakSet
一句话总结:1、Set类型可以用于存储元素,并且变量内每个元素都是独一无二的(不会重复);2、可以通过Set内置方法——添加、删除、查有无、清空元素;3、Set可以方便的转为数组后进行处理,在初始化为Set类型变量;4、WeakSet是弱化版的Set,并且只对引用类型有效(其他报错);5、WeakSet只支持添加、删除、查有无,其他统统没有原创 2017-06-07 16:37:35 · 853 阅读 · 0 评论 -
从零开始学_JavaScript_系列(45)——ES6新增数据结构:Map和WeakMap
一句话总结:1、 Map的参照1.1; 2、 WeakMap的是弱化版Map,只有增、查、取、删四个API;原创 2017-06-07 23:29:38 · 799 阅读 · 0 评论