干货 | ECMAScript 6.0 新特性详解(附视频)

Posted java1234

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了干货 | ECMAScript 6.0 新特性详解(附视频)相关的知识,希望对你有一定的参考价值。

前言

ES6(ECMAScript 6)终于在2015年6月正式发布了。距离上一次正式公开的ES5(于2009年发布的)已经相距了不短的时间了。其实在ES6正式发布之前的一段时间内,ECMA组织已经不再向ES6中添加新特性了,所以其实在ES6正式发布之前,业界已经有许多对ES6的相关实践了。

本文参考众多的博客文章资料,对新出的ES6中新增的特性做一个简介。并附送相关课程(想领取课程的同学可滑到文章末尾)。

下面我们针对每一个topic,举一个sample example加以说明,不过并不会深入阐述。

箭头操作符

何为箭头操作符?其实箭头操作符其实就是使用=>语法来代替函数。如果你熟悉C#或者Java之类的强类型语音,你应该知道lambda语法,其实箭头操作符做的事情跟lambda表达式有异曲同工之妙。具体的用法看下面的例子,

1
2
3
4
5
6
7
8
9

var arr = [1, 2, 3];

// 传统写法
arr.forEach(function (v) {
   console.log(v);
});

// 使用箭头操作符
arr.forEach( v => console.log(v));

在传统写法中,我们需要写一个匿名的函数,然后给这个函数传入参数,在函数体中对此参数做相关处理。而使用箭头操作符后,它简化了函数的编写(其实是不需要再写匿名函数了)。

箭头操作符的左侧可以接收一个简单的参数,也可以使用一个参数列表。右侧进行具体的操作或者是返回值。下面的示例展示了箭头操作符更一般的用法,

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

// 在表达式中使用
var odds = evens.map(v => v + 1);
var nums = evens.map((v, i) => v + i);
var pairs = evens.map(v => ({even: v, odd: v + 1}))

// 在申明中使用
nums.forEach(v => {
   if (v % 5 === 0) fives.push(v);
});

// 使用this指针
var bob = {
   _name: "Bob",
   _friends: [],
   printFriends() {
       this._friends.forEach(f => consol.log(this._name + " knows " + f));
   }
}

类的原生支持

ES6中提供了类的原生支持,引入了class关键字,其实它是一种实现OOP编程思想的语法糖。它是基于原型链的。

其实javascript本身就是面向对象的语音,只不过没有Java之类的语言那么学院派,它更加灵活。ES6中提供的类其实就是对原型模型的包装。

ES6提供原生class支持后,类方面的操作,比如类的创建、继承等等更加直观了。并且父类方法的调用、实例化、静态方法和构造函数等OOP概念都更加形象化了。

我们来看一些示例,看在ES6中到底如何使用学院化的使用类,

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

// 类的定义
class Animal {
// ES6中的构造器,相当于构造函数
   constructor(name) {
       this.name = name;
   }

// 实例方法
   sayName() {
       console.log('My Name is ' + this.name);
   }
}

// 类的继承
class Programmer extends Animal {
   constructor(name) {
// 直接调用父类构造器进行初始化
       super(name);
   }

// 子类自己的实例方法
   program() {
       console.log('I\'am coding...');
   }

// 静态方法
   static LEVEL() {
       console.log('LEVEL BAD!');
   }
}

// 一些测试
var doggy=new Animal('doggy'),
larry=new Programmer('larry');
doggy.sayName(); // ‘My name is doggy’
larry.sayName(); // ‘My name is larry’
larry.program(); // ‘I'm coding...’
Programmer.LEVEL(); // ‘LEVEL BAD!’

可以看到,ES6中我们可以完全用Java中的思想来写创建类、继承类、实例方法、初始化等等。

对象字面量的增强

在ES6中,对象字面量被增强了,写法更贱geek,同时可以在定义对象的时候做的事情更多了。比如,

  • 可以在对象字面量里面定义原型

  • 定义方法可以不用function关键字了

  • 更加方便的定义方法

  • 直接调用原型链上层(父层)的方法

具体的我们看下面的示例代码,

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

var human = {
   breathe() {
       console.log('breathing...');
   }
};

function sleep() {
   console.log('sleeping...');
}

var worker = {
   __proto__: human, // 设置原型,相当于继承human
   company: 'code',
   sleep, // 相当于 `sleep: sleep`
   work() {
       console.log('working...');
   }
};

human.breathe(); // `breathing...`
worker.sleep(); // `sleeping...`
worker.work(); // `working...`

字符串模板

