阅读:7870回复:1
ES6速成教程
最好的学习ES6的方法,是为每一个ES6示例提供一个等价的ES5实现。外面已经有不少介绍ES6的文章,本文将只讲其中一些。
Modules(Import) // ES6 import React from 'react'; import {Route, DefaultRoute, NotFoundRoute} from 'react-router'; // ES5 var React = require('react'); var Router = require('react-router'); var Route = Router.Route; var DefaultRoute = Router.DefaultRoute; var NotFoundRoute = Router.NotFoundRoute; JS var与let 这两个关键字唯一的区别是,var的作用域在最近的函数块中,而let的作用域在最近的块语句中——它可以是一个函数、一个for循环,或者一个if语句块。 这里有个很好的示例,来自MDN: var a = 5; var b = 10; if (a === 5) { let a = 4; // The scope is inside the if-block var b = 1; // The scope is inside the function console.log(a); // 4 console.log(b); // 1 } console.log(a); // 5 console.log(b); // 1 一般来说,let是块作用域,var是函数作用域。 箭头函数(=> fat arrow) 一个箭头函数表达式与函数表达式相比有更简短的语法,以及从语法上绑定了this值。 / ES6 [1, 2, 3].map(n => n * 2); // [2, 4, 6] // ES5 [1, 2, 3].map(function(n) { return n * 2; }); // [2, 4, 6] 注意:如果参数只有一个,圆括号是可选的,到底是否强制使用取决于你,不过有些人认为去掉括号是坏的实践,有些人则无所谓。 |
|
沙发#
发布于:2018-08-17 21:23
除了更短的语法,箭头函数还有什么用途呢?
考虑下面这个示例,它来自于我将这个项目转换为使用ES6之前的代码: $.ajax({ type: 'POST', url: '/api/characters', data: { name: name, gender: gender } }) .done(function(data) { this.setState({ helpBlock: data.message }); }.bind(this)) .fail(function(jqXhr) { this.setState({ helpBlock: jqXhr.responseJSON.message }); }.bind(this)) .always(function() { this.setState({ name: '', gender: '' }); }.bind(this)); 上面的每个函数都创建了自己的this作用域,不绑定外层this的话我们是无法在示例中调用this.setState的,因为函数作用域的this一般是undefined。 当然,它有绕过的方法,比如将this赋值给一个变量,比如var self = this,然后在闭包里用self.setState代替this.setState即可。 而使用等价的ES6代码的话,我们没有必要如此麻烦: $.ajax({ type: 'POST', url: '/api/characters', data: { name: name, gender: gender } }) .done((data) => { this.setState({ helpBlock: data.message }); }) .fail((jqXhr) => { this.setState({ helpBlock: jqXhr.responseJSON.message }); }) .always(() => { this.setState({ name: '', gender: '' }); }); ES6的讲解就到此为止了。 |
|