JavaScript ECMAScript 2015 (ES6) 和 ECMAScript 2016 (ES7) 新特性速查


ES6 给 JavaScript 带来了很深刻的变化。 它完全改变了我们使用 JavaScript 的方式。 ES7是在ES6之上的一个微小更新。 让我们看看 ES6 更新中带来的变化。本文起初是我的学习笔记,现在我和大家分享一下。

支持UNICODE标准版本8

它将允许使用笑脸,一个可以使用 unicode 声明为转义字符的变量。

示例:

 
 
JavaScript 代码:
  1. var \u{102C0} = { \u{102C0} : 2 };
  2. return \u{102C0};

二进制,十六进制和十进制数

  • hex – 16进制 – 以 0x 开头
  • Oct — 8进制 — 以 0o 开头
  • Binary — 2进制 — 以 0b 开头
 
 
JavaScript 代码:
  1. var decimalLit = 15;
  2. var hexadecimalLit = 0xF;
  3. var octalLit = 0o17;
  4. var binaryLit = 0b1111;
  5. console.log(decimalLit == hexadecimalLit);
  6. console.log(decimalLit == octalLit);
  7. console.log(decimalLit == binaryLit);

字符串模板

以前使用+连接字符串,现在可以使用 ` 。

以前版本:

 
 
JavaScript 代码:
  1. var message = "The user "+ user.firstName + "" + user.lastName +
  2. " cannot be "+ action + "because "+ validationError;

新版本:

 
 
JavaScript 代码:
  1. var message = `The user ${user.firstName} ${user.lastName} cannot be
  2. ${action} because ${validationError}`;

注意:

be 和 ${action} 之间的换行是因为反引号字符串也称为“多行文字”。这意味着空格保留在字符串中,因此上面的消息将显示成两行上。 它会在“be”之后换行,然后在继续之前显示两个空格(因为代码缩进两个空格)。

变量声明

var 声明的变量可以被重新分配,所以我们现在用 let 关键字不允许这样做。其他都是相同的。

 
 
JavaScript 代码:
  1. var msg = "Howdy";
  2. var msg = "Hello there"; // 合理的,只是重新分配

另一方面:

 
 
JavaScript 代码:
  1. let message = `This is your message.`;
  2. let message = `This is another message.`; // 错误! 不能重新声明早期声明的变量 `message`

CONST 关键字

等同于java中的 final 和 C/C++中的 const 。

 
 
JavaScript 代码:
  1. const message = `This is your message.`;
  2. message = `This is your second message.`; // 错误!不能重新分配一个 `const` 变量

块级作用域

var 声明的变量没有块级作用域,只有函数作用域。

let 和 const 声明的变量的作用域在声明它们的语句块中。

解构赋值

它将数组分解成一个个的元素,保持原始数组不变。 这个过程将值映射到相同的变量名中。

示例:

 
 
JavaScript 代码:
  1. let names = ["Ted", "Jenni", "Athen"];
  2. let [ted, jenni, athen] = names;
  3. console.log(ted, jenni, athen); // 打印 "Ted", "Jenni", "Athen"
  4.  
  5. // 类似于下面的赋值语句
  6. var ted = names[0];
  7. var jenni = names[1];
  8. var athen = names[2];

对象解构

示例:

 
 
JavaScript 代码:
  1. var url = "http://www.newardassociates.com/#/speaking";
  2. var parsedURL = /^(\w+)\:\/\/([^\/]+)\/(.*)$/.exec(url);
  3. var [protocol, fullhost, fullpath] = parsedURL;
  4. console.log(protocol); // “http”
  5.  
  6. let point = { x:2, y: 5 };
  7. let {x, y} = point;
  8. console.log(x, y); // prints 2, 5
  9.  
  10. let point = { x:2, y: 5 };
  11. let {y, x} = point;
  12. console.log(x, y); // prints 2, 5
  13.  
  14. let {y: pty, x: ptx} = point;
  15. console.log(ptx, pty); // prints 2, 5

左侧表示匹配的名称,右侧表示实际声明的变量名称:

 
 
JavaScript 代码:
  1. let rect = { lowerLeft: { x:0, y:0 }, upperRight: { x:3, y:4} };
  2. let { lowerLeft: { x:llx, y: lly }, upperRight: { x:urx, y:ury } }
  3. = rect;
  4.  
  5. console.log(llx, lly, urx, ury); // prints “0 0 3 4

在方法调用是解构对象参数

 
 
JavaScript 代码:
  1. let person = {
  2. firstName: "Ted",
  3. lastName: "Neward",
  4. age: 45,
  5. favoriteLanguages: ["ECMAScript", "Java", "C#", "Scala", "F#"]
  6. }
  7.  
  8. function displayDetails({firstName, age}) {
  9. console.log(`${firstName} is ${age} years old`);
  10. }
  11.  
  12. displayDetails(person);

默认参数

现在我们可以像 C/C++ 那样为函数参数提供默认值。

 
 
JavaScript 代码:
  1. let sayHello = function(message = "Hello world!") {
  2. console.log(message);
  3. }
  4.  
  5. sayHello(); // prints "Hello world!"
  6.  
  7. sayHello("Howdy!"); // prints "Howdy!"

函数的剩余参数:传递一个参数列表

在过去,您可能已经通过访问内置的 arguments 参数来完成此操作,该参数被静默构造并传递给每个函数调用:

如果传递给该函数的参数超过了定义的参数数目,那么它们会被添加到 arguments 中。

通过以下方式访问:

 
 
JavaScript 代码:
  1. var args = Array.prototype.slice.call(arguments, .length);

在ES6中,我们现在可以实用 JAVA 风格的语法来捕获一个值的列表。

示例:

 
 
JavaScript 代码:
  1. function greet(firstName, args) {
  2. console.log("Hello",firstName);
  3. args.forEach(function(arg) { console.log(arg); });
  4. }
  5.  
  6. greet("Ted");
  7.  
  8. greet("Ted", "Hope", "you", "like", "this!");

扩展操作符:同剩余参数相反

该操作符把数组分成单个变量,最简单的用例是串联数组。

 
 
JavaScript 代码:
  1. let arr1 = [0, 1, 2];
  2. let arr2 = [...arr1, 3, 4, 5];
  3. console.log(arr2); // prints 0,1,2,3,4,5
  4. // 重要的用例:
  5. function printPerson(first, last, age) {
  6. console.log(first, last age);
  7. }
  8.  
  9. let args = ["Ted", "Neward", 45];
  10.  
  11. printPerson(...args);

箭头函数

关键字 function 可以实用箭头操作符 => 替代。

示例:

 
 
JavaScript 代码:
  1. function(arg1, arg2){//something here}
  2.  
  3. // 上面的函数可以写成:
  4. (arg1, arg2) => {//something here}

注意:

另请注意,如果箭头函数的主体是单个表达式产生一个值,则不需要显式返回(不需要实用 return)。相反,该单个表达式隐式地返回给箭头函数的调用者。然而,如果主体不止一个语句或表达式,那么大括号是必需的,并且任何返回的值都必须通过 return 语句返回给调用者。

愚人码头注:实用剪头函数的时候还应该特别注意箭头函数体内的 this,请查看:ES2015 中的箭头函数和词法 this

迭代数组

in 操作符。

 
 
JavaScript 代码:
  1. let arr = ["janishar", "ali", "anwar"]
  2.  
  3. let displayArr = function(arr) {
  4. for (let x in arr) {
  5. console.log(x);
  6. }
  7. };

如果 this 是在全局作用域下引用,那么他就指向全局的变量,函数或对象

this 指向调用函数的对象。

示例:

 
 
JavaScript 代码:
  1. let displayThis = function() {
  2. for (let m in this) {
  3. console.log(m);
  4. }
  5. };
  6.  
  7. displayThis(); // this == global object
  8.  
  9. let bob = {
  10. firstName: "Bob",
  11. lastName: "Robertson",
  12. displayMe: displayThis
  13. };
  14.  
  15. bob.displayMe(); // this == bob

在 NODE JS require(‘events’) 用来订阅-发布模块

 
 
JavaScript 代码:
  1. let EventEmitter = require('events');
  2. let ee = new EventEmitter();
  3.  
  4. ee.on('event', function() {
  5. console.log("function event fired", this);
  6. });
  7.  
  8. ee.emit('event');

注意:

如果你使用 EventEmitter 注册一个遗留函数,this将是在运行时确定。但是如果你使用 EventEmitter 注册了一个箭头函数,那么 this 将在定义箭头函数时被绑定。

生成器函数: 类似于反应式编程中的流

ES6中使用生成器函数实现无限流。

示例:

 
 
JavaScript 代码:
  1. function* getName() {
  2. yield "Ted";
  3. yield "Charlotte";
  4. yield "Michael";
  5. yield "Matthew";
  6. }
  7.  
  8. let names = getName();
  9.  
  10. console.log(names.next().value);
  11. console.log(names.next().value);
  12. console.log(names.next().value);
  13. console.log(names.next().value);
  14. console.log(names.next().value);

该函数将按顺序打印每个名称。当names用完时,它将打印 undefined 。

for-of 语句

for-of 语句与 for-in 相似。

for-of 和 for-in 之间存在细微的差别,但在在大多数情况下,您可以使用 for-of 替换旧的语法。它只是增加了使用 generators(生成器) 的能力。

JavaScript 基于对象的环境

JavaScript 不是基于类的,而是基于对象的环境。在基于对象的环境中,没有类,每个对象都是从其他现有对象中克隆出来的。 当一个对象被克隆时,它保留了对原型的隐式引用。

定义一个类

 
 
JavaScript 代码:
  1. class Person{}
  2.  
  3. let p = new Person();

类的构造器

 
 
JavaScript 代码:
  1. class Person{
  2.  
  3. constructor(firstName, lastName, age){
  4. this.firstName = firstName;
  5. this.lastName = lastName;
  6. this.age = age;
  7. }
  8. }
  9.  
  10. let ted = new Person("Ted", "Neward", 45);
  11. console.log(ted);

Getter 和 Setter

 
 
JavaScript 代码:
  1. class Person {
  2.  
  3. constructor(firstName, lastName, age) {
  4. console.log(arguments);
  5. this.firstName = firstName;
  6. this.lastName = lastName;
  7. this.age = age;
  8. }
  9.  
  10. get firstName() { return this._firstName; }
  11.  
  12. set firstName(value) { this._firstName = value; }
  13.  
  14. get lastName() { return this._lastName; }
  15.  
  16. set lastName(value) { this._lastName = value; }
  17.  
  18. get age() { return this._age; }
  19.  
  20. set age(value) { this._age = value; }
  21. }

注意:

this._<field_name> 指向通过构造器添加的变量 </field_name><field_name> 。

原型链

很早以前,JavaScript 就已经将原型链从一个对象维护到另一个对象上。您可能会假设原型链接类似于 Java 或 C++ / C# 中的继承,但这两种技术之间只有一个真正的相似之处:当 JavaScript 需要解析对象上的标识符时,如果该标识符不(直接)对象上,那么它会沿着原型链向上匹配。

继承

 
 
JavaScript 代码:
  1. class Author extends Person{
  2.  
  3. constructor(firstName, lastName, age, subject){
  4. super(firstName, lastName, age);
  5. this.subject = subject;
  6. }
  7.  
  8. get subject() { return this._subject; }
  9.  
  10. set subject(value) { this._subject = value; }
  11.  
  12. writeArticle() {
  13. console.log(
  14. this.firstName,
  15. "just wrote an article on",
  16. this.subject
  17. );
  18. }
  19. }
  20.  
  21. let mark = new Author("Mark", "Richards", 55, "Architecture");
  22.  
  23. mark.writeArticle();

静态或单例

静态字段:

ECMAScript 6 没有明确规定静态属性或字段,但我们可以间接创建。

 
 
JavaScript 代码:
  1. class Person{
  2.  
  3. constructor(firstName, lastName, age){
  4. console.log(arguments);
  5. // 如果Person不存在该变量,
  6. // 就要引入一个新的字段;
  7. // 否则,只是引用该变量
  8. if (typeof(Person.population === 'undefined'))
  9. Person.population = 0;
  10. Person.population++;
  11. this.firstName = firstName;
  12. this.lastName = lastName;
  13. this.age = age;
  14. }
  15.  
  16. //...as before
  17.  
  18. }

静态方法:

要定义静态方法,您可以在类声明中使用 static 关键字来定义函数:

 
 
JavaScript 代码:
  1. class Person{
  2.  
  3. //...as before
  4.  
  5. static haveBaby() {
  6. return Person.population++;
  7. }
  8. }

模块: import(导入) 和 export(导出):

截至2017年5月19日,nodejs不支持此功能

export(导出):

如果您有一个文件要作为模块使用 – 我们称之为输出 – 您只需 export(导出) 想要在其他地方使用的标识符,如下所示:

  1. 导出一个函数
 
 
JavaScript 代码:
  1. output.js
  2. export function output() {
  3. console.log("OUT: ", arguments);
  4. }

import(导入):

在其他地方导入上面导出的函数

 
 
JavaScript 代码:
  1. import { out } from 'output.js';
  2.  
  3. out("I'm using output!");

为了使用这个模块,您必须知道您想要导入的所有名称。(尽管有些人可能会认为这有一种好处,因为它可以确保不会导入不知道的任何标识符。)如果想要从模块中获取所有导出的名称,可以使用通配符( *)导入语法,但是需要定义一个模块名称,以便你在其范围内操作:

导入全部:

 
 
JavaScript 代码:
  1. import * as Output from 'output'; // 你也可以忽略 `.js` 后缀
  2.  
  3. Output.out("I'm using output!");

Symbol

Symbol 是一种类型。 Symbol 的一个实例是唯一的名称,不能在其他地方重复。 它用于以安全的方式保持一个变量。Symbol 的主要功能是帮助程序员避免跨库的名称冲突。一开始有点难理解,试着将 Symbol 作为基于字符串的唯一哈希值来考虑即可。

集合:

Array,Map 和 Set

Map:

Map 是一个组键/值对。

  1. 它包含方法 get()和 set() ,分别用来查找和设置 键/值 对。
  2. clear() 将完全清空该集合。
  3. keys() 返回 Map 中键的可迭代集合。
  4. values() 也是一样的道理。

另外,类似于 Array ,Map 包含函数式语言的方法,如 forEach() ,它们可以在 Map 上运行。

示例:

 
 
JavaScript 代码:
  1. let m = new Map();
  2. m.set('key1', 'value1');
  3. m.set('key2', 'value2');
  4.  
  5. m.forEach((key, value, map) => {
  6. console.log(key,'=',value,' from ', map);
  7. })
  8.  
  9. console.log(m.keys());
  10. console.log(m.values());

Set:

Set,更像是传统的对象集合,可以将对象简单地添加到集合中。但是 Set 会依次检查每个对象,以确保它不是集合中已经存在的值。

示例:

 
 
JavaScript 代码:
  1. let s = new Set();
  2. s.add("Ted");
  3. s.add("Jenni");
  4. s.add("Athen");
  5. s.add("Ted"); // 重复的!
  6.  
  7. console.log(s.size); // 3

弱引用

WeakMaps 和 WeakSets ,它们通过弱引用来保持 map 和 set 的值,而不是传统的强引用。

Promise

ES6 内置了 Promise。 (我们将单独用一篇文章介绍 promise 。)

Proxy 代理

Proxy允许对象在被可访问之前修改它的行为。

推荐 Ted Neward 的优秀的文章 (如果你想读这篇文章, 请点击 这里。)



原文: http://www.css88.com/archives/8189

JavaScript: Moving to ES2015 by Ved Antani English | 24 Mar. 2017 | ASIN: B06XWDKLS8 | 1194 Pages | AZW3 | 9.08 MB Explore and master modern JavaScript techniques with ES2015 in order to build large-scale web applications About This Book This course offers an expert's eye on the latest ES6 features and how these advanced tasks fit together in JavaScript as a whole Discover robust JavaScript implementations of classic and advanced design patterns Learn about modern web architectures and build real-world apps on top of them Who This Book Is For This course is for experienced developers familiar with other object-oriented languages who wants to learn new capabilities of ES-2015 to improve their web development skills and build professional-quality web applications. This also goes for those who want to explore some modern JavaScript features, techniques, and architectures in order to develop cutting-edge web applications. What You Will Learn Get a run through of the basic language constructs, Functions, and Closures of JavaScript Code using the powerful object-oriented feature in JavaScript Master DOM manipulation, cross-browser strategies, and ES6 Harness the power of patterns for tasks ranging from application building to code testing Identify the best use cases for microservices Gain expertise in responsive and dynamic website design Enable real-time communications between client-client and client-server/server-client Write complete applications using functional reactive programming In Detail JavaScript is a high-level, dynamic, untyped, lightweight, and interpreted programming language. Mastering modern JavaScript techniques and the toolchain are essential to develop web-scale applications. This Learning Path will upgrade your skills to ES2015, and you will get to introduce yourself to popular frameworks like React and Angular 2. In the first module, you will get familiar with the language constructs and how to make code easy to organize. You will gain a concrete understanding of variable scoping, loops, and best practices on using types and data structures, as well as the coding style and recommended code organization patterns in JavaScript. By the end of the module, you will understand how reactive JavaScript is going to be the new paradigm. Over the course of the next module, you will explore how design patterns can help you improve and organize your JavaScript code. You'll get to grips with creational, structural, and behavioral patterns and get a deeper look at patterns used in functional programming, as well as model view patterns and patterns to build web applications. By the end of the module, you'll be saved of a lot of trial and error and developmental headaches, and you will be on the road to becoming a JavaScript expert. In the last leg of this course, you will shift your focus to network programming concepts as you build a real-time web application with websockets. Along the way, you'll explore how the power of JavaScript can be increased multi-fold with high performance techniques. By the end of this module, you'll be a skilled JavaScript developer with a solid knowledge of the latest JavaScript techniques, tools, and architecture to build modern web apps. This Learning Path combines some of the best that Packt has to offer in one complete, curated package. It includes content from the following Packt products: Mastering JavaScript by Ved Antani Mastering JavaScript Design Patterns, Second Edition by Simon Timms Modern JavaScript Applications by Narayan Prusty Style and approach This course is a comprehensive guide with a clear focus on practical use cases and patterns. Each chapter consists of best practices, useful advice, and a bunch of easy-to-follow examples that will build up your skills as you advance.
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值