ES6中提供原生的字符串模板支持。其语法很简单使用使用反引号`来创建字符串模板,字符串模板中可以使用${placeholder}来生成占位符。

如果你有使用后端模板的经验,比如smarty之类的,那么你将对此不会太陌生。让我们来看段示例,

1
2

var num = Math.random();
console.log(`your random num is ${num}`);

字符串模板其实并不是很难的东西,相对比较容易理解。个人觉得其目前主要的使用场景就是改变了动态生成字符串的方式,不再像以前那样使用字符串拼接的方式。

解构赋值

如果你熟悉python等语言,你对解构赋值的概念应该很了解。解构的含义简单点就是自动解析数组或者对象中值,解析出来之后一次赋值给一系列的变量。

利用这个特性,我们可以让一个函数返回一个数组,然后利用解构赋值得到数组中的每一个元素。让我们来看一些例子。

1
2
3
4
5
6
7
8
9
10
11
12
13
14

function getVal() {
   return [1, 2];
}

var [x, y] = getValue();
var [name, age] = ['larry', 26];

console.log('x: ' + x + ', y: ' + y); // x: 1, y: 2
console.log('name: ' + name + ', age: ' + age); // name: larry, age: 26

// 交换两个变量的值
var [a, b] = [1, 2];
[a, b] = [b, a];
console.log('a: ' + a + ', b: ' + b);

函数参数的扩展

ES6中对函数参数作了很大的扩展,包括

  • 默认参数

  • 不定参数

  • 扩展参数

默认参数,即我们可以为函数的参数设置默认值了。可能你在某些js库的源码经常会看到类似下面这样的操作,

1
2
3
4

function foo(name) {
   name = name || 'larry';
   console.log(name);
}

上面的或操作其实就是为了给参数name设置默认值。

而在ES6中,我们可以采用更加方便的方式,如下,

1
2
3
4
5
6

function foo(name = 'larry') {
   console.log(name);
}

foo(); // 'larry'
foo('gejiawen'); // 'gejiawen'

不定参数的意思是,我们的函数接受的参数是不确定的,由具体的调用时决定到底会有几个参数。其实在ES6之前的规范中我们大可以使用arguments变量来达到不定参数的判断,但是无疑这一方案过于复杂。

不定参数的用法是这样的,我们在函数参数中使用...x这样的方式来代表所有的参数。其中x的作用就是指代所有的不定参数集合(其实它就是一个数组)。让我们来看个例子,

1
2
3
4
5
6

function add(...x) {
   return x.reduce((m, n) => m + n);
}

console.log(add(1, 2, 3)); // 6
console.log(add(1, 2, 3, 4, 5)); // 15

关于拓展参数,其实拓展参数其实一种语法糖,它允许传递一个数组(或者类数组)作为函数的参数,而不需要apply操作,函数内部可以自动将其当前不定参数解析,然后可以获得每一个数组(类数组)元素作为实际参数。看下面的示例,

1
2
3
4
5

function foo(x, y, z) {
   return x + y + z;
}

console.log(foo(...[1, 2, 3])); // 6

新增letconst关键字

ES6中新增了两个关键字,分别为letconst

let用于声明对象,作用类似var,但是let声明的变量拥有更狭隘的作用域,脱离特定的作用域后变量的生命周期就终结了。这将有效的避免javascript中由于隐式变量作用域提升而导致的各种bug,甚至是内存泄露等等问题。

const用于声明常量。

让我们来看一些例子。

1
2
3
4

for (let i = 0; i < 2; i++) {
   console.log(i); // 0, 1
}
console.log(i); // undefined, 严格模式下会报错

for...of遍历

ES6中新增了一种遍历数组和对象的方法,叫做for...of。他与for...in用法相似。看下面的例子,

1
2
3
4
5
6
7
8
9

var arr = [1, 2, 3];

for (let v of arr) {
   console.log(v); // 1,2,3
}

for (let i in arr) {
   console.log(arr[i]); // 1,2,3
}

从上面的示例代码中,我们可以看出,for...of遍历时提供的是value,而for...in遍历提供的是key。

迭代器和生成器

ES6中新增的迭代器和生成器的相关概念相对来说有点复杂,后面将会产出专门的文章针对这个topic进行阐述。

Promise

Promises是处理异步操作的一种模式,之前在很多三方库中有实现,比如jQuery的deferred对象。当你发起一个异步请求,并绑定了.when().done()等事件处理程序时,其实就是在应用promise模式。下面是一段示例代码,

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

//创建promise
var promise = new Promise(function(resolve, reject) {
// 进行一些异步或耗时操作
   if ( /*如果成功 */ ) {
       resolve("Stuff worked!");
   } else {
       reject(Error("It broke"));
   }
});

//绑定处理程序
promise.then(function(result) {
//promise成功的话会执行这里
   console.log(result); // "Stuff worked!"
}, function(err) {
//promise失败会执行这里
   console.log(err); // Error: "It broke"
});

本人此文讲解为抛砖引玉,关于更详细和更系统的内容,大家可通过动力节点最新推出的《ECMAScript 6.0 新特性详解》课程来学习,限时免费



- 限时免费 视频课程 -

干货 | ECMAScript 6.0 新特性详解(附视频)


扫描二维码领取视频课程


以上是关于干货 | ECMAScript 6.0 新特性详解(附视频)的主要内容,如果未能解决你的问题,请参考以下文章

进阶学习9:ECMAScript——概述ES2015 / ES6新特性详解

ECMAScript6新特性数组扩展(扩展运算符新增方法一新增方法二新增方法三)-全面详解(学习总结---从入门到深化)

Java新特性之Nashorn的实例详解

#yyds干货盘点#ES6转换成ES5

Firefox 31发布,包含了ECMAScript 6的新特性

ECMAScript 2019(ES10)新特性简介