标签分类 热门分类
当前位置:首页 > > ECMAScript6电子书网盘下载
深入理解ES6 深入理解ES6
月恒日升

月恒日升 提供上传

资源
31
粉丝
46
喜欢
675
评论
6

    深入理解ES6 PDF 中文扫描版

    ECMAScript6电子书
    • 发布时间:

    给大家带来的一篇关于ECMAScript6相关的电子书资源,介绍了关于深入理解、ECMAScript6方面的内容,本书是由电子工业出版社出版,格式为PDF,资源大小7.42 MB,Nicholas编写,目前豆瓣、亚马逊、当当、京东等电子书综合评分为:8.7

  • 深入理解ES6 PDF 下载
  • 下载地址:https://pan.baidu.com/s/1uvcBReIHUQ7yxq-G2FvCX
  • 分享码:cvy8
  • 深入理解ES6

    深入理解ES6 电子书封面

    读者评价

    个人感觉尼古拉斯比阮老师讲得好。同样是全面的论述 ES6,前者更像是引领你去全面吸收它,后者有点喜欢纠结一些奇怪的点。
    Zakas的又一部杰作,他的作品最优秀的地方在于只是阐述,很少评价,这在帮助我们夯实基础时十分有意义,我也喜欢这种风格。我是中英文参照阅读的,译本后半部分有一些文字上的纰漏,但是总体来说忠实原文,水平还是相当不错,希望再版时可以修复这些文字问题。
    阮一峰的那本学究气太重,感觉在读规范,这本就平易多了,语句都很容易理解。

    内容介绍

    ES6是ECMAScript标准十余年来变动大的一个版本,其中添加了许多新的语法特性,既有大家耳熟能详的Promise,也有闻所未闻的Proxy代理和Reflection反射;既有可以通过转译器(Transpiler)等方式在旧版本浏览器中实现兼容的let、const、不定参数、展开运算符等功能,亦有无论如何都无法实现向前兼容的尾调用优化。深入理解ES6的特性对于所有JavaScript开发者而言至关重要,在可预见的未来,ES6中引入的语言特性会成为JavaScript应用程序的主流特性,这也是《深入理解ES6》的初衷。希望你通过阅读《深入理解ES6》可以了解ES6的新特性,并在需要时能够随时使用。

    内容节选

    30分钟快速入门掌握ES6/ES2015的核心内容

     

    前言

    ECMAScript 6(以下简称ES6)是JavaScript语言的下一代标准。因为当前版本的ES6是在2015年发布的,所以又称ECMAScript 2015。

    也就是说,ES6就是ES2015。

    虽然目前并不是所有浏览器都能兼容ES6全部特性,但越来越多的程序员在实际项目当中已经开始使用ES6了。所以就算你现在不打算使用ES6,但为了看懂别人的你也该懂点ES6的语法了...

    在我们正式讲解ES6语法之前,我们得先了解下Babel。

    Babel

    Babel是一个广泛使用的ES6转码器,可以将ES6代码转为ES5代码,从而在现有环境执行。大家可以选择自己习惯的工具来使用使用Babel,具体过程可直接在Babel官网查看:

    最常用的ES6特性

    let, const, class, extends, super, arrow functions, template string, destructuring, default, rest arguments
    这些是ES6最常用的几个语法,基本上学会它们,我们就可以走遍天下都不怕啦!我会用最通俗易懂的语言和例子来讲解它们,保证一看就懂,一学就会。

    let, const

    这两个的用途与var类似,都是用来声明变量的,但在实际运用中他俩都有各自的特殊用途。

    首先来看下面这个例子:

    var name = 'zach'
    while (true) {
     var name = 'obama'
     console.log(name) //obama
     break
    }
    console.log(name) //obama

    使用var 两次输出都是obama,这是因为ES5只有全局作用域和函数作用域,没有块级作用域,这带来很多不合理的场景。第一种场景就是你现在看到的内层变量覆盖外层变量。而let则实际上为JavaScript新增了块级作用域。用它所声明的变量,只在let命令所在的代码块内有效。

    let name = 'zach'
    while (true) {
     let name = 'obama'
     console.log(name) //obama
     break
    }
    console.log(name) //zach

    另外一个var带来的不合理场景就是用来计数的循环变量泄露为全局变量,看下面的例子:

    var a = [];
    for (var i = 0; i < 10; i++) {
     a[i] = function () {
     console.log(i);
     };
    }
    a[6](); // 10

    上面代码中,变量i是var声明的,在全局范围内都有效。所以每一次循环,新的i值都会覆盖旧值,导致最后输出的是最后一轮的i的值。而使用let则不会出现这个问题。

    var a = [];
    for (let i = 0; i < 10; i++) {
     a[i] = function () {
     console.log(i);
     };
    }
    a[6](); // 6

    再来看一个更常见的例子,了解下如果不用ES6,而用闭包如何解决这个问题。

    var clickBoxs = document.querySelectorAll('.clickBox')
    for (var i = 0; i < clickBoxs.length; i++){
     clickBoxs[i].onclick = function(){
      console.log(i)
     }
    }

    我们本来希望的是点击不同的clickBox,显示不同的i,但事实是无论我们点击哪个clickBox,输出的都是5。下面我们来看下,如何用闭包搞定它。

    function iteratorFactory(i){
     var onclick = function(e){
      console.log(i)
     }
     return onclick;
    }
    var clickBoxs = document.querySelectorAll('.clickBox')
    for (var i = 0; i < clickBoxs.length; i++){
     clickBoxs[i].onclick = iteratorFactory(i)
    }

    const也用来声明变量,但是声明的是常量。一旦声明,常量的值就不能改变。

    const PI = Math.PI
    PI = 23 //Module build failed: SyntaxError: /es6/app.js: "PI" is read-only

    当我们尝试去改变用const声明的常量时,浏览器就会报错。

    const有一个很好的应用场景,就是当我们引用第三方库的时声明的变量,用const来声明可以避免未来不小心重命名而导致出现bug:

    const monent = require('moment')

    class, extends, super

    这三个特性涉及了ES5中最令人头疼的的几个部分:原型、构造函数,继承...你还在为它们复杂难懂的语法而烦恼吗?你还在为指针到底指向哪里而纠结万分吗?

    有了ES6我们不再烦恼!

    ES6提供了更接近传统语言的写法,引入了Class(类)这个概念。新的class写法让对象原型的写法更加清晰、更像面向对象编程的语法,也更加通俗易懂。

    class Animal {
     constructor(){
      this.type = 'animal'
     }
     says(say){
      console.log(this.type + ' says ' + say)
     }
    }
    
    let animal = new Animal()
    animal.says('hello') //animal says hello
    class Cat extends Animal {
     constructor(){
      super()
      this.type = 'cat'
     }
    }
    
    let cat = new Cat()
    cat.says('hello') //cat says hello

    上面代码首先用class定义了一个“类”,可以看到里面有一个constructor方法,这就是构造方法,而this关键字则代表实例对象。简单地说,constructor内定义的方法和属性是实例对象自己的,而constructor外定义的方法和属性则是所有实例对象可以共享的。

    Class之间可以通过extends关键字实现继承,这比ES5的通过修改原型链实现继承,要清晰和方便很多。上面定义了一个Cat类,该类通过extends关键字,继承了Animal类的所有属性和方法。

    super关键字,它指代父类的实例(即父类的this对象)。子类必须在constructor方法中调用super方法,否则新建实例时会报错。这是因为子类没有自己的this对象,而是继承父类的this对象,然后对其进行加工。如果不调用super方法,子类就得不到this对象。

    ES6的继承机制,实质是先创造父类的实例对象this(所以必须先调用super方法),然后再用子类的构造函数修改this。

    P.S 如果你写react的话,就会发现以上三个东西在最新版React中出现得很多。创建的每个component都是一个继承React.Component的类。详见react文档

    arrow function

    这个恐怕是ES6最最常用的一个新特性了,用它来写function比原来的写法要简洁清晰很多:

    function(i){ return i + 1; } //ES5
    (i) => i + 1 //ES6

    简直是简单的不像话对吧...

    如果方程比较复杂,则需要用{}把代码包起来:

    function(x, y) { 
     x++;
     y--;
     return x + y;
    }
    (x, y) => {x++; y--; return x+y}

    除了看上去更简洁以外,arrow function还有一项超级无敌的功能!

    长期以来,JavaScript语言的this对象一直是一个令人头痛的问题,在对象方法中使用this,必须非常小心。例如:

    class Animal {
     constructor(){
      this.type = 'animal'
     }
     says(say){
      setTimeout(function(){
       console.log(this.type + ' says ' + say)
      }, 1000)
     }
    }
    
     var animal = new Animal()
     animal.says('hi') //undefined says hi

    运行上面的代码会报错,这是因为setTimeout中的this指向的是全局对象。所以为了让它能够正确的运行,传统的解决方法有两种:

    1.第一种是将this传给self,再用self来指代this

     says(say){
      var self = this;
      setTimeout(function(){
       console.log(self.type + ' says ' + say)
      }, 1000)

    2.第二种方法是用bind(this),即

     says(say){
      setTimeout(function(){
       console.log(this.type + ' says ' + say)
      }.bind(this), 1000)

    但现在我们有了箭头函数,就不需要这么麻烦了:

    class Animal {
     constructor(){
      this.type = 'animal'
     }
     says(say){
      setTimeout( () => {
       console.log(this.type + ' says ' + say)
      }, 1000)
     }
    }
     var animal = new Animal()
     animal.says('hi') //animal says hi

    当我们使用箭头函数时,函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象。

    并不是因为箭头函数内部有绑定this的机制,实际原因是箭头函数根本没有自己的this,它的this是继承外面的,因此内部的this就是外层代码块的this。

    template string

    这个东西也是非常有用,当我们要插入大段的html内容到文档中时,传统的写法非常麻烦,所以之前我们通常会引用一些模板工具库,比如mustache等等。

    大家可以先看下面一段代码:

    $("#result").append(
     "There are <b>" + basket.count + "</b> " +
     "items in your basket, " +
     "<em>" + basket.onSale +
     "</em> are on sale!"
    );

    我们要用一堆的'+'号来连接文本与变量,而使用ES6的新特性模板字符串``后,我们可以直接这么来写:

    $("#result").append(`
     There are <b>${basket.count}</b> items
     in your basket, <em>${basket.onSale}</em>
     are on sale!
    `);

    用反引号(\)来标识起始,用${}`来引用变量,而且所有的空格和缩进都会被保留在输出之中,是不是非常爽?!

    React Router从第1.0.3版开始也使用ES6语法了,比如这个例子:

    <Link to={`/taco/${taco.name}`}>{taco.name}</Link>

    React Router

    destructuring

    ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring)。

    看下面的例子:

    let cat = 'ken'
    let dog = 'lili'
    let zoo = {cat: cat, dog: dog}
    console.log(zoo) //Object {cat: "ken", dog: "lili"}

    用ES6完全可以像下面这么写:

    let cat = 'ken'
    let dog = 'lili'
    let zoo = {cat, dog}
    console.log(zoo) //Object {cat: "ken", dog: "lili"}

    反过来可以这么写:

    let dog = {type: 'animal', many: 2}
    let { type, many} = dog
    console.log(type, many) //animal 2

    default, rest

    default很简单,意思就是默认值。大家可以看下面的例子,调用animal()方法时忘了传参数,传统的做法就是加上这一句type = type || 'cat' 来指定默认值。

    function animal(type){
     type = type || 'cat' 
     console.log(type)
    }
    animal()

    如果用ES6我们而已直接这么写:

    function animal(type = 'cat'){
     console.log(type)
    }
    animal()

    最后一个rest语法也很简单,直接看例子:

    function animals(...types){
     console.log(types)
    }
    animals('cat', 'dog', 'fish') //["cat", "dog", "fish"]

    而如果不用ES6的话,我们则得使用ES5的arguments。

    总结

    以上就是ES6最常用的一些语法,可以说这20%的语法,在ES6的日常使用中占了80%...

    目录

    • 第1章 块级作用域绑定 1
    • var声明及变量提升(Hoisting)机制 1
    • 块级声明 3
    • 循环中的块作用域绑定 7
    • 全局块作用域绑定 12
    • 块级绑定最佳实践的进化 13
    • 小结 13
    • 第2章 字符串和正则表达式 14
    • 更好的Unicode支持 14
    • 其他字符串变更 21
    • 其他正则表达式语法变更 23
    • 模板字面量 28
    • 小结 36
    • 第3章 函数 37
    • 函数形参的默认值 37
    • 处理无命名参数 46
    • 增强的Function构造函数 49
    • 展开运算符 50
    • name属性 52
    • 明确函数的多重用途 54
    • 块级函数 57
    • 箭头函数 59
    • 尾调用优化 67
    • 小结 71
    • 第4章 扩展对象的功能性 72
    • 对象类别 72
    • 对象字面量语法扩展 73
    • 新增方法 76
    • 重复的对象字面量属性 80
    • 自有属性枚举顺序 81
    • 增强对象原型 82
    • 正式的方法定义 86
    • 小结 88
    • 第5章 解构:使数据访问更便捷 89
    • 为何使用解构功能 89
    • 对象解构 90
    • 数组解构 96
    • 混合解构 101
    • 解构参数 102
    • 小结 106
    • 第6章 Symbol和Symbol属性 107
    • 创建Symbol 107
    • Symbol的使用方法 109
    • Symbol共享体系 110
    • Symbol与类型强制转换 112
    • Symbol属性检索 112
    • 通过well-known Symbol暴露内部操作 113
    • 小结 127
    • 第7章 Set集合与Map集合 128
    • ECMAScript 5中的Set集合与Map集合 129
    • 该解决方案的一些问题 129
    • ECMAScript 6中的Set集合 131
    • ECMAScript 6中的Map集合 139
    • 小结 147
    • 第8章 迭代器(Iterator)和生成器(Generator) 149
    • 循环语句的问题 149
    • 什么是迭代器 150
    • 什么是生成器 151
    • 可迭代对象和for-of循环 155
    • 内建迭代器 158
    • 展开运算符与非数组可迭代对象 165
    • 高级迭代器功能 166
    • 异步任务执行 174
    • 小结 180
    • 第9章 JavaScript中的类 181
    • ECMAScript 5中的近类结构 181
    • 类的声明 182
    • 类表达式 186
    • 作为一等公民的类 189
    • 访问器属性 190
    • 可计算成员名称 192
    • 生成器方法 193
    • 静态成员 195
    • 继承与派生类 196
    • 在类的构造函数中使用new.target 208
    • 小结 210
    • 第10章 改进的数组功能 211
    • 创建数组 211
    • 为所有数组添加的新方法 216
    • 定型数组 219
    • 定型数组与普通数组的相似之处 228
    • 定型数组与普通数组的差别 231
    • 小结 234
    • 第11章 Promise与异步编程 235
    • 异步编程的背景知识 235
    • Promise的基础知识 239
    • 全局的Promise拒绝处理 248
    • Node.js环境的拒绝处理 248
    • 浏览器环境的拒绝处理 251
    • 串联Promise 253
    • 响应多个Promise 259
    • 自Promise继承 262
    • 基于Promise的异步任务执行 263
    • 小结 267
    • 第12章 代理(Proxy)和反射(Reflection)API 269
    • 数组问题 269
    • 代理和反射 270
    • 创建一个简单的代理 271
    • 使用set陷阱验证属性 272
    • 用get陷阱验证对象结构(Object Shape) 274
    • 使用has陷阱隐藏已有属性 275
    • 用deleteProperty陷阱防止删除属性 277
    • 原型代理陷阱 279
    • 对象可扩展性陷阱 282
    • 属性描述符陷阱 285
    • ownKeys陷阱 290
    • 函数代理中的apply和construct陷阱 291
    • 可撤销代理 298
    • 解决数组问题 299
    • 将代理用作原型 307
    • 小结 314
    • 第13章 用模块封装代码 315
    • 什么是模块 315
    • 导出的基本语法 316
    • 导入的基本语法 317
    • 导出和导入时重命名 320
    • 模块的默认值 321
    • 重新导出一个绑定 323
    • 无绑定导入 324
    • 加载模块 325
    • 小结 330
    • 附录A ECMAScript 6中较小的改动 331
    • 附录B 了解ECMAScript 7(2016) 337
    • 索引 343

    上一篇:Qt5开发及实例  下一篇:c++项目开发实战入门

    展开 +

    收起 -

     
    ECMAScript6 相关电子书
    关于ECMAScript6的学习笔记
    网友NO.591999

    浅谈ES6 模板字符串的具体使用方法

    写在前面 关于 ES6, 也终于在 2015 年的 7 月 18 号尘埃落定了。虽然说各大浏览器还没有全面的支持,不过这并不妨碍我们一颗想要撸一把的心。在后端,可以使用 Node.js(0.12+)或 io.js, 前端的话,也可以使用Babel 或Traceur 进行语法预转义成 ES5使用 。 关于该系列(不知道能不能成为一个系列,总是各种懒),会没有规律的挑选一些内容来学习。欢迎大家积极纠错,留言探讨。 模板字符串(template strings) 用法 // 普通字符串`In JavaScript '\n' is a line-feed.`// 多行字符串`In JavaScript this isnot legal.`// 字符串中嵌入变量var name = "Bob", time = "today";`Hello ${name}, how are you ${time}?` // Hello Bob, how are you today? ES6 中引进的一种新型的字符串字面量语法 - 模板字符串。书面上来解释,模板字符串是一种能在字符串文本中内嵌表示式的字符串字面量。简单来讲,就是增加了变量功能的字符串。 先来看一下以前我们对字符串的使用: /** * Before ES6 字符串拼接 */var name = '丁香医生';var desc = '丁香医生是面向大众的科普性健康类网站';var html = function(name, desc){ var tpl = '公司名:' + name + '\n'+ '简介:'+ desc; return tpl;} 而现在: var html = `公司名:${name} 简介:${desc}`; 很简洁吧。 引一段 MDN 对于模板字符串的定义: 模板字符串使用反引号 () 来代替普通字符串中的用双引号……

    网友NO.479941

    ES6 系列之 Generator 的自动执行的方法示例

    单个异步任务 var fetch = require('node-fetch');function* gen(){ var url = 'https://api.github.com/users/github'; var result = yield fetch(url); console.log(result.bio);} 为了获得最终的执行结果,你需要这样做: var g = gen();var result = g.next();result.value.then(function(data){ return data.json();}).then(function(data){ g.next(data);}); 首先执行 Generator 函数,获取遍历器对象。 然后使用 next 方法,执行异步任务的第一阶段,即 fetch(url)。 注意,由于 fetch(url) 会返回一个 Promise 对象,所以 result 的值为: { value: Promise { pending }, done: false } 最后我们为这个 Promise 对象添加一个 then 方法,先将其返回的数据格式化(data.json()),再调用 g.next,将获得的数据传进去,由此可以执行异步任务的第二阶段,代码执行完毕。 多个异步任务 上节我们只调用了一个接口,那如果我们调用了多个接口,使用了多个 yield,我们岂不是要在 then 函数中不断的嵌套下去…… 所以我们来看看执行多个异步任务的情况: var fetch = require('node-fetch');function* gen() { var r1 = yield fetch('https://api.github.com/users/github'); var r2 = yield fetch('https://api.github.com/users/github/followers'); var r3 = yield fetch('https://api.github.com/users/github/repos'); console.log([r1.bio, r2[0].login, r3[0].full_name].join('\n'));} 为了获得最终的执行结果,你可能要写成: var g = gen();var r……

    网友NO.672251

    浅谈es6中export和export default的作用及区别

    作用: export和export default实现的功能相同,即:可用于导出(暴露)常量、函数、文件、模块等,以便其他文件调用。 区别: 1、export导出多个对象,export default只能导出一个对象 2、export导出对象需要用{ },export default不需要{ },如: export {A,B,C}; export default A; 3、在其他文件引用export default导出的对象时不一定使用导出时的名字。因为这种方式实际上是将该导出对象设置为默认导出对象,如: 假设文件A、B在同级目录,实现文件B引入文件A的导出对象deObject: 文件A:export default deObject 文件B:import deObject from './A' 或者: import newDeObject from './A' 以上这篇浅谈es6中export和export default的作用及区别就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持码农之家。 ……

    网友NO.21085
    网友NO.21085

    遗留问题
    setter函数以及getter函数的作用
    对象的访问器属性:get的作用
    54-58的函数多种用途以及块级函数看不懂
    64-65的箭头函数没有this绑定看不懂
    call、apply和bind方法
    正确使用Symbol的方法
    变量:
    不可以访问
    变量声明后:可以访问 但是值为undefined
    变量初始化后:可以访问 值不是undefined
    使用let或者const实现块级声明,这个时候语言引擎会将声明放到临时死区中。
    使用var会覆盖一个已经存在的全局属性。
    使用策略:默认使用const,只有确定变量需要改变的时候才使用let。
    字符串:
    如果文字的编码超过了基本多文种平面的话(16位二进制),则需要加入代理对来表示这个文字。
    准确比较字符串a.normalize() === b.normalize()
    字符串识别方法:includesstartsWithendsWith
    返回新字符串:repeat
    正则的修饰符:sticky ?u修饰符:代理对检测修饰符i修饰符:大小写无关修饰符global修饰符
    获取正则原表达式的文本:source属性获取修饰符:flags属性
    模板字面量基础用法:用反撇号替换了引号,内部使用反撇号需要用反斜杠转义;可以直接换行也可以用\n转义字符串占位符:${任意的JS表达式}模板标签:创建领域专用语言DSL,函数化处理literals(文字)以及substitutions(模板字面量)

    网友NO.41350
    网友NO.41350

    es6看工具书描述 就加了几个功能点,但是作者把每一个功能点都丰富化了,震惊原来增加的每个功能点都有这么多妙用,最可喜的是作者居然把这么复杂的内容用浅显易懂的文字和代码描述得清清楚楚。没有半点故弄玄虚,绝不会像看某些大神的文章那样有似懂非懂的感觉。
    我看的是中文译本,译者提到大师有些小知识点和实际运行有出入。不妨碍这本书成为经典。
    想了解ES6的强烈推荐来看。作者真的良心,看这本书有种成绩很好有很热心肠的同学教你功课的感觉。

    Copyright 2018-2020 xz577.com 码农之家

    电子书资源由网友、会员提供上传,本站记录提供者的基本信息及资源来路

    鸣谢: “ 码小辫 ” 公众号提供回调API服务、“ 脚本CDN ”提供网站加速(本站寻求更多赞助支持)

    版权投诉 / 书籍推广 / 赞助:520161757@qq.com

    上传资源(网友、会员均可提供)

    查看最新会员资料及资源信息