ES6学习记录(一)

标签：

ECMAScript 6.0（以下简称ES6）是JavaScript语言的下一代标准，已经在2015年6月正式发布。标准的制定者有计划，以后每年发布一次标准，使用年份作为版本。因为ES6的第一个版本是在2015年发布的，所以又称ECMAScript 2015（简称ES2015）。编程语言JavaScript是ECMAScript的实现和扩展，由ECMA（一个类似W3C的标准组织）参与进行标准化。ECMAScript定义了：

• 语言语法 – 语法解析规则、关键字、语句、声明、运算符等。
• 类型 – 布尔型、数字、字符串、对象等。
• 原型和继承
• 内建对象和函数的标准库 – JSON、Math、数组方法、对象自省方法等。

ECMAScript标准不定义HTML或CSS的相关功能，也不定义类似DOM（文档对象模型）的Web API，这些都在独立的标准中进行定义。ECMAScript涵盖了各种环境中JS的使用场景，无论是浏览器环境还是类似node.js的非浏览器环境。

for-of循环

在刚刚学习JavaScript的时候，我们通常这样遍历一个数组：

1 for (var i = 0; index < array.length; i++) {
2   console.log(array[i]);
3 }

然后到了ES5正式发布之后，我们可以使用内建的foreach方法来遍历数组：

1 array.forEach(value){
2     console.log(value);
3 }

这样的代码看起来更简洁，也更方便，但却有一个小缺陷：那就是不能使用break语句中断循环，也不能使用return语句返回外层循环。

因此ES6中增加一种新的循环语法来解决目前的问题。

就像这样：

1 for(var value of array){
2     console.log(value);
3 }

 这个for-of循环的外表下，还隐藏着一些强大的功能。现在，只需记住：

• 这是最简洁、最直接的遍历数组元素的语法
• 这个方法避开了for-in循环的所有缺陷
• 与forEach()不同的是，它可以正确响应break、continue和return语句

for-in循环用来遍历对象属性。

for-of循环用来遍历数据—例如数组。

但是，不仅如此！

for-of循环也可以遍历其他的集合

for-of循环不仅支持数组，还支持大多数的类数组对象，例如DOM NodeList对象。

for-of循环也支持字符串遍历，它将字符串视为一系列的Unicode字符来进行遍历:

1 for (var chr of "hello") {
2   alert(chr);
3 }

 ES6生成器（Generators）

什么是生成器？

先看下面的示例：

1 function* quips(name) {
2   yield "你好 " + name + "!";
3   yield "希望你能喜欢这篇介绍ES6的译文";
4   if (name.startsWith("X")) {
5     yield "你的名字 " + name + "  首字母是X，这很酷！";
6   }
7   yield "我们下次再见！";
8 }

 这段代码看起来很像一个函数，我们称之为生成器函数。它与普通函数有很多共同点，但二者有如下区别：

• 普通函数使用function声明，而生成器函数使用function*声明。
• 在生成器函数内部，有一种类似return的语法：关键字yield。二者的区别是，普通函数只可以return一次，而生成器函数可以yield多次（当然也可以只yield一次）。在生成器的执行过程中，遇到yield表达式立即暂停，后续可恢复执行状态。

这就是普通函数和生成器函数之间的最大区别，普通函数不能自动暂停，生成器函数可以。

模板字符串

ES6引入了一种新型的字符串字面量语法，我们称之为模板字符串（template strings）。传统的JS，输出模板通常是这样的：

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

用ES6模板字符串则可以这样解决：

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

 模板字符串是增强版的字符串，用反引号(`)标识，它可以当做普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量。如果使用模板字符串表示多行字符串，所有的空格和缩进都会被保留在输出之中。

1 $(‘#list‘).html(`
2 <ul>
3   <li>first</li>
4   <li>second</li>
5 </ul>
6 `);

上面代码中，所有模板字符串的空格和换行，都是被保留的，比如<ul>标签前面会有一个换行。如果你不想要这个换行，可以使用trim方法消除它。

1 $(‘#list‘).html(`
2 <ul>
3   <li>first</li>
4   <li>second</li>
5 </ul>
6 `.trim());

模板字符串中嵌入变量，需要将变量名写在${}之中。

 1 function authorize(user, action) {
 2   if (!user.hasPrivilege(action)) {
 3     throw new Error(
 4       // 传统写法为
 5       // ‘User ‘
 6       // + user.name
 7       // + ‘ is not authorized to do ‘
 8       // + action
 9       // + ‘.‘
10       `User ${user.name} is not authorized to do ${action}.`);
11   }
12 }

大括号内部可以放入任意的JavaScript表达式，可以进行运算，以及引用对象属性。

 1 var x = 1;
 2 var y = 2;
 3 
 4 `${x} + ${y} = ${x + y}`
 5 // "1 + 2 = 3"
 6 
 7 `${x} + ${y * 2} = ${x + y * 2}`
 8 // "1 + 4 = 5"
 9 
10 var obj = {x: 1, y: 2};
11 `${obj.x + obj.y}`
12 // 3

模板字符串之中还能调用函数。

1 function fn() {
2   return "Hello World";
3 }
4 
5 `foo ${fn()} bar`
6 // foo Hello World bar

ES6学习记录(一)

标签：

原文地址：http://www.cnblogs.com/neil-lin/p/5785886.html