ECMAScript6 入门
介绍
ECMAScript6（也称为 ECMAScript2015）是最新的 ECMAScript，具有最终规范。ES6 是对 ES5 的重大更新，并为 JavaScript 引入了许多新功能。
在本文中，我们将介绍如何设置开发 ES6 应用程序并开始使用一些最重要的新功能。
值得注意的是，ECMAScript7 目前正在开发中，应该会在今年（2016 年）某个时候完成。ES7 和其他未来版本计划是较小的更新，将按年度计划发布。
浏览器支持
开发 ES6 应用所需的设置取决于您想要在不同运行时提供的支持级别。最新版本的 Chrome、Firefox、Edge 和 Node.js 已经支持大部分 ES6，因此如果您只针对这些较新的运行时，那么您可以立即开始使用 ES6。有关哪些运行时支持哪些功能的更多详细信息，您可以查阅 ES6兼容性表。
您可以在浏览器的 JavaScript 控制台中运行以下代码。如果您的浏览器支持 ES6，则结果应为3。如果不支持，则会提示语法错误。
let [one, two] = [1, 2];
one + two;
不幸的是，整个浏览器市场可能还没有跟上时代，这意味着许多人仍然没有使用支持 ES6 的浏览器。如果您正在构建计划向公众发布的 Web 应用程序，您仍然应该支持这些人。
幸运的是，有一个名为Babel的项目，它允许您将 ES6 代码转换为 ES5 代码。这意味着您仍然可以在开发任何使用 ES5 兼容浏览器的人都可以使用的 Web 应用程序时使用 ES6 代码。第一次设置所有设置需要花费一些精力，因此我在下面提供了分步指南，以帮助您更快地入门。
设置 Babel 和 webpack
如果您尚未安装 Node.js，则需要安装它。
为您的项目创建一个文件夹，然后创建一个名为package.json的文件，其内容如下：
{
"name": "es6-demo",
"scripts": {
"build": "webpack --watch"
},
"devDependencies": {
"babel-cli": "^6.8.0",
"babel-core": "^6.8.0",
"babel-loader": "^6.2.4",
"babel-plugin-transform-runtime": "^6.8.0",
"babel-preset-es2015": "^6.6.0",
"babel-runtime": "^6.6.1",
"webpack": "^1.13.0"
}
}
然后创建一个名为webpack.config.js的文件，内容如下：
var path = require("path");
module.exports = {
entry: "./src/main.js",
output: {
path: __dirname,
filename: "bundle.js"
},
module: {
loaders: [
{
loader: "babel-loader",
// Compile files in /src directory
include: [path.resolve(__dirname, "src")],
// Babel options
query: {
plugins: ["transform-runtime"],
presets: ["es2015"]
}
}
]
}
};
然后创建一个名为src的子文件夹。此文件夹将包含您的所有 ES6 代码。让我们将一个名为main.js的简单脚本放在那里以进行测试。
let [one, two, three] = [1, 2, 3];
console.log(`One: ${one}, Two: ${two}, Three: ${three}`);
打开终端（Windows 用户的 Node.js 控制台），导航到项目文件夹，然后运行以下命令：
npm install
npm run build
这将在你的项目文件夹中创建一个包含已编译 ES5 代码的bundle.js文件。如果你打开此文件，你会看到 ES5 等效代码（位于一堆其他生成的样板代码中间）：
var one = 1;
var two = 2;
var three = 3;
console.log("One: " + one + ", Two: " + two + ", Three: " + three);
npm run build脚本已设置为监听src文件夹中的修改。现在，当您修改main.js文件时，bundle.js文件将自动更新。您可以在控制台中使用Ctrl + C停止监听。
完成此操作后，无需再次运行npm install。当需要转换代码时，可以使用npm run build。
代码编辑器
为了获得更好的开发体验，您可能还需要使用具有一些 ES6 工具的代码编辑器。我喜欢使用Visual Studio Code，但也有许多编辑器可以设置为支持 ES6，例如vim、Atom、Sublime Text和WebStorm。
模块
在我看来，模块是 ES6 中最重要的新功能。它允许你以模块化的方式将代码分离到单独的文件中，而不必担心全局命名空间混乱。
例如，让我们创建一个文件math.js，其中包含一个玩具数学库，该库导出 pi 的值和几个与 pi 相关的函数：
export const PI = 3.141592653589793;
export function circumference(r) {
return 2 * PI * r;
}
export function area(r) {
return PI * r * r;
}
使用模块，我们可以从另一个文件导入该库的各个组件：
import { PI, area } from "./math";
console.log(area(PI));
或者我们可以将所有内容导入到一个对象中：
import * as math from "./math";
console.log(math.area(math.PI));
您还可以将单个值导出为默认值，这样您无需使用括号或通配符即可导入它：
// reverseString.js
export default function(str) {
return str
.split("")
.reverse()
.join("");
}
// main.js
import reverseString from "./reverseString";
console.log(reverseString("Hello, world!"));
const 和 let
const用于常量声明，let用于变量声明。
如果您尝试重新分配给常量，编译器将抛出错误：
const one = 1;
one = 2; // SyntaxError: "one" is read-only
let与var类似，但它修复了var的许多怪癖，这些怪癖通常会让 JavaScript 新手感到困惑。事实上，var现在已经过时了，因为 let和const已经取代了它的功能。
let 是块级作用域
var和let的作用域机制不同。用var声明的变量是函数作用域，这意味着它在周围函数的任何地方都可见。而用let声明的变量是块作用域，这意味着它只在其自己的代码块中可见。在代码块之外调用该变量将导致错误。
// var
console.log(less); // undefined
if (1 < 2) {
var less = true;
console.log(less); // true
}
console.log(less); // true
// let
console.log(less); // Uncaught ReferenceError: less is not defined
if (1 < 2) {
let less = true;
console.log(less); // true
}
console.log(less); // Uncaught ReferenceError: less is not defined
<font st
免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！
请先 登录后发表评论 ~