当前位置:首页 > >
《深入理解ES6》电子书封面

深入理解ES6

  • 发布时间:2019年06月25日 13:54:53
  • 作者:Nicholas
  • 大小:7.42 MB
  • 类别:ECMAScript6电子书
  • 格式:PDF
  • 版本:中文扫描版
  • 评分:7.2

    深入理解ES6 PDF 中文扫描版

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

      内容介绍

      深入理解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

      学习笔记

      浅谈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 中引进的一种新型的字……

      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,将获得的数据传进去,由此可……

      浅谈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的作用及区别就是小编分享……

      以上就是本次介绍的ECMAScript6电子书的全部相关内容,希望我们整理的资源能够帮助到大家,感谢大家对码农之家的支持。

      上一篇:Qt5开发及实例

      下一篇:c++项目开发实战入门

      展开 +

      收起 -

      • 《深入理解ES6》PDF下载

      下载地址:百度网盘下载
      ECMAScript6相关电子书
      JavaScript ES6函数式编程入门经典
      JavaScript ES6函数式编程入门经典 原书扫描版

      本书使用JavaScript ES6带你学习函数式编程。你将学习柯里化、偏函数、高阶函数以及Monad等概念。具有一定的参考价值,感兴趣的小伙伴们可以参考一下

      立即下载
      JRockit权威指南:深入理解JVM
      JRockit权威指南:深入理解JVM 原书影印版

      深入JVM内部 剖析Java虚拟机原理 阐明Java性能提升关键 莫枢(RednaxelaFx) 阿里中间件团队推荐JVM参考书

      立即下载
      深入理解Kafka:核心设计与实践原理
      深入理解Kafka:核心设计与实践原理 原书完整版

      本书从Kafka的基本概念入手,主要从生产端、消费端、服务端等3个方面进行全面的陈述,主要内容包括Kafka的基本使用方式、生产者客户端的使用、消费者客户端的使用

      立即下载
      深入理解Nginx:模块开发与架构解析
      深入理解Nginx:模块开发与架构解析 全书第2版 立即下载
      深入理解Spark:核心思想与源码分析
      深入理解Spark:核心思想与源码分析 高质量版 立即下载
      深入理解EOS:原理解析与开发实战
      深入理解EOS:原理解析与开发实战 完整版

      这是一部从源码层面剖析EOS原理和全方位讲解EOS开发实战的著作。 作者是EOS全球生态系统中具有影响力的EOS社区引力区的联合创始人和核心团队成员,是引力区在EOS主网上的研究和实践成果,

      立即下载
      深入理解linux内核
      深入理解linux内核 完整第三版 立即下载
      深入理解BootLoader
      深入理解BootLoader 高清版

      本书主要介绍BootLoader的开发理论、流程与实例,以当前流行的ARM和Linux为蓝本,详细介绍了如何一步步实现可用的BootLoader。该书既对Linux下的开发环境、编译器使用、处理器架构以及编译和链

      立即下载
      深入理解计算机系统
      深入理解计算机系统 第3版

      深入理解计算机系统(原书第3版) 和第2版相比,本版内容上*的变化是,从以IA32和x86-64为基础转变为完全以x86-64为基础。主要更新如下: 基于x86-64,大量地重写代码,首次介绍对处理浮点数据的

      立即下载
      读者留言
      网友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的强烈推荐来看。作者真的良心,看这本书有种成绩很好有很热心肠的同学教你功课的感觉。

      月恒日升

      月恒日升 提供上传

      资源
      15
      粉丝
      29
      喜欢
      676
      评论
      16

      Copyright 2018-2020 www.xz577.com 码农之家

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