ECMAScript 6: 如何引导新的有吸引力的特性

分享于 

11分钟阅读

Web开发

  繁體 雙語

- 2015年06月 采用的最新标准化版本。 目前,ES6的特性仅通过现代浏览器部分可用。 兼容表中收集的有用信息反映了浏览器和transpilers所支持的新特性。

让我们来看看 10最重要的创新,尽管ES6提供了更多的。 要访问高级功能,你可以:

  • 使用带有 ECMAScript 6支持的现代浏览器( 比如。 Google Chrome 版本 47,但一定要在js文件中添加'使用严格'指令
  • 通过安装 babel插件使用 ECMAScript 6.
  • 使用 Babel transpiler。 在左侧输入ECMAScript代码,它将被转换为右侧的ECMAScript。

让我们来看看细节。

1.允许关键字

let 关键字定义的变量具有许多优点:

  • 通过这种方式,变量只能在块中可见
  • 变量 let 在声明它之前不能使用
console.log(name); // error let name = 'John';

通过在" for"或者" while"循环中声明 let 变量,它将只在循环本身中激活。 对于 if 块,true 也是如此:

for (let num = 5; num <10; num++) {
 console.log(num); // 5, 6, 7, 8, 9}
console.log(num); // num is not definedvar number = 1;if(number <10) {
 let v = 1;
 v = v + 21;
 v = v * 100;
 v = v/8;
 console.log(v);
}
console.log(v); //v is not defined

重要的是要注意,let 变量两次声明是禁止的。 下面的示例导致错误:

let name;
let name; // error

2.类

要描述JavaScript早期版本中的类,需要编写以下内容:

function Product(price, category, description) {
 this.price = price;
 this.category = category;
 this.description = description;
 this.isPublished = false;
}
Product.prototype.publish = function publish() {
 this.isPublished = true;
};
Product.prototype.unpublish = function unpublish() {
 this.isPublished = false;
};

在 ECMAScript 6中,要声明类,应使用关键字类和构造函数。 现在,你也可以使用" class Child extends Parent "语法,这可能是由于其他面向对象编程语言( 比如 ) 所熟悉的。 PHP )。Static 方法也可以在类中声明。 让我们以下面的示例为例:

