七的博客

ES6新特性、语法学习

JavaScript

ES6新特性、语法学习

去年 JavaScript 发布了一个比较重要的更新，也就是 ES2015 ， 同时简称为 ES6。

这次的版本更新引入了比较多的新特性，能提升比较大的前端开发效率。

1. 什么是 ES6?

这里从某百科上看一下是怎么描述 ES 的：

ECMAScript (/ˈɛkməskrɪpt/; ES)[1] is a standard for scripting languages, including JavaScript, JScript, and ActionScript. It is best known as a JavaScript standard intended to ensure the interoperability of web pages across different web browsers.[2] It is standardized by Ecma International in the document ECMA-262。

从上面的一段话中，我们可以提取出来的信息有：

ES 就是 ECMAScript 的缩写，它是一种脚本语言的标准，包括 JavaScript、JScript 和 ActionScript。

那么 ES6 就是 ECMAScript 6.0 ， 也就是 ECMAScript 的第 6 个版本。 ES6 从提案到最后发布，一共用了 10 几年，足以看出它的更新幅度。

这个标准最知名的实现是 JavaScript ，标准的主要是想确保在不同网络浏览器之间的网页互操作性。除了 JavaScript 外其他几个实现应该应用的不是特别广泛，没怎么听说过。

ECMAScript 第一个版本在 1997 年 7 月 发布的，到现在已经接近快 20 年了。 算起来的话， JavaScript 是 1995 年首次发布的，差不多是过了几年后就实现了这个标准。

2. ECMAScript 和 JavaScript 的关联

ECMAScript 跟 JavaScript 的关联是非常深。

JavaScript 语言是由 Netscape (国内称作网景) 公司发布，然后该公司将 JavaScript 提交给标准化组织 ECMA，准备让这门语言成为标准。

在第二年，ECMA 组织正式发布了浏览器脚本语言的标准，取名为 ECMAScript 。由于 JavaScript 是被注册了商标的，如果要使用的话就会侵权。 于是发布的标准名称就叫做 ECMA + Script = ECMAScript 。

所以 ECMAScript 是一个标准规范，JavaScript 语言是这个规范的其中一个实现之一。

跟 SQL 点类似， SQL 是一门标准语言，但是它的实现由 Oracle 、MySQL、PostgreSQL 等等。

3. ES6 都有哪些新特性

3.1 let 和 const

在 ES6 之前， JavaScript 只有 var 用于声明变量，也就是这种写法：

var name = "张三"

ES6 可以改成下面这种写法：

let name = "张三"
const name = "张三"

看着好像差不太多的样子，实际上还是有差别的。

var 是 varibale 的缩写，所以变量是可以变的，比如：

var name = "张三";
if (true) {
    var name = "李四";
}
console.log(name); // 输出 "李四"

let 的表现形式则不一样，let 只在块作用域里面有效 ，块即为两个 { } 之间的内容。使用 let 可以让变量的作用域更加清晰：

let name = "张三";
if (true) {
     // 块级作用域内的变量，不会影响外面的
    let name = "李四";
    
     // 输出 "李四"
    console.log(name);
}
 // 输出 "张三"
console.log(name);

const 则是定义常量，防止在其他地方修改变量的值：

const pi = 3.14;

// 这会抛出错误，因为 const 声明的是常量
pi = 5;

const 定义的变量有点像 Java 里面的常量：

private final double pi = 3.14d;

3.2 箭头函数

箭头函数使用 => 语法作为简写。在语法上跟Java 8 中的 Lambda 表达式相似。

之前的写法：

var add = function(a, b) {
    return a + b;
};

ES6 的写法：

const add = (a, b) => a + b;

与普通函数不不一样，箭头函数没有自己的 this。它会捕获其所在上下文的 this 值，避免了经典函数中 this 的陷阱。

跟 Java8 的写法可以说是很像了：

final BiFunction<Integer, Integer, Integer> add = (a, b) -> a + b;

3.3 模板字符串

模板字符串提供了一种简单的方法来创建包含变量和表达式的字符串。

语法是使用反引号 【】 而不是单引号或双引号，还可以插入表达式${expression}`，在拼接多个变量的时候真的很方便。

之前拼接字符串的写法：

var name = "程序员";
console.log('你好, ' + name );

ES6 模板字符串写法：

const name = "程序员";
console.log(`你好, ${name}`);

除了单行内容，也支持多行内容：

`你好,
 程序员`

3.4 类

在以前 JavaScript 中是不支持类这一说的，但是可以模拟类。

下面这种写法是用来模拟类的行为，这让写管了面向对象语言的人会觉得很不习惯，非常的不直观：

function Person(name) {
    this.name = name;
}
Person.prototype.greet = function() {
    return '你好，' + this.name + '！';
};

var person = new Person("张三");
console.log(person.greet());

使用 ES6 的写法：

class Person {
    constructor(name) {
        this.name = name;
    }

    greet() {
        return `你好，${this.name}！`;
    }
}

const person = new Person("张三");
console.log(person.greet());

使用了类的语法非常简洁跟直观，很易于理解和维护。同时也更加接近传统的面向对象编程。

3.5 Set

Set 就跟 Java 里面的 Set 是一样的，都是没有重复的值。

甚至连用法都差不多：

let mySet = new Set();
mySet.add(1);
mySet.add(5);

// 重复的元素不会被添加
myT.add(5); 

// 输出：true
console.log(mySet.has(1));

// 输出：2
console.log(mySet.size);

3.6 Map

Map 是一个键值对的集合， 跟 Java 里面的 Map 几乎也是一样的。

let myMap = new Map();
myMap.set('key1', 'value1');
myMap.set('key2', 'value2');

// 输出：value1
console.log(myMap.get('key1')); 
// 输出：true
console.log(myMap.has('key2')); 

// 删除 key1 这个元素
myMap.delete('key1');
// 输出：false
console.log(myMap.has('key1'));

3.7 迭代

在 ES6 之前，JavaScript 主要依赖于传统的 for 循环来遍历数组和对象。

var arr = [10, 20, 30, 40];

for (var i = 0; i < arr.length; i++) {
     // 输出数组的每个元素
    console.log(arr[i]);
}

ES6 后可以使用增强的 for 循环：

const arr = [10, 20, 30, 40];

for (const value of arr) {
    // 直接输出数组的每个元素
    console.log(value); 
}

也可以使用 forEach 来进行遍历：

const arr = [10, 20, 30, 40];

arr.forEach(function(value) {
    console.log(value); // 输出数组的每个元素
});

参考链接

◀ 上一篇
Ubuntu14常见问题
下一篇 ▶
Ubuntu16新版本更新内容