class Product {
 constructor(price, category, description) {
 this.price = price;
 this.category = category;
 this.description = description;
 this.isPublished = false;
 }
 publish() {
 this.isPublished = true;
 }
 unpublish() {
 this.isPublished = false;
 }
 static getDate() {
 returnnew Date();
 }
}class DownlowdableProduct extends Product{
 // your code goes here}

要创建类的实例,可以使用关键字 new

3。默认值

ES6引入了设置参数默认值的可能性。 这个特性的语法是自我解释的。 在调用函数时指定了默认值。 下面是一个示例,其中 isPublished 是默认设置的:

class Product {
 constructor(price, category, description, isPublished = false) {
 this.price = price;
 this.category = category;
 this.description = description;
 this.isPublished = isPublished;
 }
 publish() {
 this.isPublished = true;
 }
 unpublish() {
 this.isPublished = false;
 }
}

表达式可以设置为参数的默认值。

function sayHello(name = getCurrentUser().toUpperCase()) {
 console.log('Hello, ' + name);
}function getCurrentUser() {
 return'Guest';
}
sayHello();

4.const关键字

要声明常量,可以使用 const 关键字,从而创建一个无法更改的变量:

const MAX_NUM = 5;
MAX_NUM = 10; // error

注意,如果对象被赋给常量,则不能更改常量,但是可以修改它内部的属性。 这也适用于数组或者其他对象值。

const person = {
 screenName: "Guest"};
person.screenName = "John"; // availableperson = 5; // error

5.模板字符串

ECMAScript 6有一种新的指定模板 string s:的方法,它们开始和结束用引号( ` )。

let string = `New String`;

如果使用单引号和双引号,则允许使用大括号 ${variable} 使用新行和替代表达式。

class Product {
 constructor(price, description, isPublished = false) {
 this.price = price;
 this.description = description;
 this.isPublished = isPublished;
 }
 publish() {
 this.isPublished = true;
 }
 unpublish() {
 this.isPublished = false;
 }
}class DownlowdableProduct extends Product {
 constructor(price, link, title, description, isPublished = false) {
 super(price, description, isPublished);
 this.link = link;
 this.title = title;
 }
 toString() {
 return `<li>
 ${this.title} - ${this.link} <span>${this.price}</span></li>`;
 }
}

6.Destructuring

Destructuring是从存储在( 可能嵌套) 对象和数组中的数据提取值的一种简便方法。 它可以在接收数据( 比如赋值的左边)的位置使用。

var [firstName, lastName, city] = ["John", "Doe", "Moscow"];

因此 firstName 包括" John",lastName -" Doe"和 city -" Moscow"。

如果要丢弃不需要的项,则需要放置额外的逗号:

let [,, lastName] = "Hello John Doe".split(""); // first and second elements will be ignored console.log(lastName); // Doe

对于对象,代码将如下所示:

var contact = {
 email: "john@mail.com",
 url: "http://google.com"}var {email, url} = contact;

这里代码与下面的代码类似:

var contact = {
 email: "john@mail.com",
 url: "http://google.com"};var email = contact.email;var url = contact.url;

你可以轻松地将 array 或者对象拆分为变量,而或者对象又包含其他数组或者对象。

let settings = {
 params: {
 w: 100,
 h: 200 },
 elements: ["Home", "Contact Us"]
}
let { title="Menu", params: {w, h}, elements: [item1, item2] } = settings;
console.log(title); // Menuconsole.log(w); // 100console.log(h); // 200console.log(item1); // Homeconsole.log(item2); // Contact Us

7.对象文字

考虑典型的JavaScript示例:

function makeRequest(method, url) {
 return {
 method: method,
 url: url
 }
}

调用 makeRequest 函数时,将使用方法和url键创建对象文本。 在 ECMAScript 6中,可以较短的方式执行相同的操作:

function makeRequest(method, url) {
 return {
 method,
 url
 }
}

8.符号

Symbol - 数据类型,类似于 Numberstring,可以用于生成唯一标识符。 每个符号都是独一无二的。

let unique = Symbol('sym');

注意,Symbol 不使用关键字 new,因为它是原始类型。 这里函数可以用于创建唯一常数。

const FIRST = Symbol('my symbol');const SECOND = Symbol('my symbol');typeof FIRST === 'symbol'; // trueFIRST === SECOND; // false

可选参数描述可以用于描述符号,并且对调试很有用:

let unique = Symbol("sym"); console.log( unique.toString() ); // Symbol(sym)

9.Rest &扩展

要获取参数的array,就可以使用运算符。 如下所示:

function printInfo(first, last,.. .other) {
 console.log(first + ' ' + last + ' - ' + other);
}
printInfo("John", "Doe", "student"); // John Doe - student

other 中,将编写一个参数 array,从第二个参数开始。 可以看到,other 是一个普通的array,使用标准方法,如 mapforEachother,不可以用于参数 pseudoarray。

运算符。"。"。必须始终处于结尾,并可以用于读取函数声明中的参数。 当调用函数以以列表形式传递参数的array 时,它也可以应用于:

let nums = [9, 3, 20];
let maxNumber = Math.max(...nums);
console.log( maxNumber ); // 20

10.箭头函数

让我们看看下面的例子:

class Contact {
 constructor(attachment, mail, sender) {
 this.attachment = attachment;
 this.mail = mail;
 sender.onclick = function(event) {
 sendEmail(this.mail);
 }
 }
}

按下按钮时,我想使用 sendEmail 函数并传递参数 this.mail。 但这将在发送方的上下文中使用,而不是在 Contact的上下文中使用。 有些人将这里变量分配给作用域:

class Contact {
 constructor(attachment, mail, sender) {
 this.attachment = attachment;
 this.mail = mail;
 var that = this;
 sender.onclick = function(event) {
 sendEmail(that.mail);
 }
 }
}

使用箭头创建函数有一种新方法:

class Contact {
 constructor(attachment, mail, sender) {
 this.attachment = attachment;
 this.mail = mail;
 sender.onclick = (event) => {
 sendEmail(this.mail);
 }
 }
}

因此,可以创建简单的函数。

var numArray = [2,4,6,8,10];var newNumArray = numArray.map((elem) => elem * 2);
console.log(newNumArray); // [4,8,12,16,20]

结束语

ECMAScript的支持仍然很有限,许多特性开发中。 但是很快,就可以充分利用这些特性。


gui  feature  GUID  ATT  ATTR  ECM  
相关